add popup for disabling multi device

_locales/en/messages.json

@@ -1319,16 +1319,20 @@
     "description": "Title of the typing indicators setting"
   },
   "multiDeviceDisabledTemporary": {
-    "message": "<FIXME placeholder>",
+    "message": "MultiDevice disabled temporarily",
     "description": "Description of why multi device is disabled"
   },
-  "multiDeviceDisabledTemporaryToastMessage": {
-    "message": "<FIXME placeholder>",
-    "description": "Description of why multi device is disabled on a toast on app start"
+  "multiDeviceDisabledTemporaryTitle": {
+    "message": "Changes to Multi-device",
+    "description": "Description of why multi device is disabled on app start"
   },
-  "multiDeviceDisabledTemporaryToastDescription": {
-    "message": "<FIXME placeholder> ",
-    "description": "Description of why multi device is disabled on a toast on app start"
+  "multiDeviceDisabledTemporaryDescriptionPrimary": {
+    "message": "You’re seeing this because you have a secondary device linked to your Session ID. To improve reliability and stability, we’ve decided to temporarily disable Session’s multi-device functionality on <span style=\"color:#00f782\">August 6th</span>. Device linking has been disabled, and the next update will erase existing secondary devices. </br></br>To read more about this change, visit the Session FAQ at <a href=\"https://getsession.org/faq\">getsession.org/faq</a>",
+    "description": "Description of why multi device is disabled on app start for a primary device"
+  },
+  "multiDeviceDisabledTemporaryDescriptionSecondary": {
+    "message": "You’re seeing this because this is a secondary device in a multi-device setup. To improve reliability and stability, we’ve decided to temporarily disable Session’s multi-device functionality on <span style=\"color:#00f782\">August 6th</span>. Device linking has been disabled, and the next update will erase existing secondary devices.</br>To read more about this change, visit the Session FAQ at <a href=\"https://getsession.org/faq\">getsession.org/faq</a>",
+    "description": "Description of why multi device is disabled on app start for a secondary device"
   },
   "messageTTL": {
     "message": "Message TTL",

js/views/inbox_view.js

@@ -90,12 +90,14 @@
         type: 'success',
       });
     },
-    showConfirmationDialog({ title, message, onOk, onCancel }) {
+    showConfirmationDialog({ title, message, messageSub, onOk, onCancel, hideCancel }) {
       window.confirmationDialog({
         title,
         message,
         resolve: onOk,
         reject: onCancel,
+        hideCancel,
+        messageSub,
       });
     },
   });

stylesheets/_theme_dark.scss

@@ -242,7 +242,7 @@ body.dark-theme {
   }
 
   a {
-    color: $blue;
+    color: $session-color-green;
   }
 
   .file-input {
@@ -410,7 +410,7 @@ body.dark-theme {
       }
     }
     a.link {
-      color: #2090ea;
+      color: $session-color-green;
     }
 
     .progress {

ts/components/session/ActionsPanel.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
 import { Avatar } from '../Avatar';
 import { PropsData as ConversationListItemPropsType } from '../ConversationListItem';
+import { MultiDeviceProtocol } from '../../session/protocols';
 
 export enum SectionType {
   Profile,
@@ -57,17 +58,24 @@ export class ActionsPanel extends React.Component<Props, State> {
           'refreshAvatarCallback'
         );
         setTimeout(
-          () =>
-            window.pushToast({
-              title: window.i18n('multiDeviceDisabledTemporaryToastMessage'),
-              description: window.i18n(
-                'multiDeviceDisabledTemporaryToastMessage'
-              ),
-              type: 'warning',
-              id: 'multiDeviceDisabledTemporaryToastMessage',
-              shouldFade: false,
-            }),
-          4000
+          async () => {
+            const hasMultipleDevices = (await MultiDeviceProtocol.getOurDevices()).length > 1;
+            const primaryWithSecondary = !window.textsecure.storage.get('isSecondaryDevice') && hasMultipleDevices;
+            const isSecondary = !!window.textsecure.storage.get('isSecondaryDevice');
+
+            if (!primaryWithSecondary && !isSecondary) {
+              return;
+            }
+
+            const opts = {
+              hideCancel: true,
+              title: window.i18n('multiDeviceDisabledTemporaryTitle'),
+              message: primaryWithSecondary ? window.i18n('multiDeviceDisabledTemporaryDescriptionPrimary') : window.i18n('multiDeviceDisabledTemporaryDescriptionSecondary')
+              ,
+            };
+            window.Whisper.events.trigger('showConfirmationDialog', opts);
+          },
+          1000
         );
       }
     );

ts/components/session/RegistrationTabs.tsx

@@ -557,7 +557,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
             SessionButtonType.BrandOutline,
             SessionButtonColor.Green
           )}
-          <h4>{or}</h4>
+          {/*<h4>{or}</h4>*/}
           {/* FIXME enable back to allow linking of device
               this.renderLinkDeviceToExistingAccountButton() */}
         </div>
@@ -584,7 +584,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
     return (
       <div>
         {this.renderContinueYourSessionButton()}
-        <h4>{or}</h4>
+          {/*<h4>{or}</h4>*/}
         {/* FIXME enable back to allow linking of device
             this.renderLinkDeviceToExistingAccountButton()*/}
       </div>

ts/components/session/SessionConfirm.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SessionModal } from './SessionModal';
 import { SessionButton, SessionButtonColor } from './SessionButton';
+import { SessionHtmlRenderer } from './SessionHTMLRenderer';
 
 interface Props {
   message: string;
@@ -61,7 +62,7 @@ export class SessionConfirm extends React.Component<Props> {
         {!showHeader && <div className="spacer-lg" />}
 
         <div className="session-modal__centered">
-          <span className={messageSubText}>{message}</span>
+          <SessionHtmlRenderer tag="span" className={messageSubText} html={message} />
           {messageSub && (
             <span className="session-confirm-sub-message subtle">
               {messageSub}

ts/components/session/SessionHTMLRenderer.tsx

@@ -5,6 +5,7 @@ interface ReceivedProps {
   html: string;
   tag?: string;
   key?: any;
+  className?: string;
 }
 
 // Needed because of https://github.com/microsoft/tslint-microsoft-contrib/issues/339
@@ -14,14 +15,16 @@ export const SessionHtmlRenderer: React.SFC<Props> = ({
   tag = 'div',
   key,
   html,
+  className,
 }) => {
   const clean = DOMPurify.sanitize(html, {
     USE_PROFILES: { html: true },
-    FORBID_ATTR: ['style', 'script'],
+    FORBID_ATTR: ['script'],
   });
 
   return React.createElement(tag, {
     key,
+    className,
     dangerouslySetInnerHTML: { __html: clean },
   });
 };