jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Embed the appstore login instead of a dialog

Browse Source
This commit is contained in:
Johannes Zellner
2017-01-16 12:34:33 +01:00
parent 9f20dfb237
commit 2dfb91dcc9
3 changed files with 84 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
webadmin/src/views/appstore.html
View File

@@ -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>

82
webadmin/src/views/appstore.js
View File

@@ -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();
});