Added account update form and e-mail verification.

pages/verify/email/+Page.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { inject, ref } from 'vue';
+
+import Ellipsis from '#/components/loading/ellipsis.vue';
+
+import { post } from '#/src/api.js';
+
+const { urlParsed } = inject('pageContext');
+const { userId, token } = urlParsed.search;
+
+const errorMsg = ref(null);
+const submitting = ref(false);
+const success = ref(false);
+
+async function verify() {
+	errorMsg.value = null;
+	submitting.value = true;
+
+	try {
+		await post('/emails/verify', {
+			userId,
+			token,
+		}, {
+			appendErrorMessage: true,
+		});
+
+		success.value = true;
+	}
+	catch (error) {
+		errorMsg.value = error.message;
+	}
+	finally {
+		submitting.value = false;
+	}
+}
+</script>
+
+<template>
+	<div class="content">
+		<Ellipsis v-if="submitting" />
+
+		<strong
+			v-else-if="errorMsg"
+			class="feedback error"
+		>{{ errorMsg }}</strong>
+
+		<strong
+			v-else-if="success"
+			class="feedback success"
+		>Verification successful</strong>
+
+		<button
+			v-else
+			class="button button-primary"
+			@click="verify"
+		>Click here to verify your e-mail address</button>
+	</div>
+</template>
+
+<style scoped>
+.content {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-grow: 1;
+	padding: 1rem;
+}
+
+.button {
+	padding: 1rem 1.5rem;
+	font-size: 1.1rem;
+}
+
+.feedback {
+	font-size: 1.1rem;
+}
+
+.error {
+	color: var(--error);
+}
+
+.success {
+	color: var(--success);
+}
+</style>