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,19 +32,8 @@ 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"
@@ -74,11 +62,10 @@ async function submit() {
       <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
       >
-      </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,19 +42,8 @@ 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">
       <BaseInput
@@ -90,13 +80,14 @@ async function submit() {
       >
     </form>
 
-      <p v-if="config.allowRegistration" class="mt-6 text-center hint">
+    <template v-if="config.allowRegistration" #footer>
       No account?
-        <RouterLink to="/register" class="font-semibold text-brand-700 hover:underline dark:text-brand"
+      <RouterLink to="/register" class="text-link"
         >Create one</RouterLink
       >
-      </p>
+    </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,21 +42,8 @@ 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">
       <BaseInput
@@ -93,12 +81,11 @@ async function submit() {
       <BaseButton type="submit" :loading="loading">Create account</BaseButton>
     </form>
 
-      <p class="mt-6 text-center hint">
+    <template #footer>
       Already have an account?
-        <RouterLink to="/login" class="font-semibold text-brand-700 hover:underline dark:text-brand"
+      <RouterLink to="/login" class="text-link"
         >Sign in</RouterLink
       >
-      </p>
+    </template>
-    </div>
+  </AuthLayout>
-  </main>
 </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,21 +48,8 @@ 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"
@@ -98,11 +86,10 @@ async function submit() {
       <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
       >
-      </p>
+    </template>
-    </div>
+  </AuthLayout>
-  </main>
 </template>