Add branded email verification page with localization support

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

locales/en-US.yml

@@ -776,6 +776,9 @@ highlightSensitiveMedia: "Highlight sensitive media"
 verificationEmailSent: "A verification email has been sent. Please follow the included link to complete verification."
 notSet: "Not set"
 emailVerified: "Email has been verified"
+emailVerifiedDescription: "Your email address has been successfully verified. You can now close this page."
+emailVerificationFailed: "Email verification failed"
+emailVerificationFailedDescription: "The verification link is invalid or has expired. Please try again."
 noteFavoritesCount: "Number of favorite notes"
 pageLikesCount: "Number of liked Pages"
 pageLikedCount: "Number of received Page likes"

locales/it-IT.yml

@@ -776,6 +776,9 @@ highlightSensitiveMedia: "Evidenzia i media espliciti"
 verificationEmailSent: "Una mail di verifica è stata inviata. Si prega di accedere al collegamento per compiere la verifica."
 notSet: "Non impostato"
 emailVerified: "Il tuo indirizzo email è stato verificato"
+emailVerifiedDescription: "Il tuo indirizzo email è stato verificato con successo. Ora puoi chiudere questa pagina."
+emailVerificationFailed: "Verifica email fallita"
+emailVerificationFailedDescription: "Il link di verifica non è valido o è scaduto. Riprova di nuovo."
 noteFavoritesCount: "Conteggio note tra i preferiti"
 pageLikesCount: "Numero di pagine che ti piacciono"
 pageLikedCount: "Numero delle tue pagine che hanno ricevuto \"Mi piace\""

locales/ja-JP.yml

@@ -776,6 +776,9 @@ highlightSensitiveMedia: "メディアがセンシティブであることを分
 verificationEmailSent: "確認のメールを送信しました。メールに記載されたリンクにアクセスして、設定を完了してください。"
 notSet: "未設定"
 emailVerified: "メールアドレスが確認されました"
+emailVerifiedDescription: "メールアドレスの認証が完了しました。ページを閉じてお進みください。"
+emailVerificationFailed: "メールアドレスの認証に失敗しました"
+emailVerificationFailedDescription: "認証リンクが無効か期限切れです。もう一度お試しください。"
 noteFavoritesCount: "お気に入りノートの数"
 pageLikesCount: "Pageにいいねした数"
 pageLikedCount: "Pageにいいねされた数"

packages/backend/src/server/ServerService.ts

@@ -239,27 +239,8 @@ export class ServerService implements OnApplicationShutdown {
 		});
 
 		fastify.get<{ Params: { code: string } }>('/verify-email/:code', async (request, reply) => {
-			const profile = await this.userProfilesRepository.findOneBy({
+			// Redirect to frontend page for verification
-				emailVerifyCode: request.params.code,
+			reply.redirect(`/verify-email/${request.params.code}`);
-			});
-
-			if (profile != null) {
-				await this.userProfilesRepository.update({ userId: profile.userId }, {
-					emailVerified: true,
-					emailVerifyCode: null,
-				});
-
-				this.globalEventService.publishMainStream(profile.userId, 'meUpdated', await this.userEntityService.pack(profile.userId, { id: profile.userId }, {
-					schema: 'MeDetailed',
-					includeSecrets: true,
-				}));
-
-				reply.code(200).send('Verification succeeded! メールアドレスの認証に成功しました。');
-				return;
-			} else {
-				reply.code(404).send('Verification failed. Please try again. メールアドレスの認証に失敗しました。もう一度お試しください');
-				return;
-			}
 		});
 
 		fastify.register(this.clientServerService.createServer);

packages/backend/src/server/api/endpoint-list.ts

@@ -382,6 +382,7 @@ export * as 'sw/update-registration' from './endpoints/sw/update-registration.js
 export * as 'test' from './endpoints/test.js';
 export * as 'username/available' from './endpoints/username/available.js';
 export * as 'users' from './endpoints/users.js';
+export * as 'verify-email' from './endpoints/verify-email.js';
 export * as 'users/achievements' from './endpoints/users/achievements.js';
 export * as 'users/clips' from './endpoints/users/clips.js';
 export * as 'users/featured-notes' from './endpoints/users/featured-notes.js';

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

@@ -0,0 +1,78 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import type { UserProfilesRepository } from '@/models/_.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DI } from '@/di-symbols.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { ApiError } from '../error.js';
+
+export const meta = {
+	requireCredential: false,
+
+	tags: ['account'],
+
+	errors: {
+		noSuchCode: {
+			message: 'No such code.',
+			code: 'NO_SUCH_CODE',
+			id: '97c1f576-e4b8-4b8a-a6dc-9cb65e7f6f85',
+		},
+	},
+
+	res: {
+		type: 'object',
+		properties: {
+			success: {
+				type: 'boolean',
+			},
+		},
+	},
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {
+		code: { type: 'string' },
+	},
+	required: ['code'],
+} as const;
+
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
+	constructor(
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		private userEntityService: UserEntityService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps) => {
+			const profile = await this.userProfilesRepository.findOneBy({
+				emailVerifyCode: ps.code,
+			});
+
+			if (profile == null) {
+				throw new ApiError(meta.errors.noSuchCode);
+			}
+
+			await this.userProfilesRepository.update({ userId: profile.userId }, {
+				emailVerified: true,
+				emailVerifyCode: null,
+			});
+
+			this.globalEventService.publishMainStream(profile.userId, 'meUpdated', await this.userEntityService.pack(profile.userId, { id: profile.userId }, {
+				schema: 'MeDetailed',
+				includeSecrets: true,
+			}));
+
+			return {
+				success: true,
+			};
+		});
+	}
+}

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

@@ -0,0 +1,146 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<PageWithAnimBg>
+	<div :class="$style.formContainer">
+		<form :class="$style.form" class="_panel">
+			<div :class="$style.banner">
+				<i v-if="verified === true" class="ti ti-check"></i>
+				<i v-else-if="verified === false" class="ti ti-x"></i>
+				<i v-else class="ti ti-mail"></i>
+			</div>
+			<div class="_gaps_m" style="padding: 32px;">
+				<!-- Success state -->
+				<div v-if="verified === true">
+					<div :class="$style.title">{{ i18n.ts.emailVerified }}</div>
+					<div>{{ i18n.ts.emailVerifiedDescription }}</div>
+					<div>
+						<MkButton gradate large rounded @click="goToLogin" style="margin: 0 auto;">
+							{{ i18n.ts.gotIt }}
+						</MkButton>
+					</div>
+				</div>
+				<!-- Error state -->
+				<div v-else-if="verified === false">
+					<div :class="$style.title">{{ i18n.ts.emailVerificationFailed }}</div>
+					<div>{{ i18n.ts.emailVerificationFailedDescription }}</div>
+					<div>
+						<MkButton gradate large rounded @click="goHome" style="margin: 0 auto;">
+							{{ i18n.ts.gotIt }}
+						</MkButton>
+					</div>
+				</div>
+				<!-- Loading state -->
+				<div v-else>
+					<div :class="$style.title">{{ i18n.ts.loading }}</div>
+					<MkLoading/>
+				</div>
+			</div>
+		</form>
+		<!-- Instance branding -->
+		<div :class="$style.branding">
+			<div :class="$style.poweredBy">Powered by</div>
+			<img :src="misskeysvg" :class="$style.misskey"/>
+		</div>
+	</div>
+</PageWithAnimBg>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import MkLoading from '@/components/MkLoading.vue';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { mainRouter } from '@/router.js';
+import misskeysvg from '/client-assets/misskey.svg';
+
+const verified = ref<boolean | null>(null);
+
+const props = defineProps<{
+	code: string;
+}>();
+
+onMounted(async () => {
+	try {
+		await misskeyApi('verify-email', {
+			code: props.code,
+		});
+		verified.value = true;
+	} catch (err) {
+		verified.value = false;
+		console.error(err);
+	}
+});
+
+function goToLogin() {
+	mainRouter.push('/');
+}
+
+function goHome() {
+	mainRouter.push('/');
+}
+</script>
+
+<style lang="scss" module>
+.formContainer {
+	min-height: 100svh;
+	padding: 32px 32px 64px 32px;
+	box-sizing: border-box;
+	display: grid;
+	place-content: center;
+	position: relative;
+}
+
+.form {
+	position: relative;
+	z-index: 10;
+	border-radius: var(--MI-radius);
+	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+	overflow: clip;
+	max-width: 500px;
+}
+
+.banner {
+	padding: 16px;
+	text-align: center;
+	font-size: 26px;
+	background-color: var(--MI_THEME-accentedBg);
+	color: var(--MI_THEME-accent);
+}
+
+.title {
+	font-size: 1.2em;
+	font-weight: bold;
+	text-align: center;
+	margin-bottom: 16px;
+}
+
+.branding {
+	position: fixed;
+	bottom: 32px;
+	left: 32px;
+	color: #fff;
+	user-select: none;
+	pointer-events: none;
+	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.poweredBy {
+	margin-bottom: 2px;
+	font-size: 0.9em;
+	opacity: 0.8;
+}
+
+.misskey {
+	width: 120px;
+
+	@media (max-width: 450px) {
+		width: 100px;
+	}
+}
+</style>

packages/frontend/src/router.definition.ts

@@ -199,6 +199,9 @@ export const ROUTE_DEF = [{
 }, {
 	path: '/reset-password/:token?',
 	component: page(() => import('@/pages/reset-password.vue')),
+}, {
+	path: '/verify-email/:code',
+	component: page(() => import('@/pages/verify-email.vue')),
 }, {
 	path: '/signup-complete/:code',
 	component: page(() => import('@/pages/signup-complete.vue')),