Files
cloudron-box/src/views/settings.html
2019-04-27 22:44:41 +02:00

289 lines
14 KiB
HTML

<!-- Modal update -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Cloudron Update to <b>{{config.update.box.version}}</b> </h4>
</div>
<div class="modal-body">
<div ng-hide="installedApps | readyToUpdate">
<p>The apps below are blocking the update because they have pending actions:</p>
<ul>
<li ng-repeat="app in installedApps | inProgressApps">{{app.location}}</li>
</ul>
<br/>
<b class="text-danger">Please wait for the app actions to finish.</b>
<br/>
<br/>
</div>
<div ng-show="installedApps | readyToUpdate">
<p>Changes:</p>
<ul>
<li ng-repeat="change in config.update.box.changelog" ng-bind-html="change | markdown2html"></li>
</ul>
<br/>
<p ng-show="update.error.generic" class="text-danger">{{ update.error.generic }}</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" ng-click="update.startUpdate()" ng-disabled="update.busy" ng-show="(installedApps | readyToUpdate)"><i class="fa fa-circle-notch fa-spin" ng-show="update.busy"></i> Update</button>
</div>
</div>
</div>
</div>
<!-- Modal change avatar -->
<div class="modal fade" id="avatarChangeModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Change your Cloudron Avatar</h4>
</div>
<div class="modal-body settings-avatar-selector">
<img id="previewAvatar" width="128" height="128" ng-src="{{avatarChange.avatar.data || avatarChange.avatar.url || client.avatar}}"/>
<input type="file" id="avatarFileInput" style="display: none" accept="image/png"/>
<br/>
<br/>
<div class="grid">
<div class="item" ng-repeat="avatar in avatarChange.availableAvatars" style="background-image: url('{{avatar.data || avatar.url}}');" ng-click="avatarChange.setPreviewAvatar(avatar)"></div>
<div class="item add" ng-click="avatarChange.showCustomAvatarSelector()"></div>
</div>
</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="avatarChange.doChangeAvatar()" ng-disabled="avatarChange.busy"><i class="fa fa-circle-notch fa-spin" ng-show="avatarChange.busy"></i> Change</button>
</div>
</div>
</div>
</div>
<!-- Modal change cloudron name -->
<div class="modal fade" id="cloudronNameChangeModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Change Cloudron Name</h4>
</div>
<div class="modal-body">
<form name="cloudronNameChangeForm" role="form" novalidate ng-submit="cloudronNameChange.submit()" autocomplete="off">
<div class="form-group" ng-class="{ 'has-error': (cloudronNameChangeForm.name.$dirty && cloudronNameChangeForm.name.$invalid) }">
<label class="control-label">Name</label>
<div class="control-label" ng-show="(!cloudronNameChangeForm.name.$dirty && cloudronNameChange.error.name) || (cloudronNameChangeForm.name.$dirty && cloudronNameChangeForm.name.$invalid)">
<small ng-show="cloudronNameChangeForm.name.$error.required">A name is required</small>
<small ng-show="cloudronNameChangeForm.name.$error.maxlength">The name is too long</small>
<small ng-show="!cloudronNameChangeForm.name.$dirty && cloudronNameChange.error.name">{{ cloudronNameChange.error.name }}</small>
</div>
<input type="text" class="form-control" ng-model="cloudronNameChange.name" name="name" id="inputCloudronName" ng-maxlength="30" required autofocus>
</div>
<input class="ng-hide" type="submit" ng-disabled="cloudronNameChangeForm.$invalid"/>
</form>
</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="cloudronNameChange.submit()" ng-disabled="cloudronNameChangeForm.$invalid || cloudronNameChange.busy"><i class="fa fa-circle-notch fa-spin" ng-show="cloudronNameChange.busy"></i> Change</button>
</div>
</div>
</div>
</div>
<div class="content">
<div class="text-left">
<h1>Settings</h1>
</div>
<div class="text-left">
<h3>About</h3>
</div>
<div class="card" style="margin-bottom: 15px;">
<div class="row">
<div class="col-xs-4" style="min-width: 150px;">
<div class="settings-avatar" ng-click="avatarChange.showChangeAvatar()" style="background-image: url('{{ client.avatar }}');">
<div class="overlay"></div>
</div>
</div>
<div class="col-xs-8">
<table width="100%">
<tr>
<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-edit text-small"></i></a></td>
</tr>
<tr>
<td class="text-muted" style="vertical-align: top;">Version</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.version }}</td>
</tr>
<tr>
<td class="text-muted" style="vertical-align: top;">Provider</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ prettyProviderName(config.provider) }}</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr ng-show="!update.busy && update.errorMessage">
<td class="text-muted" style="vertical-align: top;">Update Error:</td>
<td class="text-right has-error" style="vertical-align: top; white-space: nowrap;">{{ update.errorMessage }}</td>
</tr>
<tr ng-show="update.busy">
<td colspan="2">
<div class="progress progress-striped active animateMe" style="margin-bottom: 10px;">
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{update.percent}}%"></div>
</div>
<div>{{ update.message }}</div>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 10px;">
<button class="btn btn-primary pull-right" ng-show="!config.update.box && !update.busy" ng-disabled="autoUpdate.busy" ng-click="autoUpdate.checkNow()"><i class="fa fa-circle-notch fa-spin" ng-show="autoUpdate.busy"></i> Check for Updates</button>
<button class="btn btn-success pull-right" ng-show="config.update.box && !update.busy" ng-click="update.show()">Update Available</button>
<button class="btn btn-danger pull-right" ng-show="config.update.box && update.busy" ng-click="update.stopUpdate()">Stop Update</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="text-left" ng-show="!config.managed">
<h3>Cloudron.io Account</h3>
</div>
<div class="card" style="margin-bottom: 15px;" ng-show="!config.managed">
<div class="row">
<div class="col-xs-12">
A Cloudron subscription provides access to the Cloudron App Store. This ensures you are running the latest version and keeps your apps and server secure.
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-6">
<span class="text-muted">Account Email</span>
</div>
<div class="col-xs-6 text-right">
<a ng-href="{{ config.webServerOrigin + '/console.html#/userprofile?email=' + appstoreConfig.profile.emailEncoded }}" target="_blank">{{ appstoreConfig.profile.email }}</a>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<span class="text-muted">Cloudron ID</span>
</div>
<div class="col-xs-6 text-right">
<span>{{ appstoreConfig.cloudronId }}</span>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<span class="text-muted">Subscription</span>
</div>
<div class="col-xs-6 text-right">
<span>{{ subscription.plan.name }}</span>
</div>
</div>
<div class="row">
<div class="col-xs-12 text-right">
<b class="text-danger" ng-show="subscription.cancel_at">Canceled and ends on {{ (subscription.cancel_at*1000) | prettyShortDate }}</b>
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-12" ng-show="subscription">
<a class="btn btn-primary pull-right" ng-href="{{ config.webServerOrigin + '/console.html#/userprofile?view=subscriptions&email=' + appstoreConfig.profile.emailEncoded + '&cloudronId=' + appstoreConfig.cloudronId }}" target="_blank" ng-show="subscription.plan.id !== 'free' && !subscription.cancel_at">Change Subscription</a>
<a class="btn btn-success pull-right" ng-href="{{ config.webServerOrigin + '/console.html#/userprofile?view=subscriptions&email=' + appstoreConfig.profile.emailEncoded }}" target="_blank" ng-show="subscription.plan.id !== 'free' && subscription.cancel_at">Reactivate Subscription</a>
<a class="btn btn-success pull-right" ng-href="{{ config.webServerOrigin + '/console.html#/userprofile?view=subscriptions&email=' + appstoreConfig.profile.emailEncoded + '&cloudronId=' + appstoreConfig.cloudronId }}" target="_blank" ng-show="subscription.plan.id === 'free'">Setup Subscription</a>
</div>
</div>
</div>
<div class="text-left">
<h3>App Updates</h3>
</div>
<div class="card" style="margin-bottom: 15px;">
<div class="row">
<div class="col-md-12">
<p>Configure the update schedule for the apps</p>
<p class="text-danger" ng-show="autoUpdate.error"><br/>{{ autoUpdate.error }}</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="radio">
<label>
<input type="radio" name="scheduleRadio" ng-change="autoUpdate.success = false" ng-model="autoUpdate.pattern" value="00 30 1,3,5,23 * * *">
Every night
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="scheduleRadio" ng-change="autoUpdate.success = false" ng-model="autoUpdate.pattern" value="00 00 3,5 * * 3">
Wednesday night
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="scheduleRadio" ng-change="autoUpdate.success = false" ng-model="autoUpdate.pattern" value="00 00 1,3,5,23 * * 6">
Saturday night
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="scheduleRadio" ng-change="autoUpdate.success = false" ng-model="autoUpdate.pattern" value="never">
No automatic updates
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<span class="text-success text-bold" ng-show="autoUpdate.success && autoUpdate.pattern === autoUpdate.currentPattern">Saved</span>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-outline btn-primary pull-right" ng-click="autoUpdate.submit()" ng-disabled="autoUpdate.pattern === autoUpdate.currentPattern"> Save</button>
</div>
</div>
</div>
<div class="text-left">
<h3>Unstable App Listing</h3>
</div>
<div class="card" style="margin-bottom: 15px;">
<div class="row">
<div class="col-md-12">
<p>
Besides the officially supported and tested apps, Cloudron can also install apps, which are currently in testing phase or not officially supported.
There is no guarantee that those apps will be updated in the future.
If enabled, those apps will be listed in the <a href="#/appstore">App Store</a> and marked accordingly.
</p>
<b class="text-danger">
Do not use those apps in any production environment.
</b>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="unstableApps.enabled">Enable unstable app listing</input>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<span class="text-success text-bold" ng-show="unstableApps.success">Saved</span>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-outline btn-primary pull-right" ng-click="unstableApps.submit()" ng-disabled="unstableApps.busy"><i class="fa fa-circle-notch fa-spin" ng-show="unstableApps.busy"></i> Save</button>
</div>
</div>
</div>
</div>