create project front

app/coffee/modules/project.coffee

@@ -48,6 +48,38 @@ class ProjectController extends taiga.Controller
 
 module.controller("ProjectController", ProjectController)
 
+CreateProjectDirective = ($repo, $confirm, $location) ->
+    link = ($scope, $el, $attrs) ->
+        $scope.data = {}
+        form = $el.find("form").checksley()
+
+        onSuccessSubmit = (response) ->
+            $confirm.notify("success", "Our Oompa Loompas are happy, wellcome to Taiga.") #TODO: i18n
+            $location.path("/")
+
+        onErrorSubmit = (response) ->
+            $confirm.notify("light-error", "According to our Oompa Loompas, project name is
+                                            already in use.") #TODO: i18n
+
+        submit = ->
+            if not form.validate()
+                return
+
+            promise = $repo.create("projects", $scope.data)
+            promise.then(onSuccessSubmit, onErrorSubmit)
+
+        $el.on "submit", (event) ->
+            event.preventDefault()
+            submit()
+
+        $el.on "click", "a.button-create", (event) ->
+            event.preventDefault()
+            submit()
+
+    return {link:link}
+
+module.directive("tgCreateProject", ["$tgRepo", "$tgConfirm", "$location", CreateProjectDirective])
+
 ProjectsPaginationDirective = ($timeout) ->
     nextPage = (element, pageSize, callback) ->
         top = parseInt(element.css('top'), 10)

app/partials/create-project.jade

@@ -0,0 +1,23 @@
+extends dummy-layout
+
+block head
+    title Taiga  Project management web application with scrum in mind!
+
+block content
+    div.wrapper
+        div.create-project
+            div.create-project-container(tg-create-project)
+                h1 Create Project
+                form
+                    fieldset
+                        input(type="text", name="name", ng-model="data.name", data-required="true",
+                              placeholder="Name")
+                    fieldset
+                        input(type="text", name="description", ng-model="data.description", data-required="true",
+                              placeholder="Description")
+                    fieldset
+                        input(type="text", name="total_story_point", ng-model="data.total_story_point", data-required="true",
+                              placeholder="Total story point")
+                    fieldset
+                        a.button.button-create.button-gray(href="", title="Create") Create
+                        input(type="submit", class="hidden")

app/styles/main.scss

@@ -59,6 +59,7 @@ $prefix-for-spec:      true;
 //Project modules
 @import 'modules/home-projects-list';
 @import 'modules/home-project';
+@import 'modules/create-project';
 
 //Issues modules
 @import 'modules/issues/issues-table';

app/styles/modules/create-project.scss

@@ -0,0 +1,85 @@
+.create-project {
+    @include table-flex(center, center, flex, row, wrap, center);
+    background: url('/images/bg.png') no-repeat center center;
+    background-size: cover;
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 999;
+    fieldset {
+        margin-bottom: 1rem;
+    }
+    .create-project-container {
+        @include table-flex-child(0, 400px, 0, 400px);
+    }
+    h1 {
+        text-align: center;
+        color: $white;
+    }
+    .logo,
+    .tagline {
+        margin-bottom: 1rem;
+        text-align: center;
+    }
+    .tagline {
+        @extend %xlarge;
+        @extend %title;
+        color: $white;
+        line-height: 2rem;
+        text-transform: uppercase;
+    }
+    form {
+        margin-bottom: 2rem;
+    }
+    input {
+        background: $white;
+        @include placeholder {
+            color: $gray-light;
+        }
+    }
+    .button {
+        color: $white;
+        display: block;
+        margin-bottom: .5rem;
+        text-align: center;
+        &:hover {
+            background: $fresh-taiga;
+        }
+    }
+    a {
+        &:hover {
+            color: $white;
+        }
+    }
+}
+
+.login-error {
+    background: $red;
+    border-radius: 4px;
+    color: $white;
+    display: none;
+    padding: 1rem;
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    width: 20%;
+    span {
+        display: block;
+    }
+    .title {
+        @extend %large;
+        @extend %bold;
+    }
+    .icon-delete {
+        color: $red-light;
+        position: absolute;
+        right: .5rem;
+        top: .5rem;
+        &:hover {
+            @include transition(color .3s linear);
+            color: $white;
+        }
+    }
+}