lbry-desktop/ui/component/userPasswordReset/view.jsx

// @flow
import * as PAGES from 'constants/pages';
import React from 'react';
import { useHistory } from 'react-router-dom';
import Card from 'component/common/card';
import Spinner from 'component/spinner';
import { Form, FormField } from 'component/common/form';
import { EMAIL_REGEX } from 'constants/email';
import ErrorText from 'component/common/error-text';
import Button from 'component/button';
import Nag from 'component/common/nag';

type Props = {
  user: ?User,
  doToast: ({ message: string }) => void,
  doUserPasswordReset: string => void,
  doClearPasswordEntry: () => void,
  doClearEmailEntry: () => void,
  passwordResetPending: boolean,
  passwordResetSuccess: boolean,
  passwordResetError: ?string,
  emailToVerify: ?string,
};

function UserPasswordReset(props: Props) {
  const {
    doUserPasswordReset,
    passwordResetPending,
    passwordResetError,
    passwordResetSuccess,
    doToast,
    doClearPasswordEntry,
    doClearEmailEntry,
    emailToVerify,
  } = props;
  const { push } = useHistory();
  const [email, setEmail] = React.useState(emailToVerify || '');
  const valid = email.match(EMAIL_REGEX);

  function handleSubmit() {
    if (email) {
      doUserPasswordReset(email);
    }
  }

  function handleRestart() {
    setEmail('');
    doClearPasswordEntry();
    doClearEmailEntry();
    push(`/$/${PAGES.AUTH_SIGNIN}`);
  }

  React.useEffect(() => {
    if (passwordResetSuccess) {
      doToast({
        message: __('Email sent!'),
      });
    }
  }, [passwordResetSuccess, doToast]);

  return (
    <section className="main__sign-in">
      <Card
        title={__('Reset Your Password')}
        actions={
          <div>
            <Form onSubmit={handleSubmit} className="section">
              <FormField
                autoFocus
                disabled={passwordResetSuccess}
                placeholder={__('hotstuff_96@hotmail.com')}
                type="email"
                name="sign_in_email"
                id="username"
                autoComplete="on"
                label={__('Email')}
                value={email}
                onChange={e => setEmail(e.target.value)}
              />

              <div className="section__actions">
                <Button
                  button="primary"
                  type="submit"
                  label={passwordResetPending ? __('Resetting') : __('Reset Password')}
                  disabled={!email || !valid || passwordResetPending || passwordResetSuccess}
                />
                <Button button="link" label={__('Cancel')} onClick={handleRestart} />
                {passwordResetPending && <Spinner type="small" />}
              </div>
            </Form>
          </div>
        }
        nag={
          <React.Fragment>
            {passwordResetError && <Nag type="error" relative message={<ErrorText>{passwordResetError}</ErrorText>} />}
            {passwordResetSuccess && (
              <Nag type="helpful" relative message={__('Check your email for a link to reset your password.')} />
            )}
          </React.Fragment>
        }
      />
    </section>
  );
}

export default UserPasswordReset;