diff --git a/res/css/_components.scss b/res/css/_components.scss
index d8e5247f9d..c8985cbb51 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -98,6 +98,7 @@
@import "./views/dialogs/_SpaceSettingsDialog.scss";
@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
@import "./views/dialogs/_TermsDialog.scss";
+@import "./views/dialogs/_UntrustedDeviceDialog.scss";
@import "./views/dialogs/_UploadConfirmDialog.scss";
@import "./views/dialogs/_UserSettingsDialog.scss";
@import "./views/dialogs/_WidgetCapabilitiesPromptDialog.scss";
diff --git a/res/css/views/dialogs/_UntrustedDeviceDialog.scss b/res/css/views/dialogs/_UntrustedDeviceDialog.scss
new file mode 100644
index 0000000000..0ecd9d4f71
--- /dev/null
+++ b/res/css/views/dialogs/_UntrustedDeviceDialog.scss
@@ -0,0 +1,26 @@
+/*
+Copyright 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.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UntrustedDeviceDialog {
+ .mx_Dialog_title {
+ display: flex;
+ align-items: center;
+
+ .mx_E2EIcon {
+ margin-left: 0;
+ }
+ }
+}
diff --git a/src/components/views/dialogs/UntrustedDeviceDialog.js b/src/components/views/dialogs/UntrustedDeviceDialog.js
new file mode 100644
index 0000000000..11cbef39a1
--- /dev/null
+++ b/src/components/views/dialogs/UntrustedDeviceDialog.js
@@ -0,0 +1,61 @@
+/*
+Copyright 2019, 2020 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.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { _t } from '../../../languageHandler';
+import * as sdk from '../../../index';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import E2EIcon from "../rooms/E2EIcon";
+
+function UntrustedDeviceDialog(props) {
+ const {device, user, onFinished} = props;
+ const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
+ const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+ let askToVerifyText;
+ let newSessionText;
+
+ if (MatrixClientPeg.get().getUserId() === user.userId) {
+ newSessionText = _t("You signed in to a new session without verifying it:");
+ askToVerifyText = _t("Verify your other session using one of the options below.");
+ } else {
+ newSessionText = _t("%(name)s (%(userId)s) signed in to a new session without verifying it:",
+ {name: user.displayName, userId: user.userId});
+ askToVerifyText = _t("Ask this user to verify their session, or manually verify it below.");
+ }
+
+ return
+
+ { _t("Not Trusted")}
+ >}
+ >
+
+
{newSessionText}
+
{device.getDisplayName()} ({device.deviceId})
+
{askToVerifyText}
+
+
+ onFinished("legacy")}>{_t("Manually Verify by Text")}
+ onFinished("sas")}>{_t("Interactively verify by Emoji")}
+ onFinished()}>{_t("Done")}
+
+ ;
+}
+
+export default UntrustedDeviceDialog;
diff --git a/src/verification.js b/src/verification.js
index 74e3897d3a..69577384a1 100644
--- a/src/verification.js
+++ b/src/verification.js
@@ -18,12 +18,12 @@ import {MatrixClientPeg} from './MatrixClientPeg';
import dis from "./dispatcher/dispatcher";
import Modal from './Modal';
import * as sdk from './index';
-import { _t } from './languageHandler';
import {RightPanelPhases} from "./stores/RightPanelStorePhases";
import {findDMForUser} from './createRoom';
import {accessSecretStorage} from './SecurityManager';
import {verificationMethods} from 'matrix-js-sdk/src/crypto';
import {Action} from './dispatcher/actions';
+import UntrustedDeviceDialog from "./components/views/dialogs/UntrustedDeviceDialog";
async function enable4SIfNeeded() {
const cli = MatrixClientPeg.get();
@@ -39,39 +39,6 @@ async function enable4SIfNeeded() {
return true;
}
-function UntrustedDeviceDialog(props) {
- const {device, user, onFinished} = props;
- const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
- const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
- let askToVerifyText;
- let newSessionText;
-
- if (MatrixClientPeg.get().getUserId() === user.userId) {
- newSessionText = _t("You signed in to a new session without verifying it:");
- askToVerifyText = _t("Verify your other session using one of the options below.");
- } else {
- newSessionText = _t("%(name)s (%(userId)s) signed in to a new session without verifying it:",
- {name: user.displayName, userId: user.userId});
- askToVerifyText = _t("Ask this user to verify their session, or manually verify it below.");
- }
-
- return
-
-
{newSessionText}
-
{device.getDisplayName()} ({device.deviceId})
-
{askToVerifyText}
-
-
- onFinished("legacy")}>{_t("Manually Verify by Text")}
- onFinished("sas")}>{_t("Interactively verify by Emoji")}
- onFinished()}>{_t("Done")}
-
- ;
-}
-
export async function verifyDevice(user, device) {
const cli = MatrixClientPeg.get();
if (cli.isGuest()) {