log-in-form.react.js
No OneTemporary
Actions

Size

6 KB

Referenced Files

None

Subscribers

None

log-in-form.react.js
View Options

	// @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 { useDispatch } from 'lib/utils/redux-utils.js';
	import { useIsRestoreFlowEnabled } 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';
	import TraditionalLoginForm from './traditional-login-form.react.js';
	import Button from '../components/button.react.js';
	import OrBreak from '../components/or-break.react.js';
	import { updateNavInfoActionType } from '../redux/action-types.js';

	function LegacyLoginForm() {
	const { openConnectModal } = useConnectModal();
	const { data: signer } = useWalletClient();
	const dispatch = useDispatch();

	const onQRCodeLoginButtonClick = React.useCallback(() => {
	dispatch({
	type: updateNavInfoActionType,
	payload: {
	loginMethod: 'qr-code',
	},
	});
	}, [dispatch]);

	const qrCodeLoginButton = React.useMemo(
	() => (
	<div className={css.form_qrcode_login}>
	<Button
	variant="outline"
	type="submit"
	onClick={onQRCodeLoginButtonClick}
	>
	Sign in via QR Code
	</Button>
	</div>
	),
	[onQRCodeLoginButtonClick],
	);

	const [siweAuthFlowSelected, setSIWEAuthFlowSelected] =
	React.useState<boolean>(false);

	const onSIWEButtonClick = React.useCallback(() => {
	setSIWEAuthFlowSelected(true);
	openConnectModal && openConnectModal();
	}, [openConnectModal]);

	const cancelSIWEAuthFlow = React.useCallback(() => {
	setSIWEAuthFlowSelected(false);
	}, []);

	if (siweAuthFlowSelected && signer) {
	return (
	<div className={css.modal_body}>
	<SIWELoginForm cancelSIWEAuthFlow={cancelSIWEAuthFlow} />
	</div>
	);
	}

	return (
	<div className={css.modal_body}>
	<TraditionalLoginForm />
	<OrBreak />
	<SIWEButton onSIWEButtonClick={onSIWEButtonClick} />
	{qrCodeLoginButton}
	</div>
	);
	}

	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
	<a href={stores.appStoreUrl} target="_blank" rel="noreferrer">
	App Store
	</a>
	or
	<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} 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 {
	const usingRestoreFlow = useIsRestoreFlowEnabled();
	if (!usingRestoreFlow) {
	return <LegacyLoginForm />;
	}
	return <LoginForm />;
	}

	export default LoginFormWrapper;

File Metadata

Mime Type: text/html
Expires: Sun, Dec 7, 7:53 AM (1 d, 8 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 5834082
Default Alt Text: log-in-form.react.js (6 KB)

log-in-form.react.jsNo OneTemporaryActions

log-in-form.react.jsView Options

File Metadata

Event Timeline

log-in-form.react.js
No OneTemporary
Actions

log-in-form.react.js
View Options