Phase 3+4

web/src/app/AccountApi.js

@@ -6,6 +6,8 @@ import {
   accountEmailVerifyUrl,
   accountEmailPrimaryUrl,
   accountEmailResendUrl,
+  accountPasswordResetRequestUrl,
+  accountPasswordResetUrl,
   accountPasswordUrl,
   accountPhoneUrl,
   accountPhoneVerifyUrl,
@@ -397,6 +399,32 @@ class AccountApi {
     });
   }
 
+  // requestPasswordReset starts the (unauthenticated) reset flow. The identifier is a username or
+  // primary email. The server always responds uniformly, regardless of whether an account matched.
+  async requestPasswordReset(identifier) {
+    const url = accountPasswordResetRequestUrl(config.base_url);
+    console.log(`[AccountApi] Requesting password reset ${url}`);
+    await fetchOrThrow(url, {
+      method: "POST",
+      body: JSON.stringify({
+        identifier,
+      }),
+    });
+  }
+
+  // resetPassword performs the (unauthenticated) reset from the set-new-password landing page.
+  async resetPassword(token, password) {
+    const url = accountPasswordResetUrl(config.base_url);
+    console.log(`[AccountApi] Resetting password ${url}`);
+    await fetchOrThrow(url, {
+      method: "POST",
+      body: JSON.stringify({
+        token,
+        password,
+      }),
+    });
+  }
+
   async deleteEmail(email) {
     const url = accountEmailUrl(config.base_url);
     console.log(`[AccountApi] Deleting email ${url}`);

web/src/app/utils.js

@@ -37,6 +37,8 @@ export const accountEmailUrl = (baseUrl) => `${baseUrl}/v1/account/email`;
 export const accountEmailVerifyUrl = (baseUrl) => `${baseUrl}/v1/account/email/verify`;
 export const accountEmailPrimaryUrl = (baseUrl) => `${baseUrl}/v1/account/email/primary`;
 export const accountEmailResendUrl = (baseUrl) => `${baseUrl}/v1/account/email/resend`;
+export const accountPasswordResetRequestUrl = (baseUrl) => `${baseUrl}/v1/account/password/reset/request`;
+export const accountPasswordResetUrl = (baseUrl) => `${baseUrl}/v1/account/password/reset`;
 
 export const validUrl = (url) => url.match(/^https?:\/\/.+/);
 

web/src/components/App.jsx

@@ -21,6 +21,7 @@ import Login from "./Login";
 import Signup from "./Signup";
 import Account from "./Account";
 import EmailVerify from "./EmailVerify";
+import PasswordReset from "./PasswordReset";
 import initI18n from "../app/i18n"; // Translations!
 import prefs from "../app/Prefs";
 import RTLCacheProvider from "./RTLCacheProvider";
@@ -65,6 +66,7 @@ const App = () => {
                   <Route path={routes.login} element={<Login />} />
                   <Route path={routes.signup} element={<Signup />} />
                   <Route path={routes.emailVerify} element={<EmailVerify />} />
+                  <Route path={routes.passwordReset} element={<PasswordReset />} />
                   <Route element={<Layout />}>
                     <Route path={routes.app} element={<AllSubscriptions />} />
                     <Route path={routes.account} element={<Account />} />

web/src/components/Login.jsx

@@ -1,6 +1,18 @@
 import * as React from "react";
 import { useState } from "react";
-import { Typography, TextField, Button, Box, IconButton, InputAdornment } from "@mui/material";
+import {
+  Typography,
+  TextField,
+  Button,
+  Box,
+  IconButton,
+  InputAdornment,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+} from "@mui/material";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
 import { NavLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
@@ -17,6 +29,7 @@ const Login = () => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
+  const [resetOpen, setResetOpen] = useState(false);
 
   const handleSubmit = async (event) => {
     event.preventDefault();
@@ -100,7 +113,13 @@ const Login = () => {
           </Box>
         )}
         <Box sx={{ width: "100%" }}>
-          {/* This is where the password reset link would go */}
+          {config.enable_reset_password && (
+            <div style={{ float: "left" }}>
+              <Button variant="text" onClick={() => setResetOpen(true)} sx={{ textTransform: "none", p: 0, minWidth: 0 }}>
+                {t("login_link_forgot_password")}
+              </Button>
+            </div>
+          )}
           {config.enable_signup && (
             <div style={{ float: "right" }}>
               <NavLink to={routes.signup} variant="body1">
@@ -110,8 +129,67 @@ const Login = () => {
           )}
         </Box>
       </Box>
+      <ForgotPasswordDialog open={resetOpen} onClose={() => setResetOpen(false)} />
     </AvatarBox>
   );
 };
 
+// ForgotPasswordDialog collects a username/email and asks the server to email a reset link. The
+// response is uniform, so the dialog always shows the same "if an account exists" confirmation.
+const ForgotPasswordDialog = (props) => {
+  const { t } = useTranslation();
+  const [identifier, setIdentifier] = useState("");
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+
+  const handleSubmit = async () => {
+    try {
+      setSending(true);
+      await accountApi.requestPasswordReset(identifier);
+    } catch (e) {
+      console.log(`[Login] Password reset request failed`, e);
+    } finally {
+      setSending(false);
+      setSent(true); // Uniform outcome regardless of success/failure (enumeration-safe)
+    }
+  };
+
+  return (
+    <Dialog open={props.open} onClose={props.onClose}>
+      <DialogTitle>{t("login_reset_dialog_title")}</DialogTitle>
+      <DialogContent>
+        {sent ? (
+          <DialogContentText>{t("login_reset_dialog_sent")}</DialogContentText>
+        ) : (
+          <>
+            <DialogContentText>{t("login_reset_dialog_description")}</DialogContentText>
+            <TextField
+              autoFocus
+              margin="dense"
+              label={t("login_reset_dialog_identifier_label")}
+              type="text"
+              value={identifier}
+              onChange={(ev) => setIdentifier(ev.target.value.trim())}
+              fullWidth
+              variant="standard"
+            />
+          </>
+        )}
+      </DialogContent>
+      <DialogActions>
+        {sent ? (
+          <Button onClick={props.onClose}>{t("common_close")}</Button>
+        ) : (
+          <>
+            <Button onClick={props.onClose}>{t("common_cancel")}</Button>
+            <Button onClick={handleSubmit} disabled={sending || identifier === ""}>
+              {t("login_reset_dialog_button_submit")}
+            </Button>
+          </>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+};
+
 export default Login;

web/src/components/PasswordReset.jsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import { Typography, TextField, Button, Box } from "@mui/material";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import { useParams, NavLink } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import accountApi from "../app/AccountApi";
+import AvatarBox from "./AvatarBox";
+import routes from "./routes";
+
+// PasswordReset is the magic-link landing page for setting a new password. There is no
+// pre-validation: the form renders directly and an invalid/expired token surfaces as an error on
+// submit. The raw token is stripped from the URL on load (kept out of history / Referer).
+const PasswordReset = () => {
+  const { t } = useTranslation();
+  const { token: tokenParam } = useParams();
+  const token = useRef(tokenParam);
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [error, setError] = useState("");
+  const [sending, setSending] = useState(false);
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    // Strip the token from the URL bar immediately (keep it out of history / Referer)
+    window.history.replaceState(null, "", routes.login);
+  }, []);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (password !== confirm) {
+      setError(t("reset_password_form_passwords_no_match"));
+      return;
+    }
+    try {
+      setSending(true);
+      setError("");
+      await accountApi.resetPassword(token.current, password);
+      setDone(true);
+    } catch (e) {
+      console.log(`[PasswordReset] Reset failed`, e);
+      setError(t("reset_password_form_error_invalid"));
+    } finally {
+      setSending(false);
+    }
+  };
+
+  if (done) {
+    return (
+      <AvatarBox>
+        <CheckCircleOutlineIcon color="success" sx={{ fontSize: 48, mb: 1 }} />
+        <Typography sx={{ typography: "h6" }}>{t("reset_password_success_title")}</Typography>
+        <Typography sx={{ mt: 1, textAlign: "center" }}>{t("reset_password_success_description")}</Typography>
+        <Button component={NavLink} to={routes.login} variant="contained" sx={{ mt: 2 }}>
+          {t("reset_password_button_login")}
+        </Button>
+      </AvatarBox>
+    );
+  }
+
+  return (
+    <AvatarBox>
+      <Typography sx={{ typography: "h6" }}>{t("reset_password_title")}</Typography>
+      <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+        <TextField
+          margin="dense"
+          required
+          fullWidth
+          name="password"
+          label={t("reset_password_form_password")}
+          type="password"
+          id="password"
+          value={password}
+          onChange={(ev) => setPassword(ev.target.value.trim())}
+          autoComplete="new-password"
+          autoFocus
+        />
+        <TextField
+          margin="dense"
+          required
+          fullWidth
+          name="confirm"
+          label={t("reset_password_form_confirm")}
+          type="password"
+          id="confirm"
+          value={confirm}
+          onChange={(ev) => setConfirm(ev.target.value.trim())}
+          autoComplete="new-password"
+        />
+        <Button type="submit" fullWidth variant="contained" disabled={sending || password === "" || confirm === ""} sx={{ mt: 2, mb: 2 }}>
+          {t("reset_password_form_button_submit")}
+        </Button>
+        {error && (
+          <Box sx={{ mb: 1, display: "flex", flexGrow: 1, justifyContent: "center" }}>
+            <WarningAmberIcon color="error" sx={{ mr: 1 }} />
+            <Typography sx={{ color: "error.main" }}>{error}</Typography>
+          </Box>
+        )}
+      </Box>
+    </AvatarBox>
+  );
+};
+
+export default PasswordReset;

web/src/components/routes.js

@@ -8,6 +8,7 @@ const routes = {
   account: "/account",
   settings: "/settings",
   emailVerify: "/account/email/verify/:token",
+  passwordReset: "/account/password/reset/:token",
   subscription: "/:topic",
   subscriptionExternal: "/:baseUrl/:topic",
   forSubscription: (subscription) => {