Comply with noImplicitAny (#9940)

* Stash noImplicitAny work

* Stash

* Fix imports

* Iterate

* Fix tests

* Delint

* Fix tests

src/components/views/auth/CountryDropdown.tsx

@@ -21,7 +21,7 @@ import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";
 import Dropdown from "../elements/Dropdown";
 
-const COUNTRIES_BY_ISO2 = {};
+const COUNTRIES_BY_ISO2: Record<string, PhoneNumberCountryDefinition> = {};
 for (const c of COUNTRIES) {
     COUNTRIES_BY_ISO2[c.iso2] = c;
 }

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -100,7 +100,7 @@ interface IPasswordAuthEntryState {
 export class PasswordAuthEntry extends React.Component<IAuthEntryProps, IPasswordAuthEntryState> {
     public static LOGIN_TYPE = AuthType.Password;
 
-    public constructor(props) {
+    public constructor(props: IAuthEntryProps) {
         super(props);
 
         this.state = {
@@ -264,7 +264,7 @@ interface ITermsAuthEntryState {
 export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITermsAuthEntryState> {
     public static LOGIN_TYPE = AuthType.Terms;
 
-    public constructor(props) {
+    public constructor(props: ITermsAuthEntryProps) {
         super(props);
 
         // example stageParams:
@@ -288,8 +288,12 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
 
         const allPolicies = this.props.stageParams.policies || {};
         const prefLang = SettingsStore.getValue("language");
-        const initToggles = {};
-        const pickedPolicies = [];
+        const initToggles: Record<string, boolean> = {};
+        const pickedPolicies: {
+            id: string;
+            name: string;
+            url: string;
+        }[] = [];
         for (const policyId of Object.keys(allPolicies)) {
             const policy = allPolicies[policyId];
 
@@ -325,7 +329,7 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
     }
 
     private togglePolicy(policyId: string): void {
-        const newToggles = {};
+        const newToggles: Record<string, boolean> = {};
         for (const policy of this.state.policies) {
             let checked = this.state.toggledPolicies[policy.id];
             if (policy.id === policyId) checked = !checked;
@@ -484,7 +488,7 @@ export class EmailIdentityAuthEntry extends React.Component<
                                 {
                                     a: (text: string) => (
                                         <Fragment>
-                                            <AccessibleButton kind="link_inline" onClick={() => null} disabled>
+                                            <AccessibleButton kind="link_inline" onClick={null} disabled>
                                                 {text} <Spinner w={14} h={14} />
                                             </AccessibleButton>
                                         </Fragment>
@@ -555,7 +559,7 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
     private sid: string;
     private msisdn: string;
 
-    public constructor(props) {
+    public constructor(props: IMsisdnAuthEntryProps) {
         super(props);
 
         this.state = {
@@ -908,7 +912,7 @@ export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
     private popupWindow: Window;
     private fallbackButton = createRef<HTMLButtonElement>();
 
-    public constructor(props) {
+    public constructor(props: IAuthEntryProps) {
         super(props);
 
         // we have to make the user click a button, as browsers will block

src/components/views/auth/LoginWithQR.tsx

@@ -75,7 +75,7 @@ interface IState {
  * This uses the unstable feature of MSC3906: https://github.com/matrix-org/matrix-spec-proposals/pull/3906
  */
 export default class LoginWithQR extends React.Component<IProps, IState> {
-    public constructor(props) {
+    public constructor(props: IProps) {
         super(props);
 
         this.state = {

src/components/views/auth/LoginWithQRFlow.tsx

@@ -41,7 +41,7 @@ interface IProps {
  * This uses the unstable feature of MSC3906: https://github.com/matrix-org/matrix-spec-proposals/pull/3906
  */
 export default class LoginWithQRFlow extends React.Component<IProps> {
-    public constructor(props) {
+    public constructor(props: IProps) {
         super(props);
     }
 

src/components/views/auth/PassphraseConfirmField.tsx

@@ -30,8 +30,8 @@ interface IProps extends Omit<IInputProps, "onValidate"> {
     labelRequired?: string;
     labelInvalid?: string;
 
-    onChange(ev: React.FormEvent<HTMLElement>);
-    onValidate?(result: IValidationResult);
+    onChange(ev: React.FormEvent<HTMLElement>): void;
+    onValidate?(result: IValidationResult): void;
 }
 
 class PassphraseConfirmField extends PureComponent<IProps> {

src/components/views/auth/PassphraseField.tsx

@@ -36,8 +36,8 @@ interface IProps extends Omit<IInputProps, "onValidate"> {
     labelStrongPassword?: string;
     labelAllowedButUnsafe?: string;
 
-    onChange(ev: React.FormEvent<HTMLElement>);
-    onValidate?(result: IValidationResult);
+    onChange(ev: React.FormEvent<HTMLElement>): void;
+    onValidate?(result: IValidationResult): void;
 }
 
 class PassphraseField extends PureComponent<IProps> {

src/components/views/auth/PasswordLogin.tsx

@@ -14,17 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { SyntheticEvent } from "react";
 import classNames from "classnames";
 
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
 import { ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
-import AccessibleButton from "../elements/AccessibleButton";
-import withValidation, { IValidationResult } from "../elements/Validation";
+import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
+import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
 import Field from "../elements/Field";
 import CountryDropdown from "./CountryDropdown";
 import EmailField from "./EmailField";
+import { PhoneNumberCountryDefinition } from "../../../phonenumber";
 
 // For validating phone numbers without country codes
 const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
@@ -51,7 +52,7 @@ interface IProps {
 interface IState {
     fieldValid: Partial<Record<LoginField, boolean>>;
     loginType: LoginField.Email | LoginField.MatrixId | LoginField.Phone;
-    password: "";
+    password: string;
 }
 
 const enum LoginField {
@@ -66,6 +67,10 @@ const enum LoginField {
  * The email/username/phone fields are fully-controlled, the password field is not.
  */
 export default class PasswordLogin extends React.PureComponent<IProps, IState> {
+    private [LoginField.Email]: Field;
+    private [LoginField.Phone]: Field;
+    private [LoginField.MatrixId]: Field;
+
     public static defaultProps = {
         onUsernameChanged: function () {},
         onUsernameBlur: function () {},
@@ -75,7 +80,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         disableSubmit: false,
     };
 
-    public constructor(props) {
+    public constructor(props: IProps) {
         super(props);
         this.state = {
             // Field error codes by field ID
@@ -85,13 +90,13 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         };
     }
 
-    private onForgotPasswordClick = (ev): void => {
+    private onForgotPasswordClick = (ev: ButtonEvent): void => {
         ev.preventDefault();
         ev.stopPropagation();
         this.props.onForgotPasswordClick();
     };
 
-    private onSubmitForm = async (ev): Promise<void> => {
+    private onSubmitForm = async (ev: SyntheticEvent): Promise<void> => {
         ev.preventDefault();
 
         const allFieldsValid = await this.verifyFieldsBeforeSubmit();
@@ -99,47 +104,40 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
             return;
         }
 
-        let username = ""; // XXX: Synapse breaks if you send null here:
-        let phoneCountry = null;
-        let phoneNumber = null;
-
         switch (this.state.loginType) {
             case LoginField.Email:
             case LoginField.MatrixId:
-                username = this.props.username;
+                this.props.onSubmit(this.props.username, undefined, undefined, this.state.password);
                 break;
             case LoginField.Phone:
-                phoneCountry = this.props.phoneCountry;
-                phoneNumber = this.props.phoneNumber;
+                this.props.onSubmit(undefined, this.props.phoneCountry, this.props.phoneNumber, this.state.password);
                 break;
         }
-
-        this.props.onSubmit(username, phoneCountry, phoneNumber, this.state.password);
     };
 
-    private onUsernameChanged = (ev): void => {
+    private onUsernameChanged = (ev: React.ChangeEvent<HTMLInputElement>): void => {
         this.props.onUsernameChanged(ev.target.value);
     };
 
-    private onUsernameBlur = (ev): void => {
+    private onUsernameBlur = (ev: React.FocusEvent<HTMLInputElement>): void => {
         this.props.onUsernameBlur(ev.target.value);
     };
 
-    private onLoginTypeChange = (ev): void => {
-        const loginType = ev.target.value;
+    private onLoginTypeChange = (ev: React.ChangeEvent<HTMLSelectElement>): void => {
+        const loginType = ev.target.value as IState["loginType"];
         this.setState({ loginType });
         this.props.onUsernameChanged(""); // Reset because email and username use the same state
     };
 
-    private onPhoneCountryChanged = (country): void => {
+    private onPhoneCountryChanged = (country: PhoneNumberCountryDefinition): void => {
         this.props.onPhoneCountryChanged(country.iso2);
     };
 
-    private onPhoneNumberChanged = (ev): void => {
+    private onPhoneNumberChanged = (ev: React.ChangeEvent<HTMLInputElement>): void => {
         this.props.onPhoneNumberChanged(ev.target.value);
     };
 
-    private onPasswordChanged = (ev): void => {
+    private onPasswordChanged = (ev: React.ChangeEvent<HTMLInputElement>): void => {
         this.setState({ password: ev.target.value });
     };
 
@@ -151,7 +149,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
             activeElement.blur();
         }
 
-        const fieldIDsInDisplayOrder = [this.state.loginType, LoginField.Password];
+        const fieldIDsInDisplayOrder: LoginField[] = [this.state.loginType, LoginField.Password];
 
         // Run all fields with stricter validation that no longer allows empty
         // values for required fields.
@@ -221,7 +219,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         ],
     });
 
-    private onUsernameValidate = async (fieldState): Promise<IValidationResult> => {
+    private onUsernameValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
         const result = await this.validateUsernameRules(fieldState);
         this.markFieldValid(LoginField.MatrixId, result.valid);
         return result;
@@ -248,7 +246,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         ],
     });
 
-    private onPhoneNumberValidate = async (fieldState): Promise<IValidationResult> => {
+    private onPhoneNumberValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
         const result = await this.validatePhoneNumberRules(fieldState);
         this.markFieldValid(LoginField.Password, result.valid);
         return result;
@@ -266,7 +264,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         ],
     });
 
-    private onPasswordValidate = async (fieldState): Promise<IValidationResult> => {
+    private onPasswordValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
         const result = await this.validatePasswordRules(fieldState);
         this.markFieldValid(LoginField.Password, result.valid);
         return result;

src/components/views/auth/RegistrationForm.tsx

@@ -15,18 +15,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { BaseSyntheticEvent } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixError } from "matrix-js-sdk/src/matrix";
 
 import * as Email from "../../../email";
-import { looksValid as phoneNumberLooksValid } from "../../../phonenumber";
+import { looksValid as phoneNumberLooksValid, PhoneNumberCountryDefinition } from "../../../phonenumber";
 import Modal from "../../../Modal";
 import { _t, _td } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
 import { SAFE_LOCALPART_REGEX } from "../../../Registration";
-import withValidation, { IValidationResult } from "../elements/Validation";
+import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
 import { ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
 import EmailField from "./EmailField";
 import PassphraseField from "./PassphraseField";
@@ -95,12 +95,18 @@ interface IState {
  * A pure UI component which displays a registration form.
  */
 export default class RegistrationForm extends React.PureComponent<IProps, IState> {
+    private [RegistrationField.Email]: Field;
+    private [RegistrationField.Password]: Field;
+    private [RegistrationField.PasswordConfirm]: Field;
+    private [RegistrationField.Username]: Field;
+    private [RegistrationField.PhoneNumber]: Field;
+
     public static defaultProps = {
         onValidationChange: logger.error,
         canSubmit: true,
     };
 
-    public constructor(props) {
+    public constructor(props: IProps) {
         super(props);
 
         this.state = {
@@ -115,7 +121,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         };
     }
 
-    private onSubmit = async (ev): Promise<void> => {
+    private onSubmit = async (
+        ev: BaseSyntheticEvent<Event, EventTarget & HTMLFormElement, EventTarget & HTMLFormElement>,
+    ): Promise<void> => {
         ev.preventDefault();
         ev.persist();
 
@@ -152,7 +160,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         }
     };
 
-    private doSubmit(ev): void {
+    private doSubmit(
+        ev: BaseSyntheticEvent<Event, EventTarget & HTMLFormElement, EventTarget & HTMLFormElement>,
+    ): void {
         PosthogAnalytics.instance.setAuthenticationType("Password");
 
         const email = this.state.email.trim();
@@ -248,7 +258,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         });
     }
 
-    private onEmailChange = (ev): void => {
+    private onEmailChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {
         this.setState({
             email: ev.target.value.trim(),
         });
@@ -277,7 +287,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         ],
     });
 
-    private onPasswordChange = (ev): void => {
+    private onPasswordChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {
         this.setState({
             password: ev.target.value,
         });
@@ -287,7 +297,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         this.markFieldValid(RegistrationField.Password, result.valid);
     };
 
-    private onPasswordConfirmChange = (ev): void => {
+    private onPasswordConfirmChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {
         this.setState({
             passwordConfirm: ev.target.value,
         });
@@ -297,19 +307,19 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         this.markFieldValid(RegistrationField.PasswordConfirm, result.valid);
     };
 
-    private onPhoneCountryChange = (newVal): void => {
+    private onPhoneCountryChange = (newVal: PhoneNumberCountryDefinition): void => {
         this.setState({
             phoneCountry: newVal.iso2,
         });
     };
 
-    private onPhoneNumberChange = (ev): void => {
+    private onPhoneNumberChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {
         this.setState({
             phoneNumber: ev.target.value,
         });
     };
 
-    private onPhoneNumberValidate = async (fieldState): Promise<IValidationResult> => {
+    private onPhoneNumberValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
         const result = await this.validatePhoneNumberRules(fieldState);
         this.markFieldValid(RegistrationField.PhoneNumber, result.valid);
         return result;
@@ -334,13 +344,13 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         ],
     });
 
-    private onUsernameChange = (ev): void => {
+    private onUsernameChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {
         this.setState({
             username: ev.target.value,
         });
     };
 
-    private onUsernameValidate = async (fieldState): Promise<IValidationResult> => {
+    private onUsernameValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
         const result = await this.validateUsernameRules(fieldState);
         this.markFieldValid(RegistrationField.Username, result.valid);
         return result;