216 lines
8.1 KiB
Vue
216 lines
8.1 KiB
Vue
<script setup>
|
|
|
|
import { ref, useTemplateRef, computed, inject } from 'vue';
|
|
import { Dialog, Button, TextInput, FormGroup, Checkbox, InputGroup, SingleSelect } from '@cloudron/pankow';
|
|
import { prettyDecimalSize } from '@cloudron/pankow/utils';
|
|
import MailboxesModel from '../models/MailboxesModel.js';
|
|
|
|
const emit = defineEmits([ 'success' ]);
|
|
const props = defineProps([ 'apps', 'users', 'groups', 'domains' ]);
|
|
|
|
const mailboxesModel = MailboxesModel.create();
|
|
|
|
const dashboardDomain = inject('dashboardDomain');
|
|
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 usersAndGroupsAndApps = 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(5*1000*1000*1000);
|
|
const active = ref(false);
|
|
const enablePop3 = ref(false);
|
|
const domainList = ref([]);
|
|
|
|
const domainHasIncomingEnabled = computed(() => {
|
|
const selected = domainList.value.find(d => d.domain === domain.value);
|
|
return selected ? selected.enabled : false;
|
|
});
|
|
|
|
function onAddAlias() {
|
|
aliases.value.push({
|
|
name: '',
|
|
domain: domain.value,
|
|
label: '@' + domain.value,
|
|
});
|
|
}
|
|
|
|
async function onRemoveAlias(index) {
|
|
aliases.value.splice(index, 1);
|
|
}
|
|
|
|
const form = useTemplateRef('form');
|
|
const isFormValid = ref(false);
|
|
function validateForm() {
|
|
isFormValid.value = form.value && form.value.checkValidity();
|
|
}
|
|
|
|
async function onSubmit() {
|
|
if (!form.value.reportValidity()) return;
|
|
|
|
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) {
|
|
m = m ? JSON.parse(JSON.stringify(m)) : null; // make a copy
|
|
busy.value = false;
|
|
formError.value = '';
|
|
mailbox.value = m;
|
|
|
|
name.value = m ? m.name : '';
|
|
domain.value = m ? m.domain : dashboardDomain.value;
|
|
ownerId.value = m ? m.ownerId : '';
|
|
aliases.value = m ? m.aliases : [];
|
|
active.value = m ? m.active : true;
|
|
enablePop3.value = m ? m.enablePop3 : false;
|
|
storageQuotaEnabled.value = m && m.storageQuota ? true : false;
|
|
storageQuota.value = m ? m.storageQuota : 5*1000*1000*1000;
|
|
usersAndGroupsAndApps.value = [];
|
|
|
|
if (props.users.length) usersAndGroupsAndApps.value.push({ separator: true, label: 'Users' });
|
|
usersAndGroupsAndApps.value = usersAndGroupsAndApps.value.concat(props.users);
|
|
|
|
if (props.groups.length) usersAndGroupsAndApps.value.push({ separator: true, label: 'Groups' });
|
|
usersAndGroupsAndApps.value = usersAndGroupsAndApps.value.concat(props.groups);
|
|
|
|
if (props.apps.length) usersAndGroupsAndApps.value.push({ separator: true, label: 'Apps' });
|
|
usersAndGroupsAndApps.value = usersAndGroupsAndApps.value.concat(props.apps);
|
|
|
|
// unify on .name for multiselect
|
|
usersAndGroupsAndApps.value.forEach(item => {
|
|
if (item.appIds) {
|
|
item.icon = 'fa-solid fa-users';
|
|
} else if (item.username) {
|
|
item.icon = 'fa-solid fa-user';
|
|
item.name = item.username;
|
|
} else {
|
|
item.icon = 'fa-solid fa-cube';
|
|
item.name = item.label || item.fqdn;
|
|
}
|
|
});
|
|
|
|
domainList.value = props.domains.map(d => {
|
|
return {
|
|
domain: d.domain,
|
|
label: '@' + d.domain,
|
|
enabled: !!d.enabled,
|
|
};
|
|
});
|
|
|
|
dialog.value.open();
|
|
|
|
setTimeout(validateForm, 100); // update state of the confirm button
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog ref="dialog"
|
|
:title="mailbox ? $t('email.editMailboxDialog.title') : $t('email.addMailboxDialog.title')"
|
|
:confirm-label="$t(mailbox ? 'main.dialog.save' : 'email.incoming.mailboxes.addAction')"
|
|
:confirm-busy="busy"
|
|
:confirm-active="!busy && isFormValid"
|
|
reject-style="secondary"
|
|
:reject-label="$t('main.dialog.cancel')"
|
|
:reject-active="!busy"
|
|
@confirm="onSubmit()"
|
|
>
|
|
<div>
|
|
<form @submit.prevent="onSubmit()" novalidate autocomplete="off" ref="form" @input="validateForm()">
|
|
<fieldset :disabled="busy">
|
|
<input type="submit" style="display: none;" :disabled="!name || !domain"/>
|
|
|
|
<FormGroup>
|
|
<label for="nameInput">{{ $t('email.addMailboxDialog.name') }}</label>
|
|
<InputGroup>
|
|
<TextInput id="nameInput" style="flex-grow: 1;" v-model="name" :readonly="mailbox ? true : undefined" :required="!mailbox"/>
|
|
<SingleSelect v-model="domain" :options="domainList" option-key="domain" option-label="label" :disabled="!!mailbox" :required="!mailbox"/>
|
|
</InputGroup>
|
|
<div class="warning-label" v-if="!domainHasIncomingEnabled">{{ $t('email.addMailboxDialog.incomingDisabledWarning') }}</div>
|
|
<div class="error-label" v-if="formError">{{ formError }}</div>
|
|
</FormGroup>
|
|
|
|
<FormGroup>
|
|
<label>{{ $t('email.editMailboxDialog.owner') }}</label>
|
|
<SingleSelect v-model="ownerId" :options="usersAndGroupsAndApps" :searchThreshold="10" option-key="id" option-label="name" required/>
|
|
</FormGroup>
|
|
|
|
<Checkbox v-if="mailbox" v-model="active" :label="$t('email.updateMailboxDialog.activeCheckbox')"/>
|
|
|
|
<Checkbox v-model="enablePop3" :label="$t('email.updateMailboxDialog.enablePop3')"/>
|
|
|
|
<Checkbox v-model="storageQuotaEnabled" :label="$t('email.editMailboxDialog.enableStorageQuota') + (storageQuotaEnabled ? ` : ${prettyDecimalSize(storageQuota)}` : '')"/>
|
|
<div>
|
|
<input style="width: 100%;" 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>
|
|
</div>
|
|
|
|
<!-- 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: 5px 0;">
|
|
<InputGroup>
|
|
<TextInput style="flex-grow: 1;" v-model="alias.name"/>
|
|
<SingleSelect v-model="alias.domain" :options="domainList" option-key="domain" option-label="label" />
|
|
<Button tool danger icon="fa-solid fa-trash-alt" @click="onRemoveAlias(index)"/>
|
|
</InputGroup>
|
|
</div>
|
|
<div style="margin-top: 5px"></div>
|
|
<div v-if="aliases.length === 0">
|
|
{{ $t('email.editMailboxDialog.noAliases') }} <span class="actionable" @click="onAddAlias">{{ $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> |