Change new session toast to unverified

This also changes text to show the device ID and name in the toast.

Fixes https://github.com/vector-im/riot-web/issues/11916

res/css/structures/_ToastContainer.scss

@@ -98,5 +98,9 @@ limitations under the License.
             margin: 4px 0 11px 0;
             font-size: 12px;
         }
+
+        .mx_Toast_deviceID {
+            font-size: 10px;
+        }
     }
 }

src/DeviceListener.js

@@ -21,7 +21,7 @@ import { _t } from './languageHandler';
 import ToastStore from './stores/ToastStore';
 
 function toastKey(deviceId) {
-    return 'newsession_' + deviceId;
+    return 'unverified_session_' + deviceId;
 }
 
 const KEY_BACKUP_POLL_INTERVAL = 5 * 60 * 1000;
@@ -160,10 +160,10 @@ export default class DeviceListener {
                 this._activeNagToasts.add(device.deviceId);
                 ToastStore.sharedInstance().addOrReplaceToast({
                     key: toastKey(device.deviceId),
-                    title: _t("New Session"),
+                    title: _t("Unverified session"),
                     icon: "verification_warning",
-                    props: {deviceId: device.deviceId},
-                    component: sdk.getComponent("toasts.NewSessionToast"),
+                    props: { device },
+                    component: sdk.getComponent("toasts.UnverifiedSessionToast"),
                 });
                 newActiveToasts.add(device.deviceId);
             }

src/components/views/toasts/UnverifiedSessionToast.js

@@ -24,11 +24,11 @@ import NewSessionReviewDialog from '../dialogs/NewSessionReviewDialog';
 import FormButton from '../elements/FormButton';
 import { replaceableComponent } from '../../../utils/replaceableComponent';
 
-@replaceableComponent("views.toasts.VerifySessionToast")
-export default class VerifySessionToast extends React.PureComponent {
+@replaceableComponent("views.toasts.UnverifiedSessionToast")
+export default class UnverifiedSessionToast extends React.PureComponent {
     static propTypes = {
         toastKey: PropTypes.string.isRequired,
-        deviceId: PropTypes.string,
+        device: PropTypes.object.isRequired,
     };
 
     _onLaterClick = () => {
@@ -36,9 +36,7 @@ export default class VerifySessionToast extends React.PureComponent {
     };
 
     _onReviewClick = async () => {
-        const cli = MatrixClientPeg.get();
-
-        const device = await cli.getStoredDevice(cli.getUserId(), this.props.deviceId);
+        const { device } = this.props;
 
         Modal.createTrackedDialog('New Session Review', 'Starting dialog', NewSessionReviewDialog, {
             userId: MatrixClientPeg.get().getUserId(),
@@ -47,8 +45,16 @@ export default class VerifySessionToast extends React.PureComponent {
     };
 
     render() {
+        const { device } = this.props;
+
         return (<div>
-            <div className="mx_Toast_description">{_t("Review & verify your new session")}</div>
+            <div className="mx_Toast_description">
+                <span className="mx_Toast_deviceName">
+                    {device.getDisplayName()}
+                </span> <span className="mx_Toast_deviceID">
+                    ({device.deviceId})
+                </span>
+            </div>
             <div className="mx_Toast_buttons" aria-live="off">
                 <FormButton label={_t("Later")} kind="danger" onClick={this._onLaterClick} />
                 <FormButton label={_t("Review")} onClick={this._onReviewClick} />

src/i18n/strings/en_EN.json

@@ -91,7 +91,7 @@
     "Verify this session": "Verify this session",
     "Encryption upgrade available": "Encryption upgrade available",
     "Set up encryption": "Set up encryption",
-    "New Session": "New Session",
+    "Unverified session": "Unverified session",
     "Who would you like to add to this community?": "Who would you like to add to this community?",
     "Warning: any person you add to a community will be publicly visible to anyone who knows the community ID": "Warning: any person you add to a community will be publicly visible to anyone who knows the community ID",
     "Invite new community members": "Invite new community members",
@@ -516,13 +516,12 @@
     "Headphones": "Headphones",
     "Folder": "Folder",
     "Pin": "Pin",
-    "Review & verify your new session": "Review & verify your new session",
-    "Later": "Later",
-    "Review": "Review",
     "Verify your other devices easier": "Verify your other devices easier",
     "Other users may not trust it": "Other users may not trust it",
     "Upgrade": "Upgrade",
     "Verify": "Verify",
+    "Later": "Later",
+    "Review": "Review",
     "Decline (%(counter)s)": "Decline (%(counter)s)",
     "Accept <policyLink /> to continue:": "Accept <policyLink /> to continue:",
     "Upload": "Upload",