Add setup step to give a name for the cloudron

webadmin/src/js/client.js

@@ -337,11 +337,12 @@ angular.module('Application').service('Client', ['$http', 'md5', 'Notification',
         }).error(defaultErrorHandler(callback));
     };
 
-    Client.prototype.createAdmin = function (username, password, email, setupToken, callback) {
+    Client.prototype.createAdmin = function (username, password, email, name, setupToken, callback) {
         var payload = {
             username: username,
             password: password,
-            email: email
+            email: email,
+            name: name
         };
 
         var that = this;

webadmin/src/js/setup.js

@@ -26,8 +26,11 @@ app.config(['$routeProvider', function ($routeProvider) {
         controller: 'StepController',
         templateUrl: 'views/setup/step2.html'
     }).when('/step3', {
-        controller: 'FinishController',
+        controller: 'StepController',
         templateUrl: 'views/setup/step3.html'
+    }).when('/step4', {
+        controller: 'FinishController',
+        templateUrl: 'views/setup/step4.html'
     }).otherwise({ redirectTo: '/'});
 }]);
 
@@ -38,6 +41,7 @@ app.service('Wizard', [ function () {
         this.username = '';
         this.email = '';
         this.password = '';
+        this.name = '';
     }
 
     instance = new Wizard();
@@ -60,7 +64,7 @@ app.controller('FinishController', ['$scope', '$location', '$timeout', 'Wizard',
     $scope.wizard = Wizard;
 
     function finish() {
-        Client.createAdmin($scope.wizard.username, $scope.wizard.password, $scope.wizard.email, $scope.setupToken, function (error) {
+        Client.createAdmin($scope.wizard.username, $scope.wizard.password, $scope.wizard.email, $scope.wizard.name, $scope.setupToken, function (error) {
             if (error) {
                 console.error('Internal error', error);
                 window.location.href = '/error.html';
@@ -86,7 +90,7 @@ app.controller('SetupController', ['$scope', '$location', 'Client', 'Wizard', fu
     if (!search.email) return window.location.href = '/error.html?errorCode=3';
     Wizard.email = search.email;
 
-    Wizard.hostname = window.location.host.slice(3); // remove 'my-'
+    Wizard.hostname = window.location.host.indexOf('my-') === 0 ? window.location.host.slice(3) : window.location.host;
 
     Client.isServerFirstTime(function (error, isFirstTime) {
         if (error) {
@@ -99,9 +103,8 @@ app.controller('SetupController', ['$scope', '$location', 'Client', 'Wizard', fu
             return;
         }
 
-        if (!Wizard.username) $location.path('/step1');
+        $location.path('/step1');
 
         $scope.initialized = true;
-
     });
 }]);

webadmin/src/views/setup/step2.html

@@ -1,26 +1,22 @@
 <div class="row">
     <div class="col-md-12 text-center">
-        <h1>Create an Administrator for your Cloudron</h1>
+        <h1>Personalize your Cloudron</h1>
         <h4 class="">
-            You can create more users once we are done here.
+            Make it truly yours, by giving your Cloudron a name.
         </h4>
     </div>
 </div>
 <br/>
 <div class="row">
     <div class="col-md-4 col-md-offset-4 text-center">
-        <div class="form-group" ng-class="{ 'has-error': setup_form.username.$dirty && setup_form.username.$invalid }">
-            <!-- <label class="control-label" for="inputUsername">Username</label> -->
-            <input type="text" class="form-control" ng-model="wizard.username" id="inputUsername" name="username" placeholder="Username" ng-maxlength="512" ng-minlength="3" autofocus required autocomplete="off">
-        </div>
-        <div class="form-group" ng-class="{ 'has-error': setup_form.password.$dirty && setup_form.password.$invalid }">
-            <!-- <label class="control-label" for="inputPassword">Password</label> -->
-            <input type="password" class="form-control" ng-model="wizard.password" id="inputPassword" name="password" placeholder="Password" ng-enter="ok('/step3', setup_form.password.$invalid)" ng-maxlength="512" ng-minlength="5" required autocomplete="off">
+        <div class="form-group" ng-class="{ 'has-error': setup_form.name.$dirty && setup_form.name.$invalid }">
+            <!-- <label class="control-label" for="inputName">Name</label> -->
+            <input type="text" class="form-control" ng-model="wizard.name" id="inputName" name="name" placeholder="Name" ng-maxlength="512" ng-minlength="1" autofocus required autocomplete="off">
         </div>
     </div>
 </div>
 <div class="row">
     <div class="col-md-12 text-center">
-        <a class="btn btn-primary" href="#/step3" ng-disabled="setup_form.username.$invalid">Done</a>
+        <a class="btn btn-primary" href="#/step3" ng-disabled="setup_form.name.$invalid">Next</a>
     </div>
 </div>

webadmin/src/views/setup/step3.html

@@ -1,8 +1,26 @@
-<center>
-    <h1>All done!</h1>
-    <br/>
-    <br/>
-    <i class="fa fa-spinner fa-pulse fa-5x"></i>
-    <br/>
-    <br/>
-</center>
+<div class="row">
+    <div class="col-md-12 text-center">
+        <h1>Create an Administrator for <b>{{ wizard.name }}</b>, your Cloudron</h1>
+        <h4 class="">
+            You can create more users once we are done here.
+        </h4>
+    </div>
+</div>
+<br/>
+<div class="row">
+    <div class="col-md-4 col-md-offset-4 text-center">
+        <div class="form-group" ng-class="{ 'has-error': setup_form.username.$dirty && setup_form.username.$invalid }">
+            <!-- <label class="control-label" for="inputUsername">Username</label> -->
+            <input type="text" class="form-control" ng-model="wizard.username" id="inputUsername" name="username" placeholder="Username" ng-maxlength="512" ng-minlength="3" autofocus required autocomplete="off">
+        </div>
+        <div class="form-group" ng-class="{ 'has-error': setup_form.password.$dirty && setup_form.password.$invalid }">
+            <!-- <label class="control-label" for="inputPassword">Password</label> -->
+            <input type="password" class="form-control" ng-model="wizard.password" id="inputPassword" name="password" placeholder="Password" ng-enter="ok('/step3', setup_form.password.$invalid)" ng-maxlength="512" ng-minlength="5" required autocomplete="off">
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-md-12 text-center">
+        <a class="btn btn-primary" href="#/step4" ng-disabled="setup_form.username.$invalid">Done</a>
+    </div>
+</div>

webadmin/src/views/setup/step4.html

@@ -0,0 +1,8 @@
+<center>
+    <h1>All done!</h1>
+    <br/>
+    <br/>
+    <i class="fa fa-spinner fa-pulse fa-5x"></i>
+    <br/>
+    <br/>
+</center>