enhancement 1503 - caps lock warning

CHANGELOG.md

@@ -14,6 +14,7 @@
 
 ### Misc
 - Improve performance: Show cropped images in timelines.
+- Caps lock warning in login and register form.
 - Lots of small and not so small bugfixes.
 
 

app/coffee/modules/admin/lightboxes.coffee

@@ -41,7 +41,7 @@ CreateMembersDirective = ($rs, $rootScope, $confirm, $loading, lightboxService,
     template = _.template("""
     <div class="add-member-wrapper">
         <fieldset>
-            <input type="email" placeholder="{{'LIGHTBOX.CREATE_MEMBER.PLACEHOLDER_TYPE_EMAIL' | translate}}"
+            <input tg-capslock type="email" placeholder="{{'LIGHTBOX.CREATE_MEMBER.PLACEHOLDER_TYPE_EMAIL' | translate}}"
                    <% if(required) { %> data-required="true" <% } %> data-type="email" />
         </fieldset>
         <fieldset>

app/coffee/modules/common.coffee

@@ -229,3 +229,56 @@ Template = ($templateCache) ->
     }
 
 module.factory("$tgTemplate", ["$templateCache", Template])
+
+#############################################################################
+## Permission directive, hide elements when necessary
+#############################################################################
+
+Capslock = ($translate) ->
+    link = ($scope, $el, $attrs) ->
+        open = false
+
+        warningIcon = $('<div>')
+            .addClass('icon')
+            .addClass('icon-capslock')
+            .attr('title', $translate.instant('COMMON.CAPSLOCK_WARNING'))
+
+        hideIcon = () ->
+            warningIcon.fadeOut () ->
+                open = false
+
+                $(this).remove()
+
+        showIcon = () ->
+            return if open
+
+            top = $el.position().top
+            left = $el.position().left + $el.outerWidth(true)
+
+            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) ->
+            if $el.val() == $el.val().toLowerCase()
+                hideIcon()
+            else
+                showIcon()
+
+        $scope.$on "$destroy", ->
+            $el.off('.capslock')
+
+    return {link:link}
+
+module.directive("tgCapslock", ["$translate", Capslock])

app/locales/locale-en.json

@@ -36,6 +36,7 @@
         "EXTERNAL_USER": "an external user",
         "GENERIC_ERROR": "One of our Oompa Loompas says {{error}}.",
         "IOCAINE_TEXT": "Feeling a bit overwhelmed by a task? Make sure others know about it by clicking on Iocaine when editing a task. It's possible to become immune to this (fictional) deadly poison by consuming small amounts over time just as it's possible to get better at what you do by occasionally taking on extra challenges!",
+        "CAPSLOCK_WARNING": "Be careful! You're writing with capital letters and this input is case sensitive.",
         "FORM_ERRORS": {
             "DEFAULT_MESSAGE": "This value seems to be invalid.",
             "TYPE_EMAIL": "This value should be a valid email.",

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

@@ -6,15 +6,15 @@ div.change-password-form-container(tg-change-password-from-recovery)
 
     form
         fieldset.token-change-password(ng-hide="tokenInParams")
-            input(type="text", name="token", ng-model="data.token", data-required="true",
+            input(type="text", tg-capslock, name="token", ng-model="data.token", data-required="true",
                   placeholder="{{'CHANGE_PASSWORD_RECOVERY_FORM.PLACEHOLDER_RECOVER_PASSWORD_TOKEN' | translate}}")
             a.get-token(href="", tg-nav="forgot-password",
                         title="{{'CHANGE_PASSWORD_RECOVERY_FORM.TITLE_LINK_NEED_TOKEN' | translate}}", translate="CHANGE_PASSWORD_RECOVERY_FORM.LINK_NEED_TOKEN")
         fieldset
-            input(type="password", name="password", id="password", ng-model="data.password",
+            input(type="password", tg-capslock, name="password", id="password", ng-model="data.password",
                   data-required="true", placeholder="{{'CHANGE_PASSWORD_RECOVERY_FORM.PLACEHOLDER_NEW_PASSWORD' | translate}}")
         fieldset
-            input(type="password", name="password2", id="password2", ng-model="data.password2",
+            input(type="password", tg-capslock, name="password2", id="password2", 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")

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

@@ -6,7 +6,7 @@ div.forgot-form-container(tg-forgot-password)
 
     form(ng-submit="ctrl.submit()")
         fieldset
-            input(type="text", name="username", ng-model="data.username", data-required="true",
+            input(type="text", tg-capslock, 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")

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

@@ -2,13 +2,13 @@ form.login-form
     p.form-header(translate="LOGIN_COMMON.HEADER")
 
     fieldset
-        input(type="text", name="username", ng-model="dataLogin.username", data-required="true",
+        input(type="text", tg-capslock, name="username", ng-model="dataLogin.username", data-required="true",
             placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_NAME' | translate}}")
 
     fieldset.login-password
-        input(type="password", name="password", ng-model="dataLogin.password", data-required="true",
+        input(type="password", tg-capslock, name="password", ng-model="dataLogin.password", data-required="true",
               placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_PASSWORD' | translate}}")
-        a.forgot-pass(href="", tg-nav="forgot-password",
+        a.forgot-pass(href="", tg-nav="forgot-password", tg-capslock,
                       title="{{'LOGIN_COMMON.TITLE_LINK_FORGOT_PASSWORD' | translate}}",
                       translate="LOGIN_COMMON.LINK_FORGOT_PASSWORD")
 

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

@@ -1,7 +1,7 @@
 form.register-form
     p.form-header(translate="REGISTER_FORM.TITLE")
     fieldset
-        input(type="text", name="username", ng-model="dataRegister.username",
+        input(type="text", tg-capslock, name="username", ng-model="dataRegister.username",
               data-required="true", data-maxlength="255", data-regexp="^[\\w.-]+$",
               placeholder="{{'REGISTER_FORM.PLACEHOLDER_NAME' | translate}}")
 
@@ -11,13 +11,13 @@ form.register-form
               placeholder="{{'REGISTER_FORM.PLACEHOLDER_FULL_NAME' | translate}}")
 
     fieldset
-        input(type="text", name="email", ng-model="dataRegister.email",
+        input(type="text", tg-capslock,  name="email", ng-model="dataRegister.email",
               data-required="true", data-maxlength="255",
               placeholder="{{'REGISTER_FORM.PLACEHOLDER_EMAIL' | translate}}")
 
     fieldset
-        input(type="password", name="password", ng-model="dataRegister.password", data-required="true",
+        input(type="password", tg-capslock, name="password", ng-model="dataRegister.password", data-required="true",
-            placeholder="{{'REGISTER_FORM.PLACEHOLDER_PASSWORD' | translate}}")
+          placeholder="{{'REGISTER_FORM.PLACEHOLDER_PASSWORD' | translate}}")
 
     fieldset
         a.button-register.button-blackish.submit-button(type="submit", title="{{'REGISTER_FORM.ACTION_SIGN_UP' | translate}}", translate="REGISTER_FORM.ACTION_SIGN_UP")

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

@@ -1,10 +1,11 @@
 div.login-form-container(tg-login)
     form.login-form
         fieldset
-            input(type="text", name="username", data-required="true",
+            input(type="text", tg-capslock, name="username", data-required="true",
                   placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_NAME' | translate}}")
+
         fieldset.login-password
-            input(type="password", name="password", data-required="true",
+            input(type="password", tg-capslock, name="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")

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

@@ -1,7 +1,7 @@
 div.register-form-container(tg-register)
     form.register-form
         fieldset
-            input(type="text", name="username", ng-model="data.username",
+            input(type="text", name="username", ng-model="data.username", tg-capslock,
                   data-required="true", data-maxlength="255", data-regexp="^[\\w.-]+$",
                   placeholder="{{'REGISTER_FORM.PLACEHOLDER_NAME' | translate}}")
 
@@ -11,12 +11,12 @@ div.register-form-container(tg-register)
                   placeholder="{{'REGISTER_FORM.PLACEHOLDER_FULL_NAME' | translate}}")
 
         fieldset
-            input(type="text", name="email", ng-model="data.email",
+            input(type="text", name="email", ng-model="data.email", tg-capslock,
                   data-required="true", data-maxlength="255",
                   placeholder="{{'REGISTER_FORM.PLACEHOLDER_EMAIL' | translate}}")
 
         fieldset
-            input(type="password", name="password", ng-model="data.password",
+            input(type="password", name="password", ng-model="data.password", tg-capslock,
                 data-required="true", data-minlength="4",
                 placeholder="{{'REGISTER_FORM.PLACEHOLDER_PASSWORD' | translate}}")
 

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

@@ -15,12 +15,12 @@ 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")
+                input(type="password", placeholder="{{'CHANGE_PASSWORD.PLACEHOLDER_CURRENT_PASSWORD' | translate}}", id="current-password", ng-model="currentPassword", tg-capslock)
             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")
+                input(type="password", placeholder="{{'CHANGE_PASSWORD.PLACEHOLDER_NEW_PASSWORD' | translate}}", id="new-password", ng-model="newPassword1", tg-capslock)
             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")
+                input(type="password", placeholder="{{'CHANGE_PASSWORD.PLACEHOLDER_RETYPE_PASSWORD' | translate}}", id="retype-password", ng-model="newPassword2", tg-capslock)
             fieldset
                 button.button-green.submit-button(type="submit", title="{{'COMMON.SAVE' | translate}}", translate="COMMON.SAVE")

app/partials/user/user-profile.jade

@@ -31,14 +31,14 @@ div.wrapper(tg-user-profile, ng-controller="UserSettingsController as ctrl",
                 div.data
                     fieldset
                         label(for="username", translate="USER_PROFILE.FIELD.USERNAME")
-                        input(type="text", name="username", id="username",
+                        input(type="text", name="username", id="username", tg-capslock,
                               placeholder="{{'USER_PROFILE.FIELD.USERNAME' | translate}}",
                               ng-model="user.username", data-required="true", data-maxlength="255",
                               data-regexp="^[\\w.-]+$")
 
                     fieldset
                         label(for="email", translate="USER_PROFILE.FIELD.EMAIL")
-                        input(type="text", name="email", id="email",
+                        input(type="text", name="email", id="email", tg-capslock,
                               placeholder="{{'USER_PROFILE.FIELD.EMAIL' | translate}}",
                               ng-model="user.email", data-type="email", data-required="true",
                               data-maxlength="255")

app/styles/core/forms.scss

@@ -9,6 +9,9 @@ fieldset {
             top: 31px;
         }
     }
+    .icon-capslock {
+        cursor: pointer;
+    }
 }
 
 input[type="text"],