From b8a635c638a273aad2361e0f2fb980481b3a63e0 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Thu, 28 Jul 2016 12:56:17 +0200
Subject: [PATCH] Add UI components to allow cloudron name changes

---
 webadmin/src/views/settings.html | 33 +++++++++++++++++++++
 webadmin/src/views/settings.js   | 49 +++++++++++++++++++++++++++++++-
 2 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/webadmin/src/views/settings.html b/webadmin/src/views/settings.html
index 971dd72e2..0cde5cab7 100644
--- a/webadmin/src/views/settings.html
+++ b/webadmin/src/views/settings.html
@@ -25,6 +25,35 @@
     </div>
 </div>
 
+<!-- Modal change cloudron name -->
+<div class="modal fade" id="cloudronNameChangeModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Change Cloudron Name</h4>
+            </div>
+            <div class="modal-body">
+                <form name="cloudronNameChangeForm" role="form" novalidate ng-submit="cloudronNameChange.submit()" autocomplete="off">
+                    <div class="form-group" ng-class="{ 'has-error': (cloudronNameChangeForm.name.$dirty && cloudronNameChangeForm.name.$invalid) }">
+                        <label class="control-label">Name</label>
+                        <div class="control-label" ng-show="(!cloudronNameChangeForm.name.$dirty && cloudronNameChange.error.name) || (cloudronNameChangeForm.name.$dirty && cloudronNameChangeForm.name.$invalid)">
+                            <small ng-show="cloudronNameChangeForm.name.$error.required">A name is required</small>
+                            <small ng-show="cloudronNameChangeForm.name.$error.maxlength">The name is too long</small>
+                            <small ng-show="!cloudronNameChangeForm.name.$dirty && cloudronNameChange.error.name">{{ cloudronNameChange.error.name }}</small>
+                        </div>
+                        <input type="text" class="form-control" ng-model="cloudronNameChange.name" name="name" id="inputCloudronName" ng-maxlength="30" required autofocus>
+                    </div>
+                    <input class="ng-hide" type="submit" ng-disabled="cloudronNameChangeForm.$invalid"/>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-success" ng-click="cloudronNameChange.submit()" ng-disabled="cloudronNameChangeForm.$invalid || cloudronNameChange.busy"><i class="fa fa-spinner fa-pulse" ng-show="cloudronNameChange.busy"></i> Change</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- Modal backup -->
 <div class="modal fade" id="createBackupModal" tabindex="-1" role="dialog">
     <div class="modal-dialog">
@@ -151,6 +180,10 @@
         </div>
         <div class="col-xs-8">
             <table width="100%">
+                <tr>
+                    <td class="text-muted" style="vertical-align: top;">Name</td>
+                    <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.cloudronName }} <a href="" ng-click="cloudronNameChange.show()"><i class="fa fa-pencil text-small"></i></a></td>
+                </tr>
                 <tr ng-show="config.provider === 'caas'">
                     <td class="text-muted" style="vertical-align: top;">Model</td>
                     <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.size }} - {{ config.region }}</td>
diff --git a/webadmin/src/views/settings.js b/webadmin/src/views/settings.js
index d81c29e97..0356bf805 100644
--- a/webadmin/src/views/settings.js
+++ b/webadmin/src/views/settings.js
@@ -367,6 +367,53 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         }
     };
 
+    $scope.cloudronNameChange = {
+        busy: false,
+        error: {},
+        name: '',
+
+        reset: function () {
+            $scope.cloudronNameChange.busy = false;
+            $scope.cloudronNameChange.error.name = null;
+            $scope.cloudronNameChange.name = '';
+
+            $scope.cloudronNameChangeForm.$setUntouched();
+            $scope.cloudronNameChangeForm.$setPristine();
+        },
+
+        show: function () {
+            $scope.cloudronNameChange.reset();
+            $scope.cloudronNameChange.name = $scope.config.cloudronName;
+            $('#cloudronNameChangeModal').modal('show');
+        },
+
+        submit: function () {
+            $scope.cloudronNameChange.error.name = null;
+            $scope.cloudronNameChange.busy = true;
+
+            Client.changeCloudronName($scope.cloudronNameChange.name, function (error) {
+                $scope.cloudronNameChange.busy = false;
+
+                if (error) {
+                    if (error.statusCode === 400) {
+                        $scope.cloudronNameChange.error.name = 'Invalid name';
+                        $scope.cloudronNameChange.name = '';
+                        $('#inputCloudronName').focus();
+                        $scope.cloudronNameChangeForm.password.$setPristine();
+                    } else {
+                        console.error('Unable to change name.', error);
+                        return;
+                    }
+                }
+
+                $scope.cloudronNameChange.reset();
+                $('#cloudronNameChangeModal').modal('hide');
+
+                Client.refreshConfig();
+            });
+        }
+    };
+
     Client.onReady(function () {
         fetchBackups();
 
@@ -391,7 +438,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
     });
 
     // setup all the dialog focus handling
-    ['planChangeModal', 'appstoreLoginModal'].forEach(function (id) {
+    ['planChangeModal', 'appstoreLoginModal', 'cloudronNameChangeModal'].forEach(function (id) {
         $('#' + id).on('shown.bs.modal', function () {
             $(this).find("[autofocus]:first").focus();
         });