Allow capslock warning and Forgot password button to live togheter

app/coffee/modules/common.coffee

@@ -300,32 +300,22 @@ Capslock = ($translate) ->
 
                 $(this).remove()
 
-        showIcon = () ->
+        showIcon = (e) ->
             return if open
-
+            element = e.currentTarget
-            top = $el.position().top
+            $(element).parent().append(warningIcon)
-            left = $el.position().left + $el.outerWidth(true)
+            $('.icon-capslock').fadeIn()
-
-            warningIcon.css({
-                display: 'none',
-                position: 'absolute',
-                top: top,
-                left: left - 25
-                lineHeight: $el.outerHeight() + 'px',
-                marginLeft: 0
-            })
-
-            warningIcon
-                .insertAfter($el)
-                .fadeIn()
 
             open = true
 
-        $el.on 'keyup.capslock', (e) ->
+        $el.on 'blur', (e) ->
+            hideIcon()
+
+        $el.on 'keyup.capslock, focus', (e) ->
             if $el.val() == $el.val().toLowerCase()
-                hideIcon()
+                hideIcon(e)
             else
-                showIcon()
+                showIcon(e)
 
         $scope.$on "$destroy", ->
             $el.off('.capslock')

app/partials/includes/modules/change-email-form.jade

@@ -6,8 +6,17 @@ div.change-email-form(tg-change-email)
 
     form
         fieldset
-            input(type="hidden", name="email_token", ng-model="data.email_token", data-required="true",
+            input(
-                  placeholder="{{'CHANGE_EMAIL_FORM.PLACEHOLDER_INPUT_TOKEN' | translate}}")
+                type="hidden"
+                name="email_token"
+                ng-model="data.email_token"
+                data-required="true"
+                placeholder="{{'CHANGE_EMAIL_FORM.PLACEHOLDER_INPUT_TOKEN' | translate}}"
+            )
 
-            a.button-change-email.button-gray(href="", title="{{'CHANGE_EMAIL_FORM.ACTION_CHANGE_EMAIL' | translate}}", translate="CHANGE_EMAIL_FORM.ACTION_CHANGE_EMAIL")
+            a.button-change-email.button-gray(
+                href=""
+                title="{{'CHANGE_EMAIL_FORM.ACTION_CHANGE_EMAIL' | translate}}"
+                translate="CHANGE_EMAIL_FORM.ACTION_CHANGE_EMAIL"
+            )
             button(type="submit", class="hidden")

app/partials/includes/modules/change-password-from-recovery-form.jade

@@ -6,10 +6,29 @@ div.change-password-form-container(tg-change-password-from-recovery)
 
     form
         fieldset
-            input(type="password", tg-capslock, name="password", id="password", ng-model="data.password",
+            input(
-                  data-required="true", placeholder="{{'CHANGE_PASSWORD_RECOVERY_FORM.PLACEHOLDER_NEW_PASSWORD' | translate}}")
+                type="password"
+                name="password"
+                id="password"
+                tg-capslock
+                ng-model="data.password"
+                data-required="true"
+                placeholder="{{'CHANGE_PASSWORD_RECOVERY_FORM.PLACEHOLDER_NEW_PASSWORD' | translate}}"
+            )
         fieldset
-            input(type="password", tg-capslock, name="password2", id="password2", ng-model="data.password2",
+            input(
-                  data-required="true", data-equalto="#password", placeholder="{{'CHANGE_PASSWORD_RECOVERY_FORM.PLACEHOLDER_RE_TYPE_NEW_PASSWORD' | translate}}")
+                type="password"
+                name="password2"
+                id="password2"
+                tg-capslock
+                ng-model="data.password2"
+                data-required="true"
+                data-equalto="#password"
+                placeholder="{{'CHANGE_PASSWORD_RECOVERY_FORM.PLACEHOLDER_RE_TYPE_NEW_PASSWORD' | translate}}"
+            )
         fieldset
-            button.button-change-password.button-gray.submit-button(type="submit", title="{{'CHANGE_PASSWORD_RECOVERY_FORM.ACTION_RESET_PASSWORD' | translate}}", translate="CHANGE_PASSWORD_RECOVERY_FORM.ACTION_RESET_PASSWORD")
+            button.button-change-password.button-gray.submit-button(
+                type="submit"
+                title="{{'CHANGE_PASSWORD_RECOVERY_FORM.ACTION_RESET_PASSWORD' | translate}}"
+                translate="CHANGE_PASSWORD_RECOVERY_FORM.ACTION_RESET_PASSWORD"
+            )

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

@@ -6,9 +6,18 @@ div.forgot-form-container(tg-forgot-password)
 
     form(ng-submit="ctrl.submit()")
         fieldset
-            input(type="text", tg-capslock, name="username", ng-model="data.username", data-required="true",
+            input(
-                  placeholder="{{'FORGOT_PASSWORD_FORM.PLACEHOLDER_FIELD' | translate}}")
+                type="text"
+                name="username"
+                ng-model="data.username"
+                data-required="true"
+                placeholder="{{'FORGOT_PASSWORD_FORM.PLACEHOLDER_FIELD' | translate}}"
+            )
         fieldset
-            button.button-gray.submit-button.button-forgot(type="submit", title="{{'FORGOT_PASSWORD_FORM.ACTION_RESET_PASSWORD' | translate}}", translate="FORGOT_PASSWORD_FORM.ACTION_RESET_PASSWORD")
+            button.button-gray.submit-button.button-forgot(
+                type="submit"
+                title="{{'FORGOT_PASSWORD_FORM.ACTION_RESET_PASSWORD' | translate}}"
+                translate="FORGOT_PASSWORD_FORM.ACTION_RESET_PASSWORD"
+            )
 
         a(href="", tg-nav="login", translate="FORGOT_PASSWORD_FORM.LINK_CANCEL")

app/partials/includes/modules/invitation-login-form.jade

@@ -2,19 +2,36 @@ form.login-form
     p.form-header(translate="LOGIN_COMMON.HEADER")
 
     fieldset
-        input(type="text", tg-capslock, name="username", ng-model="dataLogin.username", data-required="true",
+        input(
-            placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_NAME' | translate}}")
+            type="text"
+            name="username"
+            ng-model="dataLogin.username"
+            data-required="true"
+            placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_NAME' | translate}}"
+        )
 
     fieldset.login-password
-        input(type="password", tg-capslock, name="password", ng-model="dataLogin.password", data-required="true",
+        input(
-              placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_PASSWORD' | translate}}")
+            type="password"
-        a.forgot-pass(href="", tg-nav="forgot-password", tg-capslock,
+            name="password"
-                      title="{{'LOGIN_COMMON.TITLE_LINK_FORGOT_PASSWORD' | translate}}",
+            tg-capslock
-                      translate="LOGIN_COMMON.LINK_FORGOT_PASSWORD")
+            ng-model="dataLogin.password"
+            data-required="true"
+            placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_PASSWORD' | translate}}"
+        )
+        // This should be hidden when focus on pass
+        a.forgot-pass(
+            href=""
+            tg-nav="forgot-password"
+            title="{{'LOGIN_COMMON.TITLE_LINK_FORGOT_PASSWORD' | translate}}"
+            translate="LOGIN_COMMON.LINK_FORGOT_PASSWORD"
+        )
 
     fieldset
-        a.button-login.button-blackish.submit-button(type="submit",
+        a.button-login.button-blackish.submit-button(
-                                                      title="{{'LOGIN_COMMON.ACTION_ENTER' | translate}}",
+            type="submit"
-                                                      translate="LOGIN_COMMON.ACTION_ENTER")
+            title="{{'LOGIN_COMMON.ACTION_ENTER' | translate}}"
+            translate="LOGIN_COMMON.ACTION_ENTER"
+        )
 
     fieldset(ng-repeat="plugin in contribPlugins|filter:{type: 'auth'}", ng-include="plugin.template")

app/partials/includes/modules/invitation-register-form.jade

@@ -29,7 +29,7 @@ form.register-form
             data-required="true"
             data-maxlength="255"
             placeholder="{{'REGISTER_FORM.PLACEHOLDER_EMAIL' | translate}}"
-       )
+        )
 
     fieldset
         input(

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

@@ -1,18 +1,40 @@
 div.login-form-container(tg-login)
     form.login-form
         fieldset
-            input(type="text", tg-capslock, name="username", data-required="true",
+            input(
-                  placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_NAME' | translate}}")
+                type="text"
+                name="username"
+                data-required="true"
+                placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_NAME' | translate}}"
+            )
 
         fieldset.login-password
-            input(type="password", tg-capslock, name="password", data-required="true",
+            input(
-                  placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_PASSWORD' | translate}}")
+                type="password"
+                name="password"
+                tg-capslock
+                data-required="true"
+                placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_PASSWORD' | translate}}"
+            )
+
             // This should be hidden when focus on pass
-            a.forgot-pass(href="", tg-nav="forgot-password", title="{{'LOGIN_COMMON.TITLE_LINK_FORGOT_PASSWORD' | translate}}", translate="LOGIN_COMMON.LINK_FORGOT_PASSWORD")
+            a.forgot-pass(
+                href=""
+                tg-nav="forgot-password"
+                title="{{'LOGIN_COMMON.TITLE_LINK_FORGOT_PASSWORD' | translate}}"
+                translate="LOGIN_COMMON.LINK_FORGOT_PASSWORD"
+            )
 
         fieldset
-            button.button-green.submit-button(type="submit", title="{{'LOGIN_COMMON.ACTION_SIGN_IN' | translate}}", translate="LOGIN_COMMON.ACTION_SIGN_IN")
+            button.button-green.submit-button(
+                type="submit"
+                title="{{'LOGIN_COMMON.ACTION_SIGN_IN' | translate}}"
+                translate="LOGIN_COMMON.ACTION_SIGN_IN"
+            )
 
-        fieldset(ng-repeat="plugin in contribPlugins|filter:{type: 'auth'}", ng-include="plugin.template")
+        fieldset(
+            ng-repeat="plugin in contribPlugins|filter:{type: 'auth'}"
+            ng-include="plugin.template"
+        )
 
     tg-public-register-message

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

@@ -50,12 +50,10 @@ div.register-form-container(tg-register)
                 translate="REGISTER_FORM.ACTION_SIGN_UP"
             )
 
-        fieldset(tg-github-login-button)
-
         //- Only displays terms notice when terms plugin is loaded.
         tg-terms-of-service-and-privacy-policy-notice
 
-        a.register-text-top(i
+        a.register-text-top(
             href=""
             title="{{'REGISTER_FORM.TITLE_LINK_LOGIN' | translate}}"
             tg-nav="login"

app/partials/user/user-change-password.jade

@@ -1,7 +1,10 @@
 doctype html
 
-div.wrapper(tg-user-change-password, ng-controller="UserChangePasswordController as ctrl",
+div.wrapper(
-            ng-init="section='user-settings'")
+    tg-user-change-password
+    ng-controller="UserChangePasswordController as ctrl"
+    ng-init="section='user-settings'"
+)
     tg-project-menu
 
     sidebar.menu-secondary.sidebar.settings-nav(tg-user-settings-navigation="change-password")
@@ -15,12 +18,40 @@ div.wrapper(tg-user-change-password, ng-controller="UserChangePasswordController
         form
             fieldset
                 label(for="current-password", translate="CHANGE_PASSWORD.FIELD_CURRENT_PASSWORD")
-                input(type="password", placeholder="{{'CHANGE_PASSWORD.PLACEHOLDER_CURRENT_PASSWORD' | translate}}", id="current-password", ng-model="currentPassword", tg-capslock)
+                input(
+                    type="password"
+                    name="password"
+                    id="current-password"
+                    tg-capslock
+                    ng-model="currentPassword"
+                    placeholder="{{'CHANGE_PASSWORD.PLACEHOLDER_CURRENT_PASSWORD' | translate}}"
+                )
+
             fieldset
                 label(for="new-password", translate="CHANGE_PASSWORD.FIELD_NEW_PASSWORD")
-                input(type="password", placeholder="{{'CHANGE_PASSWORD.PLACEHOLDER_NEW_PASSWORD' | translate}}", id="new-password", ng-model="newPassword1", tg-capslock)
+                input(
+                    type="password"
+                    name="new-password"
+                    id="new-password"
+                    tg-capslock
+                    ng-model="newPassword1"
+                    placeholder="{{'CHANGE_PASSWORD.PLACEHOLDER_NEW_PASSWORD' | translate}}"
+               )
+
             fieldset
                 label(for="retype-password", translate="CHANGE_PASSWORD.FIELD_RETYPE_PASSWORD")
-                input(type="password", placeholder="{{'CHANGE_PASSWORD.PLACEHOLDER_RETYPE_PASSWORD' | translate}}", id="retype-password", ng-model="newPassword2", tg-capslock)
+                input(
+                    type="password"
+                    name="retype-password"
+                    id="retype-password"
+                    tg-capslock
+                    ng-model="newPassword2"
+                    placeholder="{{'CHANGE_PASSWORD.PLACEHOLDER_RETYPE_PASSWORD' | translate}}"
+                )
+
             fieldset
-                button.button-green.submit-button(type="submit", title="{{'COMMON.SAVE' | translate}}", translate="COMMON.SAVE")
+                button.button-green.submit-button(
+                    type="submit"
+                    title="{{'COMMON.SAVE' | translate}}"
+                    translate="COMMON.SAVE"
+                )

app/partials/user/user-profile.jade

@@ -18,62 +18,107 @@ div.wrapper(tg-user-profile, ng-controller="UserSettingsController as ctrl",
                         .image-container
                             img.avatar(ng-src="{{user.big_photo}}" alt="avatar")
                             .overlay.hidden
-                                img.loading-spinner(src="/svg/spinner-circle.svg",
+                                img.loading-spinner(
-                                                    alt="{{'COMMON.LOADING' | translate}}")
+                                    src="/svg/spinner-circle.svg",
-                        input(type="file", id="avatar-field", class="hidden",
+                                    alt="{{'COMMON.LOADING' | translate}}"
-                            tg-avatar-model="avatarAttachment")
+                                )
+
+                        input.hidden(
+                            type="file"
+                            id="avatar-field"
+                            tg-avatar-model="avatarAttachment"
+                        )
+
                         p(translate="USER_PROFILE.IMAGE_HELP")
                             span.size-info.hidden(tg-bo-html="maxFileSizeMsg")
-                        a.button-green.change.js-change-avatar(translate="USER_PROFILE.ACTION_CHANGE_IMAGE",
+
-                                      title="{{'USER_PROFILE.CHANGE_PHOTO' | translate}} {{maxFileSizeMsg}}")
+                        a.button-green.change.js-change-avatar(
+                            translate="USER_PROFILE.ACTION_CHANGE_IMAGE",
+                            title="{{'USER_PROFILE.CHANGE_PHOTO' | translate}} {{maxFileSizeMsg}}"
+                        )
                         a.use-gravatar(translate="USER_PROFILE.ACTION_USE_GRAVATAR")
 
                 div.data
                     fieldset
                         label(for="username", translate="USER_PROFILE.FIELD.USERNAME")
-                        input(type="text", name="username", id="username", tg-capslock,
+                        input(
-                              placeholder="{{'USER_PROFILE.FIELD.USERNAME' | translate}}",
+                            type="text"
-                              ng-model="user.username", data-required="true", data-maxlength="255",
+                            name="username"
-                              data-regexp="^[\\w.-]+$")
+                            id="username"
+                            ng-model="user.username"
+                            data-required="true"
+                            data-maxlength="255"
+                            data-regexp="^[\\w.-]+$"
+                            placeholder="{{'USER_PROFILE.FIELD.USERNAME' | translate}}",
+                        )
 
                     fieldset
                         label(for="email", translate="USER_PROFILE.FIELD.EMAIL")
-                        input(type="text", name="email", id="email", tg-capslock,
+                        input(
-                              placeholder="{{'USER_PROFILE.FIELD.EMAIL' | translate}}",
+                            type="text"
-                              ng-model="user.email", data-type="email", data-required="true",
+                            name="email"
-                              data-maxlength="255")
+                            id="email"
+                            ng-model="user.email"
+                            data-type="email"
+                            data-required="true"
+                            data-maxlength="255"
+                            placeholder="{{'USER_PROFILE.FIELD.EMAIL' | translate}}"
+                        )
 
                     fieldset
                         label(for="full-name", translate="USER_PROFILE.FIELD.FULL_NAME")
-                        input(type="text", name="full_name", id="full-name",
+                        input(
-                              placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_FULL_NAME' | translate}}",
+                            type="text"
-                              ng-model="user.full_name", data-required="true",
+                            name="full_name"
-                              data-maxlength="256")
+                            id="full-name"
+                            ng-model="user.full_name"
+                            data-required="true"
+                            data-maxlength="256"
+                            placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_FULL_NAME' | translate}}",
+                        )
 
                     fieldset
                         label(for="lang", translate="USER_PROFILE.FIELD.LANGUAGE")
-                        select(name="lang", id="lang", ng-model="lang",
+                        select(
-                               ng-options="locale.code as locale.name for locale in locales")
+                            name="lang"
+                            id="lang"
+                            ng-model="lang"
+                            ng-options="locale.code as locale.name for locale in locales"
+                        )
                             option(value="", translate="USER_PROFILE.FIELD.LANGUAGE_DEFAULT")
 
                      fieldset
                         label(for="theme", translate="USER_PROFILE.FIELD.THEME")
-                        select(name="theme", id="theme", ng-model="theme",
+                        select(
-                               ng-options="availableTheme for availableTheme in availableThemes")
+                            name="theme"
+                            id="theme"
+                            ng-model="theme"
+                            ng-options="availableTheme for availableTheme in availableThemes"
+                        )
                             option(value="", translate="USER_PROFILE.FIELD.THEME_DEFAULT")
 
                     fieldset
                         label(for="bio", translate="USER_PROFILE.FIELD.BIO")
-
+                        textarea(
-                        textarea(name="bio", id="bio", ng-model="user.bio",
+                            name="bio"
-                                 ng-attr-placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_BIO' | translate}}",
+                            id="bio"
-                                 ng-maxlength="210", maxlength="210")
+                            ng-model="user.bio"
+                            ng-attr-placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_BIO' | translate}}"
+                            ng-maxlength="210"
+                            maxlength="210"
+                        )
 
             fieldset.submit
-                button.button-green.submit-button(type="submit", title="{{'COMMON.SAVE' | translate}}",
+                button.button-green.submit-button(
-                                                  translate="COMMON.SAVE")
+                    type="submit"
-                a.delete-account(href="", title="{{'USER_PROFILE.ACTION_DELETE_ACCOUNT' | translate}}",
+                    title="{{'COMMON.SAVE' | translate}}",
-                                 ng-click="ctrl.openDeleteLightbox()",
+                    translate="COMMON.SAVE"
-                                 translate="USER_PROFILE.ACTION_DELETE_ACCOUNT")
+                )
+                a.delete-account(
+                    href=""
+                    title="{{'USER_PROFILE.ACTION_DELETE_ACCOUNT' | translate}}"
+                    ng-click="ctrl.openDeleteLightbox()"
+                    translate="USER_PROFILE.ACTION_DELETE_ACCOUNT"
+                )
 
 div.lightbox.lightbox-delete-account(tg-lb-delete-user)

app/styles/core/forms.scss

@@ -4,11 +4,7 @@ fieldset {
     padding: 0;
     position: relative;
     width: 100%;
-    .icon-capslock {
-        cursor: pointer;
-    }
 }
-
 input[type="text"],
 input[type="number"],
 input[type="password"],
@@ -25,16 +21,20 @@ textarea {
         transition: border .3s linear;
     }
 }
-
 textarea {
     min-height: 10rem;
     resize: vertical;
 }
-
-
 .checksley-error-list {
     margin-bottom: 0;
     li {
         padding: .2rem;
     }
 }
+.icon-capslock {
+    bottom: .6rem;
+    color: $gray;
+    display: none;
+    position: absolute;
+    right: 1rem;
+}

app/styles/modules/auth/login-form.scss

@@ -2,19 +2,21 @@
     .login-password {
         position: relative;
     }
-    input:focus {
+    input {
-        +.forgot-pass {
+        &:focus {
-            opacity: 0;
+            +.forgot-pass {
-            transition: opacity .5s linear;
+                opacity: 0;
+                transition: opacity .3s linear;
+            }
         }
     }
     .forgot-pass {
         @extend %small;
-        color: $gray-light;
+        color: $gray;
         opacity: 1;
         position: absolute;
         right: 1rem;
-        top: .5rem;
+        top: .6rem;
         transition: all .3s linear;
         &:hover {
             color: $grayer;