password reset by email: Settings → Email, Forgot password?, and a test-email button

The operator asked for self-service reset over SMTP. It reuses #5173's
password_resets table, /reset-password page, one-hour single-use token and
sign-out-everywhere.

- Settings (rule 25, not env): a new Email group (SMTP server, port,
  encryption as a choice, username, password, from), General → Public
  address, and Security → Reset emails per account. The registry gains
  `choices`, `secret` (the value is never sent back, `is_set` says one is
  saved, an empty save keeps it) and `url` (http(s), trailing slash
  stripped).
- mailer.py: stdlib smtplib on a worker thread, 20 s timeout,
  starttls | tls | none. mail_settings() is None until a server, a sender
  and the public address are set. Links are built from the public address
  because the Host header can be forged.
- POST /api/auth/forgot-password: the same answer at the same speed for
  any address. The link is made and mailed off the request (send_later).
  It is throttled like a sign-in per visitor address, and capped per typed
  email by reset_emails_per_account; past the cap it answers the same and
  sends nothing.
- POST /api/settings/test-email: mails the admin with the saved settings
  and shows the server's error if it fails.
- Public config `password_reset_by_email`. Sign-in shows "Forgot
  password?" only then, linking to a new /forgot-password page.
- docs/public-hosting.md: an "Email and forgotten passwords" section.

Tests: the secret stays server-side; emailed link → reset; the same
answer for unknown addresses; the cap; test email success and failure;
validation units. #5266.

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

frontend/src/router/index.ts

@@ -73,7 +73,16 @@ const router = createRouter({
       meta: { title: "Create account", guestOnly: true },
     },
     {
-      // Where an admin-made password reset link lands (#5173). Not guest-only: the
+      // Ask for a reset link by email (#5266). Only linked from sign-in when the
+      // server can send mail; reached otherwise, the server says it can't.
+      path: "/forgot-password",
+      name: "forgot-password",
+      component: () => import("../views/ForgotPasswordView.vue"),
+      meta: { title: "Forgot password", guestOnly: true },
+    },
+    {
+      // Where a password reset link lands, whether an admin made it (#5173) or it was
+      // emailed (#5266). 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",

frontend/src/stores/config.ts

@@ -43,6 +43,9 @@ export interface PublicConfig {
   enable_url_unfurl: boolean;
   // How many days a note survives in Trash before the server purges it. 0 = forever.
   trash_retention_days: number;
+  // Whether this server can email a reset link, so sign-in offers "Forgot password?"
+  // (#5266). Absent on an older server and on the offline desktop: no.
+  password_reset_by_email?: boolean;
   // Every client this server holds, keyed by platform id. Absent on a server that
   // holds none, and absent on the desktop's own offline config — the Tauri build
   // answers `config_get` locally and has no clients to hand out.
@@ -66,6 +69,7 @@ export const useConfigStore = defineStore("config", () => {
   // Empty until proven otherwise: a server with no clients, and an older server
   // that never had the field, both correctly offer no downloads.
   const clients = ref<Record<string, ClientRelease>>({});
+  const passwordResetByEmail = ref(false);
   const loaded = ref(false);
 
   async function load(): Promise<void> {
@@ -78,6 +82,7 @@ export const useConfigStore = defineStore("config", () => {
       enableUrlUnfurl.value = cfg.enable_url_unfurl ?? true;
       trashRetentionDays.value = cfg.trash_retention_days ?? 30;
       clients.value = cfg.clients ?? {};
+      passwordResetByEmail.value = cfg.password_reset_by_email ?? false;
     } catch {
       // Keep defaults if the config endpoint is unreachable.
     } finally {
@@ -97,6 +102,7 @@ export const useConfigStore = defineStore("config", () => {
     enableUrlUnfurl,
     trashRetentionDays,
     clients,
+    passwordResetByEmail,
     loaded,
     load,
     reload,

frontend/src/views/ForgotPasswordView.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+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 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 : "");
+const sent = ref("");
+const error = ref("");
+const loading = ref(false);
+
+async function submit() {
+  error.value = "";
+  loading.value = true;
+  try {
+    const res = await api.post<{ message: string }>("/api/auth/forgot-password", { email: email.value });
+    sent.value = res.message;
+  } catch (e) {
+    error.value = errorMessage(e, "Couldn't send a reset link.");
+  } 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">Forgot your password?</h1>
+        <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">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="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">Send reset link</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/LoginView.vue

@@ -82,6 +82,12 @@ async function submit() {
           {{ 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 text-sm text-neutral-500 dark:text-neutral-400">

frontend/src/views/SettingsView.vue

@@ -6,6 +6,7 @@ import BaseButton from "../components/BaseButton.vue";
 import InviteList from "../components/InviteList.vue";
 import AccountList from "../components/AccountList.vue";
 import { errorMessage } from "../api/errors";
+import { useUiStore } from "../stores/ui";
 
 interface SettingItem {
   key: string;
@@ -19,9 +20,16 @@ interface SettingItem {
   // input can refuse an out-of-range value before the round trip.
   minimum: number | null;
   maximum: number | null;
+  // Strings: the allowed values, drawn as a choice.
+  choices: string[] | null;
+  // A credential (the SMTP password). Its value never comes back; `is_set` says
+  // whether one is saved, and leaving the field empty keeps it.
+  secret: boolean;
+  is_set: boolean | null;
 }
 
 const config = useConfigStore();
+const ui = useUiStore();
 
 const items = ref<SettingItem[]>([]);
 const original = ref<Record<string, string | boolean | number>>({});
@@ -83,6 +91,21 @@ async function save() {
   }
 }
 
+// Sends with the SAVED settings, which is what a reset email will use, so it waits
+// for unsaved changes to be saved first.
+const testing = ref(false);
+async function sendTestEmail() {
+  testing.value = true;
+  try {
+    const res = await api.post<{ to: string }>("/api/settings/test-email");
+    ui.showToast(`Test email sent to ${res.to}.`);
+  } catch (e) {
+    ui.showToast(errorMessage(e, "Couldn't send a test email."));
+  } finally {
+    testing.value = false;
+  }
+}
+
 onMounted(load);
 </script>
 
@@ -152,6 +175,25 @@ onMounted(load);
               :value="Number(it.value)"
               @input="it.value = Number(($event.target as HTMLInputElement).value)"
             />
+            <select
+              v-else-if="it.choices"
+              :id="it.key"
+              class="w-56 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+              :value="String(it.value)"
+              @change="it.value = ($event.target as HTMLSelectElement).value"
+            >
+              <option v-for="c in it.choices" :key="c" :value="c">{{ c }}</option>
+            </select>
+            <input
+              v-else-if="it.secret"
+              :id="it.key"
+              type="password"
+              autocomplete="new-password"
+              :placeholder="it.is_set ? 'Saved — type to replace' : ''"
+              class="w-56 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+              :value="String(it.value)"
+              @input="it.value = ($event.target as HTMLInputElement).value"
+            />
             <input
               v-else
               :id="it.key"
@@ -163,6 +205,18 @@ onMounted(load);
           </div>
           <p class="max-w-md text-xs text-neutral-400">{{ it.description }}</p>
         </div>
+
+        <div v-if="group.name === 'Email'" class="flex items-center gap-3">
+          <button
+            type="button"
+            class="rounded-md border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-50 dark:border-neutral-700 dark:hover:bg-neutral-800"
+            :disabled="testing || dirty"
+            @click="sendTestEmail"
+          >
+            Send test email
+          </button>
+          <span v-if="dirty" class="text-xs text-neutral-400">Save first</span>
+        </div>
       </section>
 
       <div class="flex items-center gap-3">