diff --git a/web/account/log-in-form.css b/web/account/log-in-form.css index 9aa1dbe83..0f39f61e7 100644 --- a/web/account/log-in-form.css +++ b/web/account/log-in-form.css @@ -1,42 +1,49 @@ div.modal_body { display: flex; flex-direction: column; padding: 20px 40px; border-radius: 16px; background-color: var(--modal-bg); box-shadow: 0 0 40px rgba(126, 87, 194, 0.5); } div.form_title { padding: 6px 6px 0 0; font-size: var(--s-font-14); font-weight: var(--bold); color: var(--fg); } div.form_content { margin-top: 4px; margin-bottom: 8px; font-family: var(--font-stack); color: var(--fg); } div.form_footer { display: flex; flex-direction: column; margin-top: 16px; } div.form_footer > button:disabled { min-height: 48px; opacity: 0.5; } div.modal_form_error { margin-top: 16px; font-size: 14px; color: var(--error); font-style: italic; padding-left: 6px; align-self: center; } + +div.ethereum_logo_container { + display: flex; + justify-content: center; + align-content: center; + margin: 0 4px; +} diff --git a/web/account/log-in-form.react.js b/web/account/log-in-form.react.js index d078dcf96..aaa35b63e 100644 --- a/web/account/log-in-form.react.js +++ b/web/account/log-in-form.react.js @@ -1,218 +1,242 @@ // @flow import '@rainbow-me/rainbowkit/dist/index.css'; import { darkTheme, getDefaultWallets, RainbowKitProvider, } from '@rainbow-me/rainbowkit'; import invariant from 'invariant'; import _merge from 'lodash/fp/merge'; import * as React from 'react'; +import { FaEthereum } from 'react-icons/fa'; import { chain, configureChains, createClient, WagmiConfig } from 'wagmi'; import { alchemyProvider } from 'wagmi/providers/alchemy'; import { publicProvider } from 'wagmi/providers/public'; import { logInActionTypes, logIn } from 'lib/actions/user-actions'; import { useModalContext } from 'lib/components/modal-provider.react'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors'; import { oldValidUsernameRegex, validEmailRegex, } from 'lib/shared/account-utils'; import { type LogInExtraInfo, type LogInStartingPayload, logInActionSources, } from 'lib/types/account-types'; import { useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils'; +import { isDev } from 'lib/utils/dev-utils.js'; import Button from '../components/button.react'; import LoadingIndicator from '../loading-indicator.react'; import Input from '../modals/input.react'; import { useSelector } from '../redux/redux-utils'; import { webLogInExtraInfoSelector } from '../selectors/account-selectors'; import css from './log-in-form.css'; import PasswordInput from './password-input.react'; // details can be found https://0.6.x.wagmi.sh/docs/providers/configuring-chains const availableProviders = process.env.COMM_ALCHEMY_KEY ? [alchemyProvider({ apiKey: process.env.COMM_ALCHEMY_KEY })] : [publicProvider()]; const { chains, provider } = configureChains( [chain.mainnet], availableProviders, ); const { connectors } = getDefaultWallets({ appName: 'comm', chains, }); const wagmiClient = createClient({ autoConnect: true, connectors, provider, }); const loadingStatusSelector = createLoadingStatusSelector(logInActionTypes); function LoginForm(): React.Node { const inputDisabled = useSelector(loadingStatusSelector) === 'loading'; const loginExtraInfo = useSelector(webLogInExtraInfoSelector); const callLogIn = useServerCall(logIn); const dispatchActionPromise = useDispatchActionPromise(); const modalContext = useModalContext(); const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const [errorMessage, setErrorMessage] = React.useState(''); const usernameInputRef = React.useRef(); React.useEffect(() => { usernameInputRef.current?.focus(); }, []); const onUsernameChange = React.useCallback(e => { invariant(e.target instanceof HTMLInputElement, 'target not input'); setUsername(e.target.value); }, []); const onUsernameBlur = React.useCallback(() => { setUsername(untrimmedUsername => untrimmedUsername.trim()); }, []); const onPasswordChange = React.useCallback(e => { invariant(e.target instanceof HTMLInputElement, 'target not input'); setPassword(e.target.value); }, []); const logInAction = React.useCallback( async (extraInfo: LogInExtraInfo) => { try { const result = await callLogIn({ ...extraInfo, username, password, logInActionSource: logInActionSources.logInFromWebForm, }); modalContext.popModal(); return result; } catch (e) { setUsername(''); setPassword(''); if (e.message === 'invalid_credentials') { setErrorMessage('incorrect username or password'); } else { setErrorMessage('unknown error'); } usernameInputRef.current?.focus(); throw e; } }, [callLogIn, modalContext, password, username], ); const onSubmit = React.useCallback( (event: SyntheticEvent) => { event.preventDefault(); if (username.search(validEmailRegex) > -1) { setUsername(''); setErrorMessage('usernames only, not emails'); usernameInputRef.current?.focus(); return; } else if (username.search(oldValidUsernameRegex) === -1) { setUsername(''); setErrorMessage('alphanumeric usernames only'); usernameInputRef.current?.focus(); return; } const extraInfo = loginExtraInfo(); dispatchActionPromise( logInActionTypes, logInAction(extraInfo), undefined, ({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload), ); }, [dispatchActionPromise, logInAction, loginExtraInfo, username], ); const loginButtonContent = React.useMemo(() => { if (inputDisabled) { return ; } return 'Log in'; }, [inputDisabled]); + const siweButtonColor = React.useMemo( + () => ({ backgroundColor: 'white', color: 'black' }), + [], + ); + + let siweButton; + if (isDev) { + siweButton = ( + + ); + } + return (
Username
Password
+ {siweButton}
{errorMessage}
); } function LoginFormWrapper(): React.Node { const theme = React.useMemo(() => { return _merge(darkTheme())({ radii: { modal: 0, modalMobile: 0, }, colors: { modalBackdrop: '#242529', }, }); }, []); return ( ); } export default LoginFormWrapper;