Reset password form

app/partials/login.jade

@@ -18,3 +18,4 @@ block content
 
                 include views/modules/login-form
                 include views/modules/register-form
+                include views/modules/forgot-form

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

@@ -0,0 +1,9 @@
+div.forgot-form-container
+    p.forgot-text
+        strong Don't worry, it happens even in the best families :-) <br />
+        span Give us your mail and we'll sent you instructions to get a new one
+    form
+        fieldset
+            input(type="text", placeholder="Your email")
+        fieldset
+            a.button.button-forgot.button-green(href="", title="Reset Password") Reset Password

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

@@ -2,7 +2,7 @@ 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
+        fieldset.login-password
             input(type="password", name="password", ng-model="form.password")
             //-This should be hidden when focus on pass
             a.forgot-pass(href="", title="Did you forgot your pass?") Forgot it?

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

@@ -3,7 +3,7 @@ div.register-form-container
         fieldset
             input(type="text" placeholder="Pick a username")
         fieldset
-            input(type="email" placeholder="Your email")
+            input(type="text" placeholder="Your email")
         fieldset
             input(type="password"  placeholder="Set a password")
         fieldset

app/styles/layout/login.scss

@@ -45,8 +45,7 @@
     .register-text {
         @extend %small;
     }
-    .button-login,
-    .button-register {
+    .button {
         color: $white;
         display: block;
         margin-bottom: .5rem;
@@ -54,35 +53,6 @@
     }
 }
 
-.login-form-container {
-    .login-password {
-        position: relative;
-    }
-    input:focus {
-        &+.forgot-pass {
-            opacity: 0;
-            @include transition(opacity .5s linear);
-        }
-    }
-    .forgot-pass {
-        @include transition(all .3s linear);
-        @extend %small;
-        color: $gray-light;
-        opacity: 1;
-        position: absolute;
-        right: 1rem;
-        top: .5rem;
-        &:hover {
-            @include transition(color .3s linear);
-            color: $grayer;
-        }
-    }
-}
-
-.register-form-container {
-    display: none;
-}
-
 .login-error {
     background: $red;
     border-radius: 4px;

app/styles/main.scss

@@ -52,6 +52,9 @@ $prefix-for-spec:      true;
 @import 'modules/comments';
 @import 'modules/comment-activity';
 @import 'modules/activity';
+@import 'modules/login-form';
+@import 'modules/register-form';
+//@import 'modules/forgot-form';
 
 // Responsive
 @import 'responsive/mobile';

app/styles/modules/login-form.scss

@@ -0,0 +1,25 @@
+.login-form-container {
+    display: none;
+    .login-password {
+        position: relative;
+    }
+    input:focus {
+        &+.forgot-pass {
+            opacity: 0;
+            @include transition(opacity .5s linear);
+        }
+    }
+    .forgot-pass {
+        @include transition(all .3s linear);
+        @extend %small;
+        color: $gray-light;
+        opacity: 1;
+        position: absolute;
+        right: 1rem;
+        top: .5rem;
+        &:hover {
+            @include transition(color .3s linear);
+            color: $grayer;
+        }
+    }
+}

app/styles/modules/register-form.scss

@@ -0,0 +1,3 @@
+.register-form-container {
+    display: none;
+}