[web] Update the login experience

Summary: Introduce a new experience based on the designs https://www.figma.com/design/XnKSb3lbPdVcvVHLis5s2g/ENG-9998---QR-code-design-doesn't-look-consistent-with-the-rest-of-the-app-(web)?node-id=13-8&t=pIC81mj6q79Z9Vvj-0 https://www.figma.com/proto/XnKSb3lbPdVcvVHLis5s2g/ENG-9998---QR-code-design-doesn't-look-consistent-with-the-rest-of-the-app-(web)?node-id=43-10&p=f&t=Fnu29MA4MBHQmYTJ-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=43%3A10 {F3866801} https://linear.app/comm/issue/ENG-10095/update-the-login-experience-on-the-web-after-we-launch-signed-device Test Plan: Clicked through the experience. Also made sure that when the flag is off, the old experience is shown. Reviewers: kamil, angelika, ashoat Reviewed By: ashoat Differential Revision: https://phab.comm.dev/D14250
CommE2E · Jan 24, 2025 · 25531c9 · 25531c9
1 parent 693c06a
commit 25531c9
Show file tree

Hide file tree

Showing 3 changed files with 213 additions and 3 deletions.
diff --git a/native/account/qr-code-screen.react.js b/native/account/qr-code-screen.react.js
@@ -74,7 +74,8 @@ function QRCodeScreen(props: QRCodeScreenProps): React.Node {
         <View style={styles.container}>
           <Text style={styles.heading}>Log in to Comm</Text>
           <Text style={styles.headingSubtext}>
-            Open the Comm app on your logged-in phone and scan the QR code below
+            Open the Comm app on your logged-in phone and scan the QR code
+            below:
           </Text>
           <View style={styles.qrCodeContainer}>
             <QRCode value={qrCodeURL} size={qrCodeSize} />

diff --git a/web/account/log-in-form.css b/web/account/log-in-form.css
@@ -83,3 +83,72 @@ div.form_qrcode_login {
   flex-direction: column;
   margin-top: 12px;
 }
+
+div.new_modal_body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 350px;
+  padding: 19px 17px;
+  border-radius: 12px;
+  background-color: #191723;
+  border: #272537 solid 1px;
+}
+
+div.new_modal_body h1 {
+  color: white;
+  font-size: var(--xl-font-20);
+  line-height: var(--line-height-display);
+  font-weight: 700;
+}
+
+div.new_modal_body .content {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+div.new_modal_body .modal_text {
+  color: white;
+  font-size: var(--s-font-14);
+  font-weight: var(--normal);
+  line-height: var(--line-height-text);
+}
+
+div.new_modal_body ul {
+  list-style-position: inside;
+}
+
+div.new_modal_body .qrCodeContainer {
+  display: flex;
+  justify-content: center;
+}
+
+div.new_modal_body .qrCodeWrapper {
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  background: var(--fg);
+}
+
+div.new_modal_body .buttons {
+  display: flex;
+  flex-direction: column;
+}
+
+div.new_modal_body button {
+  all: unset;
+  cursor: pointer;
+  color: #8c889a;
+  font-size: var(--xs-font-12);
+  line-height: var(--line-height-text);
+}
+
+div.new_modal_body button:hover {
+  color: var(--violet-dark-100);
+}
+
+div.new_modal_body.small_modal {
+  width: 320px;
+  min-width: auto;
+}
diff --git a/web/account/log-in-form.react.js b/web/account/log-in-form.react.js
@@ -1,12 +1,23 @@
 // @flow
 
 import { useConnectModal } from '@rainbow-me/rainbowkit';
+import classnames from 'classnames';
+import { QRCodeSVG } from 'qrcode.react';
 import * as React from 'react';
 import { useWalletClient } from 'wagmi';
 
+import ModalOverlay from 'lib/components/modal-overlay.react.js';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import { useSecondaryDeviceQRAuthContext } from 'lib/components/secondary-device-qr-auth-context-provider.react.js';
+import { qrCodeLinkURL } from 'lib/facts/links.js';
+import stores from 'lib/facts/stores.js';
+import { platformToIdentityDeviceType } from 'lib/types/identity-service-types.js';
+import { getConfig } from 'lib/utils/config.js';
 import { isDev } from 'lib/utils/dev-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
+import { usingRestoreFlow } from 'lib/utils/services-utils.js';
 
+import HeaderSeparator from './header-separator.react.js';
 import css from './log-in-form.css';
 import SIWEButton from './siwe-button.react.js';
 import SIWELoginForm from './siwe-login-form.react.js';
@@ -15,7 +26,7 @@ import Button from '../components/button.react.js';
 import OrBreak from '../components/or-break.react.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 
-function LoginForm(): React.Node {
+function LegacyLoginForm() {
   const { openConnectModal } = useConnectModal();
   const { data: signer } = useWalletClient();
   const dispatch = useDispatch();
@@ -77,4 +88,133 @@ function LoginForm(): React.Node {
   );
 }
 
-export default LoginForm;
+function LoginForm() {
+  const { qrData, openSecondaryQRAuth, closeSecondaryQRAuth } =
+    useSecondaryDeviceQRAuthContext();
+
+  React.useEffect(() => {
+    void openSecondaryQRAuth();
+    return closeSecondaryQRAuth;
+  }, [closeSecondaryQRAuth, openSecondaryQRAuth]);
+
+  const { platform } = getConfig().platformDetails;
+  const qrCodeURL = React.useMemo(() => {
+    if (!qrData) {
+      return undefined;
+    }
+
+    const identityDeviceType = platformToIdentityDeviceType[platform];
+
+    return qrCodeLinkURL(qrData.aesKey, qrData.deviceID, identityDeviceType);
+  }, [platform, qrData]);
+
+  const { pushModal, clearModals, popModal } = useModalContext();
+
+  React.useEffect(() => {
+    return clearModals;
+  }, [clearModals]);
+
+  const openRecoveryModal = React.useCallback(() => {
+    pushModal(
+      <ModalOverlay onClose={popModal}>
+        <div className={classnames(css.new_modal_body, css.small_modal)}>
+          <div className={css.content}>
+            <div className={css.modal_text}>
+              To access Comm on web, you must first install Comm on your phone
+              and then restore your account.
+            </div>
+            <div className={css.modal_text}>
+              Download the Comm app on the&nbsp;
+              <a href={stores.appStoreUrl} target="_blank" rel="noreferrer">
+                App Store
+              </a>
+              &nbsp;or&nbsp;
+              <a href={stores.googlePlayUrl} target="_blank" rel="noreferrer">
+                Google Play Store
+              </a>
+              .
+            </div>
+          </div>
+        </div>
+      </ModalOverlay>,
+    );
+  }, [popModal, pushModal]);
+
+  const openOldLoginModal = React.useCallback(() => {
+    pushModal(
+      <ModalOverlay onClose={popModal}>
+        <div className={classnames(css.new_modal_body, css.small_modal)}>
+          <div className={css.content}>
+            <div className={css.modal_text}>
+              We’ve replaced our login options on web with a QR code to improve
+              account security.
+            </div>
+            <div className={css.modal_text}>
+              In the old system, a malicious actor with access to Comm’s servers
+              could insert a new device for any given user. They could then use
+              that fake device to send messages that would appear to be coming
+              from that user.
+            </div>
+            <div className={css.modal_text}>
+              In the new system, all new devices must be signed by an existing
+              device, which makes that sort of attack impossible.
+            </div>
+            <div className={css.modal_text}>
+              As part of these changes, we now require registration to occur on
+              a mobile device, since the user needs to have at least one device
+              capable of scanning a QR code.
+            </div>
+          </div>
+        </div>
+      </ModalOverlay>,
+    );
+  }, [popModal, pushModal]);
+
+  return (
+    <div className={css.new_modal_body}>
+      <h1>Log in to Comm</h1>
+      <HeaderSeparator />
+      <div className={css.content}>
+        <div className={css.modal_text}>
+          Open the Comm app on your phone and scan the QR code below:
+        </div>
+        <div className={css.qrCodeContainer}>
+          <div className={css.qrCodeWrapper}>
+            <QRCodeSVG value={qrCodeURL} size={195} marginSize={4} level="L" />
+          </div>
+        </div>
+        <div className={css.modal_text}>
+          How to find the scanner:
+          <ul>
+            <li>
+              Go to <strong>Profile</strong>
+            </li>
+            <li>
+              Select <strong>Linked devices</strong>
+            </li>
+            <li>
+              Click <strong>Add</strong> on the top right
+            </li>
+          </ul>
+        </div>
+        <div className={css.buttons}>
+          <button onClick={openRecoveryModal}>
+            Not logged in on another phone?
+          </button>
+          <button onClick={openOldLoginModal}>
+            Looking for the old login?
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LoginFormWrapper(): React.Node {
+  if (!usingRestoreFlow) {
+    return <LegacyLoginForm />;
+  }
+  return <LoginForm />;
+}
+
+export default LoginFormWrapper;