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

Finish mailboxes view

Browse Source
This commit is contained in:
Johannes Zellner
2025-03-14 18:48:13 +01:00
parent 44b02961ac
commit 9676cabcb8
17 changed files with 377 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/MailboxDialog.vue
+172
View File
@@ -0,0 +1,172 @@
<script setup>
import { ref, useTemplateRef } from 'vue';
import { Dialog, Button, TextInput, FormGroup, Checkbox, InputGroup, SingleSelect } from 'pankow';
import { prettyDecimalSize } from 'pankow/utils';
import MailboxesModel from '../models/MailboxesModel.js';
const emit = defineEmits([ 'success' ]);
const props = defineProps([ 'users', 'groups', 'domains' ]);
const mailboxesModel = MailboxesModel.create();
const dialog = useTemplateRef('dialog');
const busy = ref(false);
const formError = ref('');
const name = ref('');
const domain = ref('');
const mailbox = ref(null);
const aliases = ref([]);
const ownerId = ref('');
const usersAndGroups = ref([]);
const storageQuotaEnabled = ref(false);
const storageQuotaTicks = [ 500*1000*1000, 5*1000*1000*1000, 15*1000*1000*1000, 50*1000*1000*1000, 100*1000*1000*1000 ];
const storageQuota = ref(0);
const active = ref(false);
const enablePop3 = ref(false);
function onAddAlias() {
aliases.value.push({
name: '',
domain: props.domains[0].domain,
});
}
async function onRemoveAlias(index) {
aliases.value.splice(index, 1);
}
async function onSubmit() {
busy.value = true;
formError.value = '';
const data = {
ownerId: ownerId.value,
ownerType: ownerId.value.indexOf('gid-') === 0 ? 'group' : 'user',
active: active.value,
enablePop3: enablePop3.value,
storageQuota: storageQuotaEnabled.value ? parseInt(storageQuota.value) : 0,
messagesQuota: 0
};
if (mailbox.value) {
let [error] = await mailboxesModel.update(domain.value, name.value, data);
if (error) {
busy.value = false;
formError.value = error.body ? error.body.message : 'Internal error';
return console.error(error);
}
[error] = await mailboxesModel.setAliases(domain.value, name.value, aliases.value);
if (error) {
busy.value = false;
formError.value = error.body ? error.body.message : 'Internal error';
return console.error(error);
}
} else {
const [error] = await mailboxesModel.add(domain.value, name.value, data);
if (error) {
busy.value = false;
formError.value = error.body ? error.body.message : 'Internal error';
return console.error(error);
}
}
emit('success');
dialog.value.close();
busy.value = false;
}
defineExpose({
async open(m = null) {
busy.value = false;
formError.value = '';
mailbox.value = m;
name.value = m ? m.name : '';
domain.value = m ? m.domain : '';
ownerId.value = m ? m.ownerId : '';
aliases.value = m ? JSON.parse(JSON.stringify(m.aliases)) : [];
active.value = m ? m.active : true;
enablePop3.value = m ? m.enablePop3 : false;
usersAndGroups.value = props.users.concat(props.groups);
// unify on .name for multiselect
usersAndGroups.value.forEach(u => {
u.name = u.name || u.username;
});
dialog.value.open();
}
});
</script>
<template>
<Dialog ref="dialog"
:title="mailbox ? $t('email.editMailboxDialog.title', { name: mailbox.name, domain: mailbox.domain }) : $t('email.addMailboxDialog.title')"
:confirm-label="$t(mailbox ? 'main.dialog.save' : 'email.incoming.mailboxes.addAction')"
:confirm-busy="busy"
:confirm-active="!busy && name !== '' && domain !== ''"
reject-style="secondary"
:reject-label="busy ? null : $t('main.dialog.cancel')"
@confirm="onSubmit()"
>
<div>
<div class="has-error" v-if="formError">{{ formError }}</div>
<form @submit.prevent="onSubmit()" novalidate autocomplete="off">
<fieldset :disabled="busy">
<input type="submit" style="display: none;" :disabled="!name || !domain"/>
<FormGroup v-if="!mailbox">
<label for="nameInput">{{ $t('email.addMailboxDialog.name') }}</label>
<InputGroup>
<TextInput id="nameInput" style="flex-grow: 1;" v-model="name"/>
<SingleSelect v-model="domain" :options="domains" option-key="domain" option-label="domain" />
</InputGroup>
</FormGroup>
<FormGroup>
<label>{{ $t('email.editMailboxDialog.owner') }}</label>
<SingleSelect v-model="ownerId" :options="usersAndGroups" option-key="id" option-label="name"/>
</FormGroup>
<Checkbox v-model="active" :label="$t('email.updateMailboxDialog.activeCheckbox')"/><br/>
<Checkbox v-model="enablePop3" :label="$t('email.updateMailboxDialog.enablePop3')"/><br/>
<FormGroup>
<div>
<Checkbox v-model="storageQuotaEnabled" :label="$t('email.editMailboxDialog.enableStorageQuota')"/>
<b v-if="storageQuotaEnabled">: {{ prettyDecimalSize(storageQuota) }}</b>
</div>
<input type="range" id="storageQuota" :disabled="!storageQuotaEnabled" v-model="storageQuota" step="500000000" :min="storageQuotaTicks[0]" :max="storageQuotaTicks[storageQuotaTicks.length-1]" list="storageQuotaTicks" />
<datalist id="storageQuotaTicks">
<option v-for="quota in storageQuotaTicks" :value="quota" :key="quota"></option>
</datalist>
</FormGroup>
<!-- we only show this on edit for now as it is a separate REST call which may fail after the mailbox was added -->
<FormGroup v-if="mailbox">
<label>{{ $t('email.editMailboxDialog.aliases') }}</label>
<div v-for="(alias, index) in aliases" :key="alias" style="margin-bottom: 10px;">
<InputGroup>
<TextInput style="flex-grow: 1;" v-model="alias.name"/>
<SingleSelect v-model="alias.domain" :options="domains" option-key="domain" option-label="domain" />
<Button tool danger icon="fa-solid fa-trash-alt" @click="onRemoveAlias(index)"/>
</InputGroup>
</div>
<div v-if="aliases.length === 0">
{{ $t('email.editMailboxDialog.noAliases') }} <span class="actionable" @click="onAddAlias($event)">{{ $t('email.editMailboxDialog.addAliasAction') }}</span>
</div>
<div v-else>
<div class="actionable" @click="onAddAlias($event)">{{ $t('email.editMailboxDialog.addAnotherAliasAction') }}</div>
</div>
</FormGroup>
</fieldset>
</form>
</div>
</Dialog>
</template>
dashboard/src/models/AppPasswordsModel.js
+1 -1
View File
@@ -32,7 +32,7 @@ function create() {
async remove(id) {
let error, result;
try {
result = await fetcher.del(`${API_ORIGIN}/api/v1/app_passwords/${id}`, { access_token: accessToken });
result = await fetcher.del(`${API_ORIGIN}/api/v1/app_passwords/${id}`, null, { access_token: accessToken });
} catch (e) {
error = e;
}
dashboard/src/models/ApplinksModel.js
+1 -1
View File
@@ -47,7 +47,7 @@ function create() {
async remove(id) {
let result;
try {
result = await fetcher.del(`${API_ORIGIN}/api/v1/applinks/${id}`, { access_token: accessToken });
result = await fetcher.del(`${API_ORIGIN}/api/v1/applinks/${id}`, null, { access_token: accessToken });
} catch (e) {
return [e];
}
dashboard/src/models/ArchivesModel.js
+1 -1
View File
@@ -26,7 +26,7 @@ function create() {
async remove(id) {
let error, result;
try {
result = await fetcher.del(`${API_ORIGIN}/api/v1/archives/${id}`, { access_token: accessToken });
result = await fetcher.del(`${API_ORIGIN}/api/v1/archives/${id}`, null, { access_token: accessToken });
} catch (e) {
error = e;
}
dashboard/src/models/DirectoryModel.js
+1 -1
View File
@@ -114,7 +114,7 @@ export function createDirectoryModel(origin, accessToken, api) {
await fetcher.post(`${origin}/api/v1/${api}/files/${folderPath}`, {}, { directory: true, access_token: accessToken });
},
async remove(filePath) {
await fetcher.del(`${origin}/api/v1/${api}/files/${filePath}`, { access_token: accessToken });
await fetcher.del(`${origin}/api/v1/${api}/files/${filePath}`, null, { access_token: accessToken });
},
async rename(fromFilePath, toFilePath, overwrite = false) {
return await fetcher.put(`${origin}/api/v1/${api}/files/${fromFilePath}`, { action: 'rename', newFilePath: sanitize(toFilePath), overwrite }, { access_token: accessToken });
dashboard/src/models/DomainsModel.js
+1 -1
View File
@@ -67,7 +67,7 @@ function create() {
async remove(domain) {
let error, result;
try {
result = await fetcher.del(`${API_ORIGIN}/api/v1/domains/${domain}`, { access_token: accessToken });
result = await fetcher.del(`${API_ORIGIN}/api/v1/domains/${domain}`, null, { access_token: accessToken });
} catch (e) {
error = e;
}
dashboard/src/models/GroupsModel.js
+1 -1
View File
@@ -82,7 +82,7 @@ function create() {
async remove(id) {
let result;
try {
result = await fetcher.del(`${API_ORIGIN}/api/v1/groups/${id}`, { access_token: accessToken });
result = await fetcher.del(`${API_ORIGIN}/api/v1/groups/${id}`, null, { access_token: accessToken });
} catch (e) {
return [e];
}
dashboard/src/models/MailboxesModel.js
+74
View File
@@ -17,6 +17,80 @@ function create() {
if (result.status !== 200) return [result];
return [null, result.body.mailboxes];
},
async get(domain, name) {
let result;
try {
result = await fetcher.get(`${API_ORIGIN}/api/v1/mail/${domain}/mailboxes/${name}`, { access_token: accessToken });
} catch (e) {
return [e];
}
if (result.status !== 200) return [result];
return [null, result.body.mailbox];
},
async add(domain, name, options) {
const data = {
name: name,
ownerId: options.ownerId,
ownerType: options.ownerType,
active: !!options.active,
enablePop3: !!options.enablePop3,
storageQuota: options.storageQuota ||0,
messagesQuota: options.messagesQuota || 0,
};
let result;
try {
result = await fetcher.post(`${API_ORIGIN}/api/v1/mail/${domain}/mailboxes`, data, { access_token: accessToken });
} catch (e) {
return [e];
}
if (result.status !== 201) return [result];
return [null];
},
async update(domain, name, options) {
const data = {
ownerId: options.ownerId,
ownerType: options.ownerType,
active: !!options.active,
enablePop3: !!options.enablePop3,
storageQuota: options.storageQuota ||0,
messagesQuota: options.messagesQuota || 0,
};
let result;
try {
result = await fetcher.post(`${API_ORIGIN}/api/v1/mail/${domain}/mailboxes/${name}`, data, { access_token: accessToken });
} catch (e) {
return [e];
}
if (result.status !== 204) return [result];
return [null];
},
async remove(domain, name, deleteMails = false) {
let result;
try {
result = await fetcher.del(`${API_ORIGIN}/api/v1/mail/${domain}/mailboxes/${name}`, { deleteMails }, { access_token: accessToken });
} catch (e) {
return [e];
}
if (result.status !== 201) return [result];
return [null];
},
async setAliases(domain, name, aliases) {
let result;
try {
result = await fetcher.put(`${API_ORIGIN}/api/v1/mail/${domain}/mailboxes/${name}/aliases`, { aliases }, { access_token: accessToken });
} catch (e) {
return [e];
}
if (result.status !== 202) return [result];
return [null];
},
};
}
dashboard/src/models/ProfileModel.js
+1 -1
View File
@@ -9,7 +9,7 @@ function create() {
name: 'ProfileModel',
async logout() {
// destroy oidc session in the spirit of true SSO
await fetcher.del(`${API_ORIGIN}/api/v1/oidc/sessions`, { access_token: accessToken });
await fetcher.del(`${API_ORIGIN}/api/v1/oidc/sessions`, null, { access_token: accessToken });
localStorage.removeItem('token');
dashboard/src/models/TokensModel.js
+1 -1
View File
@@ -32,7 +32,7 @@ function create() {
async remove(id) {
let error, result;
try {
result = await fetcher.del(`${API_ORIGIN}/api/v1/tokens/${id}`, { access_token: accessToken });
result = await fetcher.del(`${API_ORIGIN}/api/v1/tokens/${id}`, null, { access_token: accessToken });
} catch (e) {
error = e;
}
dashboard/src/models/UserDirectoryModel.js
+1 -1
View File
@@ -125,7 +125,7 @@ function create() {
async removeOpenIdClient(id) {
let error, result;
try {
result = await fetcher.del(`${API_ORIGIN}/api/v1/oidc/clients/${id}`, { access_token: accessToken });
result = await fetcher.del(`${API_ORIGIN}/api/v1/oidc/clients/${id}`, null, { access_token: accessToken });
} catch (e) {
error = e;
}
dashboard/src/models/UsersModel.js
+1 -1
View File
@@ -68,7 +68,7 @@ function create() {
async remove(id) {
let result;
try {
result = await fetcher.del(`${API_ORIGIN}/api/v1/users/${id}`, { access_token: accessToken });
result = await fetcher.del(`${API_ORIGIN}/api/v1/users/${id}`, null, { access_token: accessToken });
} catch (e) {
return [e];
}
dashboard/src/models/VolumesModel.js
+1 -1
View File
@@ -66,7 +66,7 @@ function create() {
async remove(id) {
let error, result;
try {
result = await fetcher.del(`${API_ORIGIN}/api/v1/volumes/${id}`, { access_token: accessToken });
result = await fetcher.del(`${API_ORIGIN}/api/v1/volumes/${id}`, null, { access_token: accessToken });
} catch (e) {
error = e;
}
dashboard/src/style.css
+4
View File
@@ -199,3 +199,7 @@ h1.section-header {
.actionable:hover {
color: var(--pankow-color-primary-hover);
}
fieldset > * {
margin: 6px 0;
}
dashboard/src/views/MailboxesView.vue
+108 -30
View File
@@ -4,19 +4,27 @@ import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted } from 'vue';
import { Button, TableView } from 'pankow';
import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, TableView, Dialog, Checkbox } from 'pankow';
import { prettyDecimalSize } from 'pankow/utils';
import { eachLimit } from 'async';
import Section from '../components/Section.vue';
import MailboxDialog from '../components/MailboxDialog.vue';
import DomainsModel from '../models/DomainsModel.js';
import MailModel from '../models/MailModel.js';
import GroupsModel from '../models/GroupsModel.js';
import UsersModel from '../models/UsersModel.js';
import MailboxesModel from '../models/MailboxesModel.js';
const domainsModel = DomainsModel.create();
const mailModel = MailModel.create();
const groupsModel = GroupsModel.create();
const mailboxesModel = MailboxesModel.create();
const usersModel = UsersModel.create();
const columns = {
fullName: { label: t('email.incoming.mailboxes.name'), sort: true },
ownerId: { label: t('email.incoming.mailboxes.owner'), sort: true },
ownerDisplayName: { label: t('email.incoming.mailboxes.owner'), sort: true },
aliases: { label: t('email.incoming.mailboxes.aliases'), sort: true },
usage: { label: t('email.incoming.mailboxes.usage'), sort: true },
actions: {}
@@ -25,55 +33,103 @@ const columns = {
const busy = ref(true);
const mailboxes = ref([]);
const domains = ref([]);
const users = ref([]);
const groups = ref([]);
function renderAliases(aliases) {
return aliases.map(a => `${a.name}@${a.domain}`).join(', ');
}
// function updateMailUsage(mailboxName, quotaLimit) {
// if (!$scope.mailUsage) $scope.mailUsage = {};
// if (!$scope.mailUsage[mailboxName]) $scope.mailUsage[mailboxName] = {};
// $scope.mailUsage[mailboxName].quotaLimit = quotaLimit;
// }
const mailboxDialog = useTemplateRef('mailboxDialog');
async function refreshForDomain(domain) {
let [error, result] = await mailModel.usage(domain);
if (error) return console.error(error);
async function onAddOrEdit(mailbox = null) {
mailboxDialog.value.open(mailbox);
}
const usage = result;
const removeDialog = useTemplateRef('removeDialog');
const removeBusy = ref(false);
const removeError = ref('');
const removePurge = ref(false);
const removeMailbox = ref({});
console.log(usage);
function onRemove(mailbox) {
removeBusy.value = false;
removePurge.value = false;
removeError.value = '';
removeMailbox.value = mailbox;
[error, result] = await mailModel.listMailboxes(domain);
if (error) throw error;
removeDialog.value.open();
}
result.forEach((m) => {
m.fullName = m.name + '@' + m.domain; // to make it simple for the ui
// m.owner = $scope.owners.find(function (o) { return o.id === m.ownerId; }); // owner may not exist
// m.ownerDisplayName = m.owner ? m.owner.display : ''; // this meta property is set when we get the user list
});
async function onSubmitRemove() {
removeBusy.value = true;
removeError.value = '';
mailboxes.value = mailboxes.value.concat(result);
const [error] = await mailboxesModel.remove(removeMailbox.value.domain, removeMailbox.value.name, removePurge.value);
if (error) {
removeBusy.value = false;
removeError.value = error.body ? error.body.message : 'Internal error';
return console.error(error);
}
await refresh();
removeDialog.value.close();
removeBusy.value = false;
}
async function refresh() {
busy.value = true;
let tmp = [];
async function refreshForDomain(domain) {
let [error, result] = await mailModel.usage(domain);
if (error) return console.error(error);
const usage = result;
[error, result] = await mailModel.listMailboxes(domain);
if (error) throw error;
result.forEach((m) => {
m.fullName = m.name + '@' + m.domain;
m.owner = users.value.find(u => u.id === m.ownerId) || null;
if (!m.owner) m.owner = groups.value.find(g => g.id === m.ownerId) || null;
m.ownerDisplayName = m.owner ? (m.owner.username || m.owner.name) : '';
m.usage = usage[m.fullName] || null;
});
tmp = tmp.concat(result);
}
try {
await eachLimit(domains.value.map(d => d.domain), 10, refreshForDomain);
} catch (error) {
return console.error(error);
}
mailboxes.value = tmp;
busy.value = false;
}
onMounted(async () => {
const [error, result] = await domainsModel.list();
let [error, result] = await domainsModel.list();
if (error) return console.error(error);
domains.value = result;
[error, result] = await usersModel.list();
if (error) return console.error(error);
users.value = result;
[error, result] = await groupsModel.list();
if (error) return console.error(error);
groups.value = result;
await refresh();
});
@@ -81,20 +137,42 @@ onMounted(async () => {
<template>
<div>
<Dialog ref="removeDialog"
:title="$t('email.deleteMailboxDialog.title', { name: removeMailbox.name, domain: removeMailbox.domain })"
:confirm-label="$t('email.deleteMailboxDialog.deleteAction')"
:confirm-busy="removeBusy"
:confirm-active="!removeBusy"
confirm-style="danger"
:reject-label="removeBusy ? '' : $t('main.dialog.cancel')"
reject-style="secondary"
@confirm="onSubmitRemove()"
>
<div>
<div class="text-danger" v-if="removeError">{{ removeError }}</div>
<div v-html="$t('email.deleteMailboxDialog.description')"></div>
<br/>
<Checkbox v-model="removePurge" :label="$t('email.deleteMailboxDialog.purgeMailboxCheckbox')" />
</div>
</Dialog>
<MailboxDialog ref="mailboxDialog" :users="users" :groups="groups" :domains="domains" @success="refresh()"/>
<Section :title="$t('email.incoming.mailboxes.title')">
<template #header-buttons>
<Button>{{ $t('email.incoming.mailboxes.addAction') }}</Button>
<Button @click="onAddOrEdit()">{{ $t('email.incoming.mailboxes.addAction') }}</Button>
</template>
<TableView :columns="columns" :model="mailboxes" :busy="busy">
<TableView :columns="columns" :model="mailboxes" :busy="busy" @row-click="onAddOrEdit">
<template #aliases="mailbox">{{ renderAliases(mailbox.aliases) }}</template>
<template #usage="mailbox">
<span v-if="mailUsage !== null">
<!-- {{ mailUsage[mailbox.fullName].quotaValue | prettyDecimalSize }} <span ng-show="mailUsage[mailbox.fullName].quotaLimit">/ {{ mailUsage[mailbox.fullName].quotaLimit | prettyDecimalSize }}</span> -->
</span>
<span ng-show="mailUsage === null">
<!-- {{ 'main.loadingPlaceholder' | tr }} ... -->
</span>
<span v-if="mailbox.usage">{{ prettyDecimalSize(mailbox.usage.quotaValue) }} <span ng-show="mailUsage[mailbox.fullName].quotaLimit">/ {{ prettyDecimalSize(mailbox.usage.quotaLimit) }}</span></span>
<span v-else>{{ $t('main.loadingPlaceholder') }} ...</span>
</template>
<template #actions="mailbox">
<div class="table-actions">
<Button tool secondary small icon="fa fa-pencil-alt" @click.stop="onAddOrEdit(mailboxe)"></Button>
<Button tool danger small icon="fa-solid fa-trash-alt" @click.stop="onRemove(mailbox)"></Button>
</div>
</template>
</TableView>
</Section>