src/pages/AuthPage/AuthPage.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import SignInForm from './SignInForm';
import SignUpForm from './SignUpForm';

const useStyles = makeStyles({
  formTransfer: {
    display: 'flex',
    justifyContent: 'center'
  },
  transferButton: {
    marginLeft: 10,
    color: 'green',
    cursor: 'pointer'
  }
});

const AuthPage: React.FC = () => {
  const [auth, setAuth] = useState<'signIn' | 'signUp'>('signIn');
  const classes = useStyles();

  const handleRedirect = () => {
    setAuth(auth === 'signIn' ? 'signUp' : 'signIn');
  };

  const footerInfo = {
    signIn: ['Don\'t have an account?', 'Sign up'],
    signUp: ['Already have an account?', 'Sign in']
  };

  return (
    <>
      {auth === 'signIn' && <SignInForm />}
      {auth === 'signUp' && <SignUpForm />}
      <div className={classes.formTransfer}>
        <div>{footerInfo[auth][0]}</div>
        <span
          onClick={handleRedirect}
          className={classes.transferButton}
          role="presentation"
        >
          {footerInfo[auth][1]}
        </span>
      </div>
    </>
  );
};

export default AuthPage;