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

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>

frontend/src/components/AuthLayout.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// The page around every signed-out form: sign in, register, forgot and reset.
+// One column under the app's icon, a title and a line saying what the page is
+// for; the form is the default slot, and `footer` is the line under it that
+// points to the page a person more likely wanted.
+import { useConfigStore } from "../stores/config";
+
+defineProps<{ title: string }>();
+
+const config = useConfigStore();
+</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">{{ title }}</h1>
+        <p class="mt-1 hint"><slot name="subtitle" /></p>
+      </div>
+
+      <slot />
+
+      <p v-if="$slots.footer" class="mt-6 text-center hint">
+        <slot name="footer" />
+      </p>
+
+      <slot name="end" />
+    </div>
+  </main>
+</template>

frontend/src/style.css

@@ -334,6 +334,10 @@ body {
   .form-error {
     @apply text-sm text-red-600 dark:text-red-400;
   }
+  /* A link that is a way out of a form: "Create one", "Back to sign in". */
+  .text-link {
+    @apply font-semibold text-brand-700 hover:underline dark:text-brand;
+  }
   /* A form's error as a banner over its submit button. */
   .alert-error {
     @apply rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700 dark:bg-red-950/50 dark:text-red-300;

frontend/src/views/ForgotPasswordView.vue

@@ -3,14 +3,13 @@ import { ref } from "vue";
 import { useRoute } from "vue-router";
 import { api } from "../api/client";
 import { errorMessage } from "../api/errors";
-import { useConfigStore } from "../stores/config";
 import BaseInput from "../components/BaseInput.vue";
+import AuthLayout from "../components/AuthLayout.vue";
 import BaseButton from "../components/BaseButton.vue";
 
 // Ask for a password reset link by email (#5266). The server answers the same way
 // whether or not the address has an account, so this page does too.
 
-const config = useConfigStore();
 const route = useRoute();
 
 const email = ref(typeof route.query.email === "string" ? route.query.email : "");
@@ -33,52 +32,40 @@ async function submit() {
 </script>
 
 <template>
-  <main class="flex min-h-full items-center justify-center px-4 py-12">
+  <AuthLayout title="Forgot your password?">
-    <div class="w-full max-w-sm">
+    <template #subtitle>We'll email you a link to choose a new one.</template>
-      <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">Forgot your password?</h1>
-        <p class="mt-1 hint">We'll email you a link to choose a new one.</p>
-      </div>
 
+    <p
+      v-if="sent"
+      role="status"
+      class="rounded-lg bg-green-50 px-3 py-2 text-sm text-green-800 dark:bg-green-950/50 dark:text-green-300"
+    >
+      {{ sent }}
+    </p>
+    <form v-else class="flex flex-col gap-4" novalidate @submit.prevent="submit">
+      <BaseInput
+        id="email"
+        v-model="email"
+        label="Email"
+        type="email"
+        autocomplete="email"
+        placeholder="you@example.com"
+        required
+      />
       <p
-        v-if="sent"
+        v-if="error"
-        role="status"
+        role="alert"
-        class="rounded-lg bg-green-50 px-3 py-2 text-sm text-green-800 dark:bg-green-950/50 dark:text-green-300"
+        class="alert-error"
       >
-        {{ sent }}
+        {{ error }}
       </p>
-      <form v-else class="flex flex-col gap-4" novalidate @submit.prevent="submit">
+      <BaseButton type="submit" :loading="loading">Send reset link</BaseButton>
-        <BaseInput
+    </form>
-          id="email"
-          v-model="email"
-          label="Email"
-          type="email"
-          autocomplete="email"
-          placeholder="you@example.com"
-          required
-        />
-        <p
-          v-if="error"
-          role="alert"
-          class="alert-error"
-        >
-          {{ error }}
-        </p>
-        <BaseButton type="submit" :loading="loading">Send reset link</BaseButton>
-      </form>
 
-      <p class="mt-6 text-center hint">
+    <template #footer>
-        <RouterLink to="/login" class="font-semibold text-brand-700 hover:underline dark:text-brand"
+      <RouterLink to="/login" class="text-link"
-          >Back to sign in</RouterLink
+        >Back to sign in</RouterLink
-        >
+      >
-      </p>
+    </template>
-    </div>
+  </AuthLayout>
-  </main>
 </template>

frontend/src/views/LoginView.vue

@@ -4,6 +4,7 @@ import { useRouter, useRoute } 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,62 +42,52 @@ async function submit() {
 </script>
 
 <template>
-  <main class="flex min-h-full items-center justify-center px-4 py-12">
+  <AuthLayout title="Welcome back">
-    <div class="w-full max-w-sm">
+    <template #subtitle>Sign in to your thoughts.</template>
-      <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">Welcome back</h1>
-        <p class="mt-1 hint">Sign in to your thoughts.</p>
-      </div>
 
-      <form class="flex flex-col gap-4" novalidate @submit.prevent="submit">
+    <form class="flex flex-col gap-4" novalidate @submit.prevent="submit">
-        <BaseInput
+      <BaseInput
-          id="email"
+        id="email"
-          v-model="email"
+        v-model="email"
-          label="Email"
+        label="Email"
-          type="email"
+        type="email"
-          autocomplete="email"
+        autocomplete="email"
-          placeholder="you@example.com"
+        placeholder="you@example.com"
-          required
+        required
-        />
+      />
-        <BaseInput
+      <BaseInput
-          id="password"
+        id="password"
-          v-model="password"
+        v-model="password"
-          label="Password"
+        label="Password"
-          type="password"
+        type="password"
-          autocomplete="current-password"
+        autocomplete="current-password"
-          placeholder="••••••••"
+        placeholder="••••••••"
-          required
+        required
-        />
+      />
-        <p
+      <p
-          v-if="error"
+        v-if="error"
-          role="alert"
+        role="alert"
-          class="alert-error"
+        class="alert-error"
-        >
+      >
-          {{ error }}
+        {{ error }}
-        </p>
-        <BaseButton type="submit" :loading="loading">Sign in</BaseButton>
-        <RouterLink
-          v-if="config.passwordResetByEmail"
-          :to="{ name: 'forgot-password', query: email ? { email } : undefined }"
-          class="text-center text-sm text-neutral-500 hover:underline dark:text-neutral-400"
-          >Forgot password?</RouterLink
-        >
-      </form>
-
-      <p v-if="config.allowRegistration" class="mt-6 text-center hint">
-        No account?
-        <RouterLink to="/register" class="font-semibold text-brand-700 hover:underline dark:text-brand"
-          >Create one</RouterLink
-        >
       </p>
+      <BaseButton type="submit" :loading="loading">Sign in</BaseButton>
+      <RouterLink
+        v-if="config.passwordResetByEmail"
+        :to="{ name: 'forgot-password', query: email ? { email } : undefined }"
+        class="text-center text-sm text-neutral-500 hover:underline dark:text-neutral-400"
+        >Forgot password?</RouterLink
+      >
+    </form>
 
+    <template v-if="config.allowRegistration" #footer>
+      No account?
+      <RouterLink to="/register" class="text-link"
+        >Create one</RouterLink
+      >
+    </template>
+
+    <template #end>
       <!-- The build, on the one screen a person can reach WITHOUT an account.
            "I can't sign in" is a bug report like any other and it needs a build
            number; requiring a login to read one would withhold it from exactly the
@@ -108,6 +99,6 @@ async function submit() {
       >
         {{ config.version || "unknown" }}
       </p>
-    </div>
+    </template>
-  </main>
+  </AuthLayout>
 </template>

frontend/src/views/RegisterView.vue

@@ -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">
+  <AuthLayout :title="invite ? `You're invited` : 'Create your space'">
-    <div class="w-full max-w-sm">
+    <template #subtitle>{{ invite ? `Create your account on ${config.siteName}.` : "Start capturing in seconds." }}</template>
-      <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>
 
-      <form class="flex flex-col gap-4" novalidate @submit.prevent="submit">
+    <form class="flex flex-col gap-4" novalidate @submit.prevent="submit">
-        <BaseInput
+      <BaseInput
-          id="display_name"
+        id="display_name"
-          v-model="displayName"
+        v-model="displayName"
-          label="Name"
+        label="Name"
-          autocomplete="name"
+        autocomplete="name"
-          placeholder="What should we call you?"
+        placeholder="What should we call you?"
-        />
+      />
-        <BaseInput
+      <BaseInput
-          id="email"
+        id="email"
-          v-model="email"
+        v-model="email"
-          label="Email"
+        label="Email"
-          type="email"
+        type="email"
-          autocomplete="email"
+        autocomplete="email"
-          placeholder="you@example.com"
+        placeholder="you@example.com"
-          required
+        required
-        />
+      />
-        <BaseInput
+      <BaseInput
-          id="password"
+        id="password"
-          v-model="password"
+        v-model="password"
-          label="Password"
+        label="Password"
-          type="password"
+        type="password"
-          autocomplete="new-password"
+        autocomplete="new-password"
-          :placeholder="`At least ${config.minPasswordLength} characters`"
+        :placeholder="`At least ${config.minPasswordLength} characters`"
-          required
+        required
-        />
+      />
-        <p
+      <p
-          v-if="error"
+        v-if="error"
-          role="alert"
+        role="alert"
-          class="alert-error"
+        class="alert-error"
-        >
+      >
-          {{ 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
-        >
       </p>
-    </div>
+      <BaseButton type="submit" :loading="loading">Create account</BaseButton>
-  </main>
+    </form>
+
+    <template #footer>
+      Already have an account?
+      <RouterLink to="/login" class="text-link"
+        >Sign in</RouterLink
+      >
+    </template>
+  </AuthLayout>
 </template>

frontend/src/views/ResetPasswordView.vue

@@ -6,6 +6,7 @@ import { errorMessage } from "../api/errors";
 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";
 
 // Where a password reset link an admin made lands (#5173). Setting the password signs
@@ -47,62 +48,48 @@ async function submit() {
 </script>
 
 <template>
-  <main class="flex min-h-full items-center justify-center px-4 py-12">
+  <AuthLayout title="Choose a new password">
-    <div class="w-full max-w-sm">
+    <template #subtitle>You'll be signed out everywhere else, and your apps will ask you to sign in again.</template>
-      <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">Choose a new password</h1>
-        <p class="mt-1 hint">
-          You'll be signed out everywhere else, and your apps will ask you to sign in again.
-        </p>
-      </div>
 
+    <p
+      v-if="!token"
+      role="alert"
+      class="alert-error"
+    >
+      This link is incomplete. Ask your admin for a new one.
+    </p>
+    <form v-else class="flex flex-col gap-4" novalidate @submit.prevent="submit">
+      <BaseInput
+        id="password"
+        v-model="password"
+        label="New password"
+        type="password"
+        autocomplete="new-password"
+        :placeholder="`At least ${config.minPasswordLength} characters`"
+        required
+      />
+      <BaseInput
+        id="confirm"
+        v-model="confirm"
+        label="Again"
+        type="password"
+        autocomplete="new-password"
+        required
+      />
       <p
-        v-if="!token"
+        v-if="error"
         role="alert"
         class="alert-error"
       >
-        This link is incomplete. Ask your admin for a new one.
+        {{ error }}
       </p>
-      <form v-else class="flex flex-col gap-4" novalidate @submit.prevent="submit">
+      <BaseButton type="submit" :loading="loading">Set password</BaseButton>
-        <BaseInput
+    </form>
-          id="password"
-          v-model="password"
-          label="New password"
-          type="password"
-          autocomplete="new-password"
-          :placeholder="`At least ${config.minPasswordLength} characters`"
-          required
-        />
-        <BaseInput
-          id="confirm"
-          v-model="confirm"
-          label="Again"
-          type="password"
-          autocomplete="new-password"
-          required
-        />
-        <p
-          v-if="error"
-          role="alert"
-          class="alert-error"
-        >
-          {{ error }}
-        </p>
-        <BaseButton type="submit" :loading="loading">Set password</BaseButton>
-      </form>
 
-      <p class="mt-6 text-center hint">
+    <template #footer>
-        <RouterLink to="/login" class="font-semibold text-brand-700 hover:underline dark:text-brand"
+      <RouterLink to="/login" class="text-link"
-          >Back to sign in</RouterLink
+        >Back to sign in</RouterLink
-        >
+      >
-      </p>
+    </template>
-    </div>
+  </AuthLayout>
-  </main>
 </template>