Login and register

app/fonts/taiga.svg

@@ -39,4 +39,5 @@
 <glyph unicode="&#68;" d="M371 280l-120-121c-4-3-8-5-13-5-5 0-10 2-13 5l-84 84c-4 4-6 8-6 13 0 5 2 9 6 13l29 29c4 4 8 5 13 5 5 0 9-1 13-5l42-42 78 79c4 3 8 5 13 5 5 0 9-2 13-5l29-30c4-3 6-7 6-12 0-5-2-10-6-13z m40-24c0 28-7 54-20 78-14 24-33 43-57 57-24 13-50 20-78 20-28 0-54-7-78-20-24-14-43-33-57-57-13-24-20-50-20-78 0-28 7-54 20-78 14-24 33-43 57-57 24-13 50-20 78-20 28 0 54 7 78 20 24 14 43 33 57 57 13 24 20 50 20 78z m64 0c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
 <glyph unicode="&#69;" d="M350 204l-42-42c-2-2-4-3-6-3-3 0-5 1-7 3l-39 39-39-39c-2-2-4-3-7-3-2 0-4 1-6 3l-42 42c-2 2-3 4-3 6 0 3 1 5 3 7l39 39-39 39c-2 2-3 4-3 7 0 2 1 4 3 6l42 42c2 2 4 3 6 3 3 0 5-1 7-3l39-39 39 39c2 2 4 3 7 3 2 0 4-1 6-3l42-42c2-2 3-4 3-6 0-3-1-5-3-7l-39-39 39-39c2-2 3-4 3-7 0-2-1-4-3-6z m61 52c0 28-7 54-20 78-14 24-33 43-57 57-24 13-50 20-78 20-28 0-54-7-78-20-24-14-43-33-57-57-13-24-20-50-20-78 0-28 7-54 20-78 14-24 33-43 57-57 24-13 50-20 78-20 28 0 54 7 78 20 24 14 43 33 57 57 13 24 20 50 20 78z m64 0c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
 <glyph unicode="&#70;" d="M146 73l220 0 0 110-220 0z m256 0l37 0 0 256c0 3-1 6-3 11-2 5-4 8-6 10l-80 80c-2 2-5 4-10 6-4 2-8 3-11 3l0-119c0-8-3-14-8-19-5-6-12-8-19-8l-165 0c-7 0-14 2-19 8-6 5-8 11-8 19l0 119-37 0 0-366 37 0 0 119c0 8 2 14 8 19 5 6 12 8 19 8l238 0c7 0 14-2 19-8 6-5 8-11 8-19z m-109 265l0 92c0 2-1 4-3 6-2 2-4 3-7 3l-54 0c-3 0-5-1-7-3-2-2-3-4-3-6l0-92c0-2 1-4 3-6 2-2 4-3 7-3l54 0c3 0 5 1 7 3 2 2 3 4 3 6z m182-9l0-265c0-8-2-14-8-19-5-6-11-8-19-8l-384 0c-8 0-14 2-19 8-6 5-8 11-8 19l0 384c0 8 2 14 8 19 5 6 11 8 19 8l265 0c8 0 16-1 25-5 9-4 17-9 22-14l80-80c5-5 10-13 14-22 4-9 5-17 5-25z"/>
+<glyph unicode="&#71;" d="M201 165c0-8-1-16-3-24-3-8-7-15-13-22-6-6-12-9-20-9-8 0-15 3-21 9-6 7-10 14-12 22-3 8-4 16-4 24 0 7 1 15 4 23 2 8 6 15 12 22 6 6 13 9 21 9 8 0 14-3 20-9 6-7 10-14 13-22 2-8 3-16 3-23z m183 0c0-8-1-16-4-24-2-8-6-15-12-22-6-6-13-9-21-9-8 0-14 3-20 9-6 7-10 14-13 22-2 8-3 16-3 24 0 7 1 15 3 23 3 8 7 15 13 22 6 6 12 9 20 9 8 0 15-3 21-9 6-7 10-14 12-22 3-8 4-16 4-23z m46 0c0 22-7 42-20 58-13 16-31 24-53 24-8 0-27-2-56-6-14-2-29-3-45-3-16 0-31 1-45 3-29 4-47 6-56 6-22 0-40-8-53-24-13-16-20-36-20-58 0-17 3-32 9-44 7-13 14-23 24-30 9-7 21-13 34-17 14-4 28-7 40-8 13-2 27-2 43-2l48 0c16 0 30 0 43 2 12 1 26 4 40 8 13 4 25 10 34 17 10 7 17 17 24 30 6 12 9 27 9 44z m64 50c0-40-6-71-18-95-7-14-17-27-30-38-13-10-26-19-40-24-14-6-30-11-49-14-18-3-34-5-49-6-14-1-30-1-47-1-15 0-29 0-41 0-12 1-26 2-42 4-16 2-31 5-44 9-13 3-26 8-39 14-13 6-24 14-34 23-11 10-19 21-25 33-12 24-18 55-18 95 0 45 13 83 39 113-5 16-8 32-8 49 0 22 5 42 15 62 21 0 39-4 54-11 16-8 34-20 54-36 28 7 58 10 89 10 28 0 54-3 80-9 20 16 37 27 53 35 16 7 34 11 54 11 10-20 15-40 15-62 0-17-3-33-8-48 26-31 39-69 39-114z"/>
 </font></defs></svg>

app/partials/login.jade

@@ -10,14 +10,11 @@ block content
             div.login-container
                 h1.logo
                     img(src="/images/logo.png", alt="TAIGA")
-                p.tagline Project management web application with scrum in the mind!
+                p.tagline Project management web application with scrum in mind!
                 p.login-error
                     span.title Ooops! Something went wrong!
                     span.text According to our Oompa Loompas, your username or password are incorrect.
                     a.icon.icon-delete(href="", title="Close message")
-                form(ng-submit="ctrl.submit()")
+
-                    input(type="text", name="username", ng-model="form.username", placeholder="User name")
+                include views/modules/login-form
-                    input(type="password", name="password", ng-model="form.password")
+                include views/modules/register-form
-                    a.button.button-login.button-gray(href="", title="Log in") Log in
-                    a.button.button-signup.button-orange(href="", title="Log in") Sign up
-                    input(type="submit", value="I am an horrible button to be deleted. Click me to login for the moment")

app/partials/views/modules/login-form.jade

@@ -0,0 +1,14 @@
+div.login-form-container
+    form.login-form(ng-submit="ctrl.submit()")
+        fieldset
+            input(type="text", name="username", ng-model="form.username", placeholder="User name")
+        fieldset
+            input(type="password", name="password", ng-model="form.password")
+        fieldset
+            input.remember-me(type="checkbox", checked="checked")
+            label remember me on this computer
+        fieldset
+            a.button.button-login.button-green(href="", title="Log in") Enter
+    p.login-text
+        span Not registered yet?
+        a(href="", title="Register")  create your free account here

app/partials/views/modules/register-form.jade

@@ -0,0 +1,15 @@
+div.register-form-container
+    form.register-form
+        fieldset
+            input(type="text" placeholder="Pick a username")
+        fieldset
+            input(type="email" placeholder="Your email")
+        fieldset
+            input(type="password"  placeholder="Set a password")
+        fieldset
+            a.button.button-register.button-green(href="", title="Sign up") Sign up
+    p.register-text
+        span By clicking "Sign up", you agree to our <br />
+        a(href="", title="See terms of service")  terms of service
+        span  and
+        a(href="", title="See privacy policy")  privacy policy.

app/styles/dependencies/typography.scss

@@ -210,3 +210,6 @@ a:visited {
 .icon-floppy:before {
     content: 'F';
 }
+.icon-github:before {
+    content: 'G';
+}

app/styles/layout/login.scss

@@ -22,28 +22,47 @@
         font-family: 'ostrichSans';
         line-height: 2rem;
     }
+    form {
+        margin-bottom: 2rem;
+    }
     input {
         background: $white;
         margin-bottom: 1rem;
+        @include placeholder {
+            color: $gray-light;
+        }
+    }
+    .remember-me {
+        vertical-align: top;
+    }
+    .login-text,
+    .register-text {
+        text-align: center;
+        a:hover {
+            color: $fresh-taiga;
+        }
+    }
+    .register-text {
+        @extend %small;
     }
     .button-login,
-    .button-signup {
+    .button-register {
         color: $white;
         display: block;
         margin-bottom: .5rem;
         text-align: center;
     }
-    .button-login {
-        &:hover {
-            background: $green-taiga;
-        }
 }
+
+.register-form-container {
+    display: none;
 }
 
 .login-error {
     background: $red;
     border-radius: 4px;
     color: $white;
+    display: none;
     padding: 1rem;
     position: absolute;
     right: 1rem;