Migrate more strings to translation keys (#11608)

src/components/structures/UserMenu.tsx

@@ -295,7 +295,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
             topSection = (
                 <div className="mx_UserMenu_contextMenu_header mx_UserMenu_contextMenu_guestPrompts">
                     {_t(
-                        "Got an account? <a>Sign in</a>",
+                        "auth|sign_in_prompt",
                         {},
                         {
                             a: (sub) => (
@@ -307,7 +307,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     )}
                     {SettingsStore.getValue(UIFeature.Registration)
                         ? _t(
-                              "New here? <a>Create an account</a>",
+                              "auth|create_account_prompt",
                               {},
                               {
                                   a: (sub) => (
@@ -338,7 +338,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
             feedbackButton = (
                 <IconizedContextMenuOption
                     iconClassName="mx_UserMenu_iconMessage"
-                    label={_t("Feedback")}
+                    label={_t("common|feedback")}
                     onClick={this.onProvideFeedback}
                 />
             );

src/components/structures/auth/Login.tsx

@@ -224,7 +224,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
                 let errorText: ReactNode;
                 // Some error strings only apply for logging in
                 if (error.httpStatus === 400 && username && username.indexOf("@") > 0) {
-                    errorText = _t("This homeserver does not support login using email address.");
+                    errorText = _t("auth|unsupported_auth_email");
                 } else {
                     errorText = messageForLoginError(error, this.props.serverConfig);
                 }
@@ -273,7 +273,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
             } catch (e) {
                 logger.error("Problem parsing URL or unhandled error doing .well-known discovery:", e);
 
-                let message = _t("Failed to perform homeserver discovery");
+                let message = _t("auth|failed_homeserver_discovery");
                 if (e instanceof UserFriendlyError && e.translatedMessage) {
                     message = e.translatedMessage;
                 }
@@ -398,9 +398,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
 
                     if (supportedFlows.length === 0) {
                         this.setState({
-                            errorText: _t(
-                                "This homeserver doesn't offer any login flows that are supported by this client.",
-                            ),
+                            errorText: _t("auth|unsupported_auth"),
                         });
                     }
                 },
@@ -532,12 +530,10 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
                 <div className="mx_AuthBody_paddedFooter">
                     <div className="mx_AuthBody_paddedFooter_title">
                         <InlineSpinner w={20} h={20} />
-                        {this.props.isSyncing ? _t("Syncing…") : _t("Signing In…")}
+                        {this.props.isSyncing ? _t("auth|syncing") : _t("auth|signing_in")}
                     </div>
                     {this.props.isSyncing && (
-                        <div className="mx_AuthBody_paddedFooter_subtitle">
-                            {_t("If you've joined lots of rooms, this might take a while")}
-                        </div>
+                        <div className="mx_AuthBody_paddedFooter_subtitle">{_t("auth|sync_footer_subtitle")}</div>
                     )}
                 </div>
             );
@@ -545,7 +541,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
             footer = (
                 <span className="mx_AuthBody_changeFlow">
                     {_t(
-                        "New? <a>Create account</a>",
+                        "auth|create_account_prompt",
                         {},
                         {
                             a: (sub) => (

src/components/structures/auth/Registration.tsx

@@ -263,7 +263,7 @@ export default class Registration extends React.Component<IProps, IState> {
                 } else {
                     this.setState({
                         serverErrorIsFatal: true, // fatal because user cannot continue on this server
-                        errorText: _t("Registration has been disabled on this homeserver."),
+                        errorText: _t("auth|registration_disabled"),
                         // add empty flows array to get rid of spinner
                         flows: [],
                     });
@@ -271,7 +271,7 @@ export default class Registration extends React.Component<IProps, IState> {
             } else {
                 logger.log("Unable to query for supported registration methods.", e);
                 this.setState({
-                    errorText: _t("Unable to query for supported registration methods."),
+                    errorText: _t("auth|failed_query_registration_methods"),
                     // add empty flows array to get rid of spinner
                     flows: [],
                 });
@@ -326,12 +326,12 @@ export default class Registration extends React.Component<IProps, IState> {
                 const flows = (response as IAuthData).flows ?? [];
                 const msisdnAvailable = flows.some((flow) => flow.stages.includes(AuthType.Msisdn));
                 if (!msisdnAvailable) {
-                    errorText = _t("This server does not support authentication with a phone number.");
+                    errorText = _t("auth|unsupported_auth_msisdn");
                 }
             } else if (response instanceof MatrixError && response.errcode === "M_USER_IN_USE") {
-                errorText = _t("Someone already has that username, please try another.");
+                errorText = _t("auth|username_in_use");
             } else if (response instanceof MatrixError && response.errcode === "M_THREEPID_IN_USE") {
-                errorText = _t("That e-mail address or phone number is already in use.");
+                errorText = _t("auth|3pid_in_use");
             }
 
             this.setState({

src/components/structures/auth/SoftLogout.tsx

@@ -161,7 +161,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
                 e.errcode === "M_FORBIDDEN" &&
                 (e.httpStatus === 401 || e.httpStatus === 403)
             ) {
-                errorText = _t("Incorrect password");
+                errorText = _t("auth|incorrect_password");
             }
 
             this.setState({
@@ -173,7 +173,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
 
         Lifecycle.hydrateSession(credentials).catch((e) => {
             logger.error(e);
-            this.setState({ busy: false, errorText: _t("Failed to re-authenticate") });
+            this.setState({ busy: false, errorText: _t("auth|failed_soft_logout_auth") });
         });
     };
 
@@ -239,7 +239,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
                     {_t("action|sign_in")}
                 </AccessibleButton>
                 <AccessibleButton onClick={this.onForgotPassword} kind="link">
-                    {_t("Forgotten your password?")}
+                    {_t("auth|forgot_password_prompt")}
                 </AccessibleButton>
             </form>
         );
@@ -270,11 +270,11 @@ export default class SoftLogout extends React.Component<IProps, IState> {
         }
 
         if (this.state.loginView === LoginView.Password) {
-            return this.renderPasswordForm(_t("Enter your password to sign in and regain access to your account."));
+            return this.renderPasswordForm(_t("auth|soft_logout_intro_password"));
         }
 
         if (this.state.loginView === LoginView.SSO || this.state.loginView === LoginView.CAS) {
-            return this.renderSsoForm(_t("Sign in and regain access to your account."));
+            return this.renderSsoForm(_t("auth|soft_logout_intro_sso"));
         }
 
         if (this.state.loginView === LoginView.PasswordWithSocialSignOn) {
@@ -284,7 +284,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
             // Note: "mx_AuthBody_centered" text taken from registration page.
             return (
                 <>
-                    <p>{_t("Sign in and regain access to your account.")}</p>
+                    <p>{_t("auth|soft_logout_intro_sso")}</p>
                     {this.renderSsoForm(null)}
                     <h2 className="mx_AuthBody_centered">
                         {_t("auth|sso_or_username_password", {
@@ -298,11 +298,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
         }
 
         // Default: assume unsupported/error
-        return (
-            <p>
-                {_t("You cannot sign in to your account. Please contact your homeserver admin for more information.")}
-            </p>
-        );
+        return <p>{_t("auth|soft_logout_intro_unsupported_auth")}</p>;
     }
 
     public render(): React.ReactNode {
@@ -310,7 +306,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
             <AuthPage>
                 <AuthHeader />
                 <AuthBody>
-                    <h1>{_t("You're signed out")}</h1>
+                    <h1>{_t("auth|soft_logout_heading")}</h1>
 
                     <h2>{_t("action|sign_in")}</h2>
                     <div>{this.renderSignInSection()}</div>

src/components/structures/auth/forgot-password/CheckEmail.tsx

@@ -55,20 +55,18 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
             <EMailPromptIcon className="mx_AuthBody_emailPromptIcon--shifted" />
             <h1>{_t("Check your email to continue")}</h1>
             <div className="mx_AuthBody_text">
-                <p>
-                    {_t("Follow the instructions sent to <b>%(email)s</b>", { email: email }, { b: (t) => <b>{t}</b> })}
-                </p>
+                <p>{_t("auth|check_email_explainer", { email: email }, { b: (t) => <b>{t}</b> })}</p>
                 <div className="mx_AuthBody_did-not-receive">
-                    <span className="mx_VerifyEMailDialog_text-light">{_t("Wrong email address?")}</span>
+                    <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_wrong_email_prompt")}</span>
                     <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onReEnterEmailClick}>
-                        {_t("Re-enter email address")}
+                        {_t("auth|check_email_wrong_email_button")}
                     </AccessibleButton>
                 </div>
             </div>
             {errorText && <ErrorMessage message={errorText} />}
             <input onClick={onSubmitForm} type="button" className="mx_Login_submit" value={_t("action|next")} />
             <div className="mx_AuthBody_did-not-receive">
-                <span className="mx_VerifyEMailDialog_text-light">{_t("Did not receive it?")}</span>
+                <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
                 <AccessibleButton
                     className="mx_AuthBody_resend-button"
                     kind="link"
@@ -79,7 +77,7 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
                     {_t("action|resend")}
                     <Tooltip
                         id={tooltipId}
-                        label={_t("Verification link email resent!")}
+                        label={_t("auth|check_email_resend_tooltip")}
                         alignment={Alignment.Top}
                         visible={tooltipVisible}
                     />

src/components/structures/auth/forgot-password/EnterEmail.tsx

@@ -63,13 +63,9 @@ export const EnterEmail: React.FC<EnterEmailProps> = ({
     return (
         <>
             <EmailIcon className="mx_AuthBody_icon" />
-            <h1>{_t("Enter your email to reset password")}</h1>
+            <h1>{_t("auth|enter_email_heading")}</h1>
             <p className="mx_AuthBody_text">
-                {_t(
-                    "<b>%(homeserver)s</b> will send you a verification link to let you reset your password.",
-                    { homeserver },
-                    { b: (t) => <b>{t}</b> },
-                )}
+                {_t("auth|enter_email_explainer", { homeserver }, { b: (t) => <b>{t}</b> })}
             </p>
             <form onSubmit={onSubmit}>
                 <fieldset disabled={loading}>
@@ -77,8 +73,8 @@ export const EnterEmail: React.FC<EnterEmailProps> = ({
                         <EmailField
                             name="reset_email" // define a name so browser's password autofill gets less confused
                             label="Email address"
-                            labelRequired={_td("The email address linked to your account must be entered.")}
-                            labelInvalid={_td("The email address doesn't appear to be valid.")}
+                            labelRequired={_td("auth|forgot_password_email_required")}
+                            labelInvalid={_td("auth|forgot_password_email_invalid")}
                             value={email}
                             autoFocus={true}
                             onChange={(event: React.FormEvent<HTMLInputElement>) => onInputChanged("email", event)}
@@ -99,7 +95,7 @@ export const EnterEmail: React.FC<EnterEmailProps> = ({
                                 onLoginClick();
                             }}
                         >
-                            {_t("Sign in instead")}
+                            {_t("auth|sign_in_instead")}
                         </AccessibleButton>
                     </div>
                 </fieldset>

src/components/structures/auth/forgot-password/VerifyEmailModal.tsx

@@ -51,10 +51,10 @@ export const VerifyEmailModal: React.FC<Props> = ({
     return (
         <>
             <EmailPromptIcon className="mx_AuthBody_emailPromptIcon" />
-            <h1>{_t("Verify your email to continue")}</h1>
+            <h1>{_t("auth|verify_email_heading")}</h1>
             <p>
                 {_t(
-                    "We need to know it’s you before resetting your password. Click the link in the email we just sent to <b>%(email)s</b>",
+                    "auth|verify_email_explainer",
                     {
                         email,
                     },
@@ -65,7 +65,7 @@ export const VerifyEmailModal: React.FC<Props> = ({
             </p>
 
             <div className="mx_AuthBody_did-not-receive">
-                <span className="mx_VerifyEMailDialog_text-light">{_t("Did not receive it?")}</span>
+                <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
                 <AccessibleButton
                     className="mx_AuthBody_resend-button"
                     kind="link"
@@ -76,7 +76,7 @@ export const VerifyEmailModal: React.FC<Props> = ({
                     {_t("action|resend")}
                     <Tooltip
                         id={tooltipId}
-                        label={_t("Verification link email resent!")}
+                        label={_t("auth|check_email_resend_tooltip")}
                         alignment={Alignment.Top}
                         visible={tooltipVisible}
                     />
@@ -85,9 +85,9 @@ export const VerifyEmailModal: React.FC<Props> = ({
             </div>
 
             <div className="mx_AuthBody_did-not-receive">
-                <span className="mx_VerifyEMailDialog_text-light">{_t("Wrong email address?")}</span>
+                <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_wrong_email_prompt")}</span>
                 <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onReEnterEmailClick}>
-                    {_t("Re-enter email address")}
+                    {_t("auth|check_email_wrong_email_button")}
                 </AccessibleButton>
             </div>