password reset: an admin makes a one-hour link, and using it signs the account out everywhere

There is no mail path, so a forgotten password needed a hand on the database
(#2939 §2). Settings → People lists the accounts; Reset password makes a link
that works once within an hour, shown once for the admin to hand over. Making
another link for the same account closes the earlier one.

Using it (/reset-password) sets the password, deletes the account's device
tokens, and moves users.session_epoch on. Sessions are signed cookies the
server can't delete, so each now carries the epoch it signed in under and
login_required reads the account's epoch by primary key. A cookie from before
this has no epoch and reads as 0, the starting value, so the upgrade signs
nobody out. A deleted account's session now stops working too.

The one-time link reveal moves out of InviteList into OneTimeLink, and the
link-building into router/links.ts, shared by invites and resets.

Migration 0033. #5173.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/components/AccountList.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { api } from "../api/client";
+import { errorMessage } from "../api/errors";
+import { useSessionStore } from "../stores/session";
+import { useUiStore } from "../stores/ui";
+import { appLink } from "../router/links";
+import OneTimeLink from "./OneTimeLink.vue";
+
+// Admin: the accounts on this instance, and a password reset link for any of them
+// (#5173). There is no mail path, so the admin hands the link over.
+
+interface Account {
+  id: string;
+  email: string;
+  display_name: string;
+  is_admin: boolean;
+}
+
+const session = useSessionStore();
+const ui = useUiStore();
+
+const accounts = ref<Account[]>([]);
+const loading = ref(true);
+const error = ref("");
+const busy = ref("");
+// The reset link just made, and whose it is. Never retrievable again once dismissed.
+const fresh = ref<{ link: string; email: string } | null>(null);
+
+async function load() {
+  error.value = "";
+  try {
+    accounts.value = (await api.get<{ accounts: Account[] }>("/api/accounts")).accounts;
+  } catch (e) {
+    error.value = errorMessage(e, "Couldn't load accounts.");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function resetLink(account: Account) {
+  const self = account.id === session.user?.id;
+  const warning = self
+    ? "Make a password reset link for your own account? Using it signs you out everywhere, this browser included."
+    : `Make a password reset link for ${account.email}? Using it signs them out everywhere and unlinks their apps.`;
+  if (!window.confirm(warning)) return;
+  busy.value = account.id;
+  try {
+    const res = await api.post<{ token: string }>(`/api/accounts/${account.id}/reset-link`, {});
+    fresh.value = { link: appLink({ name: "reset-password", query: { token: res.token } }), email: account.email };
+  } catch (e) {
+    ui.showToast(errorMessage(e, "Couldn't make a reset link."));
+  } finally {
+    busy.value = "";
+  }
+}
+
+onMounted(() => {
+  void load();
+});
+</script>
+
+<template>
+  <section class="flex flex-col gap-5">
+    <h2 class="text-xs font-semibold uppercase tracking-wide text-neutral-400">People</h2>
+
+    <OneTimeLink
+      v-if="fresh"
+      :link="fresh.link"
+      :note="`Password reset link for ${fresh.email}. It works once, within an hour.`"
+      @done="fresh = null"
+    />
+
+    <p v-if="error" class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
+
+    <div v-if="loading" class="py-6 text-center text-sm text-neutral-400">Loading…</div>
+    <ul v-else class="flex flex-col gap-2">
+      <li
+        v-for="a in accounts"
+        :key="a.id"
+        class="flex items-center justify-between gap-4 rounded-xl border border-neutral-200 px-4 py-3 dark:border-neutral-800"
+      >
+        <div class="min-w-0">
+          <p class="truncate text-sm font-medium text-neutral-800 dark:text-neutral-100">{{ a.display_name }}</p>
+          <p class="truncate text-xs text-neutral-400">{{ a.email }}{{ a.is_admin ? " · Admin" : "" }}</p>
+        </div>
+        <button
+          type="button"
+          class="shrink-0 rounded-md border border-neutral-300 px-2.5 py-1 text-xs text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-50 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800"
+          :disabled="busy === a.id"
+          @click="resetLink(a)"
+        >
+          Reset password
+        </button>
+      </li>
+    </ul>
+  </section>
+</template>

frontend/src/components/InviteList.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
 import { api } from "../api/client";
 import { errorMessage } from "../api/errors";
 import { useUiStore } from "../stores/ui";
+import { appLink } from "../router/links";
 import BaseButton from "./BaseButton.vue";
 import BaseInput from "./BaseInput.vue";
-import Icon from "./Icon.vue";
+import OneTimeLink from "./OneTimeLink.vue";
 
 // Admin: invite one person to register while registration stays closed (#5172).
 // The server keeps only a hash of each invite's token, so the link is shown once,
@@ -29,7 +29,6 @@ const LIFETIMES = [
   { days: 30, label: "30 days" },
 ];
 
-const router = useRouter();
 const ui = useUiStore();
 
 const invites = ref<Invite[]>([]);
@@ -52,12 +51,6 @@ async function load() {
   }
 }
 
-/** The register page's address with the token on it, as people reach this server. */
-function linkFor(token: string): string {
-  const path = router.resolve({ name: "register", query: { invite: token } }).href;
-  return new URL(path, window.location.origin).href;
-}
-
 async function create() {
   creating.value = true;
   error.value = "";
@@ -67,7 +60,7 @@ async function create() {
       email: email.value.trim() || null,
       days: days.value,
     });
-    freshLink.value = linkFor(res.token);
+    freshLink.value = appLink({ name: "register", query: { invite: res.token } });
     invites.value = [res.invite, ...invites.value];
     email.value = "";
   } catch (e) {
@@ -77,15 +70,6 @@ async function create() {
   }
 }
 
-async function copyLink() {
-  try {
-    await navigator.clipboard.writeText(freshLink.value);
-    ui.showToast("Invite link copied.");
-  } catch {
-    ui.showToast("Couldn't copy — select and copy it manually.");
-  }
-}
-
 async function revoke(invite: Invite) {
   if (!window.confirm(`Revoke the invite for ${who(invite)}? Its link will stop working.`)) return;
   try {
@@ -127,31 +111,12 @@ onMounted(() => {
   <section class="flex flex-col gap-5">
     <h2 class="text-xs font-semibold uppercase tracking-wide text-neutral-400">Invites</h2>
 
-    <!-- One-time link reveal -->
-    <div
+    <OneTimeLink
       v-if="freshLink"
-      class="rounded-xl border border-brand/40 bg-brand/5 p-4 dark:border-brand/30 dark:bg-brand/10"
-    >
-      <p class="text-sm font-medium text-neutral-800 dark:text-neutral-100">
-        Copy this link now — it won't be shown again.
-      </p>
-      <div class="mt-2 flex items-center gap-2">
-        <code
-          class="min-w-0 flex-1 overflow-x-auto rounded-lg border border-neutral-300 bg-white px-3 py-2 font-mono text-xs text-neutral-900 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
-          >{{ freshLink }}</code
-        >
-        <button type="button" class="icon-btn shrink-0" title="Copy link" aria-label="Copy link" @click="copyLink">
-          <Icon name="copy" />
-        </button>
-      </div>
-      <button
-        type="button"
-        class="mt-3 text-xs text-neutral-500 underline hover:text-neutral-700 dark:hover:text-neutral-300"
-        @click="freshLink = ''"
-      >
-        Done
-      </button>
-    </div>
+      :link="freshLink"
+      note="Send this to the person you're inviting."
+      @done="freshLink = ''"
+    />
 
     <form class="flex flex-wrap items-end gap-3" @submit.prevent="create">
       <BaseInput

frontend/src/components/OneTimeLink.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { useUiStore } from "../stores/ui";
+import Icon from "./Icon.vue";
+
+// A link carrying a token the server keeps only a hash of, so this is the one time
+// it can be shown: invites (#5172) and password reset links (#5173).
+
+const props = defineProps<{
+  link: string;
+  /** What the link is, shown above it. */
+  note: string;
+}>();
+const emit = defineEmits<{ done: [] }>();
+
+const ui = useUiStore();
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(props.link);
+    ui.showToast("Link copied.");
+  } catch {
+    ui.showToast("Couldn't copy — select and copy it manually.");
+  }
+}
+</script>
+
+<template>
+  <div class="rounded-xl border border-brand/40 bg-brand/5 p-4 dark:border-brand/30 dark:bg-brand/10">
+    <p class="text-sm font-medium text-neutral-800 dark:text-neutral-100">{{ note }}</p>
+    <p class="text-xs text-neutral-500 dark:text-neutral-400">Copy it now — it won't be shown again.</p>
+    <div class="mt-2 flex items-center gap-2">
+      <code
+        class="min-w-0 flex-1 overflow-x-auto rounded-lg border border-neutral-300 bg-white px-3 py-2 font-mono text-xs text-neutral-900 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
+        >{{ link }}</code
+      >
+      <button type="button" class="icon-btn shrink-0" title="Copy link" aria-label="Copy link" @click="copy">
+        <Icon name="copy" />
+      </button>
+    </div>
+    <button
+      type="button"
+      class="mt-3 text-xs text-neutral-500 underline hover:text-neutral-700 dark:hover:text-neutral-300"
+      @click="emit('done')"
+    >
+      Done
+    </button>
+  </div>
+</template>

frontend/src/router/index.ts

@@ -72,6 +72,15 @@ const router = createRouter({
       component: () => import("../views/RegisterView.vue"),
       meta: { title: "Create account", guestOnly: true },
     },
+    {
+      // Where an admin-made password reset link lands (#5173). Not guest-only: the
+      // link signs in whoever uses it as the account it was made for, whoever was
+      // signed in on this browser before.
+      path: "/reset-password",
+      name: "reset-password",
+      component: () => import("../views/ResetPasswordView.vue"),
+      meta: { title: "Reset password" },
+    },
   ],
 });
 

frontend/src/router/links.ts

@@ -0,0 +1,9 @@
+import type { RouteLocationRaw } from "vue-router";
+import router from "./index";
+
+/** A full link to a page of this app, as people reach this server: what an admin
+ *  copies into a message (an invite, a password reset link). Built here because only
+ *  the browser knows the address people actually use. */
+export function appLink(to: RouteLocationRaw): string {
+  return new URL(router.resolve(to).href, window.location.origin).href;
+}

frontend/src/views/ResetPasswordView.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { api } from "../api/client";
+import { errorMessage } from "../api/errors";
+import { useSessionStore } from "../stores/session";
+import { useConfigStore } from "../stores/config";
+import BaseInput from "../components/BaseInput.vue";
+import BaseButton from "../components/BaseButton.vue";
+
+// Where a password reset link an admin made lands (#5173). Setting the password signs
+// this browser in and every other session and linked app out.
+
+const session = useSessionStore();
+const config = useConfigStore();
+const router = useRouter();
+const route = useRoute();
+
+const token = computed(() => (typeof route.query.token === "string" ? route.query.token : ""));
+
+const password = ref("");
+const confirm = ref("");
+const error = ref("");
+const loading = ref(false);
+
+async function submit() {
+  error.value = "";
+  if (password.value.length < 8) {
+    error.value = "Password must be at least 8 characters.";
+    return;
+  }
+  if (password.value !== confirm.value) {
+    error.value = "The two passwords don't match.";
+    return;
+  }
+  loading.value = true;
+  try {
+    await api.post("/api/auth/reset-password", { token: token.value, password: password.value });
+    await session.fetchMe();
+    await router.replace("/");
+  } catch (e) {
+    error.value = errorMessage(e, "Couldn't set your password.");
+  } finally {
+    loading.value = false;
+  }
+}
+</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 text-sm text-neutral-500 dark:text-neutral-400">
+          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="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700 dark:bg-red-950/50 dark:text-red-300"
+      >
+        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 8 characters"
+          required
+        />
+        <BaseInput
+          id="confirm"
+          v-model="confirm"
+          label="Again"
+          type="password"
+          autocomplete="new-password"
+          required
+        />
+        <p
+          v-if="error"
+          role="alert"
+          class="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700 dark:bg-red-950/50 dark:text-red-300"
+        >
+          {{ error }}
+        </p>
+        <BaseButton type="submit" :loading="loading">Set password</BaseButton>
+      </form>
+
+      <p class="mt-6 text-center text-sm text-neutral-500 dark:text-neutral-400">
+        <RouterLink to="/login" class="font-semibold text-brand-700 hover:underline dark:text-brand"
+          >Back to sign in</RouterLink
+        >
+      </p>
+    </div>
+  </main>
+</template>

frontend/src/views/SettingsView.vue

@@ -4,6 +4,7 @@ import { api } from "../api/client";
 import { useConfigStore } from "../stores/config";
 import BaseButton from "../components/BaseButton.vue";
 import InviteList from "../components/InviteList.vue";
+import AccountList from "../components/AccountList.vue";
 import { errorMessage } from "../api/errors";
 
 interface SettingItem {
@@ -172,8 +173,9 @@ onMounted(load);
       </div>
     </form>
 
-    <!-- Outside the settings form: each invite action saves on its own, and the
-         form's Save button has nothing to do with them. -->
+    <!-- Outside the settings form: each invite and account action saves on its own,
+         and the form's Save button has nothing to do with them. -->
     <InviteList v-if="items.length" class="mt-10" />
+    <AccountList v-if="items.length" class="mt-10" />
   </div>
 </template>