Move the safety number viewer into modal

_locales/en/messages.json

@@ -1123,7 +1123,7 @@
     "description": "This is a menu item for viewing all media (images + video) in a conversation, using the imperative case, as in a command."
   },
   "verifyHelp": {
-    "message": "If you wish to verify the security of your end-to-end encryption with $name$, compare the numbers above with the numbers on their device.",
+    "message": "To verify the security of your end-to-end encryption with $name$, compare the numbers above with their device.",
     "placeholders": {
       "name": {
         "content": "$1",
@@ -2148,6 +2148,10 @@
       }
     }
   },
+  "SafetyNumberModal__title": {
+    "message": "Verify Safety Number",
+    "description": "Title for the modal for safety number verification"
+  },
   "safetyNumberChanged": {
     "message": "Safety Number has changed",
     "description": "A notification shown in the conversation when a contact reinstalls"

background.html

@@ -106,12 +106,6 @@ <h3>{{ welcomeToSignal }}</h3>
       </div>
     </script>
 
-    <script type="text/x-tmpl-mustache" id="key-verification">
-      <div class="container" tabindex="0">
-        <div class="key-verification-wrapper"></div>
-      </div>
-    </script>
-
     <script type="text/x-tmpl-mustache" id="link-flow-template">
       <div class='module-title-bar-drag-area'></div>
 
@@ -267,10 +261,6 @@ <h3>{{ welcomeToSignal }}</h3>
       type="text/javascript"
       src="js/views/react_wrapper_view.js"
     ></script>
-    <script
-      type="text/javascript"
-      src="js/views/key_verification_view.js"
-    ></script>
     <script
       type="text/javascript"
       src="ts/shims/showConfirmationDialog.js"

stylesheets/components/SafetyNumberViewer.scss

@@ -2,17 +2,15 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .module-SafetyNumberViewer {
+  text-align: center;
+
   &__icon {
     height: 1.25em;
     width: 1.25em;
     vertical-align: text-bottom;
     display: inline-block;
   }
 
-  &__verification-label {
-    margin: 10px 0;
-  }
-
   &__icon--verified {
     display: inline-block;
     height: 1.25em;
@@ -55,33 +53,14 @@
     }
   }
 
-  &__verify-container {
-    text-align: center;
-  }
-
-  &__button--verify {
-    border-radius: 5px;
-    font-weight: bold;
-    margin: 0;
-    outline: none;
-    padding: 10px;
-  }
-
   &__number {
-    background: #f6f6f6;
-    border-radius: 5px;
-    border: solid 1px #dedede;
+    background: $color-gray-02;
+    border-radius: 8px;
     font-family: monospace;
-    margin: 20px auto 20px auto;
-    padding: 10px;
-    text-align: center;
-    width: 16em;
-
-    @include dark-theme {
-      background: #1b1b1b;
-      border: solid 1px #848484;
-      color: #f6f6f6;
-    }
+    height: 100px;
+    margin: 24px auto;
+    padding: 24px;
+    width: 240px;
   }
 
   &__verification-status {
@@ -119,4 +98,12 @@
       }
     }
   }
+
+  &__button {
+    margin-top: 30px;
+  }
+
+  &__modal.module-Modal {
+    max-width: 500px;
+  }
 }

test/index.html

@@ -79,12 +79,6 @@ <h3>{{ welcomeToSignal }}</h3>
       </div>
     </script>
 
-    <script type="text/x-tmpl-mustache" id="key-verification">
-      <div class="container" tabindex="0">
-        <div class="key-verification-wrapper"></div>
-      </div>
-    </script>
-
     <script type="text/x-tmpl-mustache" id="link-flow-template">
       <div class='module-title-bar-drag-area'></div>
 
@@ -263,11 +257,6 @@ <h3>{{ welcomeToSignal }}</h3>
       src="../js/views/contact_list_view.js"
       data-cover
     ></script>
-    <script
-      type="text/javascript"
-      src="../js/views/key_verification_view.js"
-      data-cover
-    ></script>
     <script
       type="text/javascript"
       src="../js/views/group_member_list_view.js"

ts/components/GlobalModalContainer.tsx

@@ -10,6 +10,9 @@ type PropsType = {
   // ProfileEditor
   isProfileEditorVisible: boolean;
   renderProfileEditor: () => JSX.Element;
+  // SafetyNumberModal
+  safetyNumberModalContactId?: string;
+  renderSafetyNumber: () => JSX.Element;
 };
 
 export const GlobalModalContainer = ({
@@ -19,7 +22,14 @@ export const GlobalModalContainer = ({
   // ProfileEditor
   isProfileEditorVisible,
   renderProfileEditor,
+  // SafetyNumberModal
+  safetyNumberModalContactId,
+  renderSafetyNumber,
 }: PropsType): JSX.Element | null => {
+  if (safetyNumberModalContactId) {
+    return renderSafetyNumber();
+  }
+
   if (contactModalState) {
     return renderContactModal();
   }

ts/components/SafetyNumberModal.tsx

@@ -0,0 +1,31 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { Modal } from './Modal';
+import {
+  SafetyNumberViewer,
+  PropsType as SafetyNumberViewerPropsType,
+} from './SafetyNumberViewer';
+
+type PropsType = {
+  toggleSafetyNumberModal: () => unknown;
+} & SafetyNumberViewerPropsType;
+
+export const SafetyNumberModal = ({
+  i18n,
+  toggleSafetyNumberModal,
+  ...safetyNumberViewerProps
+}: PropsType): JSX.Element | null => {
+  return (
+    <Modal
+      hasXButton
+      i18n={i18n}
+      moduleClassName="module-SafetyNumberViewer__modal"
+      onClose={() => toggleSafetyNumberModal()}
+      title={i18n('SafetyNumberModal__title')}
+    >
+      <SafetyNumberViewer i18n={i18n} {...safetyNumberViewerProps} />
+    </Modal>
+  );
+};

ts/components/SafetyNumberViewer.stories.tsx

@@ -50,12 +50,6 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   generateSafetyNumber: action('generate-safety-number'),
   i18n,
   safetyNumber: text('safetyNumber', overrideProps.safetyNumber || 'XXX'),
-  safetyNumberChanged: boolean(
-    'safetyNumberChanged',
-    overrideProps.safetyNumberChanged !== undefined
-      ? overrideProps.safetyNumberChanged
-      : false
-  ),
   toggleVerified: action('toggle-verified'),
   verificationDisabled: boolean(
     'verificationDisabled',
@@ -95,16 +89,6 @@ story.add('Verification Disabled', () => {
   );
 });
 
-story.add('Safety Number Changed', () => {
-  return (
-    <SafetyNumberViewer
-      {...createProps({
-        safetyNumberChanged: true,
-      })}
-    />
-  );
-});
-
 story.add('Safety Number (dialog close)', () => {
   return (
     <SafetyNumberViewer

ts/components/SafetyNumberViewer.tsx

@@ -2,17 +2,17 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
+import { Button, ButtonVariant } from './Button';
 import { ConversationType } from '../state/ducks/conversations';
-import { LocalizerType } from '../types/Util';
 import { Intl } from './Intl';
+import { LocalizerType } from '../types/Util';
 
 export type PropsType = {
   contact?: ConversationType;
   generateSafetyNumber: (contact: ConversationType) => void;
   i18n: LocalizerType;
   onClose?: () => void;
   safetyNumber: string;
-  safetyNumberChanged?: boolean;
   toggleVerified: (contact: ConversationType) => void;
   verificationDisabled: boolean;
 };
@@ -23,7 +23,6 @@ export const SafetyNumberViewer = ({
   i18n,
   onClose,
   safetyNumber,
-  safetyNumberChanged,
   toggleVerified,
   verificationDisabled,
 }: PropsType): JSX.Element | null => {
@@ -42,9 +41,7 @@ export const SafetyNumberViewer = ({
   if (!contact.phoneNumber) {
     return (
       <div className="module-SafetyNumberViewer">
-        <div className="module-SafetyNumberViewer__verify-container">
-          {i18n('cannotGenerateSafetyNumber')}
-        </div>
+        {i18n('cannotGenerateSafetyNumber')}
       </div>
     );
   }
@@ -59,9 +56,6 @@ export const SafetyNumberViewer = ({
 
   const { isVerified } = contact;
   const verifiedStatusKey = isVerified ? 'isVerified' : 'isNotVerified';
-  const safetyNumberChangedKey = safetyNumberChanged
-    ? 'changedRightAfterVerify'
-    : 'yourSafetyNumberWith';
   const verifyButtonText = isVerified ? i18n('unverify') : i18n('verify');
 
   return (
@@ -73,16 +67,6 @@ export const SafetyNumberViewer = ({
           </button>
         </div>
       )}
-      <div className="module-SafetyNumberViewer__verification-label">
-        <Intl
-          i18n={i18n}
-          id={safetyNumberChangedKey}
-          components={{
-            name1: boldName,
-            name2: boldName,
-          }}
-        />
-      </div>
       <div className="module-SafetyNumberViewer__number">
         {safetyNumber || getPlaceholder()}
       </div>
@@ -95,18 +79,16 @@ export const SafetyNumberViewer = ({
         )}
         <Intl i18n={i18n} id={verifiedStatusKey} components={[boldName]} />
       </div>
-      <div className="module-SafetyNumberViewer__verify-container">
-        <button
-          className="module-SafetyNumberViewer__button--verify"
+      <div className="module-SafetyNumberViewer__button">
+        <Button
           disabled={verificationDisabled}
           onClick={() => {
             toggleVerified(contact);
           }}
-          tabIndex={0}
-          type="button"
+          variant={ButtonVariant.Secondary}
         >
           {verifyButtonText}
-        </button>
+        </Button>
       </div>
     </div>
   );