From f058c266d209955acc96eaeff3a90076de860648 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Fri, 1 Apr 2016 16:23:29 +0200
Subject: [PATCH] Add username and display name form fields on account setup

---
 src/oauth2views/password_setup.ejs | 32 +++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/oauth2views/password_setup.ejs b/src/oauth2views/password_setup.ejs
index bf5164d4d..6beee3349 100644
--- a/src/oauth2views/password_setup.ejs
+++ b/src/oauth2views/password_setup.ejs
@@ -13,7 +13,8 @@ app.controller('Controller', [function () {}]);
 </script>
 
 <center>
-    <h1>Hello <%= user.username %>, set a password</h1>
+    <h1>Hello <%= user.username %>, welcome to your Cloudron.</h1>
+    <h4>Setup your account and password.</h4>
 </center>
 
 <div class="container" ng-app="Application" ng-controller="Controller">
@@ -23,20 +24,37 @@ app.controller('Controller', [function () {}]);
                 <input type="hidden" name="_csrf" value="<%= csrf %>"/>
                 <input type="hidden" name="resetToken" value="<%= resetToken %>"/>
 
-                <div class="form-group" ng-class="{ 'has-error': setupForm.password.$dirty && setupForm.password.$invalid }">
-                    <label class="control-label" for="inputPassword">New Password</label>
+                <div class="form-group" ng-class="{ 'has-error': (setupForm.username.$dirty && setupForm.username.$invalid) }">
+                    <label class="control-label">Username</label>
+                    <div class="control-label" ng-show="setupForm.username.$dirty && setupForm.username.$invalid">
+                        <small ng-show="setupForm.username.$error.minlength">The username is too short</small>
+                        <small ng-show="setupForm.username.$error.maxlength">The username is too long</small>
+                        <small ng-show="setupForm.username.$dirty && setupForm.username.$invalid">Not a valid username</small>
+                    </div>
+                    <input type="text" class="form-control" ng-model="username" name="username" ng-maxlength="512" ng-minlength="3" required autofocus>
+                </div>
+
+                <div class="form-group">
+                    <label class="control-label">Display Name</label>
+                    <input type="displayName" class="form-control" ng-model="displayName" name="displayName" required>
+                </div>
+
+                <div class="form-group" ng-class="{ 'has-error': (setupForm.password.$dirty && setupForm.password.$invalid) }">
+                    <label class="control-label">New Password</label>
                     <div class="control-label" ng-show="setupForm.password.$dirty && setupForm.password.$invalid">
                         <small ng-show="setupForm.password.$dirty && setupForm.password.$invalid">Password must be 8-30 character with at least one uppercase, one numeric and one special character</small>
                     </div>
-                    <input type="password" class="form-control" id="inputPassword" ng-model="password" name="password" ng-pattern="/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,30}$/" autofocus required>
+                    <input type="password" class="form-control" ng-model="password" name="password" ng-pattern="/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,30}$/" required>
                 </div>
-                <div class="form-group" ng-class="{ 'has-error': setupForm.passwordRepeat.$dirty && (password !== passwordRepeat) }">
-                    <label class="control-label" for="inputPasswordRepeat">Repeat Password</label>
+
+                <div class="form-group" ng-class="{ 'has-error': (setupForm.passwordRepeat.$dirty && (password !== passwordRepeat)) }">
+                    <label class="control-label">Repeat Password</label>
                     <div class="control-label" ng-show="setupForm.passwordRepeat.$dirty && (password !== passwordRepeat)">
                         <small ng-show="setupForm.passwordRepeat.$dirty && (password !== passwordRepeat)">Passwords don't match</small>
                     </div>
-                    <input type="password" class="form-control" id="inputPasswordRepeat" ng-model="passwordRepeat" name="passwordRepeat" required>
+                    <input type="password" class="form-control" ng-model="passwordRepeat" name="passwordRepeat" required>
                 </div>
+
                 <input class="btn btn-primary btn-outline pull-right" type="submit" value="Create" ng-disabled="setupForm.$invalid || password !== passwordRepeat"/>
             </form>
         </div>