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

Make the user confirm the post install message on first time clicking the app icon

Browse Source
This commit is contained in:
Johannes Zellner
2018-06-14 15:46:55 +02:00
parent 461fb0144e
commit 37c8b2b57f
5 changed files with 73 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/apps.html
+30 -1
View File
@@ -311,6 +311,35 @@
</div>
</div>
<!-- Modal postinstall confirm -->
<div class="modal fade" id="appPostInstallConfirmModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<img ng-src="{{appPostInstallConfirm.app.iconUrl}}" onerror="this.onerror=null;this.src='img/appicon_fallback.png'" class="app-info-icon"/>
<h5 class="app-info-title">
{{ appPostInstallConfirm.app.manifest.title }}
<span class="app-info-meta text-small">Package <a ng-href="/#/appstore/{{appPostInstallConfirm.app.manifest.id}}?version={{appPostInstallConfirm.app.manifest.version}}">v{{ appPostInstallConfirm.app.manifest.version }}</a> </span>
</h5>
<br/>
<span class="app-info-meta" ng-show="appPostInstallConfirm.app.manifest.documentationUrl"><a target="_blank" ng-href="{{appPostInstallConfirm.app.manifest.documentationUrl}}">Documentation</a> </span>
<br/>
</div>
<div class="modal-body">
<div ng-bind-html="appPostInstallConfirm.app.manifest.postInstallMessage | postInstallMessage:appPostInstallConfirm.app | markdown2html"></div>
</div>
<div class="modal-footer">
<div class="form-group pull-left">
<input type="checkbox" id="appPostInstallConfirmCheckbox" ng-model="appPostInstallConfirm.confirmed">
<label class="control-label" for="appPostInstallConfirmCheckbox">Confirm to have read the instructions</label>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a class="btn btn-success" ng-href="{{ appPostInstallConfirm.confirmed ? ('https://' + appPostInstallConfirm.app.fqdn) : '' }}" target="_blank" ng-disabled="!appPostInstallConfirm.confirmed" ng-click="appPostInstallConfirm.submit()">Open {{ appPostInstallConfirm.app.manifest.title }}</a>
</div>
</div>
</div>
</div>
<!-- Modal error app -->
<div class="modal fade" id="appErrorModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
@@ -428,7 +457,7 @@
<div class="animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
<div class="col-sm-1 grid-item" ng-repeat="app in installedApps | orderBy:'location'">
<div style="background-color: white;" class="highlight grid-item-content" uib-tooltip="{{ app.fqdn }}">
<a ng-href="{{ app | applicationLink }}" ng-click="(app | installError) === true && showError(app)" target="_blank" ng-class="{ 'hand': !(app | installationActive) }">
<a ng-href="{{ app | applicationLink }}" ng-click="((app | installError) === true && showError(app)) || (app.pendingPostInstallConfirmation && appPostInstallConfirm.show(app))" target="_blank" ng-class="{ 'hand': !(app | installationActive) }">
<div class="grid-item-top">
<div class="row">
<div class="col-xs-12 text-center" style="padding-left: 5px; padding-right: 5px;">
src/views/apps.js
+30
View File
@@ -313,6 +313,30 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
message: ''
};
$scope.appPostInstallConfirm = {
app: {},
message: '',
confirmed: false,
show: function (app) {
$scope.reset();
$scope.appPostInstallConfirm.app = app;
$scope.appPostInstallConfirm.message = app.manifest.postInstallMessage;
$('#appPostInstallConfirmModal').modal('show');
return false; // prevent propagation and default
},
submit: function () {
$scope.appPostInstallConfirm.app.pendingPostInstallConfirmation = false;
delete localStorage['confirmPostInstall_' + $scope.appPostInstallConfirm.app.id];
$('#appPostInstallConfirmModal').modal('hide');
}
};
$scope.appError = {
app: {}
};
@@ -333,6 +357,7 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
$('#appUpdateModal').modal('hide');
$('#appInfoModal').modal('hide');
$('#appUninstallModal').modal('hide');
$('#appPostInstallConfirmModal').modal('hide');
// reset configure dialog
$scope.appConfigure.error = {};
@@ -383,6 +408,11 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
$scope.appRestore.portBindingsInfo = {};
$scope.appRestore.portBindingsEnabled = {};
$scope.appRestore.action = 'restore';
// post install confirmation dialog
$scope.appPostInstallConfirm.app = {};
$scope.appPostInstallConfirm.message = '';
$scope.appPostInstallConfirm.confirmed = false;
};
$scope.readCertificate = function (event) {
src/views/appstore.js
+9 -1
View File
@@ -161,7 +161,7 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$loca
// add sso property for the postInstall message to be shown correctly
$scope.appInstall.app.sso = data.sso;
Client.installApp($scope.appInstall.app.id, $scope.appInstall.app.manifest, $scope.appInstall.app.title, data, function (error) {
Client.installApp($scope.appInstall.app.id, $scope.appInstall.app.manifest, $scope.appInstall.app.title, data, function (error, newAppId) {
if (error) {
if (error.statusCode === 402) {
$scope.appInstall.state = 'appLimitReached';
@@ -191,6 +191,9 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$loca
$scope.appInstall.busy = false;
// stash new app id for later
$scope.appInstall.app.id = newAppId;
$scope.appInstall.postInstall();
});
},
@@ -200,6 +203,11 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$loca
$scope.appInstall.state = 'postInstall';
$('#collapseInstallForm').collapse('hide');
$('#postInstallMessage').collapse('show');
// we track the postinstall confirmation for the current user's browser
// TODO later we might want to have a notification db to track the state across admins and browsers
localStorage['confirmPostInstall_' + $scope.appInstall.app.id] = true;
return;
}