RenewCMS/web/src/views/ResetRequestView.vue

<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="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>