Fix instances of double translation and guard translation calls using typescript (#11443)

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

src/components/views/auth/EmailField.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React, { PureComponent, RefCallback, RefObject } from "react";
 
 import Field, { IInputProps } from "../elements/Field";
-import { _t, _td } from "../../../languageHandler";
+import { _t, _td, TranslationKey } from "../../../languageHandler";
 import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
 import * as Email from "../../../email";
 
@@ -27,9 +27,9 @@ interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
     value: string;
     autoFocus?: boolean;
 
-    label?: string;
-    labelRequired?: string;
-    labelInvalid?: string;
+    label: TranslationKey;
+    labelRequired: TranslationKey;
+    labelInvalid: TranslationKey;
 
     // When present, completely overrides the default validation rules.
     validationRules?: (fieldState: IFieldState) => Promise<IValidationResult>;
@@ -50,12 +50,12 @@ class EmailField extends PureComponent<IProps> {
             {
                 key: "required",
                 test: ({ value, allowEmpty }) => allowEmpty || !!value,
-                invalid: () => _t(this.props.labelRequired!),
+                invalid: () => _t(this.props.labelRequired),
             },
             {
                 key: "email",
                 test: ({ value }) => !value || Email.looksValid(value),
-                invalid: () => _t(this.props.labelInvalid!),
+                invalid: () => _t(this.props.labelInvalid),
             },
         ],
     });
@@ -80,7 +80,7 @@ class EmailField extends PureComponent<IProps> {
                 id={this.props.id}
                 ref={this.props.fieldRef}
                 type="text"
-                label={_t(this.props.label!)}
+                label={_t(this.props.label)}
                 value={this.props.value}
                 autoFocus={this.props.autoFocus}
                 onChange={this.props.onChange}

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -220,8 +220,7 @@ export class RecaptchaAuthEntry extends React.Component<IRecaptchaAuthEntryProps
         let sitePublicKey: string | undefined;
         if (!this.props.stageParams || !this.props.stageParams.public_key) {
             errorText = _t(
-                "Missing captcha public key in homeserver configuration. Please report " +
-                    "this to your homeserver administrator.",
+                "Missing captcha public key in homeserver configuration. Please report this to your homeserver administrator.",
             );
         } else {
             sitePublicKey = this.props.stageParams.public_key;

src/components/views/auth/PassphraseConfirmField.tsx

@@ -18,7 +18,7 @@ import React, { PureComponent, RefCallback, RefObject } from "react";
 
 import Field, { IInputProps } from "../elements/Field";
 import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
-import { _t, _td } from "../../../languageHandler";
+import { _t, _td, TranslationKey } from "../../../languageHandler";
 
 interface IProps extends Omit<IInputProps, "onValidate" | "label" | "element"> {
     id?: string;
@@ -27,9 +27,9 @@ interface IProps extends Omit<IInputProps, "onValidate" | "label" | "element"> {
     value: string;
     password: string; // The password we're confirming
 
-    label: string;
-    labelRequired: string;
-    labelInvalid: string;
+    label: TranslationKey;
+    labelRequired: TranslationKey;
+    labelInvalid: TranslationKey;
 
     onChange(ev: React.FormEvent<HTMLElement>): void;
     onValidate?(result: IValidationResult): void;

src/components/views/auth/PassphraseField.tsx

@@ -20,7 +20,7 @@ import zxcvbn from "zxcvbn";
 
 import SdkConfig from "../../../SdkConfig";
 import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
-import { _t, _td } from "../../../languageHandler";
+import { _t, _td, TranslationKey } from "../../../languageHandler";
 import Field, { IInputProps } from "../elements/Field";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
@@ -34,10 +34,10 @@ interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
     // Additional strings such as a username used to catch bad passwords
     userInputs?: string[];
 
-    label: string;
-    labelEnterPassword: string;
-    labelStrongPassword: string;
-    labelAllowedButUnsafe: string;
+    label: TranslationKey;
+    labelEnterPassword: TranslationKey;
+    labelStrongPassword: TranslationKey;
+    labelAllowedButUnsafe: TranslationKey;
 
     onChange(ev: React.FormEvent<HTMLElement>): void;
     onValidate?(result: IValidationResult): void;