67 lines
2.2 KiB
JavaScript
67 lines
2.2 KiB
JavaScript
// @flow
|
|
import { SITE_NAME } from 'config';
|
|
import React, { useState } from 'react';
|
|
import { FormField, Form } from 'component/common/form';
|
|
import Button from 'component/button';
|
|
import Card from 'component/common/card';
|
|
import Nag from 'component/common/nag';
|
|
import UserPasswordReset from 'component/userPasswordReset';
|
|
|
|
type Props = {
|
|
errorMessage: ?string,
|
|
emailToVerify: ?string,
|
|
doClearEmailEntry: () => void,
|
|
doUserSignIn: (string, ?string) => void,
|
|
onHandleEmailOnly: () => void,
|
|
isPending: boolean,
|
|
};
|
|
|
|
export default function UserSignInPassword(props: Props) {
|
|
const { errorMessage, doUserSignIn, emailToVerify, onHandleEmailOnly, isPending } = props;
|
|
const [password, setPassword] = useState('');
|
|
const [forgotPassword, setForgotPassword] = React.useState(false);
|
|
|
|
function handleSubmit() {
|
|
if (emailToVerify) {
|
|
doUserSignIn(emailToVerify, password);
|
|
}
|
|
}
|
|
|
|
function handleChangeToSignIn() {
|
|
onHandleEmailOnly();
|
|
}
|
|
|
|
return (
|
|
<div className="main__sign-in">
|
|
{forgotPassword ? (
|
|
<UserPasswordReset />
|
|
) : (
|
|
<Card
|
|
title={__('Enter your %SITE_NAME% password', { SITE_NAME })}
|
|
subtitle={__('Logging in as %email%', { email: emailToVerify })}
|
|
actions={
|
|
<Form onSubmit={handleSubmit} className="section">
|
|
<FormField
|
|
autoFocus
|
|
type="password"
|
|
name="sign_in_password"
|
|
id="password"
|
|
autoComplete="on"
|
|
label={__('Password')}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
helper={<Button button="link" label={__('Forgot Password?')} onClick={() => setForgotPassword(true)} />}
|
|
/>
|
|
|
|
<div className="section__actions">
|
|
<Button button="primary" type="submit" label={__('Continue')} disabled={!password || isPending} />
|
|
<Button button="link" onClick={handleChangeToSignIn} label={__('Use Magic Link')} />
|
|
</div>
|
|
</Form>
|
|
}
|
|
nag={errorMessage && <Nag type="error" relative message={errorMessage} />}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|