From 3ec3f172bb2fcad6dbf0a5df82d43e1d516cfc77 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Tue, 28 Jun 2016 14:36:19 -0500
Subject: [PATCH] migrate UI fixes

---
 webadmin/src/views/settings.html | 18 +++++++------
 webadmin/src/views/settings.js   | 44 +++++++++++++++++++-------------
 2 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/webadmin/src/views/settings.html b/webadmin/src/views/settings.html
index 11468ae43..629e22ddc 100644
--- a/webadmin/src/views/settings.html
+++ b/webadmin/src/views/settings.html
@@ -84,11 +84,13 @@
                 <h4 class="modal-title">Cloudron Change Plan</h4>
             </div>
             <div class="modal-body">
-                This will change your plan from <b>{{ currentSize.name }}</b> to <b>{{ requestedSize.name }}</b>.
+                This will change your plan from <b>{{ currentPlan.name }}</b> to <b>{{ requestedPlan.name }}</b>.
                 <br/>
                 <br/>
                 Your apps and data will be migrated to the new Cloudron and will take around 15 minutes.
                 <br/>
+                <br/>
+                <br/>
                 <form name="planChangeForm" role="form" novalidate ng-submit="doChangePlan(planChangeForm)" autocomplete="off">
                     <fieldset>
                         <div class="form-group" ng-class="{ 'has-error': (!planChangeForm.password.$dirty && planChange.error.password) || (planChangeForm.password.$dirty && planChangeForm.password.$invalid) }">
@@ -97,7 +99,7 @@
                                 <small ng-show=" planChangeForm.password.$dirty && planChangeForm.password.$invalid">A password is required</small>
                                 <small ng-show="!planChangeForm.password.$dirty && planChange.error.password">Wrong password</small>
                             </div>
-                            <input type="password" class="form-control" ng-model="planChange.password" id="inputDeveloperModeChangePassword" name="password" required autofocus>
+                            <input type="password" class="form-control" ng-model="planChange.password" id="inputPlanChangePassword" name="password" required autofocus>
                         </div>
                         <input class="ng-hide" type="submit" ng-disabled="planChangeForm.$invalid"/>
                     </fieldset>
@@ -105,7 +107,7 @@
             </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="doChangePlan()" ng-disabled="changePlan.busy"><i class="fa fa-spinner fa-pulse" ng-show="changePlan.busy"></i> Confirm</button>
+                <button type="button" class="btn btn-success" ng-click="doChangePlan()" ng-disabled="planChange.busy"><i class="fa fa-spinner fa-pulse" ng-show="planChange.busy"></i> Confirm</button>
             </div>
         </div>
     </div>
@@ -157,10 +159,10 @@
     <div class="row">
         <div class="col-xs-12">
             <div class="btn-group" data-toggle="buttons">
-                  <label class="radio" ng-repeat="size in availableSizes">
-                        <input type="radio" name="options" autocomplete="off" checked ng-click="setRequestedPlan(size)">
-                            {{ size.name }} ({{ size.slug | uppercase }}) - {{ size.price/100 }}{{ currency }}/month
-                            <span ng-show="currentSize.slug === size.slug"> (current plan)
+                  <label class="radio" ng-repeat="plan in availablePlans">
+                        <input type="radio" name="options" autocomplete="off" checked ng-click="setRequestedPlan(plan)">
+                            {{ plan.name }} ({{ plan.slug | uppercase }}) - {{ plan.price/100 }}{{ currency }}/month
+                            <span ng-show="currentPlan.slug === plan.slug"> (current plan)
                         </span>
                   </label>
             </div>
@@ -168,7 +170,7 @@
     </div>
 
     <div class="row">
-        <button class="btn btn-primary pull-right" ng-disabled="requestedSize.name === currentSize.name" ng-click="showChangePlan()">Change Plan</button>
+        <button class="btn btn-primary pull-right" ng-disabled="requestedPlan.name === currentPlan.name" ng-click="showChangePlan()">Change Plan</button>
     </div>
 </div>
 
diff --git a/webadmin/src/views/settings.js b/webadmin/src/views/settings.js
index c03f01c76..b2143305a 100644
--- a/webadmin/src/views/settings.js
+++ b/webadmin/src/views/settings.js
@@ -16,11 +16,11 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
     $scope.availableRegions = [];
     $scope.currentRegionSlug = null;
 
-    $scope.availableSizes = [];
-    $scope.requestedSize = null;
-    $scope.currentSize = null;
+    $scope.availablePlans = [];
+    $scope.requestedPlan = null;
+    $scope.currentPlan = null;
 
-    $scope.changePlan = {
+    $scope.planChange = {
         busy: false,
         error: {},
         password: ''
@@ -124,7 +124,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         });
     }
 
-    function getSizes() {
+    function getPlans() {
         AppStore.getSizes(function (error, result) {
             if (error) return console.error(error);
 
@@ -132,14 +132,14 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
             var found = false;
             result = result.filter(function (size) {
                 if (size.slug === $scope.config.size) {
-                    $scope.currentSize = $scope.requestedSize = size;
+                    $scope.currentPlan = $scope.requestedPlan = size;
                     found = true;
                     return true;
                 } else {
                     return found;
                 }
             });
-            angular.copy(result, $scope.availableSizes);
+            angular.copy(result, $scope.availablePlans);
 
             AppStore.getRegions(function (error, result) {
                 if (error) return console.error(error);
@@ -152,14 +152,14 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
     }
 
     $scope.setRequestedPlan = function (plan) {
-        $scope.requestedSize = plan;
+        $scope.requestedPlan = plan;
     };
 
     $scope.showChangePlan = function () {
         $('#planChangeModal').modal('show');
     };
 
-    function changePlanReset() {
+    function planChangeReset() {
         $scope.planChange.error.password = null;
         $scope.planChange.password = '';
 
@@ -168,19 +168,27 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
     }
 
     $scope.doChangePlan = function () {
-        $scope.changePlan.busy = true;
+        $scope.planChange.busy = true;
 
-        Client.migrate($scope.requestedSize.slug, $scope.currentRegionSlug, $scope.changePlan.password, function (error) {
-            $scope.changePlan.busy = false;
+        Client.migrate($scope.requestedPlan.slug, $scope.currentRegionSlug, $scope.planChange.password, function (error) {
+            $scope.planChange.busy = false;
 
             if (error) {
-                return console.error(error);
+                if (error.statusCode === 403) {
+                    $scope.planChange.error.password = true;
+                    $scope.planChange.password = '';
+                    $scope.planChangeForm.password.$setPristine();
+                    $('#inputPlanChangePassword').focus();
+                } else {
+                    console.error('Unable to change plan.', error);
+                }
+            } else {
+                planChangeReset();
+
+                $('#planChangeModal').modal('hide');
             }
 
-            // we will get redirected at some point
-            changePlanReset();
-            $('#planChangeModal').modal('hide');
-            $scope.changePlan.busy = false;
+            $scope.planChange.busy = false;
         });
     };
 
@@ -335,7 +343,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
 
     Client.onReady(function () {
         fetchBackups();
-        getSizes();
+        getPlans();
     });
 
     // setup all the dialog focus handling