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

Load and save the relay settings

Browse Source 
part of #188
This commit is contained in:
Girish Ramakrishnan
2017-06-27 13:45:49 -05:00
parent 60ae4972b0
commit 5088cb47d9
5 changed files with 141 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
webadmin/src/views/email.html
View File

@@ -34,79 +34,6 @@
</div>
</div>
<div class="section-header">
<div class="text-left">
<h3>SMTP Settings</h3>
</div>
</div>
<div class="card" style="margin-bottom: 15px;">
<div class="row">
<div class="col-md-12">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="mailRelay.used"> Relay email using another mail server
</label>
</div>
</div>
</div>
<div class="row" ng-show="mailRelay.used">
<div class="col-md-12">
<div>
<div class="form-group">
<label class="control-label">Presets</label>
<select class="form-control" ng-model="mailRelay.preset" ng-options="a.name for a in mailRelayPresets track by a.id" ng-change="mailRelay.presetChanged()"></select>
</div>
<form name="mailRelayForm" role="form" ng-submit="mailRelay.submit()" autocomplete="off" novalidate>
<!-- Prevent autofill -->
<input type="password" style="display: none;">
<div class="form-group" ng-class="{ 'has-error': (mailRelayForm.smtpHost.$dirty && mailRelayForm.smtpHost.$invalid) }">
<label class="control-label">SMTP Host</label>
<div class="control-label" ng-show="(!mailRelayForm.smtpHost.$dirty && mailRelay.error.smtpHost) || (mailRelayForm.smtpHost.$dirty && mailRelayForm.smtpHost.$invalid)">
<small ng-show="!mailRelayForm.smtpHost.$dirty && mailRelay.error.smtpHost">{{ mailRelay.error.smtpHost }}</small>
</div>
<input type="text" class="form-control" ng-model="mailRelay.smtpHost" name="smtpHost" required>
</div>
<div class="form-group" ng-class="{ 'has-error': (mailRelayForm.smtpPort.$dirty && mailRelayForm.smtpPort.$invalid) }">
<label class="control-label">SMTP Port</label>
<div class="control-label" ng-show="(!mailRelayForm.smtpPort.$dirty && mailRelay.error.smtpPort) || (mailRelayForm.smtpPort.$dirty && mailRelayForm.smtpPort.$invalid)">
<small ng-show="!mailRelayForm.smtpPort.$dirty && mailRelay.error.smtpPort">{{ mailRelay.error.smtpPort }}</small>
</div>
<input type="number" class="form-control" ng-model="mailRelay.smtpPort" name="smtpPort" required>
</div>
<div class="form-group" ng-class="{ 'has-error': (mailRelayForm.username.$dirty && mailRelayForm.username.$invalid) }">
<label class="control-label">Username</label>
<div class="control-label" ng-show="(!mailRelayForm.username.$dirty && mailRelay.error.username) || (mailRelayForm.username.$dirty && mailRelayForm.username.$invalid)">
<small ng-show="!mailRelayForm.username.$dirty && mailRelay.error.username">{{ mailRelay.error.username }}</small>
</div>
<input type="text" class="form-control" ng-model="mailRelay.username" name="username" required>
</div>
<div class="form-group" ng-class="{ 'has-error': (mailRelayForm.password.$dirty && mailRelayForm.password.$invalid) }">
<label class="control-label">Password</label>
<div class="control-label" ng-show="(!mailRelayForm.password.$dirty && mailRelay.error.password) || (mailRelayForm.password.$dirty && mailRelayForm.password.$invalid)">
<small ng-show="!mailRelayForm.password.$dirty && mailRelay.error.password">{{ mailRelay.error.password }}</small>
</div>
<input type="password" class="form-control" ng-model="mailRelay.password" name="password" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="mailRelay.tls"> Use TLS
</label>
</div>
<input class="ng-hide" type="submit" ng-disabled="mailRelayForm.$invalid"/>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary pull-right" ng-click="mailRelay.submit()" ng-disabled="!mailRelayForm.$dirty || mailRelayForm.$invalid || mailRelay.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailRelay.busy"></i> Save</button>
</div>
</div>
</div>
<div class="section-header">
<div class="text-left">
<h3>IMAP and SMTP Server</h3>
@@ -131,6 +58,80 @@
</div>
</div>
<div class="section-header" ng-show="isPaying">
<div class="text-left">
<h3>Outbound Mail Relay</h3>
</div>
</div>
<div class="card" style="margin-bottom: 15px;" ng-show="isPaying">
<div class="row">
<div class="col-md-12">
Select the mail server through which outbound mails are sent:
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<select class="form-control" style="width: 50%;" ng-model="mailRelay.preset" ng-options="a.name for a in mailRelayPresets track by a.id" ng-change="mailRelay.presetChanged()"></select>
</div>
</div>
</div>
<div class="row" ng-show="mailRelay.preset.id !== 'builtin'">
<div class="col-md-6">
<div>
<form name="mailRelayForm" role="form" ng-submit="mailRelay.submit()" autocomplete="off" novalidate>
<!-- Prevent autofill -->
<input type="password" style="display: none;">
<div class="form-group" ng-class="{ 'has-error': (mailRelayForm.host.$dirty && mailRelayForm.host.$invalid) }">
<label class="control-label">SMTP Host</label>
<div class="control-label" ng-show="(!mailRelayForm.host.$dirty && mailRelay.error.host) || (mailRelayForm.host.$dirty && mailRelayForm.host.$invalid)">
<small ng-show="!mailRelayForm.host.$dirty && mailRelay.error.host">{{ mailRelay.error.host }}</small>
</div>
<input type="text" class="form-control" ng-model="mailRelay.relay.host" name="host" required>
</div>
<div class="form-group" ng-class="{ 'has-error': (mailRelayForm.port.$dirty && mailRelayForm.port.$invalid) }">
<label class="control-label">SMTP Port</label>
<div class="control-label" ng-show="(!mailRelayForm.port.$dirty && mailRelay.error.port) || (mailRelayForm.port.$dirty && mailRelayForm.port.$invalid)">
<small ng-show="!mailRelayForm.port.$dirty && mailRelay.error.port">{{ mailRelay.error.port }}</small>
</div>
<input type="number" class="form-control" ng-model="mailRelay.relay.port" name="port" required>
</div>
<!-- this is always hidden for now, since TLS is required -->
<div class="checkbox" ng-hide=true>
<label>
<input type="checkbox" ng-model="mailRelay.relay.tls"> Use TLS
</label>
</div>
<div class="form-group" ng-class="{ 'has-error': (mailRelayForm.username.$dirty && mailRelayForm.username.$invalid) }">
<label class="control-label">Username</label>
<div class="control-label" ng-show="(!mailRelayForm.username.$dirty && mailRelay.error.username) || (mailRelayForm.username.$dirty && mailRelayForm.username.$invalid)">
<small ng-show="!mailRelayForm.username.$dirty && mailRelay.error.username">{{ mailRelay.error.username }}</small>
</div>
<input type="text" class="form-control" ng-model="mailRelay.relay.username" name="username" required>
</div>
<div class="form-group" ng-class="{ 'has-error': (mailRelayForm.password.$dirty && mailRelayForm.password.$invalid) }">
<label class="control-label">Password</label>
<div class="control-label" ng-show="(!mailRelayForm.password.$dirty && mailRelay.error.password) || (mailRelayForm.password.$dirty && mailRelayForm.password.$invalid)">
<small ng-show="!mailRelayForm.password.$dirty && mailRelay.error.password">{{ mailRelay.error.password }}</small>
</div>
<input type="password" class="form-control" ng-model="mailRelay.relay.password" name="password" required>
</div>
<input class="ng-hide" type="submit" ng-disabled="mailRelayForm.$invalid"/>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary pull-right" ng-click="mailRelay.submit()" ng-disabled="!mailRelayForm.$dirty || mailRelayForm.$invalid || mailRelay.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailRelay.busy"></i> Save</button>
</div>
</div>
</div>
<div class="section-header" ng-show="mailConfig.enabled && isPaying">
<div class="text-left">
<h3>Catch-all</h3>

58
webadmin/src/views/email.js
View File

@@ -85,10 +85,13 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
};
$scope.mailRelayPresets = [
{ id: 'custom', name: 'Custom', smtpHost: '', smtpPort: 25, tls: false },
{ id: 'google', name: 'Google', smtpHost: 'smtp.gmail.com', smtpPort: 587, tls: true },
{ id: 'sendgrid', name: 'SendGrid', smtpHost: 'smtp.sendgrid.net', smtpPort: 587, tls: true },
{ id: 'ses', name: 'Amazon SES', smtpHost: 'email-smtp.us-east-1.amazonaws.com', smtpPort: 25, tls: true }
{ id: 'builtin', name: 'Built-in SMTP server', enabled: false },
{ id: 'ses', name: 'Amazon SES', enabled: true, host: 'email-smtp.us-east-1.amazonaws.com', port: 25, tls: true },
{ id: 'custom', name: 'Custom SMTP server', enabled: true, host: '', port: 587, tls: true },
{ id: 'google', name: 'Google', enabled: true, host: 'smtp.gmail.com', port: 587, tls: true },
{ id: 'mailgun', name: 'Mailgun', enabled: true, host: 'smtp.mailgun.org', port: 587, tls: true },
{ id: 'postmark', name: 'Postmark', enabled: true, host: 'smtp.postmarkapp.com', port: 587, tls: true },
{ id: 'sendgrid', name: 'SendGrid', enabled: true, host: 'smtp.sendgrid.net', port: 587, tls: true },
];
$scope.mailRelay = {
@@ -97,21 +100,32 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
preset: $scope.mailRelayPresets[0],
presetChanged: function () {
$scope.mailRelay.smtpHost = $scope.mailRelay.preset.smtpHost;
$scope.mailRelay.smtpPort = $scope.mailRelay.preset.smtpPort;
$scope.mailRelay.tls = $scope.mailRelay.preset.tls;
$scope.mailRelay.relay.enabled = $scope.mailRelay.preset.enabled;
$scope.mailRelay.relay.presetId = $scope.mailRelay.preset.id;
$scope.mailRelay.relay.host = $scope.mailRelay.preset.host;
$scope.mailRelay.relay.port = $scope.mailRelay.preset.port;
$scope.mailRelay.relay.tls = $scope.mailRelay.preset.tls;
},
// form data to be set on load
used: false,
smtpHost: '',
smtpPort: 25,
username: '',
password: '',
tls: true,
relay: {
enabled: false,
presetId: 'builtin', // stash this so we can set the preset label correctly in the UI
host: '',
port: 25,
username: '',
password: '',
tls: true,
},
submit: function () {
console.error('Not implemented');
$scope.mailRelay.busy = true;
Client.setMailRelay($scope.mailRelay.relay, function (error) {
if (error) console.error('Unable to set relay', error);
$scope.mailRelay.busy = false;
});
}
};
@@ -123,6 +137,21 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
});
}
function getMailRelay() {
Client.getMailRelay(function (error, relay) {
if (error) return console.error(error);
$scope.mailRelay.relay = relay;
for (var i = 0; i < $scope.mailRelayPresets.length; i++) {
if ($scope.mailRelayPresets[i].id === relay.presetId) {
$scope.mailRelay.preset = $scope.mailRelayPresets[i];
break;
}
}
});
}
function getDnsConfig() {
Client.getDnsConfig(function (error, dnsConfig) {
if (error) return console.error(error);
@@ -196,6 +225,7 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
Client.onReady(function () {
getMailConfig();
getMailRelay();
getDnsConfig();
getSubscription();
getUsers();