diff --git a/app/coffee/modules/common.coffee b/app/coffee/modules/common.coffee index 827c8aac..b776f9e6 100644 --- a/app/coffee/modules/common.coffee +++ b/app/coffee/modules/common.coffee @@ -300,32 +300,22 @@ Capslock = ($translate) -> $(this).remove() - showIcon = () -> + showIcon = (e) -> 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() + element = e.currentTarget + $(element).parent().append(warningIcon) + $('.icon-capslock').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') diff --git a/app/partials/includes/modules/change-email-form.jade b/app/partials/includes/modules/change-email-form.jade index 74d15ad6..66f38189 100644 --- a/app/partials/includes/modules/change-email-form.jade +++ b/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", - placeholder="{{'CHANGE_EMAIL_FORM.PLACEHOLDER_INPUT_TOKEN' | translate}}") + input( + 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") 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 a697e7b2..34a0a942 100644 --- a/app/partials/includes/modules/change-password-from-recovery-form.jade +++ b/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", - data-required="true", placeholder="{{'CHANGE_PASSWORD_RECOVERY_FORM.PLACEHOLDER_NEW_PASSWORD' | translate}}") + input( + 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", - data-required="true", data-equalto="#password", placeholder="{{'CHANGE_PASSWORD_RECOVERY_FORM.PLACEHOLDER_RE_TYPE_NEW_PASSWORD' | translate}}") + input( + 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" + ) diff --git a/app/partials/includes/modules/forgot-form.jade b/app/partials/includes/modules/forgot-form.jade index b98647be..6bd1e5cd 100644 --- a/app/partials/includes/modules/forgot-form.jade +++ b/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", - placeholder="{{'FORGOT_PASSWORD_FORM.PLACEHOLDER_FIELD' | translate}}") + input( + 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") diff --git a/app/partials/includes/modules/invitation-login-form.jade b/app/partials/includes/modules/invitation-login-form.jade index 1e9ffbef..2d5e2a3f 100644 --- a/app/partials/includes/modules/invitation-login-form.jade +++ b/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", - placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_NAME' | translate}}") + input( + 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", - placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_PASSWORD' | translate}}") - a.forgot-pass(href="", tg-nav="forgot-password", tg-capslock, - title="{{'LOGIN_COMMON.TITLE_LINK_FORGOT_PASSWORD' | translate}}", - translate="LOGIN_COMMON.LINK_FORGOT_PASSWORD") + input( + type="password" + name="password" + tg-capslock + 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", - title="{{'LOGIN_COMMON.ACTION_ENTER' | translate}}", - translate="LOGIN_COMMON.ACTION_ENTER") + a.button-login.button-blackish.submit-button( + type="submit" + title="{{'LOGIN_COMMON.ACTION_ENTER' | translate}}" + translate="LOGIN_COMMON.ACTION_ENTER" + ) fieldset(ng-repeat="plugin in contribPlugins|filter:{type: 'auth'}", ng-include="plugin.template") diff --git a/app/partials/includes/modules/invitation-register-form.jade b/app/partials/includes/modules/invitation-register-form.jade index 8ac3e284..911e62e0 100644 --- a/app/partials/includes/modules/invitation-register-form.jade +++ b/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( diff --git a/app/partials/includes/modules/login-form.jade b/app/partials/includes/modules/login-form.jade index ecfa6956..0d0fb609 100644 --- a/app/partials/includes/modules/login-form.jade +++ b/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", - placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_NAME' | translate}}") + input( + 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", - placeholder="{{'LOGIN_COMMON.PLACEHOLDER_AUTH_PASSWORD' | translate}}") + input( + 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 diff --git a/app/partials/includes/modules/register-form.jade b/app/partials/includes/modules/register-form.jade index b9335b17..621b26b5 100644 --- a/app/partials/includes/modules/register-form.jade +++ b/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" diff --git a/app/partials/user/user-change-password.jade b/app/partials/user/user-change-password.jade index 633e467e..734005c9 100644 --- a/app/partials/user/user-change-password.jade +++ b/app/partials/user/user-change-password.jade @@ -1,7 +1,10 @@ doctype html -div.wrapper(tg-user-change-password, ng-controller="UserChangePasswordController as ctrl", - ng-init="section='user-settings'") +div.wrapper( + 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" + ) diff --git a/app/partials/user/user-profile.jade b/app/partials/user/user-profile.jade index 6c698965..4e60adf1 100644 --- a/app/partials/user/user-profile.jade +++ b/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", - alt="{{'COMMON.LOADING' | translate}}") - input(type="file", id="avatar-field", class="hidden", - tg-avatar-model="avatarAttachment") + img.loading-spinner( + src="/svg/spinner-circle.svg", + alt="{{'COMMON.LOADING' | translate}}" + ) + + 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, - placeholder="{{'USER_PROFILE.FIELD.USERNAME' | translate}}", - ng-model="user.username", data-required="true", data-maxlength="255", - data-regexp="^[\\w.-]+$") + input( + type="text" + name="username" + 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, - placeholder="{{'USER_PROFILE.FIELD.EMAIL' | translate}}", - ng-model="user.email", data-type="email", data-required="true", - data-maxlength="255") + input( + type="text" + name="email" + 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", - placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_FULL_NAME' | translate}}", - ng-model="user.full_name", data-required="true", - data-maxlength="256") + input( + type="text" + name="full_name" + 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", - ng-options="locale.code as locale.name for locale in locales") + select( + 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", - ng-options="availableTheme for availableTheme in availableThemes") + select( + 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(name="bio", id="bio", ng-model="user.bio", - ng-attr-placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_BIO' | translate}}", - ng-maxlength="210", maxlength="210") + textarea( + name="bio" + id="bio" + 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}}", - translate="COMMON.SAVE") - a.delete-account(href="", title="{{'USER_PROFILE.ACTION_DELETE_ACCOUNT' | translate}}", - ng-click="ctrl.openDeleteLightbox()", - translate="USER_PROFILE.ACTION_DELETE_ACCOUNT") + button.button-green.submit-button( + type="submit" + title="{{'COMMON.SAVE' | translate}}", + translate="COMMON.SAVE" + ) + 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) diff --git a/app/styles/core/forms.scss b/app/styles/core/forms.scss index ff38810d..ea30f641 100644 --- a/app/styles/core/forms.scss +++ b/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; +} diff --git a/app/styles/modules/auth/login-form.scss b/app/styles/modules/auth/login-form.scss index 1a29f91d..219abdd8 100644 --- a/app/styles/modules/auth/login-form.scss +++ b/app/styles/modules/auth/login-form.scss @@ -2,19 +2,21 @@ .login-password { position: relative; } - input:focus { - +.forgot-pass { - opacity: 0; - transition: opacity .5s linear; + input { + &:focus { + +.forgot-pass { + 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;