mirror of https://github.com/nextcloud/server.git
Port mail admin settings to vue
Signed-off-by: Carl Schwan <carl@carlschwan.eu>feat/mail-admin-vue
parent
5f3585d817
commit
291d2bca54
@ -0,0 +1,263 @@
|
|||||||
|
<!--
|
||||||
|
- @copyright 2022 Carl Schwan <carl@carlschwan.eu>
|
||||||
|
-
|
||||||
|
- @author Carl Schwan <carl@carlschwan.eu>
|
||||||
|
-
|
||||||
|
- @license GNU AGPL version 3 or any later version
|
||||||
|
-
|
||||||
|
- This program is free software: you can redistribute it and/or modify
|
||||||
|
- it under the terms of the GNU Affero General Public License as
|
||||||
|
- published by the Free Software Foundation, either version 3 of the
|
||||||
|
- License, or (at your option) any later version.
|
||||||
|
-
|
||||||
|
- This program is distributed in the hope that it will be useful,
|
||||||
|
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
- GNU Affero General Public License for more details.
|
||||||
|
-
|
||||||
|
- You should have received a copy of the GNU Affero General Public License
|
||||||
|
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
-
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<NcSettingsSection :title="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="adminDocUrl"
|
||||||
|
class="spacing">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="form-control">
|
||||||
|
<label for="mail_smtpmode">{{ t('settings', 'Send mode') }}</label>
|
||||||
|
<select name="mail_smtpmode" id="mail_smtpmode">
|
||||||
|
<option v-for="smtpMode in smtpModes"
|
||||||
|
:key="smtpMode[0]"
|
||||||
|
:value="smtpMode[0]"
|
||||||
|
:selected="smtpMode[0] === mailSmtpMode">
|
||||||
|
{{ smtpMode[1] }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="mailSmtpMode === 'smtp'" class="form-control">
|
||||||
|
<label id="mail_smtpsecure_label" for="mail_smtpsecure">
|
||||||
|
{{ t('settings', 'Encryption') }}
|
||||||
|
</label>
|
||||||
|
<select name="mail_smtpsecure" id="mail_smtpsecure">
|
||||||
|
<option v-for="(secure, name) in smtpSecure"
|
||||||
|
:key="secure"
|
||||||
|
:value="secure"
|
||||||
|
:selected="secure === mailSmtpSecure">
|
||||||
|
{{ smtpSecure[name] }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="mailSmtpMode === 'sendmail'" class="form-control">
|
||||||
|
<label for="mail_sendmailmode">
|
||||||
|
{{ t('settings', 'Sendmail mode') }}
|
||||||
|
</label>
|
||||||
|
<select name="mail_sendmailmode" id="mail_sendmailmode">
|
||||||
|
<option v-for="(sendmailmodeValue, sendmailmodeLabel) in sendmailModes"
|
||||||
|
:value="sendmailmodeValue"
|
||||||
|
:selected="sendmailmodeValue === 'mailSendmailMode'">
|
||||||
|
{{ sendmailModes[sendmailmodeLabel] }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="form-control">
|
||||||
|
<label for="mail_from_address">{{ t('settings', 'From address') }}</label>
|
||||||
|
<input type="text" name="mail_from_address" id="mail_from_address" placeholder="noreply"
|
||||||
|
v-model="mailFromAddress" />
|
||||||
|
@
|
||||||
|
<input type="text" name="mail_domain" id="mail_domain" placeholder="example.com"
|
||||||
|
v-model="mailDomain" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p v-if="mailSmtpMode === 'smtp'" class="form-control">
|
||||||
|
<label for="mail_smtpauthtype">{{ t('settings', 'Authentication method') }}</label>
|
||||||
|
<select name="mail_smtpauthtype" id="mail_smtpauthtype">
|
||||||
|
<option v-for="(name, authType) in smtpAuthType"
|
||||||
|
:key="authType"
|
||||||
|
:value="authType"
|
||||||
|
:selected="authType === mailSmtpAuthType">
|
||||||
|
{{ name }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<NcCheckboxRadioSwitch type="checkbox"
|
||||||
|
:checked.sync="mailSmtpAuth">
|
||||||
|
{{ t('settings', 'Authentication required') }}
|
||||||
|
</NcCheckboxRadioSwitch>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p v-if="mailSmtpMode === 'smtp'" class="form-control">
|
||||||
|
<label for="mail_smtphost">{{ t('settings', 'Server address') }}</label>
|
||||||
|
<input type="text"
|
||||||
|
name="mail_smtphost"
|
||||||
|
id="mail_smtphost"
|
||||||
|
placeholder="smtp.example.com"
|
||||||
|
v-model="mailSmtpHost" />
|
||||||
|
:
|
||||||
|
<input type="text"
|
||||||
|
inputmode="numeric"
|
||||||
|
name="mail_smtpport"
|
||||||
|
id="mail_smtpport"
|
||||||
|
:placeholder="t('settings', 'Port')"
|
||||||
|
v-model="mailSmtpPort" />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form v-if="mailSmtpAuth && mailSmtpMode === 'smtp'" class="topMargin">
|
||||||
|
<h3>{{ t('settings', 'Authentication') }}</h3>
|
||||||
|
<p>
|
||||||
|
<label for="mail_smtpname">{{ t('settings', 'SMTP username') }}</label>
|
||||||
|
<input type="text"
|
||||||
|
name="mail_smtpname"
|
||||||
|
id="mail_smtpname"
|
||||||
|
:value="mailSmtpName" />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="mailSmtpPassword">{{ t('settings', 'SMTP password') }}</label>
|
||||||
|
<input type="text"
|
||||||
|
id="mail_smtppassword"
|
||||||
|
autocomplete="off"
|
||||||
|
:value="mailSmtpPassword" />
|
||||||
|
<NcButton nativeType="submit">
|
||||||
|
{{ t('settings', 'Save') }}
|
||||||
|
</NcButton>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="topMargin">
|
||||||
|
<p>{{ t('settings', 'Test and verify email settings') }}</p>
|
||||||
|
<NcButton @click="sendMail">
|
||||||
|
{{ t('settings', 'Send email') }}
|
||||||
|
</NcButton>
|
||||||
|
<p v-id="sendMailMessage">{{ sendMailMessage }}</p>
|
||||||
|
</div>
|
||||||
|
</NcSettingsSection>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import axios from '@nextcloud/axios'
|
||||||
|
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
|
||||||
|
import NcButton from '@nextcloud/vue/dist/Components/NcButton'
|
||||||
|
import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
|
||||||
|
import { loadState } from '@nextcloud/initial-state'
|
||||||
|
import { getLoggerBuilder } from '@nextcloud/logger'
|
||||||
|
import { generateOcsUrl } from '@nextcloud/router'
|
||||||
|
import { confirmPassword } from '@nextcloud/password-confirmation'
|
||||||
|
import '@nextcloud/password-confirmation/dist/style.css'
|
||||||
|
import { showError } from '@nextcloud/dialogs'
|
||||||
|
|
||||||
|
const smtpAuthType = {
|
||||||
|
'': t('settings', 'None'),
|
||||||
|
'LOGIN': t('settings', 'Login'),
|
||||||
|
'PLAIN': t('settings', 'Plain'),
|
||||||
|
'NTLM': t('settings', 'NT LAN Manager'),
|
||||||
|
}
|
||||||
|
|
||||||
|
const smtpSecure = {
|
||||||
|
'': t('settings', 'None'),
|
||||||
|
'ssl': t('settings', 'SSL/TLS'),
|
||||||
|
'tls': t('settings', 'STARTTLS'),
|
||||||
|
}
|
||||||
|
|
||||||
|
const smtpModes = [
|
||||||
|
['smtp', 'SMTP'],
|
||||||
|
]
|
||||||
|
|
||||||
|
if (loadState('settings', 'sendmail_is_available')) {
|
||||||
|
smtpModes.push(['sendmail', 'Sendmail'])
|
||||||
|
}
|
||||||
|
if (loadState('settings', 'mail_smtpmode') === 'qmail') {
|
||||||
|
// legacy only show it if it was previously enabled
|
||||||
|
smtpModes.push(['qmail', 'qmail'])
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendmailModes = {
|
||||||
|
'smtp': 'smtp (-bs)',
|
||||||
|
'pipe': 'pipe (-t)'
|
||||||
|
}
|
||||||
|
|
||||||
|
const logger = getLoggerBuilder()
|
||||||
|
.setApp('settings')
|
||||||
|
.detectUser()
|
||||||
|
.build()
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'MailDeliverySettings',
|
||||||
|
components: {
|
||||||
|
NcCheckboxRadioSwitch,
|
||||||
|
NcSettingsSection,
|
||||||
|
NcButton,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
smtpAuthType,
|
||||||
|
smtpSecure,
|
||||||
|
smtpModes,
|
||||||
|
sendmailModes,
|
||||||
|
|
||||||
|
mailFromAddress: loadState('settings', 'mail_from_address'),
|
||||||
|
mailDomain: loadState('settings', 'mail_domain'),
|
||||||
|
mailSmtpMode: loadState('settings', 'mail_smtpmode'),
|
||||||
|
mailSmtpSecure: loadState('settings', 'mail_smtpsecure'),
|
||||||
|
mailSmtpHost: loadState('settings', 'mail_smtphost'),
|
||||||
|
mailSmtpPort: loadState('settings', 'mail_smtpport'),
|
||||||
|
mailSmtpAuthType: loadState('settings', 'mail_smtpauthtype'),
|
||||||
|
mailSmtpAuth: loadState('settings', 'mail_smtpauth'),
|
||||||
|
mailSmtpName: loadState('settings', 'mail_smtpname'),
|
||||||
|
mailSmtpPassword: loadState('settings', 'mail_smtppassword'),
|
||||||
|
mailSendmailMode: loadState('settings', 'mail_sendmailmode'),
|
||||||
|
adminDocUrl: loadState('settings', 'emailAdminDocUrl'),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async update(key, value) {
|
||||||
|
await confirmPassword()
|
||||||
|
|
||||||
|
const url = generateOcsUrl('/apps/provisioning_api/api/v1/config/apps/{appId}/{key}', {
|
||||||
|
appId: 'core',
|
||||||
|
key,
|
||||||
|
})
|
||||||
|
|
||||||
|
const stringValue = value ? 'yes' : 'no'
|
||||||
|
try {
|
||||||
|
const { data } = await axios.post(url, {
|
||||||
|
value: stringValue,
|
||||||
|
})
|
||||||
|
this.handleResponse({
|
||||||
|
status: data.ocs?.meta?.status,
|
||||||
|
})
|
||||||
|
} catch (e) {
|
||||||
|
this.handleResponse({
|
||||||
|
errorMessage: t('settings', 'Unable to update server side encryption config'),
|
||||||
|
error: e,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async handleResponse({ status, errorMessage, error }) {
|
||||||
|
if (status !== 'ok') {
|
||||||
|
showError(errorMessage)
|
||||||
|
logger.error(errorMessage, { error })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scopped>
|
||||||
|
.topMargin {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
.form-control {
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,35 @@
|
|||||||
|
/**
|
||||||
|
* @copyright 2022 Carl Schwa <carl@carlschwan.eu>
|
||||||
|
* @license AGPL-3.0-or-later
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Affero General Public License as
|
||||||
|
* published by the Free Software Foundation, either version 3 of the
|
||||||
|
* License, or (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Affero General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License
|
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { loadState } from '@nextcloud/initial-state'
|
||||||
|
import Vue from 'vue'
|
||||||
|
|
||||||
|
import MailDeliverySettings from './components/MailDeliverySettings.vue'
|
||||||
|
|
||||||
|
// eslint-disable-next-line camelcase
|
||||||
|
__webpack_nonce__ = btoa(OC.requestToken)
|
||||||
|
|
||||||
|
Vue.prototype.t = t
|
||||||
|
|
||||||
|
// Not used here but required for legacy templates
|
||||||
|
window.OC = window.OC || {}
|
||||||
|
window.OC.Settings = window.OC.Settings || {}
|
||||||
|
|
||||||
|
const View = Vue.extend(MailDeliverySettings)
|
||||||
|
new View().$mount('#mail_delivery_settings')
|
Loading…
Reference in New Issue