From 265d2c3f875f07719794a92f4a18df87c7d0595a Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 14 Jan 2026 12:34:41 +0100
Subject: [PATCH] refactor(settings): migrate mail settings to Vue

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 .../lib/Controller/MailSettingsController.php |  17 +-
 apps/settings/lib/Settings/Admin/Mail.php     |  66 +++--
 apps/settings/src/admin-settings-mail.ts      |  10 +
 apps/settings/src/admin-settings-sharing.ts   |   3 +-
 apps/settings/src/admin.js                    |  95 -------
 .../src/views/AdminSettingsMailServer.vue     | 259 ++++++++++++++++++
 .../settings/admin/additional-mail.php        | 148 +---------
 apps/settings/templates/settings/frame.php    |   1 -
 build/frontend-legacy/webpack.modules.cjs     |   2 +-
 9 files changed, 326 insertions(+), 275 deletions(-)
 create mode 100644 apps/settings/src/admin-settings-mail.ts
 delete mode 100644 apps/settings/src/admin.js
 create mode 100644 apps/settings/src/views/AdminSettingsMailServer.vue

diff --git a/apps/settings/lib/Controller/MailSettingsController.php b/apps/settings/lib/Controller/MailSettingsController.php
index 69c43ecb5aa..95e60c72496 100644
--- a/apps/settings/lib/Controller/MailSettingsController.php
+++ b/apps/settings/lib/Controller/MailSettingsController.php
@@ -56,7 +56,7 @@ class MailSettingsController extends Controller {
 		string $mail_smtpmode,
 		string $mail_smtpsecure,
 		string $mail_smtphost,
-		?string $mail_smtpauth,
+		?bool $mail_smtpauth,
 		string $mail_smtpport,
 		string $mail_sendmailmode,
 	): DataResponse {
@@ -91,23 +91,18 @@ class MailSettingsController extends Controller {
 
 	/**
 	 * Store the credentials used for SMTP in the config
-	 *
-	 * @param string $mail_smtpname
-	 * @param string $mail_smtppassword
-	 * @return DataResponse
 	 */
 	#[AuthorizedAdminSetting(settings: Overview::class)]
 	#[PasswordConfirmationRequired]
-	public function storeCredentials($mail_smtpname, $mail_smtppassword) {
+	public function storeCredentials(string $mail_smtpname, ?string $mail_smtppassword): DataResponse {
 		if ($mail_smtppassword === '********') {
 			return new DataResponse($this->l10n->t('Invalid SMTP password.'), Http::STATUS_BAD_REQUEST);
 		}
 
-		$this->config->setSystemValues([
-			'mail_smtpname' => $mail_smtpname,
-			'mail_smtppassword' => $mail_smtppassword,
-		]);
-
+		if ($mail_smtppassword !== null) {
+			$this->config->setSystemValue('mail_smtppassword', $mail_smtppassword);
+		}
+		$this->config->setSystemValue('mail_smtpname', $mail_smtpname);
 		$this->config->setAppValue('core', 'emailTestSuccessful', '0');
 
 		return new DataResponse();
diff --git a/apps/settings/lib/Settings/Admin/Mail.php b/apps/settings/lib/Settings/Admin/Mail.php
index 8bf2342a59c..92dc9a340e4 100644
--- a/apps/settings/lib/Settings/Admin/Mail.php
+++ b/apps/settings/lib/Settings/Admin/Mail.php
@@ -7,20 +7,22 @@
 namespace OCA\Settings\Settings\Admin;
 
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\IBinaryFinder;
 use OCP\IConfig;
 use OCP\IL10N;
+use OCP\IURLGenerator;
 use OCP\Server;
 use OCP\Settings\IDelegatedSettings;
+use OCP\Util;
 
 class Mail implements IDelegatedSettings {
-	/**
-	 * @param IConfig $config
-	 * @param IL10N $l
-	 */
+	
 	public function __construct(
 		private IConfig $config,
 		private IL10N $l,
+		private IInitialState $initialState,
+		private IURLGenerator $urlGenerator,
 	) {
 	}
 
@@ -30,30 +32,56 @@ class Mail implements IDelegatedSettings {
 	public function getForm() {
 		$finder = Server::get(IBinaryFinder::class);
 
-		$parameters = [
-			// Mail
-			'sendmail_is_available' => $finder->findBinaryPath('sendmail') !== false,
+		$smtpModeOptions = [
+			['label' => 'SMTP', 'id' => 'smtp'],
+		];
+		if ($finder->findBinaryPath('sendmail') !== false) {
+			$smtpModeOptions[] = ['label' => 'Sendmail', 'id' => 'sendmail'];
+		}
+		if ($finder->findBinaryPath('qmail') !== false) {
+			$smtpModeOptions[] = ['label' => 'qmail', 'id' => 'qmail'];
+		}
+
+		$this->initialState->provideInitialState('settingsAdminMail', [
+			'configIsReadonly' => $this->config->getSystemValueBool('config_is_read_only', false),
+			'docUrl' => $this->urlGenerator->linkToDocs('admin-email'),
+
+			'smtpModeOptions' => $smtpModeOptions,
+			'smtpEncryptionOptions' => [
+				['label' => $this->l->t('None / STARTTLS'), 'id' => ''],
+				['label' => 'SSL/TLS', 'id' => 'ssl'],
+			],
+			'smtpSendmailModeOptions' => [
+				['label' => 'smtp (-bs)', 'id' => 'smtp'],
+				['label' => 'pipe (-t -i)', 'id' => 'pipe'],
+			],
+		]);
+
+		$smtpPassword = $this->config->getSystemValue('mail_smtppassword', '');
+		if ($smtpPassword !== '') {
+			$smtpPassword = '********';
+		}
+
+		$smtpMode = $this->config->getSystemValue('mail_smtpmode', '');
+		if ($smtpMode === '' || $smtpMode === 'php') {
+			$smtpMode = 'smtp';
+		}
+
+		$this->initialState->provideInitialState('settingsAdminMailConfig', [
 			'mail_domain' => $this->config->getSystemValue('mail_domain', ''),
 			'mail_from_address' => $this->config->getSystemValue('mail_from_address', ''),
-			'mail_smtpmode' => $this->config->getSystemValue('mail_smtpmode', ''),
+			'mail_smtpmode' => $smtpMode,
 			'mail_smtpsecure' => $this->config->getSystemValue('mail_smtpsecure', ''),
 			'mail_smtphost' => $this->config->getSystemValue('mail_smtphost', ''),
 			'mail_smtpport' => $this->config->getSystemValue('mail_smtpport', ''),
 			'mail_smtpauth' => $this->config->getSystemValue('mail_smtpauth', false),
 			'mail_smtpname' => $this->config->getSystemValue('mail_smtpname', ''),
-			'mail_smtppassword' => $this->config->getSystemValue('mail_smtppassword', ''),
+			'mail_smtppassword' => $smtpPassword,
 			'mail_sendmailmode' => $this->config->getSystemValue('mail_sendmailmode', 'smtp'),
-		];
+		]);
 
-		if ($parameters['mail_smtppassword'] !== '') {
-			$parameters['mail_smtppassword'] = '********';
-		}
-
-		if ($parameters['mail_smtpmode'] === '' || $parameters['mail_smtpmode'] === 'php') {
-			$parameters['mail_smtpmode'] = 'smtp';
-		}
-
-		return new TemplateResponse('settings', 'settings/admin/additional-mail', $parameters, '');
+		Util::addScript('settings', 'vue-settings-admin-mail');
+		return new TemplateResponse('settings', 'settings/admin/additional-mail', renderAs: '');
 	}
 
 	/**
diff --git a/apps/settings/src/admin-settings-mail.ts b/apps/settings/src/admin-settings-mail.ts
new file mode 100644
index 00000000000..57cb75fd82b
--- /dev/null
+++ b/apps/settings/src/admin-settings-mail.ts
@@ -0,0 +1,10 @@
+/*!
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import Vue from 'vue'
+import AdminSettingsMailServer from './views/AdminSettingsMailServer.vue'
+
+const app = new Vue(AdminSettingsMailServer)
+app.$mount('#vue-admin-settings-mail')
diff --git a/apps/settings/src/admin-settings-sharing.ts b/apps/settings/src/admin-settings-sharing.ts
index ae73cbd519a..e8bd7d0fa92 100644
--- a/apps/settings/src/admin-settings-sharing.ts
+++ b/apps/settings/src/admin-settings-sharing.ts
@@ -1,7 +1,8 @@
-/**
+/*!
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
 import Vue from 'vue'
 import AdminSettingsSharing from './views/AdminSettingsSharing.vue'
 
diff --git a/apps/settings/src/admin.js b/apps/settings/src/admin.js
deleted file mode 100644
index f272e1173f2..00000000000
--- a/apps/settings/src/admin.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
-import $ from 'jquery'
-
-window.addEventListener('DOMContentLoaded', () => {
-	$('#loglevel').change(function() {
-		$.post(generateUrl('/settings/admin/log/level'), { level: $(this).val() }, () => {
-			OC.Log.reload()
-		})
-	})
-
-	$('#mail_smtpauth').change(function() {
-		if (!this.checked) {
-			$('#mail_credentials').addClass('hidden')
-		} else {
-			$('#mail_credentials').removeClass('hidden')
-		}
-	})
-
-	$('#mail_smtpmode').change(function() {
-		if ($(this).val() !== 'smtp') {
-			$('#setting_smtpauth').addClass('hidden')
-			$('#setting_smtphost').addClass('hidden')
-			$('#mail_smtpsecure_label').addClass('hidden')
-			$('#mail_smtpsecure').addClass('hidden')
-			$('#mail_credentials').addClass('hidden')
-			$('#mail_sendmailmode_label, #mail_sendmailmode').removeClass('hidden')
-		} else {
-			$('#setting_smtpauth').removeClass('hidden')
-			$('#setting_smtphost').removeClass('hidden')
-			$('#mail_smtpsecure_label').removeClass('hidden')
-			$('#mail_smtpsecure').removeClass('hidden')
-			if ($('#mail_smtpauth').is(':checked')) {
-				$('#mail_credentials').removeClass('hidden')
-			}
-			$('#mail_sendmailmode_label, #mail_sendmailmode').addClass('hidden')
-		}
-	})
-
-	const changeEmailSettings = function() {
-		if (OC.PasswordConfirmation.requiresPasswordConfirmation()) {
-			OC.PasswordConfirmation.requirePasswordConfirmation(changeEmailSettings)
-			return
-		}
-
-		OC.msg.startSaving('#mail_settings_msg')
-		axios.post(generateUrl('/settings/admin/mailsettings'), $('#mail_general_settings_form').serialize())
-			.then(() => {
-				OC.msg.finishedSuccess('#mail_settings_msg', t('settings', 'Saved'))
-			}).catch((error) => {
-				OC.msg.finishedError('#mail_settings_msg', error)
-			})
-	}
-
-	const toggleEmailCredentials = function() {
-		if (OC.PasswordConfirmation.requiresPasswordConfirmation()) {
-			OC.PasswordConfirmation.requirePasswordConfirmation(toggleEmailCredentials)
-			return
-		}
-
-		OC.msg.startSaving('#mail_settings_msg')
-		axios.post(generateUrl('/settings/admin/mailsettings/credentials'), $('#mail_credentials_settings').serialize())
-			.then(() => {
-				OC.msg.finishedSuccess('#mail_settings_msg', t('settings', 'Saved'))
-			}).catch((error) => {
-				OC.msg.finishedError('#mail_settings_msg', error)
-			})
-	}
-
-	$('#mail_general_settings_form').change(changeEmailSettings)
-	$('#mail_credentials_settings_submit').click(toggleEmailCredentials)
-	$('#mail_smtppassword').click(() => {
-		if (this.type === 'text' && this.value === '********') {
-			this.type = 'password'
-			this.value = ''
-		}
-	})
-
-	$('#sendtestemail').click((event) => {
-		event.preventDefault()
-		OC.msg.startAction('#sendtestmail_msg', t('settings', 'Sending…'))
-
-		axios.post(generateUrl('/settings/admin/mailtest'))
-			.then(() => {
-				OC.msg.finishedSuccess('#sendtestmail_msg', t('settings', 'Email sent'))
-			}).catch((error) => {
-				OC.msg.finishedError('#sendtestmail_msg', error.response.data)
-			})
-	})
-})
diff --git a/apps/settings/src/views/AdminSettingsMailServer.vue b/apps/settings/src/views/AdminSettingsMailServer.vue
new file mode 100644
index 00000000000..713832b88f7
--- /dev/null
+++ b/apps/settings/src/views/AdminSettingsMailServer.vue
@@ -0,0 +1,259 @@
+<!--
+ - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import axios, { isAxiosError } from '@nextcloud/axios'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { confirmPassword } from '@nextcloud/password-confirmation'
+import { generateUrl } from '@nextcloud/router'
+import { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcPasswordField } from '@nextcloud/vue'
+import { computed, ref } from 'vue'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormGroup from '@nextcloud/vue/components/NcFormGroup'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+import logger from '../logger.ts'
+
+const settingsAdminMail = loadState<{
+	configIsReadonly: boolean
+	docUrl: string
+	smtpModeOptions: { label: string, id: string }[]
+	smtpEncryptionOptions: { label: string, id: string }[]
+	smtpSendmailModeOptions: { label: string, id: string }[]
+}>('settings', 'settingsAdminMail')
+
+const initialConfig = loadState<{
+	mail_domain: string
+	mail_from_address: string
+	mail_smtpmode: string
+	mail_smtpsecure: string
+	mail_smtphost: string
+	mail_smtpport: string
+	mail_smtpauth: boolean
+	mail_smtpname: string
+	mail_smtppassword: string
+	mail_sendmailmode: string
+}>('settings', 'settingsAdminMailConfig')
+const mailConfig = ref({ ...initialConfig })
+
+const smtpMode = computed({
+	get() {
+		return settingsAdminMail.smtpModeOptions.find((option) => option.id === mailConfig.value.mail_smtpmode)
+	},
+	set(value) {
+		mailConfig.value.mail_smtpmode = value?.id ?? ''
+	},
+})
+const smtpEncryption = computed({
+	get() {
+		return settingsAdminMail.smtpEncryptionOptions.find((option) => option.id === mailConfig.value.mail_smtpsecure)
+	},
+	set(value) {
+		mailConfig.value.mail_smtpsecure = value?.id ?? ''
+	},
+})
+const smtpSendmailMode = computed({
+	get() {
+		return settingsAdminMail.smtpSendmailModeOptions.find((option) => option.id === mailConfig.value.mail_sendmailmode)
+	},
+	set(value) {
+		mailConfig.value.mail_sendmailmode = value?.id ?? ''
+	},
+})
+
+const hasPasswordChanges = computed(() => mailConfig.value.mail_smtppassword !== '********')
+const hasCredentialChanges = computed(() => hasPasswordChanges.value || mailConfig.value.mail_smtpname !== initialConfig.mail_smtpname)
+
+const isSaving = ref(false)
+const isSendingTestEmail = ref(false)
+const testEmailError = ref('')
+
+/**
+ * Send a test email to verify the email settings
+ */
+async function testEmail() {
+	testEmailError.value = ''
+	isSendingTestEmail.value = true
+	try {
+		await axios.post(generateUrl('/settings/admin/mailtest'))
+		showSuccess(t('settings', 'Email sent successfully'))
+	} catch (error) {
+		logger.error('Error sending test email', { error })
+		showError(t('settings', 'Failed to send email'))
+
+		if (isAxiosError(error) && typeof error.response?.data === 'string') {
+			testEmailError.value = error.response.data
+		}
+	} finally {
+		isSendingTestEmail.value = false
+	}
+}
+
+/**
+ * Submit the mail settings form
+ */
+async function onSubmit() {
+	await confirmPassword()
+
+	isSaving.value = true
+	try {
+		if (mailConfig.value.mail_smtpauth && hasCredentialChanges.value) {
+			await axios.post(generateUrl('/settings/admin/mailsettings/credentials'), {
+				mail_smtppassword: hasPasswordChanges.value ? mailConfig.value.mail_smtppassword : undefined,
+				mail_smtpname: mailConfig.value.mail_smtpname,
+			})
+		}
+
+		const config: Record<string, string | boolean> = { ...mailConfig.value }
+		delete config.mail_smtppassword
+		delete config.mail_smtpname
+		await axios.post(generateUrl('/settings/admin/mailsettings'), config)
+
+		testEmailError.value = ''
+	} catch (error) {
+		logger.error('Error saving email settings', { error })
+		showError(t('settings', 'Failed to save email settings'))
+		return
+	} finally {
+		isSaving.value = false
+	}
+}
+</script>
+
+<template>
+	<NcSettingsSection
+		:doc-url="settingsAdminMail.docUrl"
+		: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.')">
+		<NcNoteCard v-if="settingsAdminMail.configIsReadonly" type="info">
+			{{ t('settings', 'The server configuration is read-only so the mail settings cannot be changed using the web interface.') }}
+		</NcNoteCard>
+
+		<NcNoteCard v-if="smtpMode?.id === 'null'" type="info">
+			{{ t('settings', 'Mail delivery is disabled by instance config "{config}".', { config: 'mail_smtpmode' }) }}
+		</NcNoteCard>
+
+		<form v-else :class="$style.adminSettingsMailServer__form" @submit.prevent="onSubmit">
+			<NcFormBox>
+				<NcSelect
+					v-model="smtpMode"
+					:input-label="t('settings', 'Send mode')"
+					:options="settingsAdminMail.smtpModeOptions"
+					required />
+
+				<NcSelect
+					v-if="smtpMode?.id === 'smtp'"
+					v-model="smtpEncryption"
+					:input-label="t('settings', 'Encryption')"
+					:options="settingsAdminMail.smtpEncryptionOptions"
+					required />
+				<NcSelect
+					v-else-if="smtpMode?.id === 'sendmail'"
+					v-model="smtpSendmailMode"
+					:input-label="t('settings', 'Sendmail mode')"
+					:options="settingsAdminMail.smtpSendmailModeOptions"
+					required />
+			</NcFormBox>
+
+			<NcFormGroup :label="t('settings', 'From address')">
+				<NcFormBox row>
+					<NcTextField v-model="mailConfig.mail_from_address" :label="t('settings', 'Email')" />
+					<NcTextField v-model="mailConfig.mail_domain" :label="t('settings', 'Domain')">
+						<template #icon>
+							<div style="line-height: 1;">
+								@
+							</div>
+						</template>
+					</NcTextField>
+				</NcFormBox>
+			</NcFormGroup>
+
+			<NcFormGroup v-show="smtpMode?.id === 'smtp'" :label="t('settings', 'Server address')">
+				<NcFormBox row>
+					<NcTextField
+						v-model="mailConfig.mail_smtphost"
+						:label="t('settings', 'Host')"
+						name="mail_smtphost" />
+					<NcTextField
+						v-model="mailConfig.mail_smtpport"
+						:label="t('settings', 'Port')"
+						type="number"
+						max="65535"
+						min="1"
+						name="mail_smtpport">
+						<template #icon>
+							<div style="line-height: 1;">
+								:
+							</div>
+						</template>
+					</NcTextField>
+				</NcFormBox>
+			</NcFormGroup>
+
+			<NcFormGroup v-show="smtpMode?.id === 'smtp'" :label="t('settings', 'Authentication')">
+				<NcCheckboxRadioSwitch v-model="mailConfig.mail_smtpauth" type="switch">
+					{{ t('settings', 'Authentication required') }}
+				</NcCheckboxRadioSwitch>
+
+				<NcFormBox v-show="mailConfig.mail_smtpauth">
+					<NcTextField
+						v-model="mailConfig.mail_smtpname"
+						:label="t('settings', 'Login')"
+						name="mail_smtpname" />
+					<NcPasswordField
+						v-model="mailConfig.mail_smtppassword"
+						:label="t('settings', 'Password')"
+						:show-trailing-button="hasPasswordChanges"
+						name="mail_smtppassword" />
+				</NcFormBox>
+			</NcFormGroup>
+
+			<div :class="$style.adminSettingsMailServer__formAction">
+				<NcButton
+					:disabled="isSendingTestEmail"
+					variant="success"
+					@click="testEmail">
+					<template v-if="isSendingTestEmail" #icon>
+						<NcLoadingIcon />
+					</template>
+					{{ isSendingTestEmail ? t('settings', 'Sending test email…') : t('settings', 'Send test email') }}
+				</NcButton>
+				<NcButton
+					:disabled="isSaving"
+					type="submit"
+					variant="primary">
+					<template v-if="isSaving" #icon>
+						<NcLoadingIcon />
+					</template>
+					{{ isSaving ? t('settings', 'Saving…') : t('settings', 'Save settings') }}
+				</NcButton>
+			</div>
+		</form>
+
+		<NcNoteCard v-if="testEmailError" type="error">
+			{{ testEmailError }}
+		</NcNoteCard>
+	</NcSettingsSection>
+</template>
+
+<style module>
+.adminSettingsMailServer__form {
+	display: flex;
+	flex-direction: column;
+	gap: calc(2.5 * var(--default-grid-baseline));
+
+	max-width: 600px !important;
+}
+
+.adminSettingsMailServer__formAction {
+	display: flex;
+	justify-content: end;
+	gap: var(--default-grid-baseline);
+}
+</style>
diff --git a/apps/settings/templates/settings/admin/additional-mail.php b/apps/settings/templates/settings/admin/additional-mail.php
index 6d6c036e813..0f47c10d776 100644
--- a/apps/settings/templates/settings/admin/additional-mail.php
+++ b/apps/settings/templates/settings/admin/additional-mail.php
@@ -3,152 +3,6 @@
  * SPDX-FileCopyrightText: 2016 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-
-/** @var \OCP\IL10N $l */
-/** @var array $_ */
-
-$mail_smtpauthtype = [
-	'LOGIN' => $l->t('Login')
-];
-
-$mail_smtpsecure = [
-	'' => $l->t('None/STARTTLS'),
-	'ssl' => $l->t('SSL')
-];
-
-$mail_smtpmode = [
-	['smtp', 'SMTP'],
-];
-if ($_['sendmail_is_available']) {
-	$mail_smtpmode[] = ['sendmail', 'Sendmail'];
-}
-if ($_['mail_smtpmode'] === 'qmail') {
-	$mail_smtpmode[] = ['qmail', 'qmail'];
-}
-
-$mail_sendmailmode = [
-	'smtp' => 'smtp (-bs)',
-	'pipe' => 'pipe (-t -i)'
-];
-
 ?>
 
-<div class="section" id="mail_general_settings">
-<?php if ($_['mail_smtpmode'] === 'null') { ?>
-	<h2><?php p($l->t('Email server'));?></h2>
-
-	<p>
-	 <?php p($l->t('Mail delivery is disabled by instance config "%s".', ['mail_smtpmode'])); ?>
-	</p>
-<?php } else { ?>
-	<form id="mail_general_settings_form" class="mail_settings">
-		<h2><?php p($l->t('Email server'));?></h2>
-		<a 	target="_blank"
-			rel="noreferrer noopener" class="icon-info"
-			title="<?php p($l->t('Open documentation'));?>"
-			href="<?php p(link_to_docs('admin-email')); ?>"
-			aria-label="<?php p($l->t('Open documentation'));?>"></a>
-		<p class="settings-hint">
-			  <?php p($l->t('It is important to set up this server to be able to send emails, like for password reset and notifications.')); ?>
-		</p>
-		<p><span id="mail_settings_msg" class="msg"></span></p>
-
-		<p>
-			<label for="mail_smtpmode"><?php p($l->t('Send mode')); ?></label>
-			<select name="mail_smtpmode" id="mail_smtpmode">
-				<?php foreach ($mail_smtpmode as $smtpmode):
-					$selected = '';
-					if ($smtpmode[0] == $_['mail_smtpmode']):
-						$selected = 'selected="selected"';
-					endif; ?>
-					<option value="<?php p($smtpmode[0])?>" <?php p($selected) ?>><?php p($smtpmode[1]) ?></option>
-				<?php endforeach;?>
-			</select>
-		</p>
-
-		<p>
-			<label id="mail_smtpsecure_label" for="mail_smtpsecure"
-				<?php if ($_['mail_smtpmode'] !== 'smtp') {
-					print_unescaped(' class="hidden"');
-				} ?>>
-				<?php p($l->t('Encryption')); ?>
-			</label>
-			<select name="mail_smtpsecure" id="mail_smtpsecure"
-				<?php if ($_['mail_smtpmode'] !== 'smtp') {
-					print_unescaped(' class="hidden"');
-				} ?>>
-				<?php foreach ($mail_smtpsecure as $secure => $name):
-					$selected = '';
-					if ($secure == $_['mail_smtpsecure']):
-						$selected = 'selected="selected"';
-					endif; ?>
-					<option value="<?php p($secure)?>" <?php p($selected) ?>><?php p($name) ?></option>
-				<?php endforeach;?>
-			</select>
-		</p>
-
-		<p class="<?= $_['mail_smtpmode'] !== 'sendmail' ? 'hidden' : '' ?>">
-			<label id="mail_sendmailmode_label" for="mail_sendmailmode">
-				<?php p($l->t('Sendmail mode')); ?>
-			</label>
-			<select name="mail_sendmailmode" id="mail_sendmailmode">
-				<?php foreach ($mail_sendmailmode as $sendmailmodeValue => $sendmailmodeLabel): ?>
-					<option value="<?php p($sendmailmodeValue)?>" <?= $sendmailmodeValue === $_['mail_sendmailmode'] ? 'selected="selected"' : '' ?>><?php p($sendmailmodeLabel) ?></option>
-				<?php endforeach;?>
-			</select>
-		</p>
-
-		<p>
-			<label for="mail_from_address"><?php p($l->t('From address')); ?></label>
-			<input type="text" name="mail_from_address" id="mail_from_address" placeholder="<?php p($l->t('Email'))?>"
-										value="<?php p($_['mail_from_address']) ?>" />@
-			<input type="text" name="mail_domain" id="mail_domain" placeholder="example.com"
-										value="<?php p($_['mail_domain']) ?>" />
-		</p>
-
-		<p id="setting_smtphost" <?php if ($_['mail_smtpmode'] !== 'smtp') {
-			print_unescaped(' class="hidden"');
-		} ?>>
-			<label for="mail_smtphost"><?php p($l->t('Server address')); ?></label>
-			<input type="text" name="mail_smtphost" id="mail_smtphost" placeholder="smtp.example.com"
-										value="<?php p($_['mail_smtphost']) ?>" />
-			:
-			<input type="text" inputmode="numeric" name="mail_smtpport" id="mail_smtpport" placeholder="<?php p($l->t('Port'))?>"
-										value="<?php p($_['mail_smtpport']) ?>" />
-		</p>
-		<p id='setting_smtpauth' <?php if ($_['mail_smtpmode'] !== 'smtp') {
-			print_unescaped(' class="hidden"');
-		} ?>>
-			<label for='mail_smtpauthtype'><?php p($l->t('Authentication')); ?></label>
-			<select name="mail_smtpauthtype" id="mail_smtpauthtype" class="hidden">
-				<?php foreach ($mail_smtpauthtype as $authtype => $name): ?>
-						<option value="<?php p($authtype) ?>"><?php p($name) ?></option>
-				<?php endforeach; ?>
-			</select>
-
-			<input type="checkbox" name="mail_smtpauth" id="mail_smtpauth" class="checkbox" value="1"
-				<?php if ($_['mail_smtpauth']) {
-					print_unescaped('checked="checked"');
-				} ?> />
-			<label for="mail_smtpauth"><?php p($l->t('Authentication required')); ?></label>
-		</p>
-	</form>
-	<form class="mail_settings" id="mail_credentials_settings">
-		<p id="mail_credentials" <?php if (!$_['mail_smtpauth'] || $_['mail_smtpmode'] !== 'smtp') {
-			print_unescaped(' class="hidden"');
-		} ?>>
-			<label for="mail_smtpname"><?php p($l->t('Credentials')); ?></label>
-			<input type="text" name="mail_smtpname" id="mail_smtpname" placeholder="<?php p($l->t('SMTP Login'))?>"
-				   value="<?php p($_['mail_smtpname']) ?>" />
-			<input type="text" name="mail_smtppassword" id="mail_smtppassword" autocomplete="off"
-				   placeholder="<?php p($l->t('SMTP Password'))?>" value="<?php p($_['mail_smtppassword']) ?>" />
-			<input id="mail_credentials_settings_submit" type="button" value="<?php p($l->t('Save')) ?>">
-		</p>
-	</form>
-
-	<br />
-	<em><?php p($l->t('Test and verify email settings')); ?></em>
-	<input type="submit" name="sendtestemail" id="sendtestemail" value="<?php p($l->t('Send email')); ?>"/>
-	<span id="sendtestmail_msg" class="msg"></span>
-<?php } ?>
-</div>
+<div id="vue-admin-settings-mail"></div>
diff --git a/apps/settings/templates/settings/frame.php b/apps/settings/templates/settings/frame.php
index 6eafc50a8f4..ec21cad5895 100644
--- a/apps/settings/templates/settings/frame.php
+++ b/apps/settings/templates/settings/frame.php
@@ -5,7 +5,6 @@
  */
 
 style('settings', 'settings');
-\OCP\Util::addScript('settings', 'legacy-admin');
 ?>
 
 <div id="app-navigation">
diff --git a/build/frontend-legacy/webpack.modules.cjs b/build/frontend-legacy/webpack.modules.cjs
index b7e557f3dad..2835ec4c1c4 100644
--- a/build/frontend-legacy/webpack.modules.cjs
+++ b/build/frontend-legacy/webpack.modules.cjs
@@ -52,11 +52,11 @@ module.exports = {
 		'public-nickname-handler': path.join(__dirname, 'apps/files_sharing/src', 'public-nickname-handler.ts'),
 	},
 	settings: {
-		'legacy-admin': path.join(__dirname, 'apps/settings/src', 'admin.js'),
 		'vue-settings-admin-overview': path.join(__dirname, 'apps/settings/src', 'main-admin-overview.ts'),
 		'vue-settings-admin-basic-settings': path.join(__dirname, 'apps/settings/src', 'main-admin-basic-settings.js'),
 		'vue-settings-admin-ai': path.join(__dirname, 'apps/settings/src', 'main-admin-ai.js'),
 		'vue-settings-admin-delegation': path.join(__dirname, 'apps/settings/src', 'main-admin-delegation.js'),
+		'vue-settings-admin-mail': path.join(__dirname, 'apps/settings/src', 'admin-settings-mail.ts'),
 		'vue-settings-admin-security': path.join(__dirname, 'apps/settings/src', 'main-admin-security.js'),
 		'vue-settings-admin-settings-presets': path.join(__dirname, 'apps/settings/src', 'main-admin-settings-presets.js'),
 		'vue-settings-admin-sharing': path.join(__dirname, 'apps/settings/src', 'admin-settings-sharing.ts'),