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

streamline cert upload forms in settings

Browse Source
This commit is contained in:
Johannes Zellner
2015-10-29 11:52:53 +01:00
parent 32173b19c9
commit aa5ed17dfa
2 changed files with 77 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -152,32 +152,58 @@
<div class="card" style="margin-bottom: 15px;" ng-show="user.admin && config.isCustomDomain">
<div class="row">
<div class="col-md-12">
These certificates have to be wildcard certificates and will be used for all apps, which were not configured to use a specific certificate.
<br/>
<br/>
<form name="certificateForm" ng-submit="submitCertificate()">
<form name="defaultCertForm" ng-submit="setDefaultCert()">
<fieldset>
<label class="control-label" for="defaultCertInput">Fallback Certificate</label>
<p>This certificate has to be wildcard certificates and will be used for all apps, which were not configured to use a specific certificate.</p>
<div class="form-group" ng-class="{ 'has-error': false }">
<label class="control-label" for="certificateCertInput">Certificate</label>
<div class="input-group">
<input type="file" id="certificateFileInput" style="display:none"/>
<input type="text" class="form-control" ng-model="certificateFileName" id="certificateCertInput" name="certificate" onclick="getElementById('certificateFileInput').click();" style="cursor: pointer;" required>
<input type="file" id="defaultCertFileInput" style="display:none"/>
<input type="text" class="form-control" placeholder="Certificate" ng-model="defaultCert.certificateFileName" id="defaultCertInput" name="certificate" onclick="getElementById('defaultCertFileInput').click();" style="cursor: pointer;" required>
<span class="input-group-addon">
<i class="fa fa-upload" onclick="getElementById('certificateFileInput').click();"></i>
<i class="fa fa-upload" onclick="getElementById('defaultCertFileInput').click();"></i>
</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': false }">
<label class="control-label" for="certificateCertInput">Key</label>
<div class="input-group">
<input type="file" id="keyFileInput" style="display:none"/>
<input type="text" class="form-control" ng-model="keyFileName" id="certificateKeyInput" name="key" onclick="getElementById('keyFileInput').click();" style="cursor: pointer;" required>
<input type="file" id="defaultKeyFileInput" style="display:none"/>
<input type="text" class="form-control" placeholder="Key" ng-model="defaultCert.keyFileName" id="defaultKeyInput" name="key" onclick="getElementById('defaultKeyFileInput').click();" style="cursor: pointer;" required>
<span class="input-group-addon">
<i class="fa fa-upload" onclick="getElementById('keyFileInput').click();"></i>
<i class="fa fa-upload" onclick="getElementById('defaultKeyFileInput').click();"></i>
</span>
</div>
</div>
<button type="submit" class="btn btn-outline btn-success pull-right" ng-click="setCertificate()">Upload Certificate</button>
<button type="submit" class="btn btn-outline btn-success pull-right" ng-click="setDefaultCert()">Upload</button>
</fieldset>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form name="adminCertForm" ng-submit="setAdminCert()">
<fieldset>
<label class="control-label" for="adminCertInput">Settings Certificate</label>
<p>This certificate will be used for this Settings application.</p>
<div class="form-group" ng-class="{ 'has-error': false }">
<div class="input-group">
<input type="file" id="adminCertFileInput" style="display:none"/>
<input type="text" class="form-control" placeholder="Certificate" ng-model="adminCert.certificateFileName" id="adminCertInput" name="certificate" onclick="getElementById('adminCertFileInput').click();" style="cursor: pointer;" required>
<span class="input-group-addon">
<i class="fa fa-upload" onclick="getElementById('adminCertFileInput').click();"></i>
</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': false }">
<div class="input-group">
<input type="file" id="adminKeyFileInput" style="display:none"/>
<input type="text" class="form-control" placeholder="Key" ng-model="adminCert.KeyFileName" id="adminKeyInput" name="key" onclick="getElementById('adminKeyFileInput').click();" style="cursor: pointer;" required>
<span class="input-group-addon">
<i class="fa fa-upload" onclick="getElementById('adminKeyFileInput').click();"></i>
</span>
</div>
</div>
<button type="submit" class="btn btn-outline btn-success pull-right" ng-click="setAdminCert()">Upload</button>
</fieldset>
</form>
</div>

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

@@ -83,45 +83,50 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
}]
};
$scope.certificateFile = null;
$scope.certificateFileName = '';
$scope.keyFile = null;
$scope.keyFileName = '';
document.getElementById('certificateFileInput').onchange = function (event) {
$scope.$apply(function () {
$scope.certificateFile = null;
$scope.certificateFileName = event.target.files[0].name;
var reader = new FileReader();
reader.onload = function (result) {
if (!result.target || !result.target.result) return console.error('Unable to read local file');
$scope.certificateFile = result.target.result;
};
reader.readAsText(event.target.files[0]);
});
$scope.defaultCert = {
certificateFile: null,
certificateFileName: '',
keyFile: null,
keyFileName: ''
};
document.getElementById('keyFileInput').onchange = function (event) {
$scope.$apply(function () {
$scope.keyFile = null;
$scope.keyFileName = event.target.files[0].name;
var reader = new FileReader();
reader.onload = function (result) {
if (!result.target || !result.target.result) return console.error('Unable to read local file');
$scope.keyFile = result.target.result;
};
reader.readAsText(event.target.files[0]);
});
$scope.adminCert = {
certificateFile: null,
certificateFileName: '',
keyFile: null,
keyFileName: ''
};
$scope.setCertificate = function () {
Client.setCertificate($scope.certificateFile, $scope.keyFile, function (error) {
function readFileLocally(obj, file, fileName) {
return function (event) {
$scope.$apply(function () {
obj[file] = null;
obj[fileName] = event.target.files[0].name;
var reader = new FileReader();
reader.onload = function (result) {
if (!result.target || !result.target.result) return console.error('Unable to read local file');
obj[file] = result.target.result;
};
reader.readAsText(event.target.files[0]);
});
};
}
document.getElementById('defaultCertFileInput').onchange = readFileLocally($scope.defaultCert, 'certificateFile', 'certificateFileName');
document.getElementById('defaultKeyFileInput').onchange = readFileLocally($scope.defaultCert, 'keyFile', 'keyFileName');
document.getElementById('adminCertFileInput').onchange = readFileLocally($scope.adminCert, 'certificateFile', 'certificateFileName');
document.getElementById('adminKeyFileInput').onchange = readFileLocally($scope.adminCert, 'keyFile', 'keyFileName');
$scope.setDefaultCert = function () {
Client.setCertificate($scope.defaultCert.certificateFile, $scope.defaultCert.keyFile, function (error) {
if (error) return console.error(error);
});
};
// give nginx reconfigure some time and then force reload
window.setTimeout(window.location.reload.bind(window.location, true), 5000);
$scope.setAdminCert = function () {
Client.setAdminCertificate($scope.adminCert.certificateFile, $scope.adminCert.keyFile, function (error) {
if (error) return console.error(error);
});
};