From 774d77201ff8e58d5636188fd70f88348df9b2ea Mon Sep 17 00:00:00 2001 From: Juanfran Date: Tue, 21 Jul 2015 09:51:22 +0200 Subject: [PATCH] enhancement 1503 - caps lock warning --- CHANGELOG.md | 1 + app/coffee/modules/admin/lightboxes.coffee | 2 +- app/coffee/modules/common.coffee | 53 +++++++++++++++++++ app/locales/locale-en.json | 1 + .../change-password-from-recovery-form.jade | 6 +-- .../includes/modules/forgot-form.jade | 2 +- .../modules/invitation-login-form.jade | 6 +-- .../modules/invitation-register-form.jade | 8 +-- app/partials/includes/modules/login-form.jade | 5 +- .../includes/modules/register-form.jade | 6 +-- app/partials/user/user-change-password.jade | 6 +-- app/partials/user/user-profile.jade | 4 +- app/styles/core/forms.scss | 3 ++ 13 files changed, 81 insertions(+), 22 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5fdcaf68..99576e39 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/app/coffee/modules/admin/lightboxes.coffee b/app/coffee/modules/admin/lightboxes.coffee index 9b43695c..8ba5fb77 100644 --- a/app/coffee/modules/admin/lightboxes.coffee +++ b/app/coffee/modules/admin/lightboxes.coffee @@ -41,7 +41,7 @@ CreateMembersDirective = ($rs, $rootScope, $confirm, $loading, lightboxService, template = _.template("""
- data-required="true" <% } %> data-type="email" />
diff --git a/app/coffee/modules/common.coffee b/app/coffee/modules/common.coffee index abe17a6c..9688ae31 100644 --- a/app/coffee/modules/common.coffee +++ b/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 = $('
') + .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]) diff --git a/app/locales/locale-en.json b/app/locales/locale-en.json index a09bff42..72cf19ae 100644 --- a/app/locales/locale-en.json +++ b/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.", diff --git a/app/partials/includes/modules/change-password-from-recovery-form.jade b/app/partials/includes/modules/change-password-from-recovery-form.jade index 3c64b179..8a2f3c44 100644 --- a/app/partials/includes/modules/change-password-from-recovery-form.jade +++ b/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") diff --git a/app/partials/includes/modules/forgot-form.jade b/app/partials/includes/modules/forgot-form.jade index ce276287..b98647be 100644 --- a/app/partials/includes/modules/forgot-form.jade +++ b/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") diff --git a/app/partials/includes/modules/invitation-login-form.jade b/app/partials/includes/modules/invitation-login-form.jade index b089d1c0..1e9ffbef 100644 --- a/app/partials/includes/modules/invitation-login-form.jade +++ b/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") diff --git a/app/partials/includes/modules/invitation-register-form.jade b/app/partials/includes/modules/invitation-register-form.jade index 4eeace6a..6db3e055 100644 --- a/app/partials/includes/modules/invitation-register-form.jade +++ b/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", - placeholder="{{'REGISTER_FORM.PLACEHOLDER_PASSWORD' | translate}}") + input(type="password", tg-capslock, name="password", ng-model="dataRegister.password", data-required="true", + 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") diff --git a/app/partials/includes/modules/login-form.jade b/app/partials/includes/modules/login-form.jade index 18bfa351..ecfa6956 100644 --- a/app/partials/includes/modules/login-form.jade +++ b/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") diff --git a/app/partials/includes/modules/register-form.jade b/app/partials/includes/modules/register-form.jade index 0b955507..62b89c9c 100644 --- a/app/partials/includes/modules/register-form.jade +++ b/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}}") diff --git a/app/partials/user/user-change-password.jade b/app/partials/user/user-change-password.jade index f2d6df51..633e467e 100644 --- a/app/partials/user/user-change-password.jade +++ b/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") diff --git a/app/partials/user/user-profile.jade b/app/partials/user/user-profile.jade index dd94f565..6c698965 100644 --- a/app/partials/user/user-profile.jade +++ b/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") diff --git a/app/styles/core/forms.scss b/app/styles/core/forms.scss index 22b5e476..708a362d 100644 --- a/app/styles/core/forms.scss +++ b/app/styles/core/forms.scss @@ -9,6 +9,9 @@ fieldset { top: 31px; } } + .icon-capslock { + cursor: pointer; + } } input[type="text"],