jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

webadmin: angular based form validation for create user

Browse Source
This commit is contained in:
Johannes Zellner
2014-09-29 09:48:37 -07:00
parent b3d93742b3
commit 2ca9bedf45
2 changed files with 45 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webadmin/views/usercreate.html
+42 -23
View File
@@ -4,29 +4,48 @@
<div class="col-md-6">
<h1>Create User</h1>
<form class="form-signin" role="form" ng-submit="submit()">
<div class="form-group" ng-class="{ 'has-error': error.username }">
<label class="control-label" for="inputUsername">Username</label>
<input type="text" class="form-control" ng-model="username" id="inputUsername" autofocus>
<label class="control-label" ng-show="error.username">{{error.username}}</label>
</div>
<div class="form-group" ng-class="{ 'has-error': error.email }">
<label class="control-label" for="inputEmail">Email</label>
<input type="email" class="form-control" ng-model="email" id="inputEmail">
<label class="control-label" ng-show="error.email">{{error.email}}</label>
</div>
<div class="form-group" ng-class="{ 'has-error': error.password }">
<label class="control-label" for="inputPassword">Password</label>
<input type="password" class="form-control" ng-model="password" id="inputPassword">
<label class="control-label" ng-show="error.password">{{error.password}}</label>
</div>
<div class="form-group" ng-class="{ 'has-error': error.passwordRepeat }">
<label class="control-label" for="inputPasswordRepeat">Repeat Password</label>
<input type="password" class="form-control" ng-model="passwordRepeat" id="inputPasswordRepeat">
<label class="control-label" ng-show="error.passwordRepeat">{{error.passwordRepeat}}</label>
</div>
<input class="btn btn-default btn-outline" ng-click="cancel()" type="button" value="Cancel"/>
<input class="btn btn-primary btn-outline pull-right" type="submit" ng-disabled="{{disabled}}" value="Create User"/>
<form name="createuser_form" class="form-signin" role="form" novalidate ng-submit="submit()">
<fieldset>
<div class="form-group" ng-class="{ 'has-error': (createuser_form.username.$dirty && createuser_form.username.$invalid) || alreadyTaken }">
<label class="control-label" for="inputUsername">Username</label>
<div class="control-label" ng-show="(createuser_form.username.$dirty && createuser_form.username.$invalid) || alreadyTaken">
<small ng-show="createuser_form.username.$error.required">A username is required</small>
<small ng-show="createuser_form.username.$error.minlength">The username is too short</small>
<small ng-show="createuser_form.username.$error.maxlength">The username is too long</small>
<small ng-show="alreadyTaken && alreadyTaken === username">The username is already taken</small>
</div>
<input type="text" class="form-control" ng-model="username" id="inputUsername" name="username" ng-maxlength="512" ng-minlength="3" required autofocus>
</div>
<div class="form-group" ng-class="{ 'has-error': createuser_form.email.$dirty && createuser_form.email.$invalid }">
<label class="control-label" for="inputEmail">Email</label>
<div class="control-label" ng-show="createuser_form.email.$dirty && createuser_form.email.$invalid">
<small ng-show="createuser_form.email.$error.required">An email is required</small>
<small ng-show="createuser_form.email.$error.email">This is not a valid email</small>
</div>
<input type="email" class="form-control" ng-model="email" id="inputEmail" name="email" required>
</div>
<div class="form-group" ng-class="{ 'has-error': createuser_form.password.$dirty && createuser_form.password.$invalid }">
<label class="control-label" for="inputPassword">Password</label>
<div class="control-label" ng-show="createuser_form.password.$dirty && createuser_form.password.$invalid">
<small ng-show="createuser_form.password.$error.required">A password is required</small>
<small ng-show="createuser_form.password.$error.minlength">The password is too short</small>
<small ng-show="createuser_form.password.$error.maxlength">The password is too long</small>
</div>
<input type="password" class="form-control" ng-model="password" id="inputPassword" name="password" ng-maxlength="512" ng-minlength="3" required>
</div>
<div class="form-group" ng-class="{ 'has-error': (createuser_form.passwordRepeat.$dirty && createuser_form.passwordRepeat.$invalid) || (createuser_form.passwordRepeat.$dirty && password !== passwordRepeat) }">
<label class="control-label" for="inputPasswordRepeat">Repeat Password</label>
<div class="control-label" ng-show="(createuser_form.passwordRepeat.$dirty && createuser_form.passwordRepeat.$invalid) || (createuser_form.passwordRepeat.$dirty && password !== passwordRepeat)">
<small ng-show="createuser_form.passwordRepeat.$error.required">Please repeat your password</small>
<small ng-show="createuser_form.passwordRepeat.$error.minlength">The password is too short</small>
<small ng-show="createuser_form.passwordRepeat.$error.maxlength">The password is too long</small>
<small ng-show="createuser_form.passwordRepeat.$dirty && password !== passwordRepeat">The passwords don't match</small>
</div>
<input type="password" class="form-control" ng-model="passwordRepeat" id="inputPasswordRepeat" name="passwordRepeat" ng-maxlength="512" ng-minlength="3" required>
</div>
<input class="btn btn-default btn-outline" ng-click="cancel()" type="button" value="Cancel"/>
<input class="btn btn-primary btn-outline pull-right" type="submit" ng-disabled="createuser_form.$invalid || alreadyTaken === username" value="Create User"/>
</fieldset>
</form>
</div>
webadmin/views/usercreate.js
+3 -28
View File
@@ -9,40 +9,15 @@ function UserCreateController ($scope, $routeParams, Client) {
$scope.password = '';
$scope.passwordRepeat = '';
$scope.email = 'xx@xx.xx';
$scope.error = {};
$scope.alreadyTaken = '';
$scope.submit = function () {
$scope.error.username = null;
$scope.error.email = null;
$scope.error.password = null;
$scope.error.passwordRepeat = null;
if (!$scope.username) {
$scope.error.username = 'Username must not be empty';
return;
}
if (!$scope.email) {
$scope.error.email = 'Email must not be empty';
return;
}
if (!$scope.password) {
$scope.error.password = 'Password must not be empty';
return;
}
if ($scope.password !== $scope.passwordRepeat) {
$scope.error.passwordRepeat = 'Passwords do not match';
$scope.passwordRepeat = '';
return;
}
$scope.alreadyTaken = '';
$scope.disabled = true;
Client.createUser($scope.username, $scope.password, $scope.email, function (error) {
if (error && error.statusCode === 409) {
$scope.error.username = 'Username already taken';
$scope.alreadyTaken = $scope.username;
return console.error('Username already taken');
}
if (error) console.error('Unable to create user.', error);