Changed sign-up flow to require e-mail verification up front, preventing account existence leakage.

2026-07-23 22:12:33 +02:00
parent 18c30b6f98
commit 6b3866a99f
12 changed files with 387 additions and 79 deletions
--- a/components/emails/signup.vue
+++ b/components/emails/signup.vue
@@ -0,0 +1,80 @@
+<script setup>
+import {
+	Body,
+	Button,
+	Container,
+	Heading,
+	Html,
+	Img,
+	Preview,
+	Text,
+} from '@vue-email/components';
+
+import config from 'config';
+
+defineProps({
+	user: {
+		type: Object,
+		default: () => mockUser,
+	},
+	verifyUrl: {
+		type: String,
+		default: 'http://localhost:5100/verify?userId=0&token=00000000000000000000000000000000',
+	},
+	trigger: {
+		type: String,
+		default: 'change',
+	},
+	address: {
+		type: String,
+		default: 'http://localhost:5100',
+	},
+});
+</script>
+
+<script>
+// defineProps' default factory (above, in <script setup>) references this. It must live in a plain
+// <script> block: Vue's compiler forbids defineProps from referencing variables declared inside
+// <script setup> itself, since that block gets hoisted out of the setup() function.
+const mockUser = {
+	id: 1,
+	username: 'DebuggingLibrarian',
+	email: 'debug@alerts.traxxx.me',
+};
+</script>
+
+<template>
+	<Html>
+		<Body style="font-family: sans-serif;">
+			<Preview>Sign up for traxxx</Preview>
+
+			<Container>
+				<Img
+					:src="`${address}/img/logo.png`"
+					width="150"
+					alt="traxxx"
+					style="margin: 15px auto 25px auto;"
+				/>
+
+				<Heading
+					as="h3"
+					style="color: #f65596; margin: 0 auto 0 auto;"
+				>Hi,</Heading>
+
+				<Text style="font-size: 16px;">
+					<strong>Thank you for signing up for traxxx!</strong>
+					<br>
+					Please complete your registration by clicking the button below:
+				</Text>
+
+				<Button
+					:href="verifyUrl"
+					target="_blank"
+					style="background: #f65596; color: #fff; font-size: 16px; padding: 1rem 1.5rem; border-radius: .5rem; margin: 1rem 0;"
+				><strong>Create my account</strong></Button>
+
+				<Text style="font-size: 16px; margin: 20px 0;">The link will expire in {{ config.auth.signupTokenExpiry }} minutes. If you did not sign up, you can safely ignore this e-mail.</Text>
+			</Container>
+		</Body>
+	</Html>
+</template>