Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/ts/12

 Conflicts:

	src/components/structures/InteractiveAuth.js

src/components/views/auth/AuthBody.tsx

@@ -19,7 +19,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.AuthBody")
 export default class AuthBody extends React.PureComponent {
-    render() {
+    public render(): React.ReactNode {
         return <div className="mx_AuthBody">
             { this.props.children }
         </div>;

src/components/views/auth/AuthFooter.tsx

@@ -22,7 +22,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.AuthFooter")
 export default class AuthFooter extends React.Component {
-    render() {
+    public render(): React.ReactNode {
         return (
             <div className="mx_AuthFooter">
                 <a href="https://matrix.org" target="_blank" rel="noreferrer noopener">{ _t("powered by Matrix") }</a>

src/components/views/auth/AuthHeader.tsx

@@ -16,20 +16,17 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AuthHeaderLogo from "./AuthHeaderLogo";
+import LanguageSelector from "./LanguageSelector";
+
+interface IProps {
+    disableLanguageSelector?: boolean;
+}
 
 @replaceableComponent("views.auth.AuthHeader")
-export default class AuthHeader extends React.Component {
-    static propTypes = {
-        disableLanguageSelector: PropTypes.bool,
-    };
-
-    render() {
-        const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo');
-        const LanguageSelector = sdk.getComponent('views.auth.LanguageSelector');
-
+export default class AuthHeader extends React.Component<IProps> {
+    public render(): React.ReactNode {
         return (
             <div className="mx_AuthHeader">
                 <AuthHeaderLogo />

src/components/views/auth/AuthHeaderLogo.tsx

@@ -19,7 +19,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.AuthHeaderLogo")
 export default class AuthHeaderLogo extends React.PureComponent {
-    render() {
+    public render(): React.ReactNode {
         return <div className="mx_AuthHeaderLogo">
             Matrix
         </div>;

src/components/views/auth/AuthPage.tsx

@@ -17,18 +17,16 @@ limitations under the License.
 */
 
 import React from 'react';
-import * as sdk from '../../../index';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AuthFooter from "./AuthFooter";
 
 @replaceableComponent("views.auth.AuthPage")
 export default class AuthPage extends React.PureComponent {
-    render() {
-        const AuthFooter = sdk.getComponent('auth.AuthFooter');
-
+    public render(): React.ReactNode {
         return (
             <div className="mx_AuthPage">
                 <div className="mx_AuthPage_modal">
-                    {this.props.children}
+                    { this.props.children }
                 </div>
                 <AuthFooter />
             </div>

src/components/views/auth/CaptchaForm.tsx

@@ -15,66 +15,74 @@ limitations under the License.
 */
 
 import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const DIV_ID = 'mx_recaptcha';
 
+interface ICaptchaFormProps {
+    sitePublicKey: string;
+    onCaptchaResponse: (response: string) => void;
+}
+
+interface ICaptchaFormState {
+    errorText?: string;
+
+}
+
 /**
  * A pure UI component which displays a captcha form.
  */
 @replaceableComponent("views.auth.CaptchaForm")
-export default class CaptchaForm extends React.Component {
-    static propTypes = {
-        sitePublicKey: PropTypes.string,
-
-        // called with the captcha response
-        onCaptchaResponse: PropTypes.func,
-    };
-
+export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICaptchaFormState> {
     static defaultProps = {
         onCaptchaResponse: () => {},
     };
 
-    constructor(props) {
+    private captchaWidgetId?: string;
+    private recaptchaContainer = createRef<HTMLDivElement>();
+
+    constructor(props: ICaptchaFormProps) {
         super(props);
 
         this.state = {
-            errorText: null,
+            errorText: undefined,
         };
 
-        this._captchaWidgetId = null;
-
-        this._recaptchaContainer = createRef();
-
         CountlyAnalytics.instance.track("onboarding_grecaptcha_begin");
     }
 
     componentDidMount() {
         // Just putting a script tag into the returned jsx doesn't work, annoyingly,
         // so we do this instead.
-        if (global.grecaptcha) {
+        if (this.isRecaptchaReady()) {
             // already loaded
-            this._onCaptchaLoaded();
+            this.onCaptchaLoaded();
         } else {
             console.log("Loading recaptcha script...");
-            window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();};
+            window.mxOnRecaptchaLoaded = () => { this.onCaptchaLoaded(); };
             const scriptTag = document.createElement('script');
             scriptTag.setAttribute(
-                'src', `https://www.recaptcha.net/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit`,
+                'src', `https://www.recaptcha.net/recaptcha/api.js?onload=mxOnRecaptchaLoaded&render=explicit`,
             );
-            this._recaptchaContainer.current.appendChild(scriptTag);
+            this.recaptchaContainer.current.appendChild(scriptTag);
         }
     }
 
     componentWillUnmount() {
-        this._resetRecaptcha();
+        this.resetRecaptcha();
     }
 
-    _renderRecaptcha(divId) {
-        if (!global.grecaptcha) {
+    // Borrowed directly from: https://github.com/codeep/react-recaptcha-google/commit/e118fa5670fa268426969323b2e7fe77698376ba
+    private isRecaptchaReady(): boolean {
+        return typeof window !== "undefined" &&
+            typeof global.grecaptcha !== "undefined" &&
+            typeof global.grecaptcha.render === 'function';
+    }
+
+    private renderRecaptcha(divId: string) {
+        if (!this.isRecaptchaReady()) {
             console.error("grecaptcha not loaded!");
             throw new Error("Recaptcha did not load successfully");
         }
@@ -84,26 +92,26 @@ export default class CaptchaForm extends React.Component {
             console.error("No public key for recaptcha!");
             throw new Error(
                 "This server has not supplied enough information for Recaptcha "
-                    + "authentication");
+                + "authentication");
         }
 
         console.info("Rendering to %s", divId);
-        this._captchaWidgetId = global.grecaptcha.render(divId, {
+        this.captchaWidgetId = global.grecaptcha.render(divId, {
             sitekey: publicKey,
             callback: this.props.onCaptchaResponse,
         });
     }
 
-    _resetRecaptcha() {
-        if (this._captchaWidgetId !== null) {
-            global.grecaptcha.reset(this._captchaWidgetId);
+    private resetRecaptcha() {
+        if (this.captchaWidgetId !== null) {
+            global.grecaptcha.reset(this.captchaWidgetId);
         }
     }
 
-    _onCaptchaLoaded() {
+    private onCaptchaLoaded() {
         console.log("Loaded recaptcha script.");
         try {
-            this._renderRecaptcha(DIV_ID);
+            this.renderRecaptcha(DIV_ID);
             // clear error if re-rendered
             this.setState({
                 errorText: null,
@@ -128,10 +136,10 @@ export default class CaptchaForm extends React.Component {
         }
 
         return (
-            <div ref={this._recaptchaContainer}>
-                <p>{_t(
+            <div ref={this.recaptchaContainer}>
+                <p>{ _t(
                     "This homeserver would like to make sure you are not a robot.",
-                )}</p>
+                ) }</p>
                 <div id={DIV_ID} />
                 { error }
             </div>

src/components/views/auth/CompleteSecurityBody.tsx

@@ -19,7 +19,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.CompleteSecurityBody")
 export default class CompleteSecurityBody extends React.PureComponent {
-    render() {
+    public render(): React.ReactNode {
         return <div className="mx_CompleteSecurityBody">
             { this.props.children }
         </div>;

src/components/views/auth/CountryDropdown.tsx

@@ -15,21 +15,19 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import * as sdk from '../../../index';
-
-import { COUNTRIES, getEmojiFlag } from '../../../phonenumber';
+import { COUNTRIES, getEmojiFlag, PhoneNumberCountryDefinition } from '../../../phonenumber';
 import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Dropdown from "../elements/Dropdown";
 
 const COUNTRIES_BY_ISO2 = {};
 for (const c of COUNTRIES) {
     COUNTRIES_BY_ISO2[c.iso2] = c;
 }
 
-function countryMatchesSearchQuery(query, country) {
+function countryMatchesSearchQuery(query: string, country: PhoneNumberCountryDefinition): boolean {
     // Remove '+' if present (when searching for a prefix)
     if (query[0] === '+') {
         query = query.slice(1);
@@ -41,15 +39,26 @@ function countryMatchesSearchQuery(query, country) {
     return false;
 }
 
-@replaceableComponent("views.auth.CountryDropdown")
-export default class CountryDropdown extends React.Component {
-    constructor(props) {
-        super(props);
-        this._onSearchChange = this._onSearchChange.bind(this);
-        this._onOptionChange = this._onOptionChange.bind(this);
-        this._getShortOption = this._getShortOption.bind(this);
+interface IProps {
+    value?: string;
+    onOptionChange: (country: PhoneNumberCountryDefinition) => void;
+    isSmall: boolean; // if isSmall, show +44 in the selected value
+    showPrefix: boolean;
+    className?: string;
+    disabled?: boolean;
+}
 
-        let defaultCountry = COUNTRIES[0];
+interface IState {
+    searchQuery: string;
+    defaultCountry: PhoneNumberCountryDefinition;
+}
+
+@replaceableComponent("views.auth.CountryDropdown")
+export default class CountryDropdown extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        let defaultCountry: PhoneNumberCountryDefinition = COUNTRIES[0];
         const defaultCountryCode = SdkConfig.get()["defaultCountryCode"];
         if (defaultCountryCode) {
             const country = COUNTRIES.find(c => c.iso2 === defaultCountryCode.toUpperCase());
@@ -62,7 +71,7 @@ export default class CountryDropdown extends React.Component {
         };
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         if (!this.props.value) {
             // If no value is given, we start with the default
             // country selected, but our parent component
@@ -71,21 +80,21 @@ export default class CountryDropdown extends React.Component {
         }
     }
 
-    _onSearchChange(search) {
+    private onSearchChange = (search: string): void => {
         this.setState({
             searchQuery: search,
         });
-    }
+    };
 
-    _onOptionChange(iso2) {
+    private onOptionChange = (iso2: string): void => {
         this.props.onOptionChange(COUNTRIES_BY_ISO2[iso2]);
-    }
+    };
 
-    _flagImgForIso2(iso2) {
+    private flagImgForIso2(iso2: string): React.ReactNode {
         return <div className="mx_Dropdown_option_emoji">{ getEmojiFlag(iso2) }</div>;
     }
 
-    _getShortOption(iso2) {
+    private getShortOption = (iso2: string): React.ReactNode => {
         if (!this.props.isSmall) {
             return undefined;
         }
@@ -94,14 +103,12 @@ export default class CountryDropdown extends React.Component {
             countryPrefix = '+' + COUNTRIES_BY_ISO2[iso2].prefix;
         }
         return <span className="mx_CountryDropdown_shortOption">
-            { this._flagImgForIso2(iso2) }
+            { this.flagImgForIso2(iso2) }
             { countryPrefix }
         </span>;
-    }
-
-    render() {
-        const Dropdown = sdk.getComponent('elements.Dropdown');
+    };
 
+    public render(): React.ReactNode {
         let displayedCountries;
         if (this.state.searchQuery) {
             displayedCountries = COUNTRIES.filter(
@@ -124,7 +131,7 @@ export default class CountryDropdown extends React.Component {
 
         const options = displayedCountries.map((country) => {
             return <div className="mx_CountryDropdown_option" key={country.iso2}>
-                { this._flagImgForIso2(country.iso2) }
+                { this.flagImgForIso2(country.iso2) }
                 { _t(country.name) } (+{ country.prefix })
             </div>;
         });
@@ -136,10 +143,10 @@ export default class CountryDropdown extends React.Component {
         return <Dropdown
             id="mx_CountryDropdown"
             className={this.props.className + " mx_CountryDropdown"}
-            onOptionChange={this._onOptionChange}
-            onSearchChange={this._onSearchChange}
+            onOptionChange={this.onOptionChange}
+            onSearchChange={this.onSearchChange}
             menuWidth={298}
-            getShortOption={this._getShortOption}
+            getShortOption={this.getShortOption}
             value={value}
             searchEnabled={true}
             disabled={this.props.disabled}
@@ -149,13 +156,3 @@ export default class CountryDropdown extends React.Component {
         </Dropdown>;
     }
 }
-
-CountryDropdown.propTypes = {
-    className: PropTypes.string,
-    isSmall: PropTypes.bool,
-    // if isSmall, show +44 in the selected value
-    showPrefix: PropTypes.bool,
-    onOptionChange: PropTypes.func.isRequired,
-    value: PropTypes.string,
-    disabled: PropTypes.bool,
-};

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -19,7 +19,6 @@ import classNames from 'classnames';
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { AuthType, IAuthDict, IInputs, IStageStatus } from 'matrix-js-sdk/src/interactive-auth';
 
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -27,6 +26,8 @@ import Spinner from "../elements/Spinner";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { LocalisedPolicy, Policies } from '../../../Terms';
+import Field from '../elements/Field';
+import CaptchaForm from "./CaptchaForm";
 
 /* This file contains a collection of components which are used by the
  * InteractiveAuth to prompt the user to enter the information needed
@@ -41,7 +42,7 @@ import { LocalisedPolicy, Policies } from '../../../Terms';
  *                         one HS whilst beign a guest on another).
  * loginType:              the login type of the auth stage being attempted
  * authSessionId:          session id from the server
- * clientSecret:           The client secret in use for ID server auth sessions
+ * clientSecret:           The client secret in use for identity server auth sessions
  * stageParams:            params from the server for the stage being attempted
  * errorText:              error message from a previous attempt to authenticate
  * submitAuthDict:         a function which will be called with the new auth dict
@@ -54,8 +55,8 @@ import { LocalisedPolicy, Policies } from '../../../Terms';
  *                         Defined keys for stages are:
  *                             m.login.email.identity:
  *                              * emailSid: string representing the sid of the active
- *                                          verification session from the ID server, or
- *                                          null if no session is active.
+ *                                          verification session from the identity server,
+ *                                          or null if no session is active.
  * fail:                   a function which should be called with an error object if an
  *                         error occurred during the auth stage. This will cause the auth
  *                         session to be failed and the process to go back to the start.
@@ -138,8 +139,7 @@ export class PasswordAuthEntry extends React.Component<IAuthEntryProps, IPasswor
 
         let submitButtonOrSpinner;
         if (this.props.busy) {
-            const Loader = sdk.getComponent("elements.Spinner");
-            submitButtonOrSpinner = <Loader />;
+            submitButtonOrSpinner = <Spinner />;
         } else {
             submitButtonOrSpinner = (
                 <input type="submit"
@@ -159,8 +159,6 @@ export class PasswordAuthEntry extends React.Component<IAuthEntryProps, IPasswor
             );
         }
 
-        const Field = sdk.getComponent('elements.Field');
-
         return (
             <div>
                 <p>{ _t("Confirm your identity by entering your account password below.") }</p>
@@ -210,13 +208,11 @@ export class RecaptchaAuthEntry extends React.Component<IRecaptchaAuthEntryProps
 
     render() {
         if (this.props.busy) {
-            const Loader = sdk.getComponent("elements.Spinner");
-            return <Loader />;
+            return <Spinner />;
         }
 
         let errorText = this.props.errorText;
 
-        const CaptchaForm = sdk.getComponent("views.auth.CaptchaForm");
         let sitePublicKey;
         if (!this.props.stageParams || !this.props.stageParams.public_key) {
             errorText = _t(
@@ -364,8 +360,7 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
 
     render() {
         if (this.props.busy) {
-            const Loader = sdk.getComponent("elements.Spinner");
-            return <Loader />;
+            return <Spinner />;
         }
 
         const checkboxes = [];
@@ -395,13 +390,15 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
         let submitButton;
         if (this.props.showContinue !== false) {
             // XXX: button classes
-            submitButton = <button className="mx_InteractiveAuthEntryComponents_termsSubmit mx_GeneralButton"
-                onClick={this.trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
+            submitButton = <button
+                className="mx_InteractiveAuthEntryComponents_termsSubmit mx_GeneralButton"
+                onClick={this.trySubmit}
+                disabled={!allChecked}>{ _t("Accept") }</button>;
         }
 
         return (
             <div>
-                <p>{_t("Please review and accept the policies of this homeserver:")}</p>
+                <p>{ _t("Please review and accept the policies of this homeserver:") }</p>
                 { checkboxes }
                 { errorSection }
                 { submitButton }
@@ -564,8 +561,7 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
 
     render() {
         if (this.state.requestingToken) {
-            const Loader = sdk.getComponent("elements.Spinner");
-            return <Loader />;
+            return <Spinner />;
         } else {
             const enableSubmit = Boolean(this.state.token);
             const submitClasses = classNames({
@@ -593,15 +589,17 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
                                 className="mx_InteractiveAuthEntryComponents_msisdnEntry"
                                 value={this.state.token}
                                 onChange={this.onTokenChange}
-                                aria-label={ _t("Code")}
+                                aria-label={_t("Code")}
                             />
                             <br />
-                            <input type="submit" value={_t("Submit")}
+                            <input
+                                type="submit"
+                                value={_t("Submit")}
                                 className={submitClasses}
                                 disabled={!enableSubmit}
                             />
                         </form>
-                        {errorSection}
+                        { errorSection }
                     </div>
                 </div>
             );
@@ -697,21 +695,21 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
             <AccessibleButton
                 onClick={this.props.onCancel}
                 kind={this.props.continueKind ? (this.props.continueKind + '_outline') : 'primary_outline'}
-            >{_t("Cancel")}</AccessibleButton>
+            >{ _t("Cancel") }</AccessibleButton>
         );
         if (this.state.phase === SSOAuthEntry.PHASE_PREAUTH) {
             continueButton = (
                 <AccessibleButton
                     onClick={this.onStartAuthClick}
                     kind={this.props.continueKind || 'primary'}
-                >{this.props.continueText || _t("Single Sign On")}</AccessibleButton>
+                >{ this.props.continueText || _t("Single Sign On") }</AccessibleButton>
             );
         } else {
             continueButton = (
                 <AccessibleButton
                     onClick={this.onConfirmClick}
                     kind={this.props.continueKind || 'primary'}
-                >{this.props.continueText || _t("Confirm")}</AccessibleButton>
+                >{ this.props.continueText || _t("Confirm") }</AccessibleButton>
             );
         }
 
@@ -733,8 +731,8 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
         return <React.Fragment>
             { errorSection }
             <div className="mx_InteractiveAuthEntryComponents_sso_buttons">
-                {cancelButton}
-                {continueButton}
+                { cancelButton }
+                { continueButton }
             </div>
         </React.Fragment>;
     }
@@ -805,7 +803,7 @@ export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
                 <a href="" ref={this.fallbackButton} onClick={this.onShowFallbackClick}>{
                     _t("Start authentication")
                 }</a>
-                {errorSection}
+                { errorSection }
             </div>
         );
     }

src/components/views/auth/LanguageSelector.tsx

@@ -18,21 +18,23 @@ import SdkConfig from "../../../SdkConfig";
 import { getCurrentLanguage } from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
 import PlatformPeg from "../../../PlatformPeg";
-import * as sdk from '../../../index';
 import React from 'react';
 import { SettingLevel } from "../../../settings/SettingLevel";
+import LanguageDropdown from "../elements/LanguageDropdown";
 
-function onChange(newLang) {
+function onChange(newLang: string): void {
     if (getCurrentLanguage() !== newLang) {
         SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLang);
         PlatformPeg.get().reload();
     }
 }
 
-export default function LanguageSelector({ disabled }) {
-    if (SdkConfig.get()['disable_login_language_selector']) return <div />;
+interface IProps {
+    disabled?: boolean;
+}
 
-    const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
+export default function LanguageSelector({ disabled }: IProps): JSX.Element {
+    if (SdkConfig.get()['disable_login_language_selector']) return <div />;
     return <LanguageDropdown
         className="mx_AuthBody_language"
         onOptionChange={onChange}

src/components/views/auth/PasswordLogin.tsx

@@ -416,7 +416,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                 kind="link"
                 onClick={this.onForgotPasswordClick}
             >
-                {_t("Forgot password?")}
+                { _t("Forgot password?") }
             </AccessibleButton>;
         }
 
@@ -441,16 +441,16 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                         disabled={this.props.disableSubmit}
                     >
                         <option key={LoginField.MatrixId} value={LoginField.MatrixId}>
-                            {_t('Username')}
+                            { _t('Username') }
                         </option>
                         <option
                             key={LoginField.Email}
                             value={LoginField.Email}
                         >
-                            {_t('Email address')}
+                            { _t('Email address') }
                         </option>
                         <option key={LoginField.Password} value={LoginField.Password}>
-                            {_t('Phone')}
+                            { _t('Phone') }
                         </option>
                     </Field>
                 </div>
@@ -460,8 +460,8 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         return (
             <div>
                 <form onSubmit={this.onSubmitForm}>
-                    {loginType}
-                    {loginField}
+                    { loginType }
+                    { loginField }
                     <Field
                         className={pwFieldClass}
                         type="password"
@@ -474,7 +474,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                         onValidate={this.onPasswordValidate}
                         ref={field => this[LoginField.Password] = field}
                     />
-                    {forgotPasswordJsx}
+                    { forgotPasswordJsx }
                     { !this.props.busy && <input className="mx_Login_submit"
                         type="submit"
                         value={_t('Sign in')}

src/components/views/auth/RegistrationForm.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 
 import React from 'react';
 
-import * as sdk from '../../../index';
 import * as Email from '../../../email';
 import { looksValid as phoneNumberLooksValid } from '../../../phonenumber';
 import Modal from '../../../Modal';
@@ -31,6 +30,7 @@ import CountlyAnalytics from "../../../CountlyAnalytics";
 import Field from '../elements/Field';
 import RegistrationEmailPromptDialog from '../dialogs/RegistrationEmailPromptDialog';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import CountryDropdown from "./CountryDropdown";
 
 enum RegistrationField {
     Email = "field_email",
@@ -471,7 +471,6 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         if (!this.showPhoneNumber()) {
             return null;
         }
-        const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
         const phoneLabel = this.authStepIsRequired('m.login.msisdn') ?
             _t("Phone") :
             _t("Phone (optional)");
@@ -538,15 +537,15 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
             <div>
                 <form onSubmit={this.onSubmit}>
                     <div className="mx_AuthBody_fieldRow">
-                        {this.renderUsername()}
+                        { this.renderUsername() }
                     </div>
                     <div className="mx_AuthBody_fieldRow">
-                        {this.renderPassword()}
-                        {this.renderPasswordConfirm()}
+                        { this.renderPassword() }
+                        { this.renderPasswordConfirm() }
                     </div>
                     <div className="mx_AuthBody_fieldRow">
-                        {this.renderEmail()}
-                        {this.renderPhoneNumber()}
+                        { this.renderEmail() }
+                        { this.renderPhoneNumber() }
                     </div>
                     { emailHelperText }
                     { registerButton }

src/components/views/auth/Welcome.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import classNames from "classnames";
 
-import * as sdk from '../../../index';
+import * as sdk from "../../../index";
 import SdkConfig from '../../../SdkConfig';
 import AuthPage from "./AuthPage";
 import { _td } from "../../../languageHandler";
@@ -25,21 +25,26 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import LanguageSelector from "./LanguageSelector";
 
 // translatable strings for Welcome pages
 _td("Sign in with SSO");
 
+interface IProps {
+
+}
+
 @replaceableComponent("views.auth.Welcome")
-export default class Welcome extends React.PureComponent {
-    constructor(props) {
+export default class Welcome extends React.PureComponent<IProps> {
+    constructor(props: IProps) {
         super(props);
 
         CountlyAnalytics.instance.track("onboarding_welcome");
     }
 
-    render() {
-        const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage');
-        const LanguageSelector = sdk.getComponent('auth.LanguageSelector');
+    public render(): React.ReactNode {
+        // FIXME: Using an import will result in wrench-element-tests failures
+        const EmbeddedPage = sdk.getComponent("structures.EmbeddedPage");
 
         const pagesConfig = SdkConfig.get().embeddedPages;
         let pageUrl = null;