Added e-mail test button.

pages/admin/emails/@template/+Page.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { inject } from 'vue';
+import { inject, ref } from 'vue';
 
 import Admin from '#/components/admin/admin.vue';
+import { post } from '#/src/api.js';
 
-const { pageProps } = inject('pageContext');
+const { pageProps, user } = inject('pageContext');
 
 const {
 	template,
@@ -11,12 +12,55 @@ const {
 	text,
 	error,
 } = pageProps;
+
+const testAddress = ref(user?.email || '');
+const sending = ref(false);
+
+async function sendTest() {
+	const to = testAddress.value.trim();
+
+	sending.value = true;
+
+	try {
+		await post(`/admin/emails/${encodeURIComponent(template)}/test`, { to }, {
+			successFeedback: `Sent test e-mail to ${to}`,
+			errorFeedback: 'Failed to send test e-mail',
+			appendErrorMessage: true,
+		});
+	}
+	catch (_error) {
+		// feedback is shown by the api module
+	}
+	finally {
+		sending.value = false;
+	}
+}
 </script>
 
 <template>
 	<Admin class="page">
 		<div class="header">
 			<h2 class="heading">{{ template }}</h2>
+
+			<form
+				v-if="!error"
+				class="test"
+				@submit.prevent="sendTest"
+			>
+				<input
+					v-model="testAddress"
+					type="email"
+					class="input"
+					placeholder="E-mail address"
+					required
+				>
+
+				<button
+					type="submit"
+					class="button button-primary"
+					:disabled="sending"
+				>{{ sending ? 'Sending...' : 'Send test' }}</button>
+			</form>
 		</div>
 
 		<p v-if="error" class="error">Failed to render template: {{ error }}</p>
@@ -39,11 +83,23 @@ const {
 <style scoped>
 .header {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: baseline;
 	gap: 1rem;
 	margin-bottom: 1rem;
 }
 
+.test {
+	display: flex;
+	align-items: stretch;
+	gap: .5rem;
+	margin-left: auto;
+
+	.input {
+		width: 18rem;
+	}
+}
+
 .error {
 	color: var(--warn);
 	font-weight: bold;