Files
cloudron-box/src/views/settings.html

375 lines
18 KiB
HTML
Raw Normal View History

<!-- 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>
2019-09-04 21:10:24 -07:00
<span>Please wait for the above operations to finish.</span>
<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">
2019-05-12 13:08:40 -07:00
<label class="checkbox-inline pull-left">
<input type="checkbox" ng-model="update.skipBackup"><b>Skip backup</b>
</label>
<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>
2018-01-22 13:01:38 -08:00
<!-- 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>
2018-01-22 13:01:38 -08:00
</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>
2018-01-22 13:01:38 -08:00
</div>
</div>
</div>
</div>
2019-10-22 22:31:38 -07:00
<!-- Modal registry config -->
<div class="modal fade" id="registryConfigModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Private Registry Configuration</h4>
</div>
<div class="modal-body">
<form name="registryConfigForm" role="form" novalidate ng-submit="registryConfig.submit()" autocomplete="off">
<fieldset>
<p class="has-error text-center" ng-show="registryConfig.error">{{ registryConfig.error }}</p>
<div class="form-group">
<label class="control-label" for="registryConfigServerAddress">Registry Server</label>
2019-10-23 06:11:27 -07:00
<input type="text" class="form-control" ng-model="registryConfig.serverAddress" id="registryConfigServerAddress" name="serveraddress" ng-disabled="registryConfig.busy" placeholder=" https://index.docker.io/v2/" ng-required>
2019-10-22 22:31:38 -07:00
</div>
<div class="form-group">
2019-10-23 06:11:27 -07:00
<label class="control-label" for="registryConfigUsername">Username</label>
<input type="text" class="form-control" ng-model="registryConfig.username" id="registryConfigUsername" name="username" ng-disabled="registryConfig.busy" ng-required>
</div>
2019-10-22 22:31:38 -07:00
2019-10-23 06:11:27 -07:00
<div class="form-group">
<label class="control-label" for="registryConfigEmail">Email</label>
<input type="text" class="form-control" ng-model="registryConfig.email" id="registryConfigEmail" name="email" ng-disabled="registryConfig.busy" ng-required>
</div>
<div class="form-group">
<label class="control-label" for="registryConfigPassword">Password</label>
<input type="text" class="form-control" ng-model="registryConfig.password" id="registryConfigPassword" name="password" ng-disabled="registryConfig.busy" ng-required>
</div>
2019-10-22 22:31:38 -07:00
</fieldset>
</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="registryConfig.submit()" ng-disabled="registryConfigForm.$invalid || registryConfig.busy"><i class="fa fa-circle-notch fa-spin" ng-show="registryConfig.busy"></i> Save</button>
</div>
</div>
</div>
</div>
2018-01-22 13:01:38 -08:00
<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>
2018-01-22 13:01:38 -08:00
</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>
2018-12-10 16:50:40 +01:00
<tr ng-show="!update.busy && update.errorMessage">
<td class="text-muted" style="vertical-align: top; white-space: nowrap;">Update Error:</td>
<td class="text-right has-error" style="vertical-align: top;">{{ update.errorMessage }}</td>
</tr>
2018-12-10 16:50:40 +01:00
<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>
2018-12-10 16:50:40 +01:00
<div>{{ update.message }}</div>
</td>
2018-12-10 16:50:40 +01:00
</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>
2018-01-22 13:01:38 -08:00
</div>
2019-05-10 16:09:13 -07:00
<div class="text-left" ng-show="config.uiSpec.subscription.configurable">
2018-01-22 13:01:38 -08:00
<h3>Cloudron.io Account</h3>
</div>
2019-05-10 16:09:13 -07:00
<div class="card" style="margin-bottom: 15px;" ng-show="config.uiSpec.subscription.configurable">
<div ng-show="subscriptionBusy">
<div class="row">
<div class="col-xs-12 text-center">
<h2><i class="fa fa-circle-notch fa-spin"></i></h2>
</div>
2018-01-22 13:01:38 -08:00
</div>
</div>
<div ng-show="!subscriptionBusy">
2018-01-22 13:01:38 -08:00
<div class="row">
<div class="col-xs-12">
A Cloudron account provides access to the Cloudron App Store. This ensures you are running the latest versions to keep your apps and server secure.
</div>
2018-01-22 13:01:38 -08:00
</div>
<br/>
<div class="row" ng-show="!subscription">
<div class="col-xs-12 text-center">
<a class="btn btn-success" ng-href="/#/appstore">Setup Account</a>
</div>
2018-01-22 13:01:38 -08:00
</div>
<div class="row" ng-show="subscription">
<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=' + subscription.emailEncoded }}" target="_blank">{{ subscription.email }}</a>
</div>
2018-01-22 13:01:38 -08:00
</div>
<div class="row" ng-show="subscription">
<div class="col-xs-6">
<span class="text-muted">Cloudron ID</span>
</div>
<div class="col-xs-6 text-right">
<span>{{ subscription.cloudronId }}</span>
</div>
</div>
<div class="row" ng-show="subscription">
<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" ng-show="subscription">
<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>
2018-01-22 13:01:38 -08:00
<br/>
<div class="row" ng-show="subscription">
<div class="col-xs-12">
<a class="btn btn-primary pull-right" ng-click="pollSubscriptionStatus()" ng-href="{{ config.webServerOrigin + '/console.html#/userprofile?view=subscriptions&email=' + subscription.emailEncoded + '&cloudronId=' + subscription.cloudronId }}" target="_blank" ng-show="subscription.plan.id !== 'free' && !subscription.cancel_at">Change Subscription</a>
<a class="btn btn-success pull-right" ng-click="pollSubscriptionStatus()" ng-href="{{ config.webServerOrigin + '/console.html#/userprofile?view=subscriptions&email=' + subscription.emailEncoded }}" target="_blank" ng-show="subscription.plan.id !== 'free' && subscription.cancel_at">Reactivate Subscription</a>
<a class="btn btn-success pull-right" ng-click="pollSubscriptionStatus()" ng-href="{{ config.webServerOrigin + '/console.html#/userprofile?view=subscriptions&email=' + subscription.emailEncoded + '&cloudronId=' + subscription.cloudronId }}" target="_blank" ng-show="subscription.plan.id === 'free'">Setup Subscription</a>
</div>
2018-01-22 13:01:38 -08:00
</div>
</div>
2018-01-22 13:01:38 -08:00
</div>
<div class="text-left">
2018-03-05 09:39:03 -08:00
<h3>App Updates</h3>
2018-01-22 13:01:38 -08:00
</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>
2018-01-22 13:01:38 -08:00
<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>
2018-03-06 21:30:42 -08:00
<input type="radio" name="scheduleRadio" ng-change="autoUpdate.success = false" ng-model="autoUpdate.pattern" value="00 30 1,3,5,23 * * *">
2018-01-22 13:01:38 -08:00
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">
2018-11-06 14:04:30 -08:00
No automatic updates
2018-01-22 13:01:38 -08:00
</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>
2018-01-22 13:01:38 -08:00
</div>
</div>
</div>
2019-10-22 22:31:38 -07:00
<div class="text-left">
<h3>Private Docker Registry</h3>
</div>
<div class="card" style="margin-bottom: 15px;">
<div class="row">
<div class="col-xs-12">
Cloudron can pull and install apps from private docker registry.
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-6">
<span class="text-muted">Server address</span>
</div>
<div class="col-xs-6 text-right">
<span>{{ registryConfig.serverAddress || 'Not set' }}</span>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<span class="text-muted">Username</span>
</div>
<div class="col-xs-6 text-right">
2019-10-23 06:11:27 -07:00
<span>{{ registryConfig.username || registryConfig.email || 'Not set' }}</span>
2019-10-22 22:31:38 -07:00
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary pull-right" ng-click="registryConfig.show()">Configure Registry</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>
2019-05-20 10:55:46 -07:00
Enable this option to list and install apps in the testing phase. These apps are not officially supported and there is no
guarantee that they will be updated in the future.
</p>
<b class="text-danger">
2019-05-20 10:55:46 -07:00
Do not use these apps in production.
</b>
</div>
</div>
<div class="row">
2019-10-22 10:06:32 -07:00
<div class="col-md-6 col-md-offset-6 text-right">
<button ng-class="!unstableApps.enabled ? 'btn btn-outline pull-right btn-danger' : 'btn btn-outline pull-right btn-primary'" ng-click="unstableApps.submit()" ng-disabled="unstableApps.busy"><i class="fa fa-circle-notch fa-spin" ng-show="unstableApps.busy"></i>
{{ unstableApps.enabled ? 'Disable' : 'Enable' }}
</button>
</div>
</div>
</div>
2018-01-22 13:01:38 -08:00
</div>