Differential D6884 Diff 23092 web/account/traditional-login-form.react.js

Changeset View

Standalone View

web/account/traditional-login-form.react.js

// @flow		// @flow

		import olm from '@matrix-org/olm';
import invariant from 'invariant';		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';

import { logIn, logInActionTypes } from 'lib/actions/user-actions.js';		import { logIn, logInActionTypes } from 'lib/actions/user-actions.js';
import { useModalContext } from 'lib/components/modal-provider.react.js';		import { useModalContext } from 'lib/components/modal-provider.react.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';		import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import {		import {
oldValidUsernameRegex,		oldValidUsernameRegex,
validEmailRegex,		validEmailRegex,
} from 'lib/shared/account-utils.js';		} from 'lib/shared/account-utils.js';
import type {		import type {
LogInExtraInfo,		LogInExtraInfo,
LogInStartingPayload,		LogInStartingPayload,
} from 'lib/types/account-types.js';		} from 'lib/types/account-types.js';
import { logInActionSources } from 'lib/types/account-types.js';		import { logInActionSources } from 'lib/types/account-types.js';
import type { OLMIdentityKeys } from 'lib/types/crypto-types.js';		import type {
		OLMIdentityKeys,
		PickledOLMAccount,
		SignedIdentityKeysBlob,
		} from 'lib/types/crypto-types.js';
import {		import {
useDispatchActionPromise,		useDispatchActionPromise,
useServerCall,		useServerCall,
} from 'lib/utils/action-utils.js';		} from 'lib/utils/action-utils.js';

import HeaderSeparator from './header-separator.react.js';		import HeaderSeparator from './header-separator.react.js';
import css from './log-in-form.css';		import css from './log-in-form.css';
import PasswordInput from './password-input.react.js';		import PasswordInput from './password-input.react.js';
Show All 12 Lines	function TraditionalLoginForm(): React.Node {
const modalContext = useModalContext();		const modalContext = useModalContext();

const primaryIdentityPublicKeys: ?OLMIdentityKeys = useSelector(		const primaryIdentityPublicKeys: ?OLMIdentityKeys = useSelector(
state => state.cryptoStore.primaryIdentityKeys,		state => state.cryptoStore.primaryIdentityKeys,
);		);
const notificationIdentityPublicKeys: ?OLMIdentityKeys = useSelector(		const notificationIdentityPublicKeys: ?OLMIdentityKeys = useSelector(
state => state.cryptoStore.notificationIdentityKeys,		state => state.cryptoStore.notificationIdentityKeys,
);		);
		const primaryAccount: ?PickledOLMAccount = useSelector(
		state => state.cryptoStore.primaryAccount,
		);

const usernameInputRef = React.useRef();		const usernameInputRef = React.useRef();
React.useEffect(() => {		React.useEffect(() => {
usernameInputRef.current?.focus();		usernameInputRef.current?.focus();
}, []);		}, []);

const [username, setUsername] = React.useState<string>('');		const [username, setUsername] = React.useState<string>('');
const onUsernameChange = React.useCallback(e => {		const onUsernameChange = React.useCallback(e => {
Show All 19 Lines	async (extraInfo: LogInExtraInfo) => {
invariant(		invariant(
primaryIdentityPublicKeys,		primaryIdentityPublicKeys,
'primaryIdentityPublicKeys must be set in logInAction',		'primaryIdentityPublicKeys must be set in logInAction',
);		);
invariant(		invariant(
notificationIdentityPublicKeys,		notificationIdentityPublicKeys,
'notificationIdentityPublicKeys must be set in logInAction',		'notificationIdentityPublicKeys must be set in logInAction',
);		);
		invariant(primaryAccount, 'primaryAccount must be set in logInAction');

		const primaryOLMAccount = new olm.Account();
		primaryOLMAccount.unpickle(
		primaryAccount.picklingKey,
		primaryAccount.pickledAccount,
		);

		const payloadToBeSigned = JSON.stringify({
		primaryIdentityPublicKeys,
		notificationIdentityPublicKeys,
		});
		const signedIdentityKeysBlob: SignedIdentityKeysBlob = {
		payload: payloadToBeSigned,
		signature: primaryOLMAccount.sign(payloadToBeSigned),
		};

const result = await callLogIn({		const result = await callLogIn({
...extraInfo,		...extraInfo,
username,		username,
password,		password,
logInActionSource: logInActionSources.logInFromWebForm,		logInActionSource: logInActionSources.logInFromWebForm,
primaryIdentityPublicKey: primaryIdentityPublicKeys.ed25519,		primaryIdentityPublicKey: primaryIdentityPublicKeys.ed25519,
primaryIdentityPublicKeys,		signedIdentityKeysBlob,
notificationIdentityPublicKeys,
});		});
modalContext.popModal();		modalContext.popModal();
return result;		return result;
} catch (e) {		} catch (e) {
setUsername('');		setUsername('');
setPassword('');		setPassword('');
if (e.message === 'invalid_credentials') {		if (e.message === 'invalid_credentials') {
setErrorMessage('incorrect username or password');		setErrorMessage('incorrect username or password');
} else {		} else {
setErrorMessage('unknown error');		setErrorMessage('unknown error');
}		}
usernameInputRef.current?.focus();		usernameInputRef.current?.focus();
throw e;		throw e;
}		}
},		},
[		[
callLogIn,		callLogIn,
modalContext,		modalContext,
notificationIdentityPublicKeys,		notificationIdentityPublicKeys,
password,		password,
		primaryAccount,
primaryIdentityPublicKeys,		primaryIdentityPublicKeys,
username,		username,
],		],
);		);

const onSubmit = React.useCallback(		const onSubmit = React.useCallback(
(event: SyntheticEvent<HTMLElement>) => {		(event: SyntheticEvent<HTMLElement>) => {
event.preventDefault();		event.preventDefault();
▲ Show 20 Lines • Show All 71 Lines • ▼ Show 20 Lines	<form method="POST">
<Button		<Button
variant="filled"		variant="filled"
type="submit"		type="submit"
disabled={		disabled={
primaryIdentityPublicKeys === null \|\|		primaryIdentityPublicKeys === null \|\|
primaryIdentityPublicKeys === undefined \|\|		primaryIdentityPublicKeys === undefined \|\|
notificationIdentityPublicKeys === null \|\|		notificationIdentityPublicKeys === null \|\|
notificationIdentityPublicKeys === undefined \|\|		notificationIdentityPublicKeys === undefined \|\|
		primaryAccount === null \|\|
		primaryAccount === undefined \|\|
inputDisabled		inputDisabled
}		}
onClick={onSubmit}		onClick={onSubmit}
buttonColor={signInButtonColor}		buttonColor={signInButtonColor}
>		>
{loginButtonContent}		{loginButtonContent}
</Button>		</Button>
<div className={css.modal_form_error}>{errorMessage}</div>		<div className={css.modal_form_error}>{errorMessage}</div>
</div>		</div>
</form>		</form>
);		);
}		}

export default TraditionalLoginForm;		export default TraditionalLoginForm;