feat: login page T0

2026-09-25 20:15:29 +02:00
1 parent 12faab7f92
commit 001f9f4774
@@ -1,9 +1,271 @@
 <script setup lang="ts">
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import AuthShell from '@/components/AuthShell.vue'
+import { ApiError, useApi } from '@/composables/useApi'
+import { useRetryAfter } from '@/composables/useRetryAfter'
+import { useSessionStore } from '@/stores/session'
+
+interface AlertState {
+	tone: 'error' | 'info' | 'success'
+	icon: string
+	title: string
+	description: string
+	closable: boolean
+}
+
+const wrongCredentialsAlert: AlertState = {
+	tone: 'error',
+	icon: 'i-lucide-circle-x',
+	title: "That username and password don't match",
+	description: 'Check both and try again. Passwords are case-sensitive.',
+	closable: false,
+}
+
+const tooManyAttemptsAlert: AlertState = {
+	tone: 'info',
+	icon: 'i-lucide-timer',
+	title: 'Too many attempts',
+	description: 'For your security, wait a moment before trying again.',
+	closable: false,
+}
+
+const serverErrorAlert: AlertState = {
+	tone: 'error',
+	icon: 'i-lucide-circle-x',
+	title: "Couldn't reach RenewCMS",
+	description: 'Check your connection and try again.',
+	closable: false,
+}
+
+const sessionExpiredAlert: AlertState = {
+	tone: 'info',
+	icon: 'i-lucide-clock',
+	title: 'Your session expired',
+	description:
+		'Log in again to pick up where you left off. Unsaved changes are kept on this device.',
+	closable: true,
+}
+
+const passwordChangedAlert: AlertState = {
+	tone: 'success',
+	icon: 'i-lucide-circle-check',
+	title: 'Password changed',
+	description: 'Log in with your new password.',
+	closable: true,
+}
+
+const route = useRoute()
+const router = useRouter()
+const api = useApi()
+const session = useSessionStore()
+const retryAfter = useRetryAfter()
+
+const registrationOpen = ref(false)
+const username = ref('')
+const password = ref('')
+const usernameError = ref('')
+const passwordError = ref('')
+const submitting = ref(false)
+const passwordShown = ref(false)
+const formEl = ref<HTMLFormElement | null>(null)
+
+const initialReason = typeof route.query.reason === 'string' ? route.query.reason : null
+
+const alert = ref<AlertState | null>(
+	initialReason === 'expired'
+		? sessionExpiredAlert
+		: initialReason === 'password-changed'
+			? passwordChangedAlert
+			: null,
+)
+
+const alertRole = computed(() => (alert.value?.tone === 'error' ? 'alert' : 'status'))
+
+const submitLabel = computed(() => {
+	if (submitting.value) {
+		return 'Logging in…'
+	}
+	if (retryAfter.active.value) {
+		return `Try again in ${retryAfter.formatted.value}`
+	}
+	return 'Log in'
+})
+
+const submitDisabled = computed(() => submitting.value || retryAfter.active.value)
+
+function focusField(selector: string) {
+	nextTick(() => {
+		formEl.value?.querySelector<HTMLInputElement>(selector)?.focus()
+	})
+}
+
+function focusPassword() {
+	focusField('input[autocomplete="current-password"]')
+}
+
+function focusUsername() {
+	focusField('input[placeholder="Your username"]')
+}
+
+function focusFirstInvalid() {
+	if (usernameError.value) {
+		focusUsername()
+		return
+	}
+	if (passwordError.value) {
+		focusPassword()
+	}
+}
+
+function validate() {
+	usernameError.value = username.value.trim().length < 3 ? 'Use at least 3 characters.' : ''
+	passwordError.value = password.value.length === 0 ? 'Enter your password.' : ''
+	return !usernameError.value && !passwordError.value
+}
+
+async function afterLoginSuccess() {
+	await session.retry()
+
+	const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : null
+	if (redirect) {
+		await router.push(redirect)
+		return
+	}
+
+	if (session.session?.verified) {
+		await router.push('/home')
+		return
+	}
+
+	await router.push('/register/pending')
+}
+
+function handleLoginError(error: unknown) {
+	if (error instanceof ApiError && error.status === 403) {
+		alert.value = wrongCredentialsAlert
+		password.value = ''
+		focusPassword()
+		return
+	}
+
+	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()) {
+		focusFirstInvalid()
+		return
+	}
+
+	submitting.value = true
+	try {
+		await api.request('/v1/auth/login', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ username: username.value, password: password.value }),
+		})
+		await afterLoginSuccess()
+	} catch (error) {
+		handleLoginError(error)
+	} finally {
+		submitting.value = false
+	}
+}
+
+onMounted(async () => {
+	if (initialReason === 'expired') {
+		focusPassword()
+	}
+
+	try {
+		const status = await api.request<{ open: boolean }>('/v1/auth/registration')
+		registrationOpen.value = status.open
+	} catch {
+		registrationOpen.value = false
+	}
+})
 </script>

 <template>
-	<AuthShell title="Log in">
-		<p>Log in placeholder.</p>
+	<AuthShell title="Log in" description="Welcome back. Log in to manage your articles.">
+		<template v-if="alert" #notice>
+			<UAlert
+				:color="alert.tone"
+				:icon="alert.icon"
+				:title="alert.title"
+				:description="alert.description"
+				variant="soft"
+				:close="alert.closable"
+				:role="alertRole"
+				@close="alert = null"
+			/>
+		</template>
+
+		<form ref="formEl" class="flex flex-col gap-4" @submit.prevent="onSubmit">
+			<UFormField label="Username" name="username" :error="usernameError">
+				<UInput
+					v-model="username"
+					placeholder="Your username"
+					autocomplete="username"
+					:disabled="submitting"
+					class="w-full"
+				/>
+			</UFormField>
+
+			<UFormField name="password" :error="passwordError">
+				<template #label>
+					<div class="flex w-full items-center justify-between">
+						<span>Password</span>
+						<RouterLink to="/register/reset/request" class="text-primary text-sm">
+							Forgot password?
+						</RouterLink>
+					</div>
+				</template>
+				<UInput
+					v-model="password"
+					:type="passwordShown ? 'text' : 'password'"
+					autocomplete="current-password"
+					:disabled="submitting"
+					class="w-full"
+				>
+					<template #trailing>
+						<UButton
+							:icon="passwordShown ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+							variant="ghost"
+							color="neutral"
+							size="sm"
+							square
+							:aria-label="passwordShown ? 'Hide password' : 'Show password'"
+							:aria-pressed="passwordShown"
+							@click="passwordShown = !passwordShown"
+						/>
+					</template>
+				</UInput>
+			</UFormField>
+
+			<UButton type="submit" block :loading="submitting" :disabled="submitDisabled">
+				{{ submitLabel }}
+			</UButton>
+		</form>
+
+		<template v-if="registrationOpen" #footer>
+			<p>
+				First time here?
+				<RouterLink to="/register" class="text-primary"
+					>Create the owner account</RouterLink
+				>
+			</p>
+		</template>
 	</AuthShell>
 </template>