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:
Claude Opus 5.5
@@ -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">
|
||||
<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">Forgot your password?</h1>
|
||||
<p class="mt-1 hint">We'll email you a link to choose a new one.</p>
|
||||
</div>
|
||||
<AuthLayout title="Forgot your password?">
|
||||
<template #subtitle>We'll email you a link to choose a new one.</template>
|
||||
|
||||
<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"
|
||||
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"
|
||||
v-if="error"
|
||||
role="alert"
|
||||
class="alert-error"
|
||||
>
|
||||
{{ sent }}
|
||||
{{ error }}
|
||||
</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="error"
|
||||
role="alert"
|
||||
class="alert-error"
|
||||
>
|
||||
{{ error }}
|
||||
</p>
|
||||
<BaseButton type="submit" :loading="loading">Send reset link</BaseButton>
|
||||
</form>
|
||||
<BaseButton type="submit" :loading="loading">Send reset link</BaseButton>
|
||||
</form>
|
||||
|
||||
<p class="mt-6 text-center hint">
|
||||
<RouterLink to="/login" class="font-semibold text-brand-700 hover:underline dark:text-brand"
|
||||
>Back to sign in</RouterLink
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<template #footer>
|
||||
<RouterLink to="/login" class="text-link"
|
||||
>Back to sign in</RouterLink
|
||||
>
|
||||
</template>
|
||||
</AuthLayout>
|
||||
</template>
|
||||
|
||||
@@ -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">
|
||||
<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">Welcome back</h1>
|
||||
<p class="mt-1 hint">Sign in to your thoughts.</p>
|
||||
</div>
|
||||
<AuthLayout title="Welcome back">
|
||||
<template #subtitle>Sign in to your thoughts.</template>
|
||||
|
||||
<form 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
|
||||
/>
|
||||
<BaseInput
|
||||
id="password"
|
||||
v-model="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
placeholder="••••••••"
|
||||
required
|
||||
/>
|
||||
<p
|
||||
v-if="error"
|
||||
role="alert"
|
||||
class="alert-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
|
||||
>
|
||||
<form 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
|
||||
/>
|
||||
<BaseInput
|
||||
id="password"
|
||||
v-model="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
placeholder="••••••••"
|
||||
required
|
||||
/>
|
||||
<p
|
||||
v-if="error"
|
||||
role="alert"
|
||||
class="alert-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>
|
||||
|
||||
<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>
|
||||
</main>
|
||||
</template>
|
||||
</AuthLayout>
|
||||
</template>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
<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">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>
|
||||
<AuthLayout title="Choose a new password">
|
||||
<template #subtitle>You'll be signed out everywhere else, and your apps will ask you to sign in again.</template>
|
||||
|
||||
<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">
|
||||
<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="error"
|
||||
role="alert"
|
||||
class="alert-error"
|
||||
>
|
||||
{{ error }}
|
||||
</p>
|
||||
<BaseButton type="submit" :loading="loading">Set password</BaseButton>
|
||||
</form>
|
||||
<BaseButton type="submit" :loading="loading">Set password</BaseButton>
|
||||
</form>
|
||||
|
||||
<p class="mt-6 text-center hint">
|
||||
<RouterLink to="/login" class="font-semibold text-brand-700 hover:underline dark:text-brand"
|
||||
>Back to sign in</RouterLink
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<template #footer>
|
||||
<RouterLink to="/login" class="text-link"
|
||||
>Back to sign in</RouterLink
|
||||
>
|
||||
</template>
|
||||
</AuthLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user