Manual refinement

web/public/static/langs/en.json

@@ -30,7 +30,8 @@
   "login_link_signup": "Sign up",
   "login_link_forgot_password": "Forgot password",
   "reset_password_request_title": "Reset password",
-  "reset_password_request_description": "Enter your username or email address. If an account exists, a link to reset your password will be emailed. This only works if you already added a primary email address and verified it.",
+  "reset_password_request_description": "Enter your username or email address. If an account exists, a link to reset your password will be emailed.",
+  "reset_password_request_primary_required": "This only works if you already added a primary email address and verified it.",
   "reset_password_request_identifier_label": "Username or email",
   "reset_password_request_button_submit": "Send reset link",
   "reset_password_sent_title": "Check your inbox",
@@ -41,7 +42,6 @@
   "reset_password_form_password": "New password",
   "reset_password_form_confirm": "Confirm new password",
   "reset_password_form_button_submit": "Set password",
-  "reset_password_form_passwords_no_match": "Passwords do not match",
   "reset_password_form_error_invalid": "This reset link is invalid or has expired. Please request a new one.",
   "reset_password_success_title": "Password changed",
   "reset_password_success_description": "Your password has been changed. You can now sign in with your new password.",

web/src/components/EmailVerify.jsx

@@ -9,6 +9,11 @@ import accountApi from "../app/AccountApi";
 import AvatarBox from "./AvatarBox";
 import routes from "./routes";
 
+// Verification states for the email-verify landing page
+const STATUS_VERIFYING = "verifying";
+const STATUS_SUCCESS = "success";
+const STATUS_ERROR = "error";
+
 // EmailVerify is the magic-link landing page for email verification. It performs the verification
 // via a POST (the GET that loads this page has no side effects, so link prefetchers / scanners
 // cannot consume the single-use token). The raw token is stripped from the URL on load to keep
@@ -17,7 +22,7 @@ const EmailVerify = () => {
   const { t } = useTranslation();
   const { token } = useParams();
   const navigate = useNavigate();
-  const [status, setStatus] = useState("verifying"); // "verifying" | "success" | "error"
+  const [status, setStatus] = useState(STATUS_VERIFYING);
   const ran = useRef(false);
 
   useEffect(() => {
@@ -30,23 +35,23 @@ const EmailVerify = () => {
     (async () => {
       try {
         await accountApi.verifyEmailToken(token);
-        setStatus("success");
+        setStatus(STATUS_SUCCESS);
       } catch (e) {
         console.log(`[EmailVerify] Verification failed`, e);
-        setStatus("error");
+        setStatus(STATUS_ERROR);
       }
     })();
   }, [token]);
 
   return (
     <AvatarBox>
-      {status === "verifying" && (
+      {status === STATUS_VERIFYING && (
         <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
           <CircularProgress size={24} />
           <Typography sx={{ typography: "h6" }}>{t("email_verify_progress_title")}</Typography>
         </Box>
       )}
-      {status === "success" && (
+      {status === STATUS_SUCCESS && (
         <>
           <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
             <CheckCircleOutlineIcon color="success" sx={{ fontSize: 28 }} />
@@ -58,7 +63,7 @@ const EmailVerify = () => {
           </Button>
         </>
       )}
-      {status === "error" && (
+      {status === STATUS_ERROR && (
         <>
           <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
             <ErrorOutlineIcon color="error" sx={{ fontSize: 28 }} />

web/src/components/PasswordReset.jsx

@@ -30,10 +30,6 @@ const PasswordReset = () => {
 
   const handleSubmit = async (event) => {
     event.preventDefault();
-    if (password !== confirm) {
-      setError(t("reset_password_form_passwords_no_match"));
-      return;
-    }
     try {
       setSending(true);
       setError("");
@@ -91,7 +87,13 @@ const PasswordReset = () => {
           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 }}>
+        <Button
+          type="submit"
+          fullWidth
+          variant="contained"
+          disabled={sending || password === "" || confirm === "" || password !== confirm}
+          sx={{ mt: 2, mb: 2 }}
+        >
           {t("reset_password_form_button_submit")}
         </Button>
         {error && (

web/src/components/PasswordResetRequest.jsx

@@ -65,7 +65,8 @@ const PasswordResetRequest = () => {
     <AvatarBox>
       <Typography sx={{ typography: "h6" }}>{t("reset_password_request_title")}</Typography>
       <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
-        <Typography sx={{ mt: 1, mb: 1.5 }}>{t("reset_password_request_description")}</Typography>
+        <Typography sx={{ mt: 1 }}>{t("reset_password_request_description")}</Typography>
+        <Typography sx={{ mt: 1, mb: 1.5, fontWeight: "bold" }}>{t("reset_password_request_primary_required")}</Typography>
         <TextField
           margin="dense"
           required

web/src/components/routes.js

@@ -2,9 +2,9 @@ import config from "../app/config";
 import { shortUrl } from "../app/utils";
 
 const routes = {
+  app: config.app_root,
   login: "/login",
   signup: "/signup",
-  app: config.app_root,
   account: "/account",
   settings: "/settings",
   passwordResetRequest: "/reset-password",
@@ -17,7 +17,7 @@ const routes = {
       return `/${shortUrl(subscription.baseUrl)}/${subscription.topic}`;
     }
     return `/${subscription.topic}`;
-  },
+  }
 };
 
 export default routes;