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>