bvandeusen/inkwell
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 4 Wiki Activity

DRY pass #2, batch 5, F15: the four signed-out pages share AuthLayout (#5372)

Browse Source 
Sign in, register, forgot and reset each wrote the same page: a centred
column, the app icon, a title, a subtitle, the form and a footer link. That
is now components/AuthLayout.vue, with the title as a prop and the
subtitle, the form, the footer and anything after it as slots. The footer
links wear the new .text-link class. Markup and classes are unchanged, so
the pages render as before.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
bvandeusen
2026-10-08 14:42:31 -04:00
co-authored by Claude Opus 5.5
parent b481e6857c
commit 8899bd205f
6 changed files with 202 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/RegisterView.vue
+45 -58
View File
@@ -4,6 +4,7 @@ import { useRoute, useRouter } from "vue-router";
import { useSessionStore } from "../stores/session";
import { useConfigStore } from "../stores/config";
import BaseInput from "../components/BaseInput.vue";
import AuthLayout from "../components/AuthLayout.vue";
import BaseButton from "../components/BaseButton.vue";
import { errorMessage } from "../api/errors";
@@ -41,64 +42,50 @@ async function submit() {
</script>
<template>
<main class="flex min-h-full items-center justify-center px-4 py-12">
<div class="w-full max-w-sm">
<div class="mb-8 text-center">
<img
src="/icon.svg"
:alt="config.siteName"
class="mx-auto mb-3 h-12 w-12 rounded-xl"
width="48"
height="48"
/>
<h1 class="text-2xl font-bold tracking-tight">{{ invite ? "You're invited" : "Create your space" }}</h1>
<p class="mt-1 hint">
{{ invite ? `Create your account on ${config.siteName}.` : "Start capturing in seconds." }}
</p>
</div>
<AuthLayout :title="invite ? `You're invited` : 'Create your space'">
<template #subtitle>{{ invite ? `Create your account on ${config.siteName}.` : "Start capturing in seconds." }}</template>
<form class="flex flex-col gap-4" novalidate @submit.prevent="submit">
<BaseInput
id="display_name"
v-model="displayName"
label="Name"
autocomplete="name"
placeholder="What should we call you?"
/>
<BaseInput
id="email"
v-model="email"
label="Email"
type="email"
autocomplete="email"
placeholder="you@example.com"
required
/>
<BaseInput
id="password"
v-model="password"
label="Password"
type="password"
autocomplete="new-password"
:placeholder="`At least ${config.minPasswordLength} characters`"
required
/>
<p
v-if="error"
role="alert"
class="alert-error"
>
{{ error }}
</p>
<BaseButton type="submit" :loading="loading">Create account</BaseButton>
</form>
<p class="mt-6 text-center hint">
Already have an account?
<RouterLink to="/login" class="font-semibold text-brand-700 hover:underline dark:text-brand"
>Sign in</RouterLink
>
<form class="flex flex-col gap-4" novalidate @submit.prevent="submit">
<BaseInput
id="display_name"
v-model="displayName"
label="Name"
autocomplete="name"
placeholder="What should we call you?"
/>
<BaseInput
id="email"
v-model="email"
label="Email"
type="email"
autocomplete="email"
placeholder="you@example.com"
required
/>
<BaseInput
id="password"
v-model="password"
label="Password"
type="password"
autocomplete="new-password"
:placeholder="`At least ${config.minPasswordLength} characters`"
required
/>
<p
v-if="error"
role="alert"
class="alert-error"
>
{{ error }}
</p>
</div>
</main>
<BaseButton type="submit" :loading="loading">Create account</BaseButton>
</form>
<template #footer>
Already have an account?
<RouterLink to="/login" class="text-link"
>Sign in</RouterLink
>
</template>
</AuthLayout>
</template>