gistfile1.txt

import {
  Button,
  FormControl,
  Grid,
  Input,
  InputLabel,
  makeStyles,
  Theme,
  Checkbox,
  FormControlLabel,
} from '@material-ui/core';
import { Trans, useTranslation } from 'react-i18next';
import NextLink from 'next/link';
import React from 'react';
import { Field } from 'react-final-form';

import FanContainerGrid from '../FanContainerGrid';
import { MailIcon, PasswordIcon } from '../../icons';

const useStyles = makeStyles(
  (theme: Theme) => ({
    buttonContainer: {
      paddingBottom: theme.spacing(2),
      paddingTop: theme.spacing(2),
    },
    formGuess: {
      display: 'none',
      fontSize: 14,
      color: theme.palette.text.secondary,
      textAlign: 'center',

      [theme.breakpoints.up('md')]: {
        display: 'block',
      },
    },
    personalAgreement: {
      margin: '15px 0',
    }
  }),
  { name: 'RegisterLoginForm' },
);

const RegisterLoginForm: React.FunctionComponent = () => {
  const classes = useStyles();
  const { t } = useTranslation();

  const [isAgreed, setAgreed] = React.useState(false);

  return (
    <>
      <Field name="email">
        {({ input }) => (
          <FormControl fullWidth margin="normal" required>
            <InputLabel htmlFor="email">
              <Trans>Введите ваш email</Trans>
            </InputLabel>

            <Input
              {...input}
              id="email"
              startAdornment={<MailIcon />}
              type="email"
            />
          </FormControl>
        )}
      </Field>
      <Field name="password">
        {({ input }) => (
          <FormControl fullWidth margin="normal" required>
            <InputLabel htmlFor="password">
              <Trans>Введите пароль</Trans>
            </InputLabel>

            <Input
              {...input}
              id="password"
              startAdornment={<PasswordIcon />}
              type="password"
            />
          </FormControl>
        )}
      </Field>
      <Field name="repeatPassword">
        {({ input }) => (
          <FormControl fullWidth margin="normal" required>
            <InputLabel htmlFor="repeatPassword">
              <Trans>Повторите пароль</Trans>
            </InputLabel>

            <Input
              {...input}
              id="repeatPassword"
              startAdornment={<PasswordIcon />}
              type="password"
            />
          </FormControl>
        )}
      </Field>

      <p className={classes.formGuess}>* обязательно для заполнения</p>

      <FormControl className={classes.personalAgreement}>
        <FormControlLabel
          control={<Checkbox color="primary" checked={isAgreed} onChange={() => setAgreed(!isAgreed)} value="agreed" />}
          label={t("Я принимаю пользовательское соглашение и даю согласие на обработку персональных данных")}
        />
      </FormControl>

      <FanContainerGrid className={classes.buttonContainer}>
        <Grid item xs={6}>
          <NextLink href="/login" passHref>
            <Button fullWidth>
              <Trans>Есть аккаунт?</Trans>
            </Button>
          </NextLink>
        </Grid>
        <Grid item xs={6}>
          <NextLink href="/register?step=personal" passHref>
            <Button color="primary" fullWidth type="submit" variant="contained">
              <Trans>Далее</Trans>
            </Button>
          </NextLink>
        </Grid>
      </FanContainerGrid>
    </>
  );
};

export default RegisterLoginForm;