feat: password reset full design and flow

web/src/views/ResetRequestView.vue

@@ -1,9 +1,199 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import AuthShell from '@/components/AuthShell.vue'
+import ResultPanel from '@/components/ResultPanel.vue'
+import { ApiError, useApi } from '@/composables/useApi'
+import { useRetryAfter } from '@/composables/useRetryAfter'
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+interface AlertState {
+	tone: 'error' | 'info'
+	icon: string
+	title: string
+	description: string
+}
+
+const tooManyAttemptsAlert: AlertState = {
+	tone: 'info',
+	icon: 'i-lucide-timer',
+	title: 'Too many requests',
+	description: 'Wait a moment before asking for another link.',
+}
+
+const serverErrorAlert: AlertState = {
+	tone: 'error',
+	icon: 'i-lucide-circle-x',
+	title: "Couldn't send the link",
+	description: 'Check your connection and try again.',
+}
+
+const router = useRouter()
+const api = useApi()
+const retryAfter = useRetryAfter()
+
+const email = ref('')
+const emailError = ref('')
+const submitting = ref(false)
+const sent = ref(false)
+const alert = ref<AlertState | null>(null)
+
+const alertRole = computed(() => (alert.value?.tone === 'error' ? 'alert' : 'status'))
+
+const submitDisabled = computed(() => submitting.value || retryAfter.active.value)
+
+const submitLabel = computed(() => {
+	if (submitting.value) {
+		return 'Sending…'
+	}
+	if (retryAfter.active.value) {
+		return `Try again in ${retryAfter.formatted.value}`
+	}
+	return 'Send reset link'
+})
+
+function validate() {
+	emailError.value = EMAIL_PATTERN.test(email.value)
+		? ''
+		: 'Enter a full email address, like name@example.com.'
+	return !emailError.value
+}
+
+function goToLogin() {
+	router.push('/login')
+}
+
+const resultPanelActions = [
+	{
+		label: 'Back to log in',
+		color: 'neutral' as const,
+		variant: 'outline' as const,
+		onClick: goToLogin,
+	},
+]
+
+function handleRequestError(error: unknown) {
+	if (error instanceof ApiError && error.status === 429) {
+		alert.value = tooManyAttemptsAlert
+		retryAfter.start(error.retryAfter ?? 0)
+		return
+	}
+
+	alert.value = serverErrorAlert
+}
+
+async function onSubmit() {
+	if (submitDisabled.value) {
+		return
+	}
+
+	if (!validate()) {
+		return
+	}
+
+	alert.value = null
+	submitting.value = true
+	try {
+		await api.request('/v1/auth/password-reset', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ email: email.value }),
+		})
+		sent.value = true
+	} catch (error) {
+		handleRequestError(error)
+	} finally {
+		submitting.value = false
+	}
+}
+
+const pageTitle = computed(() => (sent.value ? '' : 'Reset your password'))
+const pageDescription = computed(() =>
+	sent.value
+		? undefined
+		: "Enter the email for your account and we'll send you a link to choose a new password.",
+)
 </script>
 
 <template>
-	<AuthShell title="Reset your password">
-		<p>Reset request placeholder.</p>
+	<AuthShell :title="pageTitle" :description="pageDescription">
+		<template v-if="alert" #notice>
+			<UAlert
+				:color="alert.tone"
+				:icon="alert.icon"
+				:title="alert.title"
+				:description="alert.description"
+				variant="soft"
+				:close="false"
+				:role="alertRole"
+			/>
+		</template>
+
+		<template v-if="sent" #default>
+			<ResultPanel
+				tone="success"
+				icon="i-lucide-mail-check"
+				title="Check your email"
+				description="If an account exists for that email, a password reset link has been sent."
+				:actions="resultPanelActions"
+			>
+				<p class="text-sm text-muted">The link expires in 1 hour.</p>
+			</ResultPanel>
+		</template>
+
+		<template v-else #default="{ controlSize, controlClass, inputClass }">
+			<UForm :state="{ email }" class="flex flex-col gap-4.5" @submit="onSubmit">
+				<UFormField
+					label="Email"
+					name="email"
+					:error="emailError || undefined"
+					:size="controlSize"
+				>
+					<template v-if="emailError" #error="{ error }">
+						<span class="flex items-center gap-1.5">
+							<UIcon
+								name="i-lucide-circle-alert"
+								class="size-3.5 shrink-0 text-error"
+							/>
+							{{ error }}
+						</span>
+					</template>
+					<UInput
+						v-model="email"
+						type="email"
+						placeholder="you@example.com"
+						autocomplete="email"
+						:disabled="submitDisabled"
+						variant="outline"
+						color="primary"
+						:highlight="!!emailError"
+						:size="controlSize"
+						:ui="{ base: inputClass, trailing: 'pe-1' }"
+						class="w-full"
+					/>
+				</UFormField>
+
+				<UButton
+					type="submit"
+					block
+					:size="controlSize"
+					:ui="{ base: controlClass }"
+					:loading="submitting"
+					:disabled="submitDisabled"
+				>
+					{{ submitLabel }}
+				</UButton>
+			</UForm>
+		</template>
+
+		<template v-if="!sent" #footer>
+			<RouterLink
+				to="/login"
+				class="font-medium text-highlighted underline underline-offset-3"
+			>
+				Back to log in
+			</RouterLink>
+		</template>
 	</AuthShell>
 </template>