openstack/horizon
Code Issues Proposed changes

Merge "ngReorg - move framework.util.form to validators"

Browse Source
This commit is contained in:
Jenkins 2015-06-15 19:51:59 +00:00 committed by Gerrit Code Review
commit bb4626f0f9
7 changed files with 133 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
horizon/static/framework/util/form/form.js
View File

@ -1,71 +0,0 @@
(function() {
'use strict';
/**
* @ngdoc overview
* @name horizon.framework.util.form
*
* # horizon.framework.util.form
*
* The `horizon.framework.util.form` provides form directives and services.
*
* | Components |
* |----------------------------------------------------------|
* | {@link horizon.framework.util.form.hzPasswordMatch `hzPasswordMatch`} |
*
*/
var app = angular.module('horizon.framework.util.form', []);
/**
* @ngdoc directive
* @name hzPasswordMatch
*
* @description
* A directive to ensure that password matches.
* Changing the password or confirmation password triggers a validation check.
* However, only the confirmation password will show an error if match is false.
* The goal is to check that confirmation password matches the password,
* not whether the password matches the confirmation password.
* The behavior here is NOT bi-directional.
*
* @requires
* ng-model - model for confirmation password
*
* @scope
* hzPasswordMatch - form model to validate against
*
* @example:
* <form name="form">
* <input type='password' id="psw" ng-model="user.psw" name="psw">
* <input type='password' ng-model="user.cnf" hz-password-match="form.psw">
* </form>
*
* Note that id and name are required for the password input.
* This directive uses the form model and id for validation check.
*/
app.directive('hzPasswordMatch', function(){
return {
restrict: 'A',
require: 'ngModel',
scope: { pw: '=hzPasswordMatch' },
link: function(scope, element, attr, ctrl){
// helper function to check that password matches
function passwordCheck(){
scope.$apply(function(){
var match = (ctrl.$modelValue === scope.pw.$modelValue);
ctrl.$setValidity('match', match);
});
}
// this ensures that typing in either input
// will trigger the password match
var pwElement = $('#'+scope.pw.$name);
pwElement.on('keyup change', passwordCheck);
element.on('keyup change', passwordCheck);
} // end of link
}; // end of return
}); // end of directive
})();

93
horizon/static/framework/util/form/form.spec.js
View File

@ -1,93 +0,0 @@
(function(){
'use strict';
describe('horizon.framework.util.form module', function(){
it('should have been defined', function(){
expect(angular.module('horizon.framework.util.form')).toBeDefined();
});
});
describe('form directives', function() {
beforeEach(module('horizon.framework.widgets'));
beforeEach(module('horizon.framework.util.form'));
describe('hzPasswordMatch directive', function() {
var $compile, $rootScope;
var element, password, cpassword;
var markup =
'<form name="form">' +
'<input type="password" ng-model="user.password" name="password">' +
'<input type="password" ng-model="user.cpassword" ' +
'hz-password-match="form.password">' +
'</form>';
beforeEach(inject(function($injector){
$compile = $injector.get('$compile');
$rootScope = $injector.get('$rootScope').$new();
// generate dom from markup
element = $compile(markup)($rootScope);
password = element.children('input[name]');
cpassword = element.children('input[hz-password-match]');
// setup up initial data
$rootScope.user = {};
$rootScope.$digest();
}));
it('should be initially empty', function() {
expect(password.val()).toEqual('');
expect(password.val()).toEqual(cpassword.val());
expect(cpassword.hasClass('ng-valid')).toBe(true);
});
it('should not match if user changes only password', function(done) {
$rootScope.user.password = 'password';
$rootScope.$digest();
cpassword.change();
setTimeout(function(){
expect(cpassword.val()).not.toEqual(password.val());
expect(cpassword.hasClass('ng-invalid')).toBe(true);
done();
}, 1000);
});
it('should not match if user changes only confirmation password', function(done) {
$rootScope.user.cpassword = 'password';
$rootScope.$digest();
cpassword.change();
setTimeout(function(){
expect(cpassword.val()).not.toEqual(password.val());
expect(cpassword.hasClass('ng-invalid')).toBe(true);
done();
}, 1000);
});
it('should match if both passwords are the same', function(done) {
$rootScope.user.password = 'password';
$rootScope.user.cpassword = 'password';
$rootScope.$digest();
cpassword.change();
setTimeout(function(){
expect(cpassword.val()).toEqual(password.val());
expect(cpassword.hasClass('ng-valid')).toBe(true);
done();
}, 1000);
});
it('should not match if both passwords are different', function(done) {
$rootScope.user.password = 'password123';
$rootScope.user.cpassword = 'password345';
$rootScope.$digest();
cpassword.change();
setTimeout(function(){
expect(cpassword.val()).not.toEqual(password.val());
expect(cpassword.hasClass('ng-invalid')).toBe(true);
done();
}, 1000);
});
}); // end of hzPasswordMatch directive
}); // end of form directives
})();

1
horizon/static/framework/util/util.module.js
View File

@ -4,7 +4,6 @@
angular.module('horizon.framework.util', [
'horizon.framework.util.bind-scope',
'horizon.framework.util.filters',
'horizon.framework.util.form',
'horizon.framework.util.i18n',
'horizon.framework.util.tech-debt',
'horizon.framework.util.workflow',

55
horizon/static/framework/util/validators/validators.js
View File

@ -15,6 +15,7 @@
* |---------------------------------------------------------------------------------|
* | {@link horizon.framework.util.validators.directive:validateNumberMax `validateNumberMax`} |
* | {@link horizon.framework.util.validators.directive:validateNumberMin `validateNumberMin`} |
* | {@link horizon.framework.util.validators.directive:hzPasswordMatch `hzPasswordMatch`} |
*
*/
angular.module('horizon.framework.util.validators', [])
@ -155,6 +156,58 @@
});
}
};
});
})
/**
* @ngdoc directive
* @name hzPasswordMatch
* @element ng-model
*
* @description
* A directive to ensure that password matches.
* Changing the password or confirmation password triggers a validation check.
* However, only the confirmation password will show an error if match is false.
* The goal is to check that confirmation password matches the password,
* not whether the password matches the confirmation password.
* The behavior here is NOT bi-directional.
*
* @restrict A
*
* @scope
* hzPasswordMatch - form model to validate against
*
* @example:
* <form name="form">
* <input type='password' id="psw" ng-model="user.psw" name="psw">
* <input type='password' ng-model="user.cnf" hz-password-match="form.psw">
* </form>
*
* Note that id and name are required for the password input.
* This directive uses the form model and id for validation check.
*/
.directive('hzPasswordMatch', function(){
return {
restrict: 'A',
require: 'ngModel',
scope: { pw: '=hzPasswordMatch' },
link: function(scope, element, attr, ctrl){
// helper function to check that password matches
function passwordCheck(){
scope.$apply(function(){
var match = (ctrl.$modelValue === scope.pw.$modelValue);
ctrl.$setValidity('match', match);
});
}
// this ensures that typing in either input
// will trigger the password match
var pwElement = $('#'+scope.pw.$name);
pwElement.on('keyup change', passwordCheck);
element.on('keyup change', passwordCheck);
} // end of link
}; // end of return
}); // end of directive
}());

79
horizon/static/framework/util/validators/validators.spec.js
View File

@ -97,6 +97,85 @@
});
describe('hzPasswordMatch directive', function() {
var $compile, $rootScope;
var element, password, cpassword;
var markup =
'<form name="form">' +
'<input type="password" ng-model="user.password" name="password">' +
'<input type="password" ng-model="user.cpassword" ' +
'hz-password-match="form.password">' +
'</form>';
beforeEach(inject(function($injector){
$compile = $injector.get('$compile');
$rootScope = $injector.get('$rootScope').$new();
// generate dom from markup
element = $compile(markup)($rootScope);
password = element.children('input[name]');
cpassword = element.children('input[hz-password-match]');
// setup up initial data
$rootScope.user = {};
$rootScope.$digest();
}));
it('should be initially empty', function() {
expect(password.val()).toEqual('');
expect(password.val()).toEqual(cpassword.val());
expect(cpassword.hasClass('ng-valid')).toBe(true);
});
it('should not match if user changes only password', function(done) {
$rootScope.user.password = 'password';
$rootScope.$digest();
cpassword.change();
setTimeout(function(){
expect(cpassword.val()).not.toEqual(password.val());
expect(cpassword.hasClass('ng-invalid')).toBe(true);
done();
}, 1000);
});
it('should not match if user changes only confirmation password', function(done) {
$rootScope.user.cpassword = 'password';
$rootScope.$digest();
cpassword.change();
setTimeout(function(){
expect(cpassword.val()).not.toEqual(password.val());
expect(cpassword.hasClass('ng-invalid')).toBe(true);
done();
}, 1000);
});
it('should match if both passwords are the same', function(done) {
$rootScope.user.password = 'password';
$rootScope.user.cpassword = 'password';
$rootScope.$digest();
cpassword.change();
setTimeout(function(){
expect(cpassword.val()).toEqual(password.val());
expect(cpassword.hasClass('ng-valid')).toBe(true);
done();
}, 1000);
});
it('should not match if both passwords are different', function(done) {
$rootScope.user.password = 'password123';
$rootScope.user.cpassword = 'password345';
$rootScope.$digest();
cpassword.change();
setTimeout(function(){
expect(cpassword.val()).not.toEqual(password.val());
expect(cpassword.hasClass('ng-invalid')).toBe(true);
done();
}, 1000);
});
}); // end of hzPasswordMatch directive
});
})();

2
horizon/test/jasmine/jasmine_tests.py
View File

@ -42,7 +42,6 @@ class ServicesTests(test.JasmineTests):
'framework/util/util.module.js',
'framework/util/bind-scope/bind-scope.js',
'framework/util/filters/filters.js',
'framework/util/form/form.js',
'framework/util/i18n/i18n.js',
'framework/util/validators/validators.js',
'framework/util/workflow/workflow.js',
@ -89,7 +88,6 @@ class ServicesTests(test.JasmineTests):
'framework/util/bind-scope/bind-scope.spec.js',
'framework/util/filters/filters.spec.js',
'framework/util/form/form.spec.js',
'framework/util/i18n/i18n.spec.js',
'framework/util/tech-debt/helper-functions.spec.js',
'framework/util/validators/validators.spec.js',

1
openstack_dashboard/templates/horizon/_scripts.html
View File

@ -39,7 +39,6 @@
<script src='{{ STATIC_URL }}framework/util/util.module.js'></script>
<script src='{{ STATIC_URL }}framework/util/bind-scope/bind-scope.js'></script>
<script src='{{ STATIC_URL }}framework/util/filters/filters.js'></script>
<script src='{{ STATIC_URL }}framework/util/form/form.js'></script>
<script src='{{ STATIC_URL }}framework/util/i18n/i18n.js'></script>
<script src='{{ STATIC_URL }}framework/util/validators/validators.js'></script>
<script src='{{ STATIC_URL }}framework/util/workflow/workflow.js'></script>