diff --git a/web/account/traditional-login-form.react.js b/web/account/traditional-login-form.react.js index fa4b1808f..3690681c4 100644 --- a/web/account/traditional-login-form.react.js +++ b/web/account/traditional-login-form.react.js @@ -1,267 +1,266 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { useLegacyLogIn, legacyLogInActionTypes, } from 'lib/actions/user-actions.js'; import { useModalContext } from 'lib/components/modal-provider.react.js'; import { usePasswordLogIn } from 'lib/hooks/login-hooks.js'; import { legacyLogInExtraInfoSelector } from 'lib/selectors/account-selectors.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { oldValidUsernameRegex, validEmailRegex, } from 'lib/shared/account-utils.js'; import type { LegacyLogInExtraInfo, LegacyLogInStartingPayload, } from 'lib/types/account-types.js'; import { logInActionSources } from 'lib/types/account-types.js'; import { getMessageForException } from 'lib/utils/errors.js'; import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js'; import { usingCommServicesAccessToken } from 'lib/utils/services-utils.js'; import HeaderSeparator from './header-separator.react.js'; import css from './log-in-form.css'; import PasswordInput from './password-input.react.js'; import Button from '../components/button.react.js'; import { olmAPI } from '../crypto/olm-api.js'; import LoadingIndicator from '../loading-indicator.react.js'; import Input from '../modals/input.react.js'; import { useSelector } from '../redux/redux-utils.js'; import { getShortVersionUnsupportedError } from '../utils/version-utils.js'; const loadingStatusSelector = createLoadingStatusSelector( legacyLogInActionTypes, ); function TraditionalLoginForm(): React.Node { const legacyAuthInProgress = useSelector(loadingStatusSelector) === 'loading'; const [identityAuthInProgress, setIdentityAuthInProgress] = React.useState(false); const inputDisabled = legacyAuthInProgress || identityAuthInProgress; const legacyLoginExtraInfo = useSelector(legacyLogInExtraInfoSelector); const callLegacyLogIn = useLegacyLogIn(); const dispatchActionPromise = useDispatchActionPromise(); const modalContext = useModalContext(); const usernameInputRef = React.useRef(); React.useEffect(() => { usernameInputRef.current?.focus(); }, []); const [username, setUsername] = React.useState(''); const onUsernameChange = React.useCallback( (e: SyntheticEvent) => { invariant(e.target instanceof HTMLInputElement, 'target not input'); setUsername(e.target.value); }, [], ); const onUsernameBlur = React.useCallback(() => { setUsername(untrimmedUsername => untrimmedUsername.trim()); }, []); const [password, setPassword] = React.useState(''); const onPasswordChange = React.useCallback( (e: SyntheticEvent) => { invariant(e.target instanceof HTMLInputElement, 'target not input'); setPassword(e.target.value); }, [], ); const [errorMessage, setErrorMessage] = React.useState(''); const legacyLogInAction = React.useCallback( async (extraInfo: LegacyLogInExtraInfo) => { await olmAPI.initializeCryptoAccount(); const userPublicKey = await olmAPI.getUserPublicKey(); try { const result = await callLegacyLogIn({ ...extraInfo, username, password, authActionSource: logInActionSources.logInFromWebForm, signedIdentityKeysBlob: { payload: userPublicKey.blobPayload, signature: userPublicKey.signature, }, }); modalContext.popModal(); return result; } catch (e) { setUsername(''); setPassword(''); const messageForException = getMessageForException(e); if (messageForException === 'invalid_credentials') { setErrorMessage('incorrect username or password'); } else if (messageForException === 'client_version_unsupported') { setErrorMessage(getShortVersionUnsupportedError()); } else { setErrorMessage('unknown error'); } usernameInputRef.current?.focus(); throw e; } }, [callLegacyLogIn, modalContext, password, username], ); const callIdentityPasswordLogIn = usePasswordLogIn(); const identityPasswordLogInAction = React.useCallback(async () => { if (identityAuthInProgress) { return; } setIdentityAuthInProgress(true); try { await callIdentityPasswordLogIn(username, password); modalContext.popModal(); } catch (e) { setUsername(''); setPassword(''); const messageForException = getMessageForException(e); if ( messageForException === 'user_not_found' || messageForException === 'login_failed' ) { setErrorMessage('incorrect username or password'); } else if ( messageForException === 'client_version_unsupported' || messageForException === 'unsupported_version' ) { setErrorMessage(getShortVersionUnsupportedError()); } else { setErrorMessage('unknown error'); } usernameInputRef.current?.focus(); - throw e; } finally { setIdentityAuthInProgress(false); } }, [ identityAuthInProgress, callIdentityPasswordLogIn, 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; } else if (password === '') { setErrorMessage('password is empty'); usernameInputRef.current?.focus(); return; } if (usingCommServicesAccessToken) { void identityPasswordLogInAction(); } else { void dispatchActionPromise( legacyLogInActionTypes, legacyLogInAction(legacyLoginExtraInfo), undefined, ({ calendarQuery: legacyLoginExtraInfo.calendarQuery, }: LegacyLogInStartingPayload), ); } }, [ dispatchActionPromise, identityPasswordLogInAction, legacyLogInAction, legacyLoginExtraInfo, username, password, ], ); const loadingIndicatorClassName = inputDisabled ? css.loadingIndicator : css.hiddenLoadingIndicator; const buttonTextClassName = inputDisabled ? css.invisibleButtonText : undefined; const loginButtonContent = React.useMemo( () => ( <>
Sign in
), [loadingIndicatorClassName, buttonTextClassName], ); const signInButtonColor = React.useMemo( () => ({ backgroundColor: '#6A20E3' }), [], ); return (

Sign in to Comm

Username
Password
{errorMessage}
); } export default TraditionalLoginForm;