Page MenuHomePhorge
Files F33316619

D6500.1768829382.diff
No OneTemporary
Actions

Size
6 KB
Referenced Files
None
Subscribers
None

D6500.1768829382.diff
View Options

diff --git a/web/account/log-in-form.react.js b/web/account/log-in-form.react.js
--- a/web/account/log-in-form.react.js
+++ b/web/account/log-in-form.react.js
@@ -1,7 +1,9 @@
// @flow
+import { useConnectModal } from '@rainbow-me/rainbowkit';
import invariant from 'invariant';
import * as React from 'react';
+import { useSigner } from 'wagmi';
import { logInActionTypes, logIn } from 'lib/actions/user-actions';
import { useModalContext } from 'lib/components/modal-provider.react';
@@ -28,10 +30,13 @@
import { webLogInExtraInfoSelector } from '../selectors/account-selectors';
import css from './log-in-form.css';
import PasswordInput from './password-input.react';
+import SIWEButton from './siwe-button.react.js';
import SIWE from './siwe.react.js';
const loadingStatusSelector = createLoadingStatusSelector(logInActionTypes);
function LoginForm(): React.Node {
+ const { openConnectModal } = useConnectModal();
+ const { data: signer } = useSigner();
const inputDisabled = useSelector(loadingStatusSelector) === 'loading';
const loginExtraInfo = useSelector(webLogInExtraInfoSelector);
const callLogIn = useServerCall(logIn);
@@ -42,6 +47,10 @@
const [username, setUsername] = React.useState<string>('');
const [password, setPassword] = React.useState<string>('');
const [errorMessage, setErrorMessage] = React.useState<string>('');
+ const [
+ siweAuthFlowSelected,
+ setSIWEAuthFlowSelected,
+ ] = React.useState<boolean>(false);
const usernameInputRef = React.useRef();
@@ -127,9 +136,16 @@
return 'Log in';
}, [inputDisabled]);
+ const onSIWEButtonClick = React.useCallback(() => {
+ setSIWEAuthFlowSelected(true);
+ openConnectModal && openConnectModal();
+ }, [openConnectModal]);
+
let siwe;
- if (isDev) {
+ if (isDev && siweAuthFlowSelected && signer) {
siwe = <SIWE />;
+ } else if (isDev) {
+ siwe = <SIWEButton onSIWEButtonClick={onSIWEButtonClick} />;
}
return (
@@ -168,6 +184,7 @@
>
{loginButtonContent}
</Button>
+ <hr />
{siwe}
<div className={css.modal_form_error}>{errorMessage}</div>
</div>
diff --git a/web/account/siwe.react.js b/web/account/siwe.react.js
--- a/web/account/siwe.react.js
+++ b/web/account/siwe.react.js
@@ -3,7 +3,7 @@
import '@rainbow-me/rainbowkit/dist/index.css';
import olm from '@matrix-org/olm';
-import { ConnectButton, useConnectModal } from '@rainbow-me/rainbowkit';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
import invariant from 'invariant';
import * as React from 'react';
import { useDispatch } from 'react-redux';
@@ -32,14 +32,12 @@
import { setPrimaryIdentityPublicKey } from '../redux/primary-identity-public-key-reducer';
import { useSelector } from '../redux/redux-utils';
import { webLogInExtraInfoSelector } from '../selectors/account-selectors.js';
-import SIWEButton from './siwe-button.react.js';
import css from './siwe.css';
const getSIWENonceLoadingStatusSelector = createLoadingStatusSelector(
getSIWENonceActionTypes,
);
function SIWE(): React.Node {
- const { openConnectModal } = useConnectModal();
const { address } = useAccount();
const { data: signer } = useSigner();
const dispatch = useDispatch();
@@ -52,15 +50,9 @@
const logInExtraInfo = useSelector(webLogInExtraInfoSelector);
const [siweNonce, setSIWENonce] = React.useState<?string>(null);
- const [
- hasSIWEButtonBeenClicked,
- setHasSIWEButtonBeenClicked,
- ] = React.useState<boolean>(false);
const siweNonceShouldBeFetched =
- !siweNonce &&
- getSIWENonceCallLoadingStatus !== 'loading' &&
- (signer || hasSIWEButtonBeenClicked);
+ !siweNonce && getSIWENonceCallLoadingStatus !== 'loading';
React.useEffect(() => {
if (!siweNonceShouldBeFetched) {
@@ -115,6 +107,7 @@
);
const onSignInButtonClick = React.useCallback(async () => {
+ invariant(signer, 'signer must be present during SIWE attempt');
invariant(siweNonce, 'nonce must be present during SIWE attempt');
invariant(
primaryIdentityPublicKey,
@@ -126,47 +119,29 @@
attemptSIWEAuth(message, signature);
}, [address, attemptSIWEAuth, primaryIdentityPublicKey, signer, siweNonce]);
- let siweLoginForm;
- if (signer && (!siweNonce || !primaryIdentityPublicKey)) {
- siweLoginForm = (
+ if (!siweNonce || !primaryIdentityPublicKey) {
+ return (
<div className={css.connectButtonContainer}>
<LoadingIndicator status="loading" size="medium" />
</div>
);
- } else if (signer) {
- siweLoginForm = (
- <div className={css.siweLoginFormContainer}>
- <div className={css.connectButtonContainer}>
- <ConnectButton />
- </div>
- <p>{siweMessageSigningExplanationStatements[0]}</p>
- <p>{siweMessageSigningExplanationStatements[1]}</p>
- <p>
- By signing up, you agree to our{' '}
- <a href="https://comm.app/terms">Terms of Use</a> &{' '}
- <a href="https://comm.app/privacy">Privacy Policy</a>.
- </p>
- <Button variant="filled" onClick={onSignInButtonClick}>
- Sign in
- </Button>
- </div>
- );
}
- const onSIWEButtonClick = React.useCallback(() => {
- setHasSIWEButtonBeenClicked(true);
- openConnectModal && openConnectModal();
- }, [openConnectModal]);
-
- let siweButton;
- if (openConnectModal) {
- siweButton = <SIWEButton onSIWEButtonClick={onSIWEButtonClick} />;
- }
return (
- <div className={css.siweContainer}>
- <hr />
- {siweLoginForm}
- {siweButton}
+ <div className={css.siweLoginFormContainer}>
+ <div className={css.connectButtonContainer}>
+ <ConnectButton />
+ </div>
+ <p>{siweMessageSigningExplanationStatements[0]}</p>
+ <p>{siweMessageSigningExplanationStatements[1]}</p>
+ <p>
+ By signing up, you agree to our{' '}
+ <a href="https://comm.app/terms">Terms of Use</a> &{' '}
+ <a href="https://comm.app/privacy">Privacy Policy</a>.
+ </p>
+ <Button variant="filled" onClick={onSignInButtonClick}>
+ Sign in
+ </Button>
</div>
);
}

File Metadata

Mime Type
text/plain
Expires
Mon, Jan 19, 1:29 PM (10 h, 56 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5954373
Default Alt Text
D6500.1768829382.diff (6 KB)

Event Timeline