From 84252c69f99e0bcc0cbc8c4877a89dea7674a99a Mon Sep 17 00:00:00 2001 From: Nick Litwin Date: Wed, 2 Sep 2015 14:52:15 -0700 Subject: [PATCH 1/3] Add correct form error messages --- app/account/register/register.jade | 14 +++------- app/index.jade | 1 - app/settings/account-info/account-info.jade | 8 +++--- app/settings/edit-profile/edit-profile.jade | 2 +- .../update-password/update-password.jade | 5 ++-- app/topcoder.constants.js | 28 +++++++++---------- assets/css/settings/account-info.scss | 7 +++-- assets/css/settings/edit-profile.scss | 10 +++++++ assets/css/settings/update-password.scss | 8 +++--- 9 files changed, 44 insertions(+), 39 deletions(-) diff --git a/app/account/register/register.jade b/app/account/register/register.jade index dd5d8b6ee..0d1dcf86c 100644 --- a/app/account/register/register.jade +++ b/app/account/register/register.jade @@ -13,10 +13,6 @@ input(right-placeholder, focused-placeholder="Last", ng-model="vm.lastname", maxlength="64", name="lastname", placeholder="Last Name", type="text", required) - //- Show errors for first and last names once we know whether we can handle accents, other languages, and not symbols/numbers - //- .form-errors - //- p.form-error(ng-show="vm.registerForm.firstname.$dirty && vm.registerForm.firstname.$error.pattern") Names must not contain symbols or numbers. - .country-dropdown angucomplete-alt( input-name="country", @@ -32,7 +28,7 @@ ) .form-errors - p.form-error(ng-show="vm.registerForm.country.$error.required") Please enter a valid country. + p.form-error(ng-show="vm.registerForm.country.$error.required") Please choose a country from the list. .validation-bar(ng-class="{ 'error-bar': (vm.registerForm.username.$error.usernameIsFree || vm.registerForm.username.$error.minlength || vm.registerForm.username.$error.maxlength), 'success-bar': (vm.registerForm.username.$valid && !vm.registerForm.username.$error.usernameIsFree) }") input(right-placeholder, focused-placeholder="Username", ng-model="vm.username", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.usernameTips = true", ng-blur="vm.usernameTips = false", ng-minlength="2", ng-maxlength="15", name="username", placeholder="Username", type="text", username-is-free, required) @@ -76,14 +72,12 @@ p(ng-class="{ 'has-letter': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasLetter) }") At least one letter - p(ng-class="{ 'has-symbol': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasSymbol) }") At least one symbol - - p(ng-class="{ 'has-number': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasNumber) }") At least one number + p(ng-class="{ 'has-number': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasNumber && !vm.registerForm.password.$error.hasSymbol) }") At least one number or symbol - button(type="submit", ng-disabled="vm.registerForm.$invalid", ng-class="{'enabled-button': vm.registerForm.$valid}") Join Now + button(type="submit", ng-disabled="vm.registerForm.$invalid", ng-class="{'enabled-button': vm.registerForm.$valid}") Join section.terms - p By clicking "JOIN NOW" I agree to Topcoder's + p By clicking "JOIN" I agree to Topcoder's p #[a(href="http://www.topcoder.com/community/how-it-works/terms/", target="_blank") Terms of Service] and #[a(href="http://www.topcoder.com/community/how-it-works/privacy-policy/", target="_blank") Privacy Policy] diff --git a/app/index.jade b/app/index.jade index 442147c79..2355fffa3 100644 --- a/app/index.jade +++ b/app/index.jade @@ -90,7 +90,6 @@ html script(src='../bower_components/angular-filter/dist/angular-filter.min.js') script(src='../bower_components/angular-img-fallback/angular.dcb-img-fallback.js') script(src='../bower_components/angular-jwt/dist/angular-jwt.js') - script(src='../bower_components/angular-mocks/angular-mocks.js') script(src='../bower_components/angular-sanitize/angular-sanitize.js') script(src='../bower_components/angular-ui-router/release/angular-ui-router.js') script(src='../bower_components/x2js/xml2json.min.js') diff --git a/app/settings/account-info/account-info.jade b/app/settings/account-info/account-info.jade index 20b27989e..1dae466b3 100644 --- a/app/settings/account-info/account-info.jade +++ b/app/settings/account-info/account-info.jade @@ -19,10 +19,10 @@ .address-fields label *First name (Given name) - input(name="firstname", type="text", value="{{vm.userData.firstName}}", ng-model="vm.userData.firstName") + input(name="firstname", type="text", value="{{vm.userData.firstName}}", ng-model="vm.userData.firstName", maxlength="64", required) label *Last name (Surname) - input(name="lastname", type="text", value="{{vm.userData.lastName}}", ng-model="vm.userData.lastName") + input(name="lastname", type="text", value="{{vm.userData.lastName}}", ng-model="vm.userData.lastName", maxlength="64", required) label Address input(name="address", type="text", value="{{vm.homeAddress.streetAddr1}}", ng-model="vm.homeAddress.streetAddr1") @@ -52,8 +52,8 @@ minlength="1" ) - .form-errors - p.form-error(ng-show="vm.updateAccountInfo.country.$error.required") Please enter a valid country. + .account-info-error + p.form-error(ng-show="vm.updateAccountInfo.country.$error.required") Please choose a country from the list. button(type="submit", ng-disabled="vm.updateAccountInfo.$invalid", ng-class="{'enabled-button': vm.updateAccountInfo.$valid}") Save diff --git a/app/settings/edit-profile/edit-profile.jade b/app/settings/edit-profile/edit-profile.jade index 49fd1da39..f1232631c 100644 --- a/app/settings/edit-profile/edit-profile.jade +++ b/app/settings/edit-profile/edit-profile.jade @@ -33,7 +33,7 @@ ) .form-errors - p.form-error(ng-show="vm.editProfile.location.$error.required") Please enter a valid country. + p.form-error(ng-show="vm.editProfile.location.$error.required") Please choose a country from the list. .field-section.description h4.field-title About Me diff --git a/app/settings/update-password/update-password.jade b/app/settings/update-password/update-password.jade index e2b16b533..46aea7df1 100644 --- a/app/settings/update-password/update-password.jade +++ b/app/settings/update-password/update-password.jade @@ -3,11 +3,10 @@ .reset-password form(name="vm.newPasswordForm", role="form", ng-submit="vm.newPasswordForm.$valid && vm.submitNewPassword()", novalidate) - .validation-bar(ng-class="{ 'error-bar': (vm.newPasswordForm.currentPassword.$dirty && vm.newPasswordForm.currentPassword.$invalid), 'success-bar': (vm.newPasswordForm.currentPassword.$valid) }") - input(right-placeholder, focused-placeholder="Current", name="currentPassword", type="password", placeholder="Enter Current Password") + input(right-placeholder, focused-placeholder="Current", name="currentPassword", type="password", placeholder="Enter Current Password") .form-errors - p.form-error(ng-show="vm.newPasswordForm.currentPassword.$error.wrongPassword") The password entered was incorrect. + p.form-error(ng-show="vm.newPasswordForm.currentPassword.$error.wrongPassword") Your current password is incorrect. Please check that you entered the right one. .validation-bar(ng-class="{ 'success-bar': (vm.newPasswordForm.password.$valid) }") toggle-password diff --git a/app/topcoder.constants.js b/app/topcoder.constants.js index 5dde83ab8..687807765 100644 --- a/app/topcoder.constants.js +++ b/app/topcoder.constants.js @@ -1,25 +1,25 @@ angular.module("CONSTANTS", []) .constant("CONSTANTS", { - "API_URL": "https://api.topcoder-qa.com/v3", - "API_URL_V2": "https://api.topcoder-qa.com/v2", + "API_URL": "https://api.topcoder-dev.com/v3", + "API_URL_V2": "https://api.topcoder-dev.com/v2", "ASSET_PREFIX": "", - "auth0Callback": "https://api.topcoder-qa.com/pub/callback.html", - "auth0Domain": "topcoder-qa.auth0.com", - "BLOG_LOCATION": "https://www.topcoder-qa.com/feed/?post_type=blog", - "clientId": "EVOgWZlCtIFlbehkq02treuRRoJk12UR", - "COMMUNITY_URL": "//community.topcoder-qa.com", - "domain": "topcoder-qa.com", - "ENVIRONMENT": "qa", - "FORUMS_APP_URL": "forums.topcoder-qa.com", - "HELP_APP_URL": "help.topcoder-qa.com", - "MAIN_URL": "https://www.topcoder-qa.com", + "auth0Callback": "https://api.topcoder-dev.com/pub/callback.html", + "auth0Domain": "topcoder-dev.auth0.com", + "BLOG_LOCATION": "https://www.topcoder-dev.com/feed/?post_type=blog", + "clientId": "JFDo7HMkf0q2CkVFHojy3zHWafziprhT", + "COMMUNITY_URL": "//community.topcoder-dev.com", + "domain": "topcoder-dev.com", + "ENVIRONMENT": "development", + "FORUMS_APP_URL": "forums.topcoder-dev.com", + "HELP_APP_URL": "help.topcoder-dev.com", + "MAIN_URL": "https://www.topcoder-dev.com", "NEW_CHALLENGES_URL": "https://www.topcoder.com/challenges/develop/upcoming/", "NEW_RELIC_APPLICATION_ID": "", - "PHOTO_LINK_LOCATION": "https://community.topcoder-qa.com", + "PHOTO_LINK_LOCATION": "https://community.topcoder-dev.com", "submissionDownloadPath": "/review/actions/DownloadContestSubmission?uid=", "SWIFT_PROGRAM_ID": 3445, - "SWIFT_PROGRAM_URL": "apple.topcoder-qa.com", + "SWIFT_PROGRAM_URL": "apple.topcoder-dev.com", "UPCOMING_SRMS_URL": "https://www.topcoder.com/challenges/data/upcoming/", "EVENT_USER_LOGGED_IN": "user_logged_in", "EVENT_USER_LOGGED_OUT": "user_logged_out", diff --git a/assets/css/settings/account-info.scss b/assets/css/settings/account-info.scss index 9dd1df355..889b73828 100644 --- a/assets/css/settings/account-info.scss +++ b/assets/css/settings/account-info.scss @@ -16,6 +16,7 @@ label { display: block; + position: relative; margin-bottom: 15px; } @@ -24,8 +25,10 @@ margin-top: 7px; } - .form-errors { - margin-top: 8px; + .account-info-error { + position: absolute; + top: 65px; + left: 3px; } button.enabled-button { diff --git a/assets/css/settings/edit-profile.scss b/assets/css/settings/edit-profile.scss index 34e5f0b80..92ff18088 100644 --- a/assets/css/settings/edit-profile.scss +++ b/assets/css/settings/edit-profile.scss @@ -118,4 +118,14 @@ @include ui-enabled-button; } } + + .field-section { + position: relative; + } + + .form-errors { + position: absolute; + top: 70px; + left: 3px; + } } diff --git a/assets/css/settings/update-password.scss b/assets/css/settings/update-password.scss index 0b657c085..06bc8133a 100644 --- a/assets/css/settings/update-password.scss +++ b/assets/css/settings/update-password.scss @@ -9,10 +9,6 @@ margin-bottom: 10px; } - p { - margin: 5px 0 12px 5px; - } - button { width: 200px; text-transform: none; @@ -24,4 +20,8 @@ } } } + + .form-error { + margin: 0 0 20px 3px; + } } From ed3215fde206134070c41de450baf8fbf9cf7a27 Mon Sep 17 00:00:00 2001 From: Nick Litwin Date: Fri, 4 Sep 2015 14:18:57 -0700 Subject: [PATCH 2/3] Rename directive --- .../toggle-password-with-tips.directive.js} | 6 +++--- .../toggle-password-with-tips.jade} | 0 .../toggle-password-with-tips.spec.js} | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) rename app/directives/account/{toggle-password/toggle-password.directive.js => toggle-password-with-tips/toggle-password-with-tips.directive.js} (88%) rename app/directives/account/{toggle-password/toggle-password.jade => toggle-password-with-tips/toggle-password-with-tips.jade} (100%) rename app/directives/account/{toggle-password/toggle-password.spec.js => toggle-password-with-tips/toggle-password-with-tips.spec.js} (86%) diff --git a/app/directives/account/toggle-password/toggle-password.directive.js b/app/directives/account/toggle-password-with-tips/toggle-password-with-tips.directive.js similarity index 88% rename from app/directives/account/toggle-password/toggle-password.directive.js rename to app/directives/account/toggle-password-with-tips/toggle-password-with-tips.directive.js index 44eee41d9..18983ba5a 100644 --- a/app/directives/account/toggle-password/toggle-password.directive.js +++ b/app/directives/account/toggle-password-with-tips/toggle-password-with-tips.directive.js @@ -1,13 +1,13 @@ (function() { 'use strict'; - angular.module('tcUIComponents').directive('togglePassword', togglePassword); + angular.module('tcUIComponents').directive('togglePasswordWithTips', togglePasswordWithTips); - function togglePassword() { + function togglePasswordWithTips() { return { restrict: 'E', require: '^form', - templateUrl: 'directives/account/toggle-password/toggle-password.html', + templateUrl: 'directives/account/toggle-password-with-tips/toggle-password-with-tips.html', link: function(scope, element, attrs, formController) { var vm = scope.vm; vm.passwordField = formController.password; diff --git a/app/directives/account/toggle-password/toggle-password.jade b/app/directives/account/toggle-password-with-tips/toggle-password-with-tips.jade similarity index 100% rename from app/directives/account/toggle-password/toggle-password.jade rename to app/directives/account/toggle-password-with-tips/toggle-password-with-tips.jade diff --git a/app/directives/account/toggle-password/toggle-password.spec.js b/app/directives/account/toggle-password-with-tips/toggle-password-with-tips.spec.js similarity index 86% rename from app/directives/account/toggle-password/toggle-password.spec.js rename to app/directives/account/toggle-password-with-tips/toggle-password-with-tips.spec.js index dc5dbbf71..46e901015 100644 --- a/app/directives/account/toggle-password/toggle-password.spec.js +++ b/app/directives/account/toggle-password-with-tips/toggle-password-with-tips.spec.js @@ -1,5 +1,5 @@ /* jshint -W117, -W030 */ -describe('Toggle Password Directive', function() { +describe('Toggle Password With Tips Directive', function() { var scope; var element; // var challenge = mockData.getMockChallengeWithUserDetails(); From 4701d5d4a7deda186fb629f8e7daaec652521785 Mon Sep 17 00:00:00 2001 From: Nick Litwin Date: Tue, 8 Sep 2015 09:33:23 -0700 Subject: [PATCH 3/3] Add show/hide option for current password on the change password settings page --- app/account/register/register.jade | 4 +- .../reset-password/reset-password.jade | 4 +- .../toggle-password-with-tips.directive.js | 2 +- .../toggle-password-with-tips.jade | 7 +- .../toggle-password.directive.js | 64 +++++++++++++++++++ .../toggle-password/toggle-password.jade | 17 +++++ .../toggle-password/toggle-password.spec.js | 15 +++++ .../account/validate-register.directive.js | 8 +-- app/directives/focus-on.directive.js | 7 +- app/index.jade | 2 + .../update-password.controller.js | 5 +- .../update-password/update-password.jade | 6 +- .../directives/toggle-password-with-tips.scss | 39 +++++++++++ assets/css/directives/toggle-password.scss | 4 +- assets/css/topcoder.scss | 2 +- 15 files changed, 163 insertions(+), 23 deletions(-) create mode 100644 app/directives/account/toggle-password/toggle-password.directive.js create mode 100644 app/directives/account/toggle-password/toggle-password.jade create mode 100644 app/directives/account/toggle-password/toggle-password.spec.js create mode 100644 assets/css/directives/toggle-password-with-tips.scss diff --git a/app/account/register/register.jade b/app/account/register/register.jade index 909addff6..632269b5b 100644 --- a/app/account/register/register.jade +++ b/app/account/register/register.jade @@ -63,7 +63,7 @@ p.form-error(ng-show="vm.registerForm.email.$dirty && vm.registerForm.email.$invalid") Please enter a valid email address. .validation-bar(ng-class="{ 'success-bar': (vm.registerForm.password.$valid) }") - toggle-password(ng-if="!vm.isSocialRegistration") + toggle-password-with-tips(ng-if="!vm.isSocialRegistration") .tips.password-tips(ng-show="vm.passwordFocus") h3 Password Tips: @@ -72,7 +72,7 @@ p(ng-class="{ 'has-letter': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasLetter) }") At least one letter - p(ng-class="{ 'has-number': (vm.registerForm.password.$dirty && (!vm.registerForm.password.$error.hasNumber || !vm.registerForm.password.$error.hasSymbol)) }") At least one number or symbol + p(ng-class="{ 'has-symbol-or-number': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol button(type="submit", ng-disabled="vm.registerForm.$invalid", ng-class="{'enabled-button': vm.registerForm.$valid}") Join diff --git a/app/account/reset-password/reset-password.jade b/app/account/reset-password/reset-password.jade index be7acd323..5efe3b8f3 100644 --- a/app/account/reset-password/reset-password.jade +++ b/app/account/reset-password/reset-password.jade @@ -36,7 +36,7 @@ form.reset-form(name='vm.resetPasswordForm', role="form", ng-submit="vm.resetPasswordForm.$valid && vm.resetPassword()", novalidate) .validation-bar(ng-class="{ 'success-bar': (vm.resetPasswordForm.password.$valid) }") - toggle-password + toggle-password-with-tips .tips.password-tips(ng-show="vm.passwordFocus") h3 Password Tips: @@ -45,7 +45,7 @@ p(ng-class="{ 'has-letter': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasLetter) }") At least one letter - p(ng-class="{ 'has-number': (vm.resetPasswordForm.password.$dirty && (!vm.resetPasswordForm.password.$error.hasNumber || !vm.resetPasswordForm.password.$error.hasSymbol) }") At least one number or symbol + p(ng-class="{ 'has-symbol-or-number': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol .form-errors p.form-error(ng-show="vm.resetFailed") We were unable to reset your password. Please request another reset link. If you continue to have trouble, please contact diff --git a/app/directives/account/toggle-password-with-tips/toggle-password-with-tips.directive.js b/app/directives/account/toggle-password-with-tips/toggle-password-with-tips.directive.js index 18983ba5a..f7097ee86 100644 --- a/app/directives/account/toggle-password-with-tips/toggle-password-with-tips.directive.js +++ b/app/directives/account/toggle-password-with-tips/toggle-password-with-tips.directive.js @@ -35,7 +35,7 @@ var relatedTarget = angular.element(event.relatedTarget); // If you are blurring from the password input and clicking the checkbox - if (relatedTarget.attr('type') === 'checkbox') { + if (relatedTarget.attr('type') === 'checkbox' && relatedTarget.attr('id') === 'passwordCheckbox') { vm.passwordFocus = true; vm.placeholder = ''; } else { diff --git a/app/directives/account/toggle-password-with-tips/toggle-password-with-tips.jade b/app/directives/account/toggle-password-with-tips/toggle-password-with-tips.jade index b6b6f8ff6..28ea7d015 100644 --- a/app/directives/account/toggle-password-with-tips/toggle-password-with-tips.jade +++ b/app/directives/account/toggle-password-with-tips/toggle-password-with-tips.jade @@ -3,7 +3,7 @@ input#password-input( ng-model-options="{allowInvalid: true}", ng-hide="vm.isSocialRegistration", - focus-on="refocus", + focus-on="focusOnInput", ng-focus="vm.onFocus($event)", ng-blur="vm.onBlur($event)", @@ -15,8 +15,7 @@ input#password-input( ng-minlength="8", ng-maxlength="64", has-letter, - has-symbol, - has-number, + has-symbol-or-number, required) -label(ng-show="vm.passwordFocus || vm.passwordField.$dirty") #[input(type="checkbox", ng-model="refocus", ng-change="vm.toggleInputType()")] Show +label(ng-show="vm.passwordFocus || vm.passwordField.$dirty") #[input(type="checkbox", id="passwordCheckbox", ng-model="focusOnInput", ng-change="vm.toggleInputType()")] Show diff --git a/app/directives/account/toggle-password/toggle-password.directive.js b/app/directives/account/toggle-password/toggle-password.directive.js new file mode 100644 index 000000000..a9247fc54 --- /dev/null +++ b/app/directives/account/toggle-password/toggle-password.directive.js @@ -0,0 +1,64 @@ +(function() { + 'use strict'; + + angular.module('tcUIComponents').directive('togglePassword', togglePassword); + + function togglePassword() { + return { + restrict: 'E', + require: '^form', + templateUrl: 'directives/account/toggle-password/toggle-password.html', + link: function(scope, element, attrs, formController) { + var vm = scope.vm; + vm.currentPasswordField = formController.currentPassword; + vm.currentPasswordPlaceholder = vm.currentPasswordDefaultPlaceholder; + vm.currentPassword = ''; + + var currentPasswordInput = element.children()[0]; + + element.bind('click', function(event) { + currentPasswordInput.focus(); + }); + + element.bind('keyup', function(event) { + if (event.keyCode === 13) { + currentPasswordInput.blur(); + } + }); + + vm.onCPFocus = function(event) { + vm.currentPasswordFocus = true; + vm.currentPasswordPlaceholder = ''; + } + + vm.onCPBlur = function(event) { + var relatedTarget = angular.element(event.relatedTarget); + + // If you are blurring from the password input and clicking the checkbox + if (relatedTarget.attr('type') === 'checkbox' && relatedTarget.attr('id') === 'currentPasswordCheckbox') { + vm.currentPasswordFocus = true; + vm.currentPasswordPlaceholder = ''; + } else { + // If you are blurring from the password input and clicking anywhere but the checkbox + vm.currentPasswordFocus = false; + + if (vm.currentPassword === '' || vm.currentPassword === undefined) { + vm.currentPasswordPlaceholder = vm.currentPasswordDefaultPlaceholder; + formController.currentPassword.$setPristine(); + } + } + }; + + vm.toggleTypeAttribute = function() { + var $currentPasswordInput = angular.element(currentPasswordInput); + + if ($currentPasswordInput.attr('type') === 'text') { + $currentPasswordInput.attr('type', 'password'); + } else { + $currentPasswordInput.attr('type', 'text'); + } + } + } + }; + } +})(); diff --git a/app/directives/account/toggle-password/toggle-password.jade b/app/directives/account/toggle-password/toggle-password.jade new file mode 100644 index 000000000..fd181ed64 --- /dev/null +++ b/app/directives/account/toggle-password/toggle-password.jade @@ -0,0 +1,17 @@ +input#current-password-input( + ng-model="vm.currentPassword", + ng-model-options="{allowInvalid: true}", + + ng-hide="vm.isSocialRegistration", + focus-on="focusOnCurrentPasswordInput", + + ng-focus="vm.onCPFocus($event)", + ng-blur="vm.onCPBlur($event)", + + name="currentPassword", + type="password", + placeholder="{{vm.currentPasswordPlaceholder}}", + + required) + +label(ng-show="vm.currentPasswordFocus || vm.currentPasswordField.$dirty") #[input(type="checkbox", id="currentPasswordCheckbox", ng-model="focusOnCurrentPasswordInput", ng-change="vm.toggleTypeAttribute()")] Show diff --git a/app/directives/account/toggle-password/toggle-password.spec.js b/app/directives/account/toggle-password/toggle-password.spec.js new file mode 100644 index 000000000..dc5dbbf71 --- /dev/null +++ b/app/directives/account/toggle-password/toggle-password.spec.js @@ -0,0 +1,15 @@ +/* jshint -W117, -W030 */ +describe('Toggle Password Directive', function() { + var scope; + var element; + // var challenge = mockData.getMockChallengeWithUserDetails(); + // var spotlightChallenge = mockData.getMockSpotlightChallenges()[0]; + + beforeEach(function() { + bard.appModule('topcoder'); + bard.inject(this, '$compile', '$rootScope'); + scope = $rootScope.$new(); + }); + + bard.verifyNoOutstandingHttpRequests(); +}); diff --git a/app/directives/account/validate-register.directive.js b/app/directives/account/validate-register.directive.js index fee2f0160..7c9f7bf52 100644 --- a/app/directives/account/validate-register.directive.js +++ b/app/directives/account/validate-register.directive.js @@ -3,7 +3,7 @@ angular.module('tcUIComponents') .directive('hasLetter', hasLetter) - .directive('hasSymbol', hasSymbol) + .directive('hasSymbolOrNumber', hasSymbolOrNumber) .directive('hasNumber', hasNumber) .directive('usernameIsFree', usernameIsFree) .directive('emailIsAvailable', emailIsAvailable); @@ -22,12 +22,12 @@ }; } - function hasSymbol() { + function hasSymbolOrNumber() { return { require: 'ngModel', link: function(scope, element, attrs, ctrl) { - ctrl.$validators.hasSymbol = function(modelValue, viewValue) { - if (/[-!$@#%^&*()_+|~=`{}\[\]:";'<>?,.\/]/.test(viewValue)) { + ctrl.$validators.hasSymbolOrNumber = function(modelValue, viewValue) { + if (/[-!$@#%^&*()_+|~=`{}\[\]:";'<>?,.\/]/.test(viewValue) || /[\d]/.test(viewValue)) { return true; } return false; diff --git a/app/directives/focus-on.directive.js b/app/directives/focus-on.directive.js index b4a0fd000..7f1bdf219 100644 --- a/app/directives/focus-on.directive.js +++ b/app/directives/focus-on.directive.js @@ -3,11 +3,12 @@ angular.module('tcUIComponents').directive('focusOn', focusOn); - focusOn.$inject = ['$timeout']; + focusOn.$inject = ['$timeout', '$parse']; - function focusOn($timeout) { + function focusOn($timeout, $parse) { return function(scope, element, attr) { - scope.$watch('refocus', function(newValue) { + var model = $parse(attr.focusOn); + scope.$watch(model, function(newValue) { $timeout(function() { if (newValue !== undefined) { element[0].focus(); diff --git a/app/index.jade b/app/index.jade index 7bd799193..63bf5c9f8 100644 --- a/app/index.jade +++ b/app/index.jade @@ -50,6 +50,7 @@ html link(rel="stylesheet", href="assets/css/member-dashboard/community-updates.css") link(rel="stylesheet", href="assets/css/layout/header.css") link(rel="stylesheet", href="assets/css/layout/footer.css") + link(rel="stylesheet", href="assets/css/directives/toggle-password-with-tips.css") link(rel="stylesheet", href="assets/css/directives/toggle-password.css") link(rel="stylesheet", href="assets/css/directives/tc-section.css") link(rel="stylesheet", href="assets/css/directives/tc-paginator.css") @@ -125,6 +126,7 @@ html script(src="blocks/logger/logger.js") script(src="directives/tcui-components.module.js") script(src="directives/account/toggle-password/toggle-password.directive.js") + script(src="directives/account/toggle-password-with-tips/toggle-password-with-tips.directive.js") script(src="directives/account/validate-email.directive.js") script(src="directives/account/validate-login.directive.js") script(src="directives/account/validate-register.directive.js") diff --git a/app/settings/update-password/update-password.controller.js b/app/settings/update-password/update-password.controller.js index 6ae878d85..e089ee6f2 100644 --- a/app/settings/update-password/update-password.controller.js +++ b/app/settings/update-password/update-password.controller.js @@ -12,7 +12,8 @@ activate(); function activate() { - vm.defaultPlaceholder = 'Enter New Password'; + vm.defaultPlaceholder = 'New Password'; + vm.currentPasswordDefaultPlaceholder = 'Current Password'; vm.username = userData.handle; vm.email = userData.email; } @@ -23,7 +24,9 @@ vm.password = ''; vm.currentPassword = ''; vm.newPasswordForm.$setPristine(); + vm.currentPasswordFocus = false; vm.placeholder = vm.defaultPlaceholder; + vm.currentPasswordPlaceholder = vm.currentPasswordDefaultPlaceholder; $log.info('Your password has been updated.'); }) diff --git a/app/settings/update-password/update-password.jade b/app/settings/update-password/update-password.jade index d329f03ae..915c84c54 100644 --- a/app/settings/update-password/update-password.jade +++ b/app/settings/update-password/update-password.jade @@ -3,13 +3,13 @@ .reset-password form(name="vm.newPasswordForm", role="form", ng-submit="vm.newPasswordForm.$valid && vm.submitNewPassword()", novalidate) - input(name="currentPassword", type="password", placeholder="Enter Current Password", ng-model="vm.currentPassword") + toggle-password .form-errors p.form-error(ng-show="vm.newPasswordForm.currentPassword.$error.wrongPassword") Your current password is incorrect. Please check that you entered the right one. .validation-bar(ng-class="{ 'success-bar': (vm.newPasswordForm.password.$valid) }") - toggle-password + toggle-password-with-tips .tips.password-tips(ng-show="vm.passwordFocus") h3 Password Tips: @@ -18,6 +18,6 @@ p(ng-class="{ 'has-letter': (vm.newPasswordForm.password.$dirty && !vm.newPasswordForm.password.$error.hasLetter) }") At least one letter - p(ng-class="{ 'has-symbol': (vm.newPasswordForm.password.$dirty && (!vm.newPasswordForm.password.$error.hasSymbol || !vm.newPasswordForm.password.$error.hasNumber)) }") At least one number or symbol + p(ng-class="{ 'has-symbol-or-number': (vm.newPasswordForm.password.$dirty && !vm.newPasswordForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol button(type="submit", ng-disabled="vm.newPasswordForm.$invalid", ng-class="{'enabled-button': vm.newPasswordForm.$valid}") Save diff --git a/assets/css/directives/toggle-password-with-tips.scss b/assets/css/directives/toggle-password-with-tips.scss new file mode 100644 index 000000000..16b3987da --- /dev/null +++ b/assets/css/directives/toggle-password-with-tips.scss @@ -0,0 +1,39 @@ +@import '../partials/combined'; + +// Toggle password with password tips directive +toggle-password-with-tips { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + height: 40px; + max-width: 300px; + margin-bottom: 10px; + padding-left: 15px; + padding-right: 10px; + border: 0; + + @include source-sans; + font-size: 16px; + background-color: $white; + color: #231F20; + + input#password-input { + width: 155px; + margin-bottom: 0; + padding-left: 0; + outline: 0; + } + + label { + text-transform: uppercase; + font-size: 12px; + color: #808285; + + input[type="checkbox"] { + width: 15px; + margin: 0; + } + } +} diff --git a/assets/css/directives/toggle-password.scss b/assets/css/directives/toggle-password.scss index c95a74f6a..a983f6d49 100644 --- a/assets/css/directives/toggle-password.scss +++ b/assets/css/directives/toggle-password.scss @@ -1,6 +1,6 @@ @import '../partials/combined'; -// Toggle password directive stylings +// Toggle password directive toggle-password { display: flex; flex-direction: row; @@ -19,7 +19,7 @@ toggle-password { background-color: $white; color: #231F20; - input#password-input { + input#current-password-input { width: 155px; margin-bottom: 0; padding-left: 0; diff --git a/assets/css/topcoder.scss b/assets/css/topcoder.scss index 7e2d1c7a2..d3bde2d1c 100644 --- a/assets/css/topcoder.scss +++ b/assets/css/topcoder.scss @@ -270,7 +270,7 @@ a { .has-length-between-range:before, .has-letter:before, - .has-symbol:before, + .has-symbol-or-number:before, .has-number:before { display: block; }