199 lines
8.2 KiB
Vue
199 lines
8.2 KiB
Vue
|
<template>
|
||
|
|
<NcSettingsSection :name="t('settings', 'Email server')" :description="t(
|
||
|
|
'settings',
|
||
|
|
`It is important to set up this server to be able to send emails, like for password reset and notifications.`,
|
||
|
|
)" :doc-url="linkToDocs('admin-email')">
|
||
|
|
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
|
||
|
|
{{ flash.message }}
|
||
|
|
</NotificationBar>
|
||
|
|
|
||
|
|
<!-- from address for sendmail -->
|
||
|
|
<!-- <div v-show="form.mail_smtp_mode === 'sendmail'" class="flex flex-col space-y-2">
|
||
|
|
<label for="mail_sendmailmode" class="font-medium">{{ t('settings', 'Sendmail mode') }}</label>
|
||
|
|
<FormControl name="mail_sendmailmode" id="mail_sendmailmode" v-model="form.mailSendmailmode"
|
||
|
|
:options="mailSendmailmodeOptions">
|
||
|
|
</FormControl>
|
||
|
|
</div> -->
|
||
|
|
|
||
|
|
<!-- <form id="mail_general_settings_form" @submit.prevent="saveMailSettingsForm" class="space-y-6">
|
||
|
|
<p>
|
||
|
|
<span id="mail_settings_msg" class="text-red-500">{{ message }}</span>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="flex flex-col space-y-2">
|
||
|
|
<label for="mail_smtpmode" class="font-medium">{{ t('settings', 'Send mode') }}</label>
|
||
|
|
<FormControl type="select" name="mail_smtpmode" id="mail_smtpmode" v-model="form.mail_smtp_mode"
|
||
|
|
@change="handleModeChange" :options="mailSmtpmodeOptions">
|
||
|
|
</FormControl>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-show="form.mail_smtp_mode === 'smtp'" class="flex flex-col space-y-2">
|
||
|
|
<label for="mail_smtpsecure" class="font-medium">{{ t('settings', 'Encryption') }}</label>
|
||
|
|
<FormControl type="select" name="mail_smtpsecure" id="mail_smtpsecure" v-model="form.mail_smtpsecure"
|
||
|
|
:options="mailSmtpsecureOptions">
|
||
|
|
</FormControl>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex flex-col space-y-2">
|
||
|
|
<label for="mail_from_address" class="font-medium">{{ t('settings', 'From address') }}</label>
|
||
|
|
<div class="flex space-x-2">
|
||
|
|
<FormControl type="text" name="mail_from_address" id="mail_from_address"
|
||
|
|
v-model="form.mail_from_address" :placeholder="t('settings', 'Email')" class="flex-grow" />
|
||
|
|
<span class="text-gray-600">@</span>
|
||
|
|
<FormControl type="text" name="mail_domain" id="mail_domain" placeholder="example.com"
|
||
|
|
v-model="form.mail_domain" class="flex-grow" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-show="form.mail_smtp_mode === 'smtp'" class="flex flex-col space-y-2">
|
||
|
|
<label for="mail_smtphost" class="font-medium">{{ t('settings', 'Server address') }}</label>
|
||
|
|
<div class="flex space-x-2">
|
||
|
|
<FormControl type="text" name="mail_smtphost" id="mail_smtphost" placeholder="smtp.example.com"
|
||
|
|
v-model="form.mail_smtphost" class="flex-grow" />
|
||
|
|
<span class="text-gray-600">:</span>
|
||
|
|
<FormControl type="text" inputmode="numeric" name="mail_smtpport" id="mail_smtpport"
|
||
|
|
:placeholder="t('settings', 'Port')" v-model="form.mail_smtpport" class="flex-shrink" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-show="form.mail_smtp_mode === 'smtp'" class="flex flex-col space-y-2">
|
||
|
|
<label for="mail_smtpauthtype" class="font-medium">{{ t('settings', 'Authentication') }}</label>
|
||
|
|
<div class="flex items-center space-x-2">
|
||
|
|
<input type="checkbox" name="mail_smtpauth" id="mail_smtpauth" v-model="form.mail_smtpauth"
|
||
|
|
class="form-checkbox" />
|
||
|
|
<label for="mail_smtpauth" class="font-medium">{{ t('settings', 'Authentication required') }}
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<BaseButtons>
|
||
|
|
<BaseButton type="submit" color="info" label="Submit" :class="{ 'opacity-25': form.processing }"
|
||
|
|
:disabled="form.processing == true" />
|
||
|
|
</BaseButtons>
|
||
|
|
|
||
|
|
</form> -->
|
||
|
|
|
||
|
|
<!-- <form id="mail_credentials_settings" class="mt-6">
|
||
|
|
<div v-show="form.mail_smtpauth && form.mail_smtp_mode === 'smtp'" class="flex flex-col space-y-2">
|
||
|
|
<label for="mail_smtpname" class="font-medium">{{ t('settings', 'Credentials') }}</label>
|
||
|
|
<FormControl type="text" name="mail_smtpname" id="mail_smtpname"
|
||
|
|
:placeholder="t('settings', 'SMTP Login')" v-model="mail_smtpname" />
|
||
|
|
<FormControl type="password" name="mail_smtppassword" id="mail_smtppassword"
|
||
|
|
placeholder="t('settings', 'SMTP Password')" v-model="mail_smtppassword" />
|
||
|
|
<input id="mail_credentials_settings_submit" type="button" :value="t('settings', 'Save')"
|
||
|
|
@click="storeCredentialsForm" class="mt-2 btn btn-primary" />
|
||
|
|
</div>
|
||
|
|
</form> -->
|
||
|
|
|
||
|
|
<div class="mt-6">
|
||
|
|
<em>{{ t('settings', 'Test and verify email settings') }}</em>
|
||
|
|
<BaseButtons>
|
||
|
|
<BaseButton type="submit" color="info" name="testemail" id="testemail"
|
||
|
|
:label="t('settings', 'Test email')" @click="sendTestEmail" :small="true" />
|
||
|
|
</BaseButtons>
|
||
|
|
<span id="sendtestmail_msg" class="text-blue-500 ml-4">{{ testMailMessage }}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</NcSettingsSection>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import axios from 'axios';
|
||
|
|
import { ref, ComputedRef, computed } from 'vue';
|
||
|
|
import { useForm, usePage } from '@inertiajs/vue3';
|
||
|
|
import NcSettingsSection from '@/Components/NcSettingsSection.vue';
|
||
|
|
import { translate as t } from '@/utils/tethyscloud-l10n';
|
||
|
|
import BaseButton from '@/Components/BaseButton.vue';
|
||
|
|
import BaseButtons from '@/Components/BaseButtons.vue';
|
||
|
|
// import FormControl from '@/Components/FormControl.vue';
|
||
|
|
import { stardust } from '@eidellev/adonis-stardust/client';
|
||
|
|
import NotificationBar from '@/Components/NotificationBar.vue';
|
||
|
|
import { mdiAlertBoxOutline } from '@mdi/js';
|
||
|
|
import Notification from '@/utils/toast';
|
||
|
|
|
||
|
|
const flash: ComputedRef<any> = computed(() => {
|
||
|
|
// let test = usePage();
|
||
|
|
// console.log(test);
|
||
|
|
return usePage().props.flash;
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
const message = ref('');
|
||
|
|
const testMailMessage = ref('');
|
||
|
|
|
||
|
|
const form = useForm({
|
||
|
|
mail_smtp_mode: 'smtp',
|
||
|
|
mail_smtpsecure: '',
|
||
|
|
mailSendmailmode: 'smtp',
|
||
|
|
mail_from_address: '',
|
||
|
|
mail_domain: '',
|
||
|
|
mail_smtphost: '',
|
||
|
|
mail_smtpport: '',
|
||
|
|
mail_smtpauthtype: 'LOGIN',
|
||
|
|
mail_smtpauth: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
const mail_smtpname = ref('');
|
||
|
|
const mail_smtppassword = ref('');
|
||
|
|
|
||
|
|
const mailSmtpmodeOptions = ref({
|
||
|
|
'smtp': 'SMTP',
|
||
|
|
'sendmail': 'Sendmail',
|
||
|
|
});
|
||
|
|
|
||
|
|
const mailSmtpsecureOptions = ref({
|
||
|
|
'': 'None/STARTTLS',
|
||
|
|
ssl: 'SSL',
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// const mailSendmailmodeOptions = ref({
|
||
|
|
// smtp: 'smtp (-bs)',
|
||
|
|
// pipe: 'pipe (-t -i)',
|
||
|
|
// });
|
||
|
|
|
||
|
|
const handleModeChange = () => {
|
||
|
|
// Logic to update visibility based on selected mailSmtpmode
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
const saveMailSettingsForm = async () => {
|
||
|
|
// Logic to save the email server settings
|
||
|
|
await form.post(stardust.route('settings.mail.store'));
|
||
|
|
};
|
||
|
|
const storeCredentialsForm = () => {
|
||
|
|
// Logic to save the email credentials
|
||
|
|
};
|
||
|
|
|
||
|
|
const sendTestEmail = async () => {
|
||
|
|
// Logic to send a test email
|
||
|
|
try {
|
||
|
|
const response = await axios.post(stardust.route('settings.mail.send'));
|
||
|
|
|
||
|
|
if (response.data && response.data.success) {
|
||
|
|
Notification.showSuccess(response.data.message);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
Notification.showError(error.message)
|
||
|
|
}
|
||
|
|
// ;
|
||
|
|
// if (response.data.success) {
|
||
|
|
// // responseMessage.value = response.data.message;
|
||
|
|
// Notification.showSuccess(response.data.message);
|
||
|
|
// } else {
|
||
|
|
// // responseMessage.value = 'An error occurred.';
|
||
|
|
// Notification.showError('An error occurred.')
|
||
|
|
// }
|
||
|
|
};
|
||
|
|
|
||
|
|
const linkToDocs = (page: string) => {
|
||
|
|
return `https://docs.nextcloud.com/server/latest/admin_manual/configuration_server/${page}.html`;
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="css" scoped>
|
||
|
|
.hidden {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|