From a76631ee3d5ef84cb9a998b03a6cb49dc5903490 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Mon, 4 Jun 2018 20:08:37 -0700
Subject: [PATCH] Add labels

Poeple seem to forget wat those fields are for mid-way through filling
the form. The place holder stuff is not overly obvious apparently.

This makes it consistent with all our other UI nevertheless
---
 src/setup.html | 15 +++++++++++----
 src/theme.scss |  1 -
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/setup.html b/src/setup.html
index b6ce60cf9..c149666ff 100644
--- a/src/setup.html
+++ b/src/setup.html
@@ -62,22 +62,28 @@
                         <div class="row">
                             <div class="col-md-12 text-center">
                                 <h1>Welcome to Cloudron</h1>
-                                <h3>Create an Admin Account</h3>
+                                <h3>Setup Admin Account</h3>
                             </div>
                         </div>
+                        <br/>
+                        <br/>
                         <div class="row">
-                            <div class="col-md-8 col-md-offset-2 text-center">
+                            <div class="col-md-6 col-md-offset-3">
                                 <div class="form-group" ng-class="{ 'has-error': setupForm.displayName.$dirty && setupForm.displayName.$invalid }">
-                                    <input type="text" class="form-control" ng-model="account.displayName" id="inputDisplayName" name="displayName" placeholder="Display Name" required autocomplete="off" autofocus>
+                                    <label class="control-label">Full Name</label>
+                                    <input type="text" class="form-control" ng-model="account.displayName" id="inputDisplayName" name="displayName" placeholder="Full Name" required autocomplete="off" autofocus>
                                 </div>
                                 <div ng-show="account.requireEmail" class="form-group" ng-class="{ 'has-error': setupForm.email.$dirty && setupForm.email.$invalid }">
+                                    <label class="control-label">Email <sup><a href="https://cloudron.io/documentation/installation/#administrator-setup" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
                                     <input type="email" class="form-control" ng-model="account.email" id="inputEmail" name="email" placeholder="Email" required autocomplete="off" tooltip-trigger="focus" uib-tooltip="This email address is local to your Cloudron and used for notifications and password reset. A valid email is also required for Let's Encrypt certificates.">
                                 </div>
                                 <div class="form-group" ng-class="{ 'has-error': (setupForm.username.$dirty && setupForm.username.$invalid) || (!setupForm.username.$dirty && error.username) }">
+                                    <label class="control-label">Username</label>
                                     <p ng-show="!setupForm.username.$dirty && error.username">{{ error.username }}</p>
                                     <input type="text" class="form-control" ng-model="account.username" id="inputUsername" name="username" placeholder="Username" ng-maxlength="512" ng-minlength="3" required autocomplete="off">
                                 </div>
                                 <div class="form-group" ng-class="{ 'has-error': setupForm.password.$dirty && setupForm.password.$invalid }">
+                                    <label class="control-label">Password</label>
                                     <input type="password" class="form-control" ng-model="account.password" id="inputPassword" name="password" placeholder="Password" ng-pattern="/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,30}$/" required autocomplete="off">
                                     <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>
@@ -86,9 +92,10 @@
                             </div>
                         </div>
                         <br/>
+                        <br/>
                         <div class="row">
                             <div class="col-md-12 text-center">
-                                <input type="submit" class="btn btn-primary" ng-disabled="setupForm.$invalid" value="Done">
+                                <input type="submit" class="btn btn-success" ng-disabled="setupForm.$invalid" value="Done">
                             </div>
                         </div>
                         <br/>
diff --git a/src/theme.scss b/src/theme.scss
index b6ec8152c..2fa19b86f 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -788,7 +788,6 @@ footer {
 
         &>.row {
             display: table-cell;
-            text-align: center;
             vertical-align: middle;
             width: 100%;
         }