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

Add UI components to allow cloudron name changes

Browse Source
This commit is contained in:
Johannes Zellner
2016-07-28 12:56:17 +02:00
parent 690564983f
commit b8a635c638
2 changed files with 81 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
webadmin/src/views/settings.html
View File

@@ -25,6 +25,35 @@
</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-spinner fa-pulse" ng-show="cloudronNameChange.busy"></i> Change</button>
</div>
</div>
</div>
</div>
<!-- Modal backup -->
<div class="modal fade" id="createBackupModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
@@ -151,6 +180,10 @@
</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-pencil text-small"></i></a></td>
</tr>
<tr ng-show="config.provider === 'caas'">
<td class="text-muted" style="vertical-align: top;">Model</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.size }} - {{ config.region }}</td>

49
webadmin/src/views/settings.js
View File

@@ -367,6 +367,53 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
}
};
$scope.cloudronNameChange = {
busy: false,
error: {},
name: '',
reset: function () {
$scope.cloudronNameChange.busy = false;
$scope.cloudronNameChange.error.name = null;
$scope.cloudronNameChange.name = '';
$scope.cloudronNameChangeForm.$setUntouched();
$scope.cloudronNameChangeForm.$setPristine();
},
show: function () {
$scope.cloudronNameChange.reset();
$scope.cloudronNameChange.name = $scope.config.cloudronName;
$('#cloudronNameChangeModal').modal('show');
},
submit: function () {
$scope.cloudronNameChange.error.name = null;
$scope.cloudronNameChange.busy = true;
Client.changeCloudronName($scope.cloudronNameChange.name, function (error) {
$scope.cloudronNameChange.busy = false;
if (error) {
if (error.statusCode === 400) {
$scope.cloudronNameChange.error.name = 'Invalid name';
$scope.cloudronNameChange.name = '';
$('#inputCloudronName').focus();
$scope.cloudronNameChangeForm.password.$setPristine();
} else {
console.error('Unable to change name.', error);
return;
}
}
$scope.cloudronNameChange.reset();
$('#cloudronNameChangeModal').modal('hide');
Client.refreshConfig();
});
}
};
Client.onReady(function () {
fetchBackups();
@@ -391,7 +438,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
});
// setup all the dialog focus handling
['planChangeModal', 'appstoreLoginModal'].forEach(function (id) {
['planChangeModal', 'appstoreLoginModal', 'cloudronNameChangeModal'].forEach(function (id) {
$('#' + id).on('shown.bs.modal', function () {
$(this).find("[autofocus]:first").focus();
});