vault-frontend/src/containers/dialogs/RestorePasswordDialog/index.tsx

import React, { FC, useState, useMemo, useCallback, useEffect } from 'react';
import { IDialogProps } from '~/redux/types';
import { connect } from 'react-redux';
import { BetterScrollDialog } from '../BetterScrollDialog';
import { Group } from '~/components/containers/Group';
import { InputText } from '~/components/input/InputText';
import { Button } from '~/components/input/Button';
import styles from './styles.scss';

import * as AUTH_ACTIONS from '~/redux/auth/actions';
import pick from 'ramda/es/pick';
import { selectAuthRestore } from '~/redux/auth/selectors';
import { ERROR_LITERAL, ERRORS } from '~/constants/errors';
import { Icon } from '~/components/input/Icon';
import { useCloseOnEscape } from '~/utils/hooks';

const mapStateToProps = state => ({
  restore: selectAuthRestore(state),
});

const mapDispatchToProps = pick(['authRestorePassword', 'authSetRestore'], AUTH_ACTIONS);

type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};

const RestorePasswordDialogUnconnected: FC<IProps> = ({
  restore: { error, is_loading, is_succesfull, user },
  authSetRestore,
  onRequestClose,
  authRestorePassword,
}) => {
  const [password, setPassword] = useState('');
  const [password_again, setPasswordAgain] = useState('');

  const doesnt_match = useMemo(
    () => !password || !password_again || password.trim() !== password_again.trim(),
    [password_again, password]
  );

  const onSubmit = useCallback(
    event => {
      event.preventDefault();

      if (doesnt_match) return;

      authRestorePassword(password);
    },
    [doesnt_match, authRestorePassword]
  );

  useEffect(() => {
    if (error || is_succesfull) {
      authSetRestore({ error: null, is_succesfull: false });
    }
  }, [password, password_again]);

  const buttons = useMemo(
    () => (
      <Group className={styles.buttons}>
        <Button color={doesnt_match ? 'outline' : 'primary'}>Восстановить</Button>
      </Group>
    ),
    [doesnt_match]
  );

  const overlay = useMemo(
    () =>
      is_succesfull ? (
        <Group className={styles.shade}>
          <Icon icon="check" size={64} />

          <div>Пароль обновлен</div>
          <div>Добро пожаловать домой, ~{user.username}!</div>

          <div />

          <Button color="secondary" onClick={onRequestClose}>
            Ура!
          </Button>
        </Group>
      ) : null,
    [is_succesfull]
  );

  const not_ready = useMemo(() => (is_loading && !user ? <div className={styles.shade} /> : null), [
    is_loading,
    user,
  ]);

  const invalid_code = useMemo(
    () =>
      !is_loading && !user ? (
        <Group className={styles.error_shade}>
          <Icon icon="close" size={64} />

          <div>{ERROR_LITERAL[error || ERRORS.CODE_IS_INVALID]}</div>

          <div className={styles.spacer} />

          <Button color="primary" onClick={onRequestClose}>
            Очень жаль
          </Button>
        </Group>
      ) : null,
    [is_loading, user, error]
  );

  useCloseOnEscape(onRequestClose);

  return (
    <form onSubmit={onSubmit}>
      <BetterScrollDialog
        footer={buttons}
        width={300}
        onClose={onRequestClose}
        is_loading={is_loading}
        error={error && ERROR_LITERAL[error]}
        overlay={overlay || not_ready || invalid_code}
      >
        <div className={styles.wrap}>
          <Group>
            <div className={styles.header}>
              Пришло время сменить пароль{user && user.username && `, ~${user.username}`}
            </div>

            <InputText
              title="Новый пароль"
              value={password}
              handler={setPassword}
              autoFocus
              type="password"
            />

            <InputText
              title="Ещё раз"
              type="password"
              value={password_again}
              handler={setPasswordAgain}
              error={password_again && doesnt_match && ERROR_LITERAL[ERRORS.DOESNT_MATCH]}
            />

            <Group className={styles.text}>
              <p>Новый пароль должен быть не короче 6 символов.</p>
              <p>
                Вряд ли кто-нибудь будет пытаться нас взломать, но сложный пароль всегда лучше
                простого.
              </p>
            </Group>
          </Group>
        </div>
      </BetterScrollDialog>
    </form>
  );
};

const RestorePasswordDialog = connect(
  mapStateToProps,
  mapDispatchToProps
)(RestorePasswordDialogUnconnected);

export { RestorePasswordDialog };