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

Commit 7cf14f8

Browse files
author
vikasrohit
committed
Merge pull request #594 from appirio-tech/feature/sup-2796-persistently-show-checkbox-togglepassword
Feature/sup 2796 persistently show checkbox togglepassword
2 parents f35b651 + 8681775 commit 7cf14f8

File tree

4 files changed

+145
-15
lines changed

4 files changed

+145
-15
lines changed

‎app/account/login/login.controller.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
$log = $log.getInstance("LoginController");
1111
vm.$stateParams = $stateParams;
1212
vm.passwordReset = false;
13-
vm.currentPasswordDefaultPlaceholder = "Password";
1413
vm.loginErrors = {
1514
USERNAME_NONEXISTANT: false,
1615
WRONG_PASSWORD: false,

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
templateUrl: 'directives/account/toggle-password/toggle-password.html',
1111
link: function(scope, element, attrs, formController) {
1212
var vm = scope.vm;
13-
vm.currentPasswordField = formController.currentPassword;
14-
vm.currentPasswordPlaceholder = vm.currentPasswordDefaultPlaceholder;
13+
scope.currentPasswordDefaultPlaceholder = attrs.placeholder || 'Password';
14+
scope.currentPasswordPlaceholder = scope.currentPasswordDefaultPlaceholder;
1515
vm.currentPassword = '';
1616

1717
var currentPasswordInput = element.children()[0];
@@ -27,8 +27,7 @@
2727
});
2828

2929
vm.onCPFocus = function(event) {
30-
vm.currentPasswordFocus = true;
31-
vm.currentPasswordPlaceholder = '';
30+
scope.currentPasswordPlaceholder = '';
3231
element.addClass('focus');
3332
}
3433

@@ -38,15 +37,11 @@
3837

3938
// If you are blurring from the password input and clicking the checkbox
4039
if (relatedTarget.attr('type') === 'checkbox' && relatedTarget.attr('id') === 'currentPasswordCheckbox') {
41-
vm.currentPasswordFocus = true;
42-
vm.currentPasswordPlaceholder = '';
40+
scope.currentPasswordPlaceholder = '';
4341
currentPasswordInput.focus();
4442
} else {
45-
// If you are blurring from the password input and clicking anywhere but the checkbox
46-
vm.currentPasswordFocus = false;
47-
4843
if (vm.currentPassword === '' || vm.currentPassword === undefined) {
49-
vm.currentPasswordPlaceholder = vm.currentPasswordDefaultPlaceholder;
44+
scope.currentPasswordPlaceholder = scope.currentPasswordDefaultPlaceholder;
5045
formController.currentPassword.$setPristine();
5146
}
5247
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ input#current-password-input(
77

88
name="currentPassword",
99
type="password",
10-
placeholder="{{vm.currentPasswordPlaceholder}}",
10+
placeholder="{{currentPasswordPlaceholder}}",
1111

1212
required)
1313

14-
label(ng-show="vm.currentPasswordFocus || vm.currentPasswordField.$dirty") #[input(type="checkbox", id="currentPasswordCheckbox", ng-model="focusOnCurrentPasswordInput", ng-change="vm.toggleTypeAttribute()")] Show
14+
label #[input(type="checkbox", id="currentPasswordCheckbox", ng-model="focusOnCurrentPasswordInput", ng-change="vm.toggleTypeAttribute()")] Show

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

Lines changed: 138 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,150 @@
22
describe('Toggle Password Directive', function() {
33
var scope;
44
var element;
5-
// var challenge = mockData.getMockChallengeWithUserDetails();
6-
// var spotlightChallenge = mockData.getMockSpotlightChallenges()[0];
75

86
beforeEach(function() {
97
bard.appModule('topcoder');
108
bard.inject(this, '$compile', '$rootScope');
119
scope = $rootScope.$new();
10+
scope.vm = {};
1211
});
1312

1413
bard.verifyNoOutstandingHttpRequests();
14+
15+
describe('Toggle Password Directive', function() {
16+
var togglePassword, controller, formController, passwordFormFieldSpy;
17+
18+
beforeEach(function() {
19+
var form = angular.element('<form><toggle-password /></form>)');
20+
element = form.find('toggle-password');
21+
var formElement = $compile(form)(scope);
22+
scope.$digest();
23+
24+
// controller = element.controller('togglePassword');
25+
formController = form.controller('form');
26+
passwordFormFieldSpy = sinon.spy(formController.currentPassword, '$setPristine');
27+
});
28+
29+
afterEach(function() {
30+
// do nohting
31+
});
32+
33+
it('should have password default placeholder', function() {
34+
expect(scope.currentPasswordDefaultPlaceholder).to.exist.to.equal('Password');
35+
expect(scope.currentPasswordPlaceholder).to.exist.to.equal('Password');
36+
});
37+
38+
it('should not have focus class', function() {
39+
expect(element.hasClass('focus')).to.be.false;
40+
});
41+
42+
it('should trigger click handler ', function() {
43+
var mockFocus = sinon.spy(element.find('input')[0], 'focus');
44+
element.trigger('click');
45+
expect(mockFocus).to.be.calledOnce;
46+
});
47+
48+
it('should trigger focus handler ', function() {
49+
var pwsIntputElement = angular.element(element.find('input')[0]);
50+
pwsIntputElement.triggerHandler('focus');
51+
expect(element.hasClass('focus')).to.be.true;
52+
});
53+
54+
it('should trigger blur handler with form field pristine ', function() {
55+
var pwsIntputElement = angular.element(element.find('input')[0]);
56+
// focus it first
57+
pwsIntputElement.triggerHandler('focus');
58+
// verifies if focus class is added
59+
expect(element.hasClass('focus')).to.be.true;
60+
// now blurs from it
61+
pwsIntputElement.triggerHandler('blur');
62+
// focus class should not be there
63+
expect(element.hasClass('focus')).to.be.false;
64+
// password field's setPristine method should be called once because currentPassword is empty
65+
expect(passwordFormFieldSpy).to.be.calledOnce;
66+
});
67+
68+
it('should trigger blur handler without form field pristine ', function() {
69+
scope.vm.currentPassword = 'some-password';
70+
scope.$digest();
71+
var pwsIntputElement = angular.element(element.find('input')[0]);
72+
// focus it first
73+
pwsIntputElement.triggerHandler('focus');
74+
// verifies if focus class is added
75+
expect(element.hasClass('focus')).to.be.true;
76+
// now blurs from it
77+
pwsIntputElement.triggerHandler('blur');
78+
// focus class should not be there
79+
expect(element.hasClass('focus')).to.be.false;
80+
// password field's setPristine method should not be called because currentPassword is non-empty
81+
expect(passwordFormFieldSpy).not.to.be.called;
82+
});
83+
84+
it('should keep focus on password field on blurring to checkbox ', function() {
85+
86+
var pwsIntputElement = angular.element(element.find('input')[0]);
87+
// focus it first
88+
pwsIntputElement.triggerHandler('focus');
89+
// verifies if focus class is added
90+
expect(element.hasClass('focus')).to.be.true;
91+
// now blurs from it
92+
93+
var e = jQuery.Event("blur");
94+
e.relatedTarget = {
95+
getAttribute: function(name) {
96+
if (name === 'type') return 'checkbox';
97+
if (name === 'id') return 'currentPasswordCheckbox';
98+
}
99+
};
100+
//mock focus event
101+
var mockFocus = sinon.spy(element.find('input')[0], 'focus');
102+
// trigger event
103+
pwsIntputElement.trigger(e);
104+
105+
// focus should be called once
106+
expect(mockFocus).to.be.calledOnce;
107+
// password field placeholde should be empty
108+
expect(scope.currentPasswordPlaceholder).to.exist.to.equal('');
109+
});
110+
111+
it('should change type of input field to be text ', function() {
112+
var pwsIntputElement = angular.element(element.find('input')[0]);
113+
var checkbox = angular.element(element.find('input')[1]);
114+
// before clicking on checkbox, it should have password type
115+
expect(pwsIntputElement.attr('type')).to.equal('password');
116+
checkbox.trigger('click');
117+
// after clicking on checkbox, it should have text type
118+
expect(pwsIntputElement.attr('type')).to.equal('text');
119+
});
120+
121+
it('should change type of input field to be password ', function() {
122+
var pwsIntputElement = angular.element(element.find('input')[0]);
123+
var checkbox = angular.element(element.find('input')[1]);
124+
// before clicking on checkbox, it should have password type
125+
expect(pwsIntputElement.attr('type')).to.equal('password');
126+
checkbox.trigger('click');
127+
// after clicking on checkbox, it should have text type
128+
expect(pwsIntputElement.attr('type')).to.equal('text');
129+
// click again to uncheck the checkbox
130+
checkbox.trigger('click');
131+
// after unchecking the checkbox, it should have password type
132+
expect(pwsIntputElement.attr('type')).to.equal('password');
133+
});
134+
135+
it('should trigger keyup handler with enter/return key ', function() {
136+
var mockBlur = sinon.spy(element.find('input')[0], 'blur');
137+
var e = jQuery.Event("keyup");
138+
e.keyCode = 13;
139+
element.trigger(e);
140+
expect(mockBlur).to.be.calledOnce;
141+
});
142+
143+
it('should NOT trigger keyup handler with non enter/return key ', function() {
144+
var mockBlur = sinon.spy(element.find('input')[0], 'blur');
145+
var e = jQuery.Event("keyup");
146+
e.keyCode = 14;
147+
element.trigger(e);
148+
expect(mockBlur).not.to.be.called;
149+
});
150+
});
15151
});

0 commit comments

Comments
 (0)