From 2dfb91dcc98265ab3961f4362155e9c39975b3e5 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 16 Jan 2017 12:34:33 +0100
Subject: [PATCH] Embed the appstore login instead of a dialog

---
 webadmin/src/theme.scss          | 16 ++++++
 webadmin/src/views/appstore.html | 84 ++++++++++++++------------------
 webadmin/src/views/appstore.js   | 82 ++++++++++++-------------------
 3 files changed, 84 insertions(+), 98 deletions(-)

diff --git a/webadmin/src/theme.scss b/webadmin/src/theme.scss
index fd56b7819..2b007133e 100644
--- a/webadmin/src/theme.scss
+++ b/webadmin/src/theme.scss
@@ -240,6 +240,14 @@ h1, h2, h3 {
 // Appstore view
 // ----------------------------
 
+.appstore-login {
+    margin-top: 50px !important;
+
+    h1 {
+        font-size: 32px;
+    }
+}
+
 .appstore-item {
     padding: 10px;
     width: 300px;
@@ -389,6 +397,10 @@ h1, h2, h3 {
 .loading-banner {
     padding-top: 150px;
     text-align: center;
+
+    h1 {
+        font-size: 48px;
+    }
 }
 
 .badge-success {
@@ -421,6 +433,10 @@ h1, h2, h3 {
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
 }
 
+.card-small {
+    max-width: 600px;
+}
+
 .card-large {
     max-width: 970px;
 }
diff --git a/webadmin/src/views/appstore.html b/webadmin/src/views/appstore.html
index 3a71370c6..c3074ddbc 100644
--- a/webadmin/src/views/appstore.html
+++ b/webadmin/src/views/appstore.html
@@ -188,61 +188,54 @@
     </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" ng-hide="appstoreLogin.register">Login to the Cloudron App Store</h4>
-                <h4 class="modal-title" ng-show="appstoreLogin.register">Sign up at the Cloudron App Store</h4>
-            </div>
-            <div class="modal-body">
-                <center>
-                    <img ng-src="{{ config.webServerOrigin }}/img/logo.png" width="128px" height="128px"/>
-                    <br/><br/>
-                    <p>For using the Cloudron App Store, you have to login with your <a href="{{ config.webServerOrigin }}" target="_blank">cloudron.io</a> account.</p>
-                    <br/>
-                    <small class="text-danger" ng-show="appstoreLogin.error.generic">{{ appstoreLogin.error.generic }}</small>
-                </center>
+<div ng-show="!ready" class="loading-banner">
+    <h1><i class="fa fa-circle-o-notch fa-spin"></i></h1>
+</div>
 
-                <form name="appstoreLoginForm" role="form" novalidate ng-submit="appstoreLogin.submit()" autocomplete="off">
-                    <input type="password" style="display: none;">
+<!-- appstore login -->
+<div ng-show="ready && !cloudronDetails" class="card card-small appstore-login ng-cloak">
+    <div class="row">
+        <div class="col-md-12">
+            <h1 ng-show="appstoreLogin.register">App Store Signup</h1>
+            <h1 ng-hide="appstoreLogin.register">App Store Login</h1>
+        </div>
+        <div class="col-md-12">
+            <p>For using the Cloudron App Store, you have to login with your <a href="{{ config.webServerOrigin }}" target="_blank">cloudron.io</a> account.</p>
+            <br/>
+            <small class="text-danger" ng-show="appstoreLogin.error.generic">{{ appstoreLogin.error.generic }}</small>
+        </div>
+        <div class="col-md-12">
+            <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) || appstoreLogin.error.generic }">
-                        <label class="control-label">Email Address</label>
-                        <input type="email" class="form-control" ng-model="appstoreLogin.email" id="inputAppstoreLoginEmail" name="email" required autofocus>
-                        <div class="control-label" ng-show="(!appstoreLoginForm.email.$dirty && appstoreLogin.error.email) || (appstoreLoginForm.email.$dirty && appstoreLoginForm.email.$invalid) || appstoreLogin.error.email">
-                            <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 class="form-group" ng-class="{ 'has-error': (appstoreLoginForm.email.$dirty && appstoreLoginForm.email.$invalid) || appstoreLogin.error.generic }">
+                    <label class="control-label">Email Address</label>
+                    <input type="email" class="form-control" ng-model="appstoreLogin.email" id="inputAppstoreLoginEmail" name="email" required autofocus>
+                    <div class="control-label" ng-show="(!appstoreLoginForm.email.$dirty && appstoreLogin.error.email) || (appstoreLoginForm.email.$dirty && appstoreLoginForm.email.$invalid) || appstoreLogin.error.email">
+                        <small class="text-danger" ng-show="appstoreLogin.error.email">{{ appstoreLogin.error.email }}</small>
                     </div>
+                </div>
 
-                    <div class="form-group" ng-class="{ 'has-error': (!appstoreLoginForm.password.$dirty && appstoreLogin.error.password) || (appstoreLoginForm.password.$dirty && appstoreLoginForm.password.$invalid) || appstoreLogin.error.generic }">
-                        <label class="control-label">Password</label>
-                        <input type="password" class="form-control" ng-model="appstoreLogin.password" id="inputAppstoreLoginPassword" name="password" required>
-                        <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 class="form-group" ng-class="{ 'has-error': (!appstoreLoginForm.password.$dirty && appstoreLogin.error.password) || (appstoreLoginForm.password.$dirty && appstoreLoginForm.password.$invalid) || appstoreLogin.error.generic }">
+                    <label class="control-label">Password</label>
+                    <input type="password" class="form-control" ng-model="appstoreLogin.password" id="inputAppstoreLoginPassword" name="password" required>
+                    <div class="control-label" ng-show="(!appstoreLoginForm.password.$dirty && appstoreLogin.error.password) || (appstoreLoginForm.password.$dirty && appstoreLoginForm.password.$invalid)">
+                        <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="pull-left" href="" ng-click="appstoreLogin.register = true" ng-hide="appstoreLogin.register">No Account yet?</a>
-                <a class="pull-left" href="" ng-click="appstoreLogin.register = false" ng-show="appstoreLogin.register">Already an Account?</a>
+                <a class="pull-left" href="" ng-click="appstoreLogin.register = true" ng-hide="appstoreLogin.register">Don't have an Account yet?</a>
+                <a class="pull-left" href="" ng-click="appstoreLogin.register = false" ng-show="appstoreLogin.register">Already have an Account?</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">
+                <button type="submit" class="btn btn-success pull-right" ng-disabled="appstoreLoginForm.$invalid || appstoreLogin.busy">
                     <i class="fa fa-spinner fa-pulse" ng-show="appstoreLogin.busy"></i> <span ng-hide="appstoreLogin.register">Login</span><span ng-show="appstoreLogin.register">Sign up</span>
                 </button>
-            </div>
+            </form>
         </div>
     </div>
 </div>
 
-<div>
+<div ng-show="ready && cloudronDetails" class="ng-cloak">
     <div class="row-no-margin">
         <div class="col-md-2">
         </div>
@@ -286,7 +279,7 @@
             <br/>
             <a href="" ng-click="feedback.show()">Missing an app? Let us know.</a>
         </div>
-        <div class="col-md-10" ng-show="ready && apps.length">
+        <div class="col-md-10" ng-show="apps.length">
             <div class="row-no-margin">
                 <div class="col-sm-1 appstore-item" ng-repeat="app in apps | orderBy:'installCount':true"">
                     <div class="appstore-item-content highlight" ng-click="gotoApp(app)" ng-class="{ 'appstore-item-content-testing': (app.publishState === 'testing' || app.publishState === 'pending_approval') }">
@@ -304,13 +297,10 @@
                 </div>
             </div>
         </div>
-        <div class="col-md-10 animateMeOpacity loading-banner" ng-show="ready && !apps.length">
+        <div class="col-md-10 animateMeOpacity loading-banner" ng-show="!apps.length">
             <h3 class="text-muted">No applications in this category.</h3>
             <a href="" ng-click="feedback.show()"><h3>Let us know if you miss something.</h3></a>
         </div>
-        <div class="col-md-10 animateMeOpacity loading-banner" ng-show="!ready">
-            <h2><i class="fa fa-spinner fa-pulse"></i> Loading</h2>
-        </div>
     </div>
 </div>
 
diff --git a/webadmin/src/views/appstore.js b/webadmin/src/views/appstore.js
index 421594e17..257fe4004 100644
--- a/webadmin/src/views/appstore.js
+++ b/webadmin/src/views/appstore.js
@@ -1,6 +1,8 @@
 'use strict';
 
 angular.module('Application').controller('AppStoreController', ['$scope', '$location', '$timeout', '$routeParams', 'Client', 'AppStore', function ($scope, $location, $timeout, $routeParams, Client, AppStore) {
+    Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
+
     $scope.ready = false;
     $scope.apps = [];
     $scope.config = Client.getConfig();
@@ -11,6 +13,8 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$loca
     $scope.category = '';
     $scope.cachedCategory = ''; // used to cache the selected category while searching
     $scope.searchString = '';
+    $scope.cloudronDetails = null;
+    $scope.appstoreConfig = null;
 
     $scope.showRequestUpgrade = function () {
         // wait for dialog to be fully closed to avoid modal behavior breakage when moving to a different view already
@@ -251,24 +255,6 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$loca
         password: '',
         register: false,
 
-        reset: function () {
-            $scope.appstoreLogin.busy = false;
-            $scope.appstoreLogin.error = {};
-            $scope.appstoreLogin.email = '';
-            $scope.appstoreLogin.password = '';
-            $scope.appstoreLogin.register = false;
-
-            $scope.appstoreLoginForm.$setUntouched();
-            $scope.appstoreLoginForm.$setPristine();
-        },
-
-        show: function () {
-            $('#appInstallModal').modal('hide');
-
-            $scope.appstoreLogin.reset();
-            $('#appstoreLoginModal').modal('show');
-        },
-
         submit: function () {
             $scope.appstoreLogin.error = {};
             $scope.appstoreLogin.busy = true;
@@ -318,8 +304,7 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$loca
                             return;
                         }
 
-                        $scope.appstoreLogin.reset();
-                        $('#appstoreLoginModal').modal('hide');
+                        fetchAppstoreConfig();
                     });
                 });
             }
@@ -331,8 +316,7 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$loca
                     $scope.appstoreLogin.busy = false;
 
                     if (error.statusCode === 409) {
-                        $scope.appstoreLogin.error.generic = 'An account with this email already exists';
-                        $scope.appstoreLogin.email = '';
+                        $scope.appstoreLogin.error.email = 'An account with this email already exists';
                         $scope.appstoreLogin.password = '';
                         $scope.appstoreLoginForm.email.$setPristine();
                         $scope.appstoreLoginForm.password.$setPristine();
@@ -526,40 +510,36 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$loca
         });
     }
 
-    function checkAppstoreAccount() {
-        if (Client.getConfig().provider === 'caas') return;
-        if (!$scope.user.admin) return;
-
-        // only check after tutorial was shown
-        if ($scope.user.showTutorial) return setTimeout(checkAppstoreAccount, 5000);
+    function fetchAppstoreConfig(callback) {
+        callback = callback || function (error) { if (error) console.error(error); };
 
         Client.getAppstoreConfig(function (error, result) {
-            if (error) return console.error(error);
+            if (error) return callback(error);
 
-            if (!result.token || !result.cloudronId) {
-                $scope.appstoreLogin.show();
-                return;
-            }
+            if (!result.token || !result.cloudronId) return;
 
-            AppStore.getCloudronDetails(result, function (error) {
-                if (error) {
-                    console.error('Unable to get Cloudron details.', error);
-                    $scope.appstoreLogin.show();
-                    return;
-                }
+            $scope.appstoreConfig = result;
 
-                // All good
+            AppStore.getCloudronDetails(result, function (error, result) {
+                if (error) return callback(error);
+
+                $scope.cloudronDetails = result;
+
+                // clear busy state when a login/signup was performed
+                $scope.appstoreLogin.busy = false;
+
+                callback();
             });
         });
     }
 
-    function refresh() {
+    function init() {
         $scope.ready = false;
 
         getAppList(function (error, apps) {
             if (error) {
                 console.error(error);
-                return $timeout(refresh, 1000);
+                return $timeout(init, 1000);
             }
 
             $scope.apps = apps;
@@ -568,18 +548,18 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$loca
             // hashChangeListener calls $apply, so make sure we don't double digest here
             setTimeout(hashChangeListener, 1);
 
-            if ($scope.user.admin) {
-                fetchUsers();
-                fetchGroups();
-                fetchDnsConfig();
-            }
+            fetchUsers();
+            fetchGroups();
+            fetchDnsConfig();
 
-            $scope.ready = true;
+            fetchAppstoreConfig(function (error) {
+                if (error) console.error(error);
+                $scope.ready = true;
+            });
         });
     }
 
-    Client.onReady(refresh);
-    Client.onReady(checkAppstoreAccount);
+    Client.onReady(init);
 
     $('#appInstallModal').on('hide.bs.modal', function () {
         $location.path('/appstore', false).search({ version: undefined });
@@ -592,7 +572,7 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$loca
     });
 
     // setup all the dialog focus handling
-    ['appInstallModal', 'feedbackModal', 'appstoreLoginModal'].forEach(function (id) {
+    ['appInstallModal', 'feedbackModal'].forEach(function (id) {
         $('#' + id).on('shown.bs.modal', function () {
             $(this).find("[autofocus]:first").focus();
         });