diff options
Diffstat (limited to 'src/pages/AuthPage/AuthPage.tsx')
-rw-r--r-- | src/pages/AuthPage/AuthPage.tsx | 39 |
1 files changed, 36 insertions, 3 deletions
diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx index 0072686..dc90c01 100644 --- a/src/pages/AuthPage/AuthPage.tsx +++ b/src/pages/AuthPage/AuthPage.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; import SignInForm from './SignInForm'; import SignUpForm from './SignUpForm'; @@ -7,13 +8,45 @@ interface PropTypes { logIn: (name: string, password: string) => Promise<boolean>; } +const useStyles = makeStyles({ + formTransfer: { + display: 'flex', + justifyContent: 'center' + }, + transferButton: { + marginLeft: 10, + color: 'green', + cursor: 'pointer' + } +}); + const AuthPage: React.FC<PropTypes> = ({ logIn }) => { - const [auth, setAuth] = useState<String>('signIn'); + 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 in'], + signUp: ['Already have an account?', 'Sign up'] + }; return ( <> - {auth === 'signIn' && <SignInForm logIn={logIn} setAuth={setAuth} />} - {auth === 'signUp' && <SignUpForm logIn={logIn} setAuth={setAuth} />} + {auth === 'signIn' && <SignInForm logIn={logIn} />} + {auth === 'signUp' && <SignUpForm logIn={logIn} />} + <div className={classes.formTransfer}> + <div>{footerInfo[auth][0]}</div> + <span + onClick={handleRedirect} + className={classes.transferButton} + role="presentation" + > + {footerInfo[auth][1]} + </span> + </div> </> ); }; |