From 2ca9bedf45c5d1dac78b9545ce775cb7b05a2e7c Mon Sep 17 00:00:00 2001
From: Johannes Zellner <webmaster@nebulon.de>
Date: Mon, 29 Sep 2014 09:48:37 -0700
Subject: [PATCH] webadmin: angular based form validation for create user

---
 webadmin/views/usercreate.html | 65 ++++++++++++++++++++++------------
 webadmin/views/usercreate.js   | 31 ++--------------
 2 files changed, 45 insertions(+), 51 deletions(-)

diff --git a/webadmin/views/usercreate.html b/webadmin/views/usercreate.html
index 8c7bb5528..1afe610ee 100644
--- a/webadmin/views/usercreate.html
+++ b/webadmin/views/usercreate.html
@@ -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>
diff --git a/webadmin/views/usercreate.js b/webadmin/views/usercreate.js
index 9c27b44d4..10f653291 100644
--- a/webadmin/views/usercreate.js
+++ b/webadmin/views/usercreate.js
@@ -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);