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

Add ui bits to add mailboxes

Browse Source
This commit is contained in:
Johannes Zellner
2018-04-05 21:00:33 +02:00
parent bbe351161f
commit a0dbcc9bb3
2 changed files with 82 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/email.html
+35 -20
View File
@@ -11,7 +11,7 @@
</div>
<div class="modal-body" ng-hide="selectedDomain.provider === 'noop' || selectedDomain.provider === 'manual'">
Cloudron will setup Email related DNS records automatically. Status of DNS Records below will show an error
while DNS is propagating (~5 minutes).
while DNS is propagating (~5 minutes).
<br/><br/>
If this domain is already configured to handle email with some other provider, it will overwrite those records.
</div>
@@ -110,35 +110,50 @@
<div class="card" style="margin-bottom: 15px;" ng-show="selectedDomain.mailConfig.enabled">
<div class="row">
<div class="col-md-12">
Enable mailboxes for users on this domain. Each user will get an email address of <b>username@{{ selectedDomain.domain }}</b>
Each mailboxes has an owner, who is able to access the mailbox.
<br/><br/>
<table class="table table-hover">
<thead>
<tr>
<th>&nbsp;</th>
<th>User</th>
<th class="text-left">Aliases</th>
<th>Name</th>
<th>Owner</th>
<th>Aliases</th>
<th class="text-right">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in mailboxes.users">
<td>
<input type="checkbox" ng-model="user.mailboxEnabled" title="Mailbox Enabled">
</td>
<td class="text-left elide-table-cell">
{{ user.username }}
</td>
<td>
<p ng-show="user.aliases !== user.orig.aliases && user.error" class="text-danger"><b>{{ user.error }}</b></p>
<tag-input ng-show="user.mailboxEnabled" placeholder="add alias" taglist="user.aliases" name="aliases"></tag-input>
</td>
<td class="text-right no-wrap">
<button ng-show="user.mailboxEnabled !== user.orig.mailboxEnabled || user.aliases !== user.orig.aliases" class="btn btn-xs btn-primary" ng-disabled="user.busy" ng-click="mailboxes.submit(user)"><i class="fa fa-circle-o-notch fa-spin" ng-show="user.busy"></i> Save</button>
</td>
</tr>
<tr ng-repeat="mailbox in mailboxes.mailboxes">
<td>
{{ mailbox.name }}
</td>
<td class="text-left elide-table-cell">
<select ng-model="mailbox.owner" ng-options="u.display for u in users track by u.id"></select>
</td>
<td>
<p ng-show="mailbox.aliases !== mailbox.orig.aliases && mailbox.error" class="text-danger"><b>{{ mailbox.error }}</b></p>
<tag-input placeholder="add alias" taglist="mailbox.aliases" name="aliases"></tag-input>
</td>
<td class="text-right no-wrap">
<button ng-show="mailbox.owner !== mailbox.orig.owner || mailbox.aliases !== mailbox.orig.aliases" class="btn btn-xs btn-primary" ng-disabled="mailbox.busy" ng-click="mailboxes.submit(mailbox)"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailbox.busy"></i> Save</button>
<button class="btn btn-xs btn-danger" ng-disabled="mailbox.busy" ng-click="mailboxes.remove(mailbox)"><i class="fa" ng-class="{ 'fa-spin': mailbox.busy, 'fa-circle-o-notch': mailbox.busy, 'fa-trash': !mailbox.busy }"></i></button>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control input-sm" style="height: 25px;" ng-model="mailboxes.add.name" placeholder="new mailbox">
</td>
<td class="text-left elide-table-cell">
<select ng-model="mailboxes.add.owner" ng-options="u.display for u in users track by u.id"></select>
</td>
<td>
&nbsp;
</td>
<td class="text-right no-wrap">
<button class="btn btn-xs btn-primary" ng-disabled="!mailboxes.add.name || !mailboxes.add.owner || mailboxes.add.busy" ng-click="mailboxes.add.submit()"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailboxes.add.busy"></i> Add</button>
</td>
</tr>
</tbody>
</table>
</div>
dashboard/src/views/email.js
+47 -22
View File
@@ -129,7 +129,47 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
};
$scope.mailboxes = {
users: [],
mailboxes: [],
add: {
busy: false,
name: '',
owner: null,
submit: function () {
$scope.mailboxes.add.busy = true;
Client.addMailbox($scope.selectedDomain.domain, $scope.mailboxes.add.name, $scope.mailboxes.add.owner.id, function (error) {
$scope.mailboxes.add.busy = false;
if (error) return console.error(error);
$scope.mailboxes.add.name = '';
$scope.mailboxes.add.owner = null;
$scope.mailboxes.refresh();
});
}
},
refresh: function () {
Client.getMailboxes($scope.selectedDomain.domain, function (error, mailboxes) {
if (error) return console.error(error);
Client.listAliases($scope.selectedDomain.domain, function (error, aliases) {
if (error) return console.error(error);
$scope.mailboxes.mailboxes = mailboxes.map(function (m) {
m.aliases = aliases.filter(function (a) { return a.ownerId === m.id; }).map(function (a) { return a.name; }).join(',');
m.owner = $scope.users.find(function (u) { return u.id === m.ownerId; });
m.orig = {};
m.orig.owner = m.owner;
m.orig.aliases = m.aliases;
return m;
});
});
});
},
submit: function (user) {
user.busy = true;
@@ -363,26 +403,7 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
$scope.selectedDomain.mailConfig = mailConfig;
$scope.selectedDomain.mailStatus = {};
// mailboxes
Client.getMailboxes($scope.selectedDomain.domain, function (error, mailboxes) {
if (error) return console.error(error);
Client.listAliases($scope.selectedDomain.domain, function (error, aliases) {
if (error) return console.error(error);
var enabledUsers = mailboxes.map(function (m) { return m.name; });
$scope.mailboxes.users = $scope.users.filter(function (u) { return !!u.username; }).map(function (u) {
u.mailboxEnabled = (enabledUsers.indexOf(u.username) !== -1);
u.aliases = aliases.filter(function (a) { return a.ownerId === u.id; }).map(function (a) { return a.name; }).join(',');
u.orig = {};
u.orig.mailboxEnabled = u.mailboxEnabled;
u.orig.aliases = u.aliases;
return u;
});
});
});
$scope.mailboxes.refresh();
// mailinglists/groups
Client.getGroups(function (error, groups) {
@@ -434,7 +455,11 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
Client.getUsers(function (error, users) {
if (error) return console.error('Unable to get user listing.', error);
$scope.users = users;
// ensure we have a display value available
$scope.users = users.map(function (u) {
u.display = u.username || u.email;
return u;
});
Client.getDomains(function (error, domains) {
if (error) return console.error('Unable to get domain listing.', error);