frontend: pull out translations of SetPasswordStatus into function

frontend/locales/en.json

@@ -112,9 +112,13 @@
       "current_password_label": "Current password",
       "failure": {
         "description": {
+          "account_locked": "Your account is locked and can not be recovered at this time. If this is not expected, please contact your server administrator.",
+          "expired_recovery_ticket": "The recovery link has expired. Please start the account recovery process again from the start.",
           "invalid_new_password": "The new password you chose is invalid; it may not meet the configured security policy.",
           "no_current_password": "You don't have a current password.",
+          "no_such_recovery_ticket": "The recovery link is invalid. If you copied the link from the recovery e-mail, please check the full link was copied.",
           "password_changes_disabled": "Password changes are disabled.",
+          "recovery_ticket_already_used": "The recovery link has already been used. It cannot be used again.",
           "unspecified": "This might be a temporary problem, so please try again later. If the problem persists, please contact your server administrator.",
           "wrong_password": "The password you supplied as your current password is incorrect. Please try again."
         },

frontend/src/i18n/password_changes.ts

@@ -0,0 +1,71 @@
+// Copyright 2024 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { TFunction } from "i18next";
+
+import { SetPasswordStatus } from "../gql/graphql";
+
+/**
+ * Provides a translated string representing a `SetPasswordStatus`.
+ *
+ * Returns the translated string, or undefined if a translated string is not shown at the
+ * top-level of a password change form for this status.
+ *
+ * The form is responsible for showing the following errors itself, inline with the form field:
+ * - `WrongPassword`
+ * - `InvalidNewPassword`
+ *
+ * Throws an error if the status is not known.
+ */
+export function translateSetPasswordError(
+  t: TFunction<"frontend", undefined>,
+  status: SetPasswordStatus | undefined,
+): string | undefined {
+  switch (status) {
+    case SetPasswordStatus.NoCurrentPassword:
+      return t(
+        "frontend.password_change.failure.description.no_current_password",
+      );
+    case SetPasswordStatus.PasswordChangesDisabled:
+      return t(
+        "frontend.password_change.failure.description.password_changes_disabled",
+      );
+    case SetPasswordStatus.AccountLocked:
+      return t("frontend.password_change.failure.description.account_locked");
+    case SetPasswordStatus.ExpiredRecoveryTicket:
+      return t(
+        "frontend.password_change.failure.description.expired_recovery_ticket",
+      );
+    case SetPasswordStatus.NoSuchRecoveryTicket:
+      return t(
+        "frontend.password_change.failure.description.no_such_recovery_ticket",
+      );
+    case SetPasswordStatus.RecoveryTicketAlreadyUsed:
+      return t(
+        "frontend.password_change.failure.description.recovery_ticket_already_used",
+      );
+
+    case SetPasswordStatus.WrongPassword:
+    case SetPasswordStatus.InvalidNewPassword:
+      // These cases are shown as inline errors in the form itself.
+      return undefined;
+
+    case SetPasswordStatus.Allowed:
+    case undefined:
+      return undefined;
+
+    default:
+      throw new Error(`unexpected error when changing password: ${status}`);
+  }
+}

frontend/src/routes/password.change.index.lazy.tsx

@@ -31,6 +31,7 @@ import PageHeading from "../components/PageHeading";
 import PasswordCreationDoubleInput from "../components/PasswordCreationDoubleInput";
 import { graphql } from "../gql";
 import { SetPasswordStatus } from "../gql/graphql";
+import { translateSetPasswordError } from "../i18n/password_changes";
 
 const QUERY = graphql(/* GraphQL */ `
   query PasswordChangeQuery {
@@ -105,32 +106,10 @@ function ChangePassword(): React.ReactNode {
 
   const unhandleableError = result.error !== undefined;
 
-  const errorMsg: string | undefined = ((): string | undefined => {
+  const errorMsg: string | undefined = translateSetPasswordError(
-    switch (result.data?.setPassword.status) {
+    t,
-      case SetPasswordStatus.NoCurrentPassword:
+    result.data?.setPassword.status,
-        return t(
-          "frontend.password_change.failure.description.no_current_password",
   );
-      case SetPasswordStatus.PasswordChangesDisabled:
-        return t(
-          "frontend.password_change.failure.description.password_changes_disabled",
-        );
-
-      case SetPasswordStatus.WrongPassword:
-      case SetPasswordStatus.InvalidNewPassword:
-        // These cases are shown as inline errors in the form itself.
-        return undefined;
-
-      case SetPasswordStatus.Allowed:
-      case undefined:
-        return undefined;
-
-      default:
-        throw new Error(
-          `unexpected error when changing password: ${result.data!.setPassword.status}`,
-        );
-    }
-  })();
 
   return (
     <Layout>