Convert verification and UntrustedDeviceDialog to TS

src/components/views/dialogs/UntrustedDeviceDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020, 2021 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.
@@ -14,17 +14,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React from "react";
+import { User } from "matrix-js-sdk/src/models/user";
 
-import { _t } from '../../../languageHandler';
+import { _t } from "../../../languageHandler";
-import * as sdk from '../../../index';
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import E2EIcon from "../rooms/E2EIcon";
+import AccessibleButton from "../elements/AccessibleButton";
+import BaseDialog from "./BaseDialog";
+import { IDialogProps } from "./IDialogProps";
+import { IDevice } from "../right_panel/UserInfo";
 
-function UntrustedDeviceDialog(props) {
+interface IProps extends IDialogProps {
-    const {device, user, onFinished} = props;
+    user: User;
-    const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
+    device: IDevice;
-    const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+}
+
+const UntrustedDeviceDialog: React.FC<IProps> = ({device, user, onFinished}) => {
     let askToVerifyText;
     let newSessionText;
 
@@ -51,11 +57,17 @@ function UntrustedDeviceDialog(props) {
             <p>{askToVerifyText}</p>
         </div>
         <div className='mx_Dialog_buttons'>
-            <AccessibleButton element="button" kind="secondary" onClick={() => onFinished("legacy")}>{_t("Manually Verify by Text")}</AccessibleButton>
+            <AccessibleButton element="button" kind="secondary" onClick={() => onFinished("legacy")}>
-            <AccessibleButton element="button" kind="secondary" onClick={() => onFinished("sas")}>{_t("Interactively verify by Emoji")}</AccessibleButton>
+                { _t("Manually Verify by Text") }
-            <AccessibleButton kind="primary" onClick={() => onFinished()}>{_t("Done")}</AccessibleButton>
+            </AccessibleButton>
+            <AccessibleButton element="button" kind="secondary" onClick={() => onFinished("sas")}>
+                { _t("Interactively verify by Emoji") }
+            </AccessibleButton>
+            <AccessibleButton kind="primary" onClick={() => onFinished(false)}>
+                { _t("Done") }
+            </AccessibleButton>
         </div>
     </BaseDialog>;
-}
+};
 
 export default UntrustedDeviceDialog;

src/components/views/right_panel/UserInfo.tsx

@@ -67,7 +67,7 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import RoomName from "../elements/RoomName";
 import {mediaFromMxc} from "../../../customisations/Media";
 
-interface IDevice {
+export interface IDevice {
     deviceId: string;
     ambiguous?: boolean;
     getDisplayName(): string;

src/verification.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020, 2021 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.
@@ -14,16 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { User } from "matrix-js-sdk/src/models/user";
+
+import { MatrixClientPeg } from './MatrixClientPeg';
 import dis from "./dispatcher/dispatcher";
 import Modal from './Modal';
 import * as sdk from './index';
-import {RightPanelPhases} from "./stores/RightPanelStorePhases";
+import { RightPanelPhases } from "./stores/RightPanelStorePhases";
-import {findDMForUser} from './createRoom';
+import { findDMForUser } from './createRoom';
-import {accessSecretStorage} from './SecurityManager';
+import { accessSecretStorage } from './SecurityManager';
-import {verificationMethods} from 'matrix-js-sdk/src/crypto';
+import { verificationMethods } from 'matrix-js-sdk/src/crypto';
-import {Action} from './dispatcher/actions';
+import { Action } from './dispatcher/actions';
 import UntrustedDeviceDialog from "./components/views/dialogs/UntrustedDeviceDialog";
+import {IDevice} from "./components/views/right_panel/UserInfo";
 
 async function enable4SIfNeeded() {
     const cli = MatrixClientPeg.get();
@@ -39,7 +42,7 @@ async function enable4SIfNeeded() {
     return true;
 }
 
-export async function verifyDevice(user, device) {
+export async function verifyDevice(user: User, device: IDevice) {
     const cli = MatrixClientPeg.get();
     if (cli.isGuest()) {
         dis.dispatch({action: 'require_registration'});
@@ -82,7 +85,7 @@ export async function verifyDevice(user, device) {
     });
 }
 
-export async function legacyVerifyUser(user) {
+export async function legacyVerifyUser(user: User) {
     const cli = MatrixClientPeg.get();
     if (cli.isGuest()) {
         dis.dispatch({action: 'require_registration'});
@@ -102,7 +105,7 @@ export async function legacyVerifyUser(user) {
     });
 }
 
-export async function verifyUser(user) {
+export async function verifyUser(user: User) {
     const cli = MatrixClientPeg.get();
     if (cli.isGuest()) {
         dis.dispatch({action: 'require_registration'});
@@ -122,7 +125,7 @@ export async function verifyUser(user) {
     });
 }
 
-export function pendingVerificationRequestForUser(user) {
+export function pendingVerificationRequestForUser(user: User) {
     const cli = MatrixClientPeg.get();
     const dmRoom = findDMForUser(cli, user.userId);
     if (dmRoom) {