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

dns config: make form a dialog

Browse Source
This commit is contained in:
Girish Ramakrishnan
2016-07-05 13:39:57 -05:00
parent 82a3ac5382
commit bbe21d36c6
2 changed files with 53 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
webadmin/src/views/certs.html
View File

@@ -1,3 +1,33 @@
<div class="modal fade" id="dnsCredentialsModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Configure DNS</h4>
</div>
<div class="modal-body">
<form name="dnsCredentialsForm" role="form" novalidate ng-submit="setDnsCredentials()" autocomplete="off">
<fieldset>
<p class="has-error text-center" ng-show="dnsCredentials.error">{{ dnsCredentials.error }}</p>
<div class="form-group" ng-class="{ 'has-error': false }">
<label class="control-label" for="dnsCredentialsAccessKeyId">Access Key Id</label>
<input type="text" class="form-control" ng-model="dnsCredentials.accessKeyId" id="dnsCredentialsAccessKeyId" name="accessKeyId" ng-disabled="dnsCredentials.busy" ng-minlength="16" ng-maxlength="32" required>
</div>
<div class="form-group" ng-class="{ 'has-error': false }">
<label class="control-label" for="dnsCredentialsSecretAccessKey">Secret Access Key</label>
<input type="text" class="form-control" ng-model="dnsCredentials.secretAccessKey" id="dnsCredentialsSecretAccessKey" name="secretAccessKey" ng-disabled="dnsCredentials.busy" required>
</div>
</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="setDnsCredentials()" ng-disabled="dnsCredentialsForm.$invalid"><i class="fa fa-spinner fa-pulse" ng-show="dnsCredentials.busy"></i> Save</button>
</div>
</div>
</div>
</div>
<div class="section-header">
<div class="text-left">
<h1>Domain & Certificates</h1>
@@ -18,7 +48,7 @@
<table width="100%">
<tr ng-show="config.isCustomDomain">
<td class="text-muted" style="vertical-align: top;">Access Key Id</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ dnsConfig.accessKeyId }}</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ dnsConfig.accessKeyId || 'unset' }}</td>
</tr>
<tr ng-show="config.isCustomDomain">
<td class="text-muted" style="vertical-align: top;">Secret Access Key</td>
@@ -26,31 +56,9 @@
</tr>
<tr>
<td class="text-muted" style="vertical-align: top;"></td>
<td class="text-right" style="vertical-align: top;"><span class="text-success" ng-show="dnsCredentials.success"><b>Done</b></span> &nbsp; &nbsp; <button class="btn btn-outline btn-xs btn-primary" ng-show="!dnsCredentials.formVisible" ng-click="showDnsCredentialsForm()">Change</button></td>
<td class="text-right" style="vertical-align: top;"><button class="btn btn-outline btn-xs btn-primary" ng-click="showChangeDnsCredentials()">Change</button></td>
</tr>
</table>
<div class="collapse" id="collapseDnsCredentialsForm" data-toggle="false">
<p>The security credentials must have full Route53 access.</p>
<form name="dnsCredentialsForm" ng-submit="setDnsCredentials()">
<fieldset>
<div class="has-error text-center" ng-show="dnsCredentials.error">{{ dnsCredentials.error }}</div>
<div class="form-group" ng-class="{ 'has-error': false }">
<label class="control-label" for="dnsCredentialsAccessKeyId">Access Key Id</label>
<input type="text" class="form-control" ng-model="dnsCredentials.accessKeyId" id="dnsCredentialsAccessKeyId" name="accessKeyId" ng-disabled="dnsCredentials.busy" ng-minlength="16" ng-maxlength="32" required>
</div>
<div class="form-group" ng-class="{ 'has-error': false }">
<label class="control-label" for="dnsCredentialsSecretAccessKey">Secret Access Key</label>
<input type="text" class="form-control" ng-model="dnsCredentials.secretAccessKey" id="dnsCredentialsSecretAccessKey" name="secretAccessKey" ng-disabled="dnsCredentials.busy" required>
</div>
<a href="" class="pull-left" ng-click="hideDnsCredentialsForm()">Collapse</a>
<button type="submit" class="btn btn-outline btn-success pull-right" ng-disabled="dnsCredentialsForm.$invalid || busy"><i class="fa fa-spinner fa-pulse" ng-show="dnsCredentials.busy"></i> Save</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>

33
webadmin/src/views/certs.js
View File

@@ -4,6 +4,7 @@ angular.module('Application').controller('CertsController', ['$scope', '$locatio
Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
$scope.config = Client.getConfig();
$scope.dnsConfig = null;
$scope.defaultCert = {
error: null,
@@ -29,7 +30,6 @@ angular.module('Application').controller('CertsController', ['$scope', '$locatio
error: null,
success: false,
busy: false,
formVisible: false,
accessKeyId: '',
secretAccessKey: '',
provider: 'route53'
@@ -95,11 +95,6 @@ angular.module('Application').controller('CertsController', ['$scope', '$locatio
});
};
$scope.hideDnsCredentialsForm = function () {
$('#collapseDnsCredentialsForm').collapse('hide');
$scope.dnsCredentials.formVisible = false;
};
$scope.setDnsCredentials = function () {
$scope.dnsCredentials.busy = true;
$scope.dnsCredentials.error = null;
@@ -120,28 +115,35 @@ angular.module('Application').controller('CertsController', ['$scope', '$locatio
$scope.dnsConfig.accessKeyId = $scope.dnsCredentials.accessKeyId;
$scope.dnsConfig.secretAccessKey = $scope.dnsCredentials.secretAccessKey;
$scope.dnsCredentials.accessKeyId = '';
$scope.dnsCredentials.secretAccessKey = '';
$('#dnsCredentialsModal').modal('hide');
$scope.hideDnsCredentialsForm();
dnsCredentialsReset();
}
$scope.dnsCredentials.busy = false;
});
};
$scope.showDnsCredentialsForm = function () {
function dnsCredentialsReset() {
$scope.dnsCredentials.busy = false;
$scope.dnsCredentials.success = false;
$scope.dnsCredentials.error = null;
$scope.dnsCredentials.accessKeyId = '';
$scope.dnsCredentials.secretAccessKey = '';
$scope.dnsCredentialsForm.$setPristine();
$scope.dnsCredentialsForm.$setUntouched();
$scope.dnsCredentials.formVisible = true;
$('#collapseDnsCredentialsForm').collapse('show');
$('#dnsCredentialsAccessKeyId').focus();
}
$scope.showChangeDnsCredentials = function () {
dnsCredentialsReset();
$scope.dnsCredentials.accessKeyId = $scope.dnsConfig.accessKeyId;
$('#dnsCredentialsModal').modal('show');
};
Client.onReady(function () {
@@ -151,4 +153,11 @@ angular.module('Application').controller('CertsController', ['$scope', '$locatio
$scope.dnsConfig = result;
});
});
// setup all the dialog focus handling
['dnsCredentialsModal'].forEach(function (id) {
$('#' + id).on('shown.bs.modal', function () {
$(this).find("[autofocus]:first").focus();
});
});
}]);