feat: ✨ frontend interface for post-account creation email verification

packages/backend/src/server/api/private/verify-email.ts

@@ -0,0 +1,40 @@
+import type Koa from "koa";
+import { Users, UserProfiles } from "@/models/index.js";
+import { publishMainStream } from "@/services/stream.js";
+
+export default async (ctx: Koa.Context) => {
+	const body = ctx.request.body;
+
+	const code = body["code"];
+
+	const profile = await UserProfiles.findOneBy({
+		emailVerifyCode: ctx.params.code,
+	});
+
+	if (profile != null) {
+		ctx.body = "Verify succeeded!";
+
+		await UserProfiles.update(
+			{ userId: profile.userId },
+			{
+				emailVerified: true,
+				emailVerifyCode: null,
+			},
+		);
+
+		publishMainStream(
+			profile.userId,
+			"meUpdated",
+			await Users.pack(
+				profile.userId,
+				{ id: profile.userId },
+				{
+					detail: true,
+					includeSecrets: true,
+				},
+			),
+		);
+	} else {
+		ctx.throw(404);
+	}
+};

packages/backend/src/server/index.ts

@@ -127,40 +127,6 @@ router.get("/identicon/:x", async (ctx) => {
 	ctx.body = fs.createReadStream(temp).on("close", () => cleanup());
 });
 
-router.get("/verify-email/:code", async (ctx) => {
-	const profile = await UserProfiles.findOneBy({
-		emailVerifyCode: ctx.params.code,
-	});
-
-	if (profile != null) {
-		ctx.body = "Verify succeeded!";
-		ctx.status = 200;
-
-		await UserProfiles.update(
-			{ userId: profile.userId },
-			{
-				emailVerified: true,
-				emailVerifyCode: null,
-			},
-		);
-
-		publishMainStream(
-			profile.userId,
-			"meUpdated",
-			await Users.pack(
-				profile.userId,
-				{ id: profile.userId },
-				{
-					detail: true,
-					includeSecrets: true,
-				},
-			),
-		);
-	} else {
-		ctx.status = 404;
-	}
-});
-
 mastoRouter.get("/oauth/authorize", async (ctx) => {
 	const { client_id, state, redirect_uri } = ctx.request.query;
 	console.log(ctx.request.req);

packages/client/src/pages/signup-complete.vue

@@ -35,5 +35,3 @@ definePageMetadata({
 	icon: "ph-user ph-bold ph-lg",
 });
 </script>
-
-<style lang="scss" scoped></style>

packages/client/src/pages/verify-email.vue

@@ -0,0 +1,35 @@
+<template>
+	<div>
+		{{ i18n.ts.processing }}
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+
+const props = defineProps<{
+	code: string;
+}>();
+
+onMounted(async () => {
+	await os.alert({
+		type: "info",
+		text: i18n.t("clickToFinishEmailVerification", { ok: i18n.ts.gotIt }),
+	});
+	await os.apiWithDialog("verify-email", {
+		code: props.code,
+	});
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: "Verify email",
+	icon: "ph-user ph-bold ph-lg",
+});
+</script>

packages/client/src/router.ts

@@ -283,6 +283,10 @@ export const routes = [
 		path: "/signup-complete/:code",
 		component: page(() => import("./pages/signup-complete.vue")),
 	},
+	{
+		path: "/verify-email/:code",
+		component: page(() => import("./pages/verify-email.vue")),
+	},
 	{
 		path: "/announcements",
 		component: page(() => import("./pages/announcements.vue")),