Move the appstore login to main view controller

webadmin/src/index.html

@@ -150,6 +150,52 @@
         </div>
     </div>
 
+    <!-- Modal appstore login -->
+    <div class="modal fade" id="appstoreLoginModal" tabindex="-1" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">Login to the Cloudron Store</h4>
+                </div>
+                <div class="modal-body">
+                    <center>
+                        <img ng-src="{{ config.webServerOrigin }}/img/logo.png" width="128px" height="128px"/>
+                    </center>
+
+                    <form name="appstoreLoginForm" role="form" novalidate ng-submit="appstoreLogin.submit()" autocomplete="off">
+                        <input type="password" style="display: none;">
+
+                        <div class="form-group" ng-class="{ 'has-error': (appstoreLoginForm.email.$dirty && appstoreLoginForm.email.$invalid) }">
+                            <label class="control-label">Email Address</label>
+                            <input type="email" class="form-control" ng-model="appstoreLogin.email" name="email" required autofocus>
+                            <div class="control-label" ng-show="(!appstoreLoginForm.email.$dirty && appstoreLogin.error.email) || (appstoreLoginForm.email.$dirty && appstoreLoginForm.email.$invalid)">
+                                <small ng-show="appstoreLoginForm.email.$error.required">A valid email address is required</small>
+                                <small ng-show="(appstoreLoginForm.email.$dirty && appstoreLoginForm.email.$invalid) && !appstoreLoginForm.email.$error.required">The Email address is not valid</small>
+                            </div>
+                        </div>
+
+                        <div class="form-group" ng-class="{ 'has-error': (!appstoreLoginForm.password.$dirty && appstoreLogin.error.password) || (appstoreLoginForm.password.$dirty && appstoreLoginForm.password.$invalid) }">
+                            <label class="control-label">Password</label>
+                            <input type="password" class="form-control" ng-model="appstoreLogin.password" id="inputAppstoreLoginPassword" name="password" required autofocus>
+                            <div class="control-label" ng-show="(!appstoreLoginForm.password.$dirty && appstoreLogin.error.password) || (appstoreLoginForm.password.$dirty && appstoreLoginForm.password.$invalid)">
+                                <small ng-show=" appstoreLoginForm.password.$dirty && appstoreLoginForm.password.$invalid">A password is required</small>
+                                <small ng-show="!appstoreLoginForm.password.$dirty && appstoreLogin.error.password">Wrong password</small>
+                            </div>
+                        </div>
+
+                        <input class="ng-hide" type="submit" ng-disabled="appstoreLoginForm.$invalid"/>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <a class="btn btn-primary pull-left" href="{{ config.webServerOrigin }}/console.html#/register" target="_blank">Register</a>
+
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-success" ng-click="appstoreLogin.submit()" ng-disabled="appstoreLoginForm.$invalid || appstoreLogin.busy"><i class="fa fa-spinner fa-pulse" ng-show="appstoreLogin.busy"></i> Login</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div class="animateMe ng-hide" ng-show="initialized">
 
         <!-- Navigation -->

webadmin/src/js/main.js

@@ -101,6 +101,63 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
         });
     };
 
+    $scope.appstoreLogin = {
+        busy: false,
+        error: {},
+        email: '',
+        password: '',
+
+        reset: function () {
+            $scope.appstoreLogin.busy = false;
+            $scope.appstoreLogin.error = {};
+            $scope.appstoreLogin.email = '';
+            $scope.appstoreLogin.password = '';
+
+            $scope.appstoreLoginForm.$setUntouched();
+            $scope.appstoreLoginForm.$setPristine();
+        },
+
+        show: function () {
+            $scope.appstoreLogin.reset();
+            $('#appstoreLoginModal').modal('show');
+        },
+
+        submit: function () {
+            $scope.appstoreLogin.error = {};
+            $scope.appstoreLogin.busy = true;
+
+            AppStore.login($scope.appstoreLogin.email, $scope.appstoreLogin.password, function (error, result) {
+
+                if (error) {
+                    $scope.appstoreLogin.busy = false;
+
+                    if (error.statusCode === 403) {
+                        $scope.appstoreLogin.error.password = 'Wrong email or password';
+                        $scope.appstoreLogin.password = '';
+                        $('#inputAppstoreLoginPassword').focus();
+                        $scope.appstoreLoginForm.password.$setPristine();
+                    } else {
+                        console.error(error);
+                    }
+
+                    return;
+                }
+
+                var config = {
+                    userId: result.userId,
+                    token: result.accessToken
+                };
+
+                Client.setAppstoreConfig(config, function (error) {
+                    if (error) return console.error(error);
+
+                    $scope.appstoreLogin.reset();
+                    $('#appstoreLoginModal').modal('hide');
+                });
+            });
+        }
+    };
+
     Client.getStatus(function (error, status) {
         if (error) return $scope.error(error);
 
@@ -236,10 +293,10 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
         }
     });
 
-    Client.onRead(checkAppstoreAccount);
+    Client.onReady(checkAppstoreAccount);
 
     // setup all the dialog focus handling
-    ['updateModal'].forEach(function (id) {
+    ['updateModal', 'appstoreLoginModal'].forEach(function (id) {
         $('#' + id).on('shown.bs.modal', function () {
             $(this).find("[autofocus]:first").focus();
         });

webadmin/src/views/settings.html

@@ -111,52 +111,6 @@
     </div>
 </div>
 
-<!-- Modal appstore login -->
-<div class="modal fade" id="appstoreLoginModal" tabindex="-1" role="dialog">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h4 class="modal-title">Login to the Cloudron Store</h4>
-            </div>
-            <div class="modal-body">
-                <center>
-                    <img ng-src="{{ config.webServerOrigin }}/img/logo.png" width="128px" height="128px"/>
-                </center>
-
-                <form name="appstoreLoginForm" role="form" novalidate ng-submit="appstoreLogin.submit()" autocomplete="off">
-                    <input type="password" style="display: none;">
-
-                    <div class="form-group" ng-class="{ 'has-error': (appstoreLoginForm.email.$dirty && appstoreLoginForm.email.$invalid) }">
-                        <label class="control-label">Email Address</label>
-                        <input type="email" class="form-control" ng-model="appstoreLogin.email" name="email" required autofocus>
-                        <div class="control-label" ng-show="(!appstoreLoginForm.email.$dirty && appstoreLogin.error.email) || (appstoreLoginForm.email.$dirty && appstoreLoginForm.email.$invalid)">
-                            <small ng-show="appstoreLoginForm.email.$error.required">A valid email address is required</small>
-                            <small ng-show="(appstoreLoginForm.email.$dirty && appstoreLoginForm.email.$invalid) && !appstoreLoginForm.email.$error.required">The Email address is not valid</small>
-                        </div>
-                    </div>
-
-                    <div class="form-group" ng-class="{ 'has-error': (!appstoreLoginForm.password.$dirty && appstoreLogin.error.password) || (appstoreLoginForm.password.$dirty && appstoreLoginForm.password.$invalid) }">
-                        <label class="control-label">Password</label>
-                        <input type="password" class="form-control" ng-model="appstoreLogin.password" id="inputAppstoreLoginPassword" name="password" required autofocus>
-                        <div class="control-label" ng-show="(!appstoreLoginForm.password.$dirty && appstoreLogin.error.password) || (appstoreLoginForm.password.$dirty && appstoreLoginForm.password.$invalid)">
-                            <small ng-show=" appstoreLoginForm.password.$dirty && appstoreLoginForm.password.$invalid">A password is required</small>
-                            <small ng-show="!appstoreLoginForm.password.$dirty && appstoreLogin.error.password">Wrong password</small>
-                        </div>
-                    </div>
-
-                    <input class="ng-hide" type="submit" ng-disabled="appstoreLoginForm.$invalid"/>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <a class="btn btn-primary pull-left" href="{{ config.webServerOrigin }}/console.html#/register" target="_blank">Register</a>
-
-                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-success" ng-click="appstoreLogin.submit()" ng-disabled="appstoreLoginForm.$invalid || appstoreLogin.busy"><i class="fa fa-spinner fa-pulse" ng-show="appstoreLogin.busy"></i> Login</button>
-            </div>
-        </div>
-    </div>
-</div>
-
 <br/>
 
 <div class="section-header">
@@ -184,6 +138,10 @@
                     <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="appstoreConfig.profile">
+                    <td class="text-muted" style="vertical-align: top;">Appstore Account</td>
+                    <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ appstoreConfig.profile.email }}</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>
@@ -197,23 +155,6 @@
     </div>
 </div>
 
-<div class="section-header" ng-hide="true && config.provider === 'caas'">
-    <div class="text-left">
-        <h3>Appstore Account (<a href="https://cloudron.io" target="_blank">cloudron.io</a>)</h3>
-    </div>
-</div>
-
-<div class="card" style="margin-bottom: 15px;" ng-hide="true && config.provider === 'caas'">
-    <div class="row">
-        <div class="col-xs-12 text-center" ng-show="!appstoreConfig.userId">
-            <button class="btn btn-success" ng-click="appstoreLogin.show()">Login to the Cloudron Store</button>
-        </div>
-        <div class="col-xs-12" ng-show="appstoreConfig.userId">
-            This Cloudron is using {{ appstoreConfig.profile.email }}.
-        </div>
-    </div>
-</div>
-
 <div class="section-header" ng-show="config.provider === 'caas'">
     <div class="text-left">
         <h3>Plans</h3>

webadmin/src/views/settings.js

@@ -310,63 +310,6 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         fr.readAsDataURL(event.target.files[0]);
     };
 
-    $scope.appstoreLogin = {
-        busy: false,
-        error: {},
-        email: '',
-        password: '',
-
-        reset: function () {
-            $scope.appstoreLogin.busy = false;
-            $scope.appstoreLogin.error = {};
-            $scope.appstoreLogin.email = '';
-            $scope.appstoreLogin.password = '';
-
-            $scope.appstoreLoginForm.$setUntouched();
-            $scope.appstoreLoginForm.$setPristine();
-        },
-
-        show: function () {
-            $scope.appstoreLogin.reset();
-            $('#appstoreLoginModal').modal('show');
-        },
-
-        submit: function () {
-            $scope.appstoreLogin.error = {};
-            $scope.appstoreLogin.busy = true;
-
-            AppStore.login($scope.appstoreLogin.email, $scope.appstoreLogin.password, function (error, result) {
-
-                if (error) {
-                    $scope.appstoreLogin.busy = false;
-
-                    if (error.statusCode === 403) {
-                        $scope.appstoreLogin.error.password = 'Wrong email or password';
-                        $scope.appstoreLogin.password = '';
-                        $('#inputAppstoreLoginPassword').focus();
-                        $scope.appstoreLoginForm.password.$setPristine();
-                    } else {
-                        console.error(error);
-                    }
-
-                    return;
-                }
-
-                var config = {
-                    userId: result.userId,
-                    token: result.accessToken
-                };
-
-                Client.setAppstoreConfig(config, function (error) {
-                    if (error) return console.error(error);
-
-                    $scope.appstoreLogin.reset();
-                    $('#appstoreLoginModal').modal('hide');
-                });
-            });
-        }
-    };
-
     $scope.cloudronNameChange = {
         busy: false,
         error: {},