Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit 4701d5d

Browse files
author
Nick Litwin
committed
Add show/hide option for current password on the change password settings page
1 parent ed3215f commit 4701d5d

15 files changed

+163
-23
lines changed

‎app/account/register/register.jade

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
p.form-error(ng-show="vm.registerForm.email.$dirty && vm.registerForm.email.$invalid") Please enter a valid email address.
6464

6565
.validation-bar(ng-class="{ 'success-bar': (vm.registerForm.password.$valid) }")
66-
toggle-password(ng-if="!vm.isSocialRegistration")
66+
toggle-password-with-tips(ng-if="!vm.isSocialRegistration")
6767

6868
.tips.password-tips(ng-show="vm.passwordFocus")
6969
h3 Password Tips:
@@ -72,7 +72,7 @@
7272

7373
p(ng-class="{ 'has-letter': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasLetter) }") At least one letter
7474

75-
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
75+
p(ng-class="{ 'has-symbol-or-number': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol
7676

7777
button(type="submit", ng-disabled="vm.registerForm.$invalid", ng-class="{'enabled-button': vm.registerForm.$valid}") Join
7878

‎app/account/reset-password/reset-password.jade

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
form.reset-form(name='vm.resetPasswordForm', role="form", ng-submit="vm.resetPasswordForm.$valid && vm.resetPassword()", novalidate)
3737

3838
.validation-bar(ng-class="{ 'success-bar': (vm.resetPasswordForm.password.$valid) }")
39-
toggle-password
39+
toggle-password-with-tips
4040

4141
.tips.password-tips(ng-show="vm.passwordFocus")
4242
h3 Password Tips:
@@ -45,7 +45,7 @@
4545

4646
p(ng-class="{ 'has-letter': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasLetter) }") At least one letter
4747

48-
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
48+
p(ng-class="{ 'has-symbol-or-number': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol
4949

5050
.form-errors
5151
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

‎app/directives/account/toggle-password-with-tips/toggle-password-with-tips.directive.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
var relatedTarget = angular.element(event.relatedTarget);
3636

3737
// If you are blurring from the password input and clicking the checkbox
38-
if (relatedTarget.attr('type') === 'checkbox') {
38+
if (relatedTarget.attr('type') === 'checkbox' && relatedTarget.attr('id') === 'passwordCheckbox') {
3939
vm.passwordFocus = true;
4040
vm.placeholder = '';
4141
} else {

‎app/directives/account/toggle-password-with-tips/toggle-password-with-tips.jade

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ input#password-input(
33
ng-model-options="{allowInvalid: true}",
44

55
ng-hide="vm.isSocialRegistration",
6-
focus-on="refocus",
6+
focus-on="focusOnInput",
77

88
ng-focus="vm.onFocus($event)",
99
ng-blur="vm.onBlur($event)",
@@ -15,8 +15,7 @@ input#password-input(
1515
ng-minlength="8",
1616
ng-maxlength="64",
1717
has-letter,
18-
has-symbol,
19-
has-number,
18+
has-symbol-or-number,
2019
required)
2120

22-
label(ng-show="vm.passwordFocus || vm.passwordField.$dirty") #[input(type="checkbox", ng-model="refocus", ng-change="vm.toggleInputType()")] Show
21+
label(ng-show="vm.passwordFocus || vm.passwordField.$dirty") #[input(type="checkbox", id="passwordCheckbox", ng-model="focusOnInput", ng-change="vm.toggleInputType()")] Show

‎app/directives/account/toggle-password/toggle-password.directive.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
(function() {
2+
'use strict';
3+
4+
angular.module('tcUIComponents').directive('togglePassword', togglePassword);
5+
6+
function togglePassword() {
7+
return {
8+
restrict: 'E',
9+
require: '^form',
10+
templateUrl: 'directives/account/toggle-password/toggle-password.html',
11+
link: function(scope, element, attrs, formController) {
12+
var vm = scope.vm;
13+
vm.currentPasswordField = formController.currentPassword;
14+
vm.currentPasswordPlaceholder = vm.currentPasswordDefaultPlaceholder;
15+
vm.currentPassword = '';
16+
17+
var currentPasswordInput = element.children()[0];
18+
19+
element.bind('click', function(event) {
20+
currentPasswordInput.focus();
21+
});
22+
23+
element.bind('keyup', function(event) {
24+
if (event.keyCode === 13) {
25+
currentPasswordInput.blur();
26+
}
27+
});
28+
29+
vm.onCPFocus = function(event) {
30+
vm.currentPasswordFocus = true;
31+
vm.currentPasswordPlaceholder = '';
32+
}
33+
34+
vm.onCPBlur = function(event) {
35+
var relatedTarget = angular.element(event.relatedTarget);
36+
37+
// If you are blurring from the password input and clicking the checkbox
38+
if (relatedTarget.attr('type') === 'checkbox' && relatedTarget.attr('id') === 'currentPasswordCheckbox') {
39+
vm.currentPasswordFocus = true;
40+
vm.currentPasswordPlaceholder = '';
41+
} else {
42+
// If you are blurring from the password input and clicking anywhere but the checkbox
43+
vm.currentPasswordFocus = false;
44+
45+
if (vm.currentPassword === '' || vm.currentPassword === undefined) {
46+
vm.currentPasswordPlaceholder = vm.currentPasswordDefaultPlaceholder;
47+
formController.currentPassword.$setPristine();
48+
}
49+
}
50+
};
51+
52+
vm.toggleTypeAttribute = function() {
53+
var $currentPasswordInput = angular.element(currentPasswordInput);
54+
55+
if ($currentPasswordInput.attr('type') === 'text') {
56+
$currentPasswordInput.attr('type', 'password');
57+
} else {
58+
$currentPasswordInput.attr('type', 'text');
59+
}
60+
}
61+
}
62+
};
63+
}
64+
})();

‎app/directives/account/toggle-password/toggle-password.jade

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
input#current-password-input(
2+
ng-model="vm.currentPassword",
3+
ng-model-options="{allowInvalid: true}",
4+
5+
ng-hide="vm.isSocialRegistration",
6+
focus-on="focusOnCurrentPasswordInput",
7+
8+
ng-focus="vm.onCPFocus($event)",
9+
ng-blur="vm.onCPBlur($event)",
10+
11+
name="currentPassword",
12+
type="password",
13+
placeholder="{{vm.currentPasswordPlaceholder}}",
14+
15+
required)
16+
17+
label(ng-show="vm.currentPasswordFocus || vm.currentPasswordField.$dirty") #[input(type="checkbox", id="currentPasswordCheckbox", ng-model="focusOnCurrentPasswordInput", ng-change="vm.toggleTypeAttribute()")] Show

‎app/directives/account/toggle-password/toggle-password.spec.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* jshint -W117, -W030 */
2+
describe('Toggle Password Directive', function() {
3+
var scope;
4+
var element;
5+
// var challenge = mockData.getMockChallengeWithUserDetails();
6+
// var spotlightChallenge = mockData.getMockSpotlightChallenges()[0];
7+
8+
beforeEach(function() {
9+
bard.appModule('topcoder');
10+
bard.inject(this, '$compile', '$rootScope');
11+
scope = $rootScope.$new();
12+
});
13+
14+
bard.verifyNoOutstandingHttpRequests();
15+
});

‎app/directives/account/validate-register.directive.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
angular.module('tcUIComponents')
55
.directive('hasLetter', hasLetter)
6-
.directive('hasSymbol', hasSymbol)
6+
.directive('hasSymbolOrNumber', hasSymbolOrNumber)
77
.directive('hasNumber', hasNumber)
88
.directive('usernameIsFree', usernameIsFree)
99
.directive('emailIsAvailable', emailIsAvailable);
@@ -22,12 +22,12 @@
2222
};
2323
}
2424

25-
function hasSymbol() {
25+
function hasSymbolOrNumber() {
2626
return {
2727
require: 'ngModel',
2828
link: function(scope, element, attrs, ctrl) {
29-
ctrl.$validators.hasSymbol = function(modelValue, viewValue) {
30-
if (/[-!$@#%^&*()_+|~=`{}\[\]:";'<>?,.\/]/.test(viewValue)) {
29+
ctrl.$validators.hasSymbolOrNumber = function(modelValue, viewValue) {
30+
if (/[-!$@#%^&*()_+|~=`{}\[\]:";'<>?,.\/]/.test(viewValue) || /[\d]/.test(viewValue)) {
3131
return true;
3232
}
3333
return false;

‎app/directives/focus-on.directive.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@
33

44
angular.module('tcUIComponents').directive('focusOn', focusOn);
55

6-
focusOn.$inject = ['$timeout'];
6+
focusOn.$inject = ['$timeout', '$parse'];
77

8-
function focusOn($timeout) {
8+
function focusOn($timeout, $parse) {
99
return function(scope, element, attr) {
10-
scope.$watch('refocus', function(newValue) {
10+
var model = $parse(attr.focusOn);
11+
scope.$watch(model, function(newValue) {
1112
$timeout(function() {
1213
if (newValue !== undefined) {
1314
element[0].focus();

‎app/index.jade

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ html
5050
link(rel="stylesheet", href="assets/css/member-dashboard/community-updates.css")
5151
link(rel="stylesheet", href="assets/css/layout/header.css")
5252
link(rel="stylesheet", href="assets/css/layout/footer.css")
53+
link(rel="stylesheet", href="assets/css/directives/toggle-password-with-tips.css")
5354
link(rel="stylesheet", href="assets/css/directives/toggle-password.css")
5455
link(rel="stylesheet", href="assets/css/directives/tc-section.css")
5556
link(rel="stylesheet", href="assets/css/directives/tc-paginator.css")
@@ -125,6 +126,7 @@ html
125126
script(src="blocks/logger/logger.js")
126127
script(src="directives/tcui-components.module.js")
127128
script(src="directives/account/toggle-password/toggle-password.directive.js")
129+
script(src="directives/account/toggle-password-with-tips/toggle-password-with-tips.directive.js")
128130
script(src="directives/account/validate-email.directive.js")
129131
script(src="directives/account/validate-login.directive.js")
130132
script(src="directives/account/validate-register.directive.js")

‎app/settings/update-password/update-password.controller.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
activate();
1313

1414
function activate() {
15-
vm.defaultPlaceholder = 'Enter New Password';
15+
vm.defaultPlaceholder = 'New Password';
16+
vm.currentPasswordDefaultPlaceholder = 'Current Password';
1617
vm.username = userData.handle;
1718
vm.email = userData.email;
1819
}
@@ -23,7 +24,9 @@
2324
vm.password = '';
2425
vm.currentPassword = '';
2526
vm.newPasswordForm.$setPristine();
27+
vm.currentPasswordFocus = false;
2628
vm.placeholder = vm.defaultPlaceholder;
29+
vm.currentPasswordPlaceholder = vm.currentPasswordDefaultPlaceholder;
2730

2831
$log.info('Your password has been updated.');
2932
})

‎app/settings/update-password/update-password.jade

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33

44
.reset-password
55
form(name="vm.newPasswordForm", role="form", ng-submit="vm.newPasswordForm.$valid && vm.submitNewPassword()", novalidate)
6-
input(name="currentPassword", type="password", placeholder="Enter Current Password", ng-model="vm.currentPassword")
6+
toggle-password
77

88
.form-errors
99
p.form-error(ng-show="vm.newPasswordForm.currentPassword.$error.wrongPassword") Your current password is incorrect. Please check that you entered the right one.
1010

1111
.validation-bar(ng-class="{ 'success-bar': (vm.newPasswordForm.password.$valid) }")
12-
toggle-password
12+
toggle-password-with-tips
1313

1414
.tips.password-tips(ng-show="vm.passwordFocus")
1515
h3 Password Tips:
@@ -18,6 +18,6 @@
1818

1919
p(ng-class="{ 'has-letter': (vm.newPasswordForm.password.$dirty && !vm.newPasswordForm.password.$error.hasLetter) }") At least one letter
2020

21-
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
21+
p(ng-class="{ 'has-symbol-or-number': (vm.newPasswordForm.password.$dirty && !vm.newPasswordForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol
2222

2323
button(type="submit", ng-disabled="vm.newPasswordForm.$invalid", ng-class="{'enabled-button': vm.newPasswordForm.$valid}") Save

‎assets/css/directives/toggle-password-with-tips.scss

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import '../partials/combined';
2+
3+
// Toggle password with password tips directive
4+
toggle-password-with-tips {
5+
display: flex;
6+
flex-direction: row;
7+
align-items: center;
8+
justify-content: space-between;
9+
10+
height: 40px;
11+
max-width: 300px;
12+
margin-bottom: 10px;
13+
padding-left: 15px;
14+
padding-right: 10px;
15+
border: 0;
16+
17+
@include source-sans;
18+
font-size: 16px;
19+
background-color: $white;
20+
color: #231F20;
21+
22+
input#password-input {
23+
width: 155px;
24+
margin-bottom: 0;
25+
padding-left: 0;
26+
outline: 0;
27+
}
28+
29+
label {
30+
text-transform: uppercase;
31+
font-size: 12px;
32+
color: #808285;
33+
34+
input[type="checkbox"] {
35+
width: 15px;
36+
margin: 0;
37+
}
38+
}
39+
}

‎assets/css/directives/toggle-password.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import '../partials/combined';
22

3-
// Toggle password directive stylings
3+
// Toggle password directive
44
toggle-password {
55
display: flex;
66
flex-direction: row;
@@ -19,7 +19,7 @@ toggle-password {
1919
background-color: $white;
2020
color: #231F20;
2121

22-
input#password-input {
22+
input#current-password-input {
2323
width: 155px;
2424
margin-bottom: 0;
2525
padding-left: 0;

‎assets/css/topcoder.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,7 @@ a {
270270

271271
.has-length-between-range:before,
272272
.has-letter:before,
273-
.has-symbol:before,
273+
.has-symbol-or-number:before,
274274
.has-number:before {
275275
display: block;
276276
}

0 commit comments

Comments
 (0)