diff options
Diffstat (limited to 'src/pages')
-rw-r--r-- | src/pages/AuthPage/AuthPage.tsx | 24 | ||||
-rw-r--r-- | src/pages/AuthPage/SignInForm.tsx | 18 | ||||
-rw-r--r-- | src/pages/AuthPage/SignUpForm.tsx | 48 |
3 files changed, 38 insertions, 52 deletions
diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx index c490078..fc7f404 100644 --- a/src/pages/AuthPage/AuthPage.tsx +++ b/src/pages/AuthPage/AuthPage.tsx @@ -1,29 +1,19 @@ -import React, {useState} from 'react'; -import {Authorization} from '../../types'; +import React, { useState } from 'react'; import SignInForm from './SignInForm'; -import {makeStyles} from "@material-ui/core"; -import SignUpForm from "./SignUpForm"; +import SignUpForm from './SignUpForm'; +import { Authorization } from '../../types'; + interface PropTypes { logIn: (name: string, password: string) => Promise<boolean>; } -const useStyles = makeStyles(theme => ({ - authorize: { - display: 'flex', - width: 200, - justifyContent: 'space-around', - margin: '0 auto' - } -})); - -const AuthPage: React.FC<PropTypes> = ({logIn}) => { - const classes = useStyles(); - const [authorization, setAuthorization] = useState<Authorization>({authorize: 'signIn'}); +const AuthPage: React.FC<PropTypes> = ({ logIn }) => { + const [authorization, setAuthorization] = useState<Authorization>({ authorize: 'signIn' }); return ( <> - {authorization.authorize === 'signIn' && <SignInForm logIn={logIn} setAuthorization={setAuthorization}/>} + {authorization.authorize === 'signIn' && <SignInForm logIn={logIn} setAuthorization={setAuthorization} />} {authorization.authorize === 'signUp' && <SignUpForm logIn={logIn} setAuthorization={setAuthorization} />} </> ); diff --git a/src/pages/AuthPage/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx index f4f763c..cf68493 100644 --- a/src/pages/AuthPage/SignInForm.tsx +++ b/src/pages/AuthPage/SignInForm.tsx @@ -1,11 +1,11 @@ -import React, {useState, useRef} from 'react'; -import {makeStyles} from '@material-ui/core/styles'; +import React, { useState, useRef } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; import Button from '@material-ui/core/Button'; interface PropTypes { logIn: (name: string, password: string) => Promise<boolean>; - setAuthorization: (authorization: { authorize: string }) => void ; + setAuthorization: (authorization: { authorize: string }) => void; } const useStyles = makeStyles(theme => ({ @@ -21,11 +21,11 @@ const useStyles = makeStyles(theme => ({ }, formTransfer: { display: 'flex', - justifyContent: 'center' + justifyContent: 'center' }, transferButton: { marginLeft: 10, - color: 'green' + color: 'green' }, formHeader: { textAlign: 'center', @@ -33,7 +33,7 @@ const useStyles = makeStyles(theme => ({ } })); -const SignInForm: React.FC<PropTypes> = ({logIn, setAuthorization}) => { +const SignInForm: React.FC<PropTypes> = ({ logIn, setAuthorization }) => { const [error, setError] = useState<boolean>(false); const classes = useStyles(); const nameRef = useRef<HTMLInputElement>(); @@ -50,12 +50,12 @@ const SignInForm: React.FC<PropTypes> = ({logIn, setAuthorization}) => { }; const handleSignUp = () => { - setAuthorization({authorize: 'signUp'}); + setAuthorization({ authorize: 'signUp' }); }; return ( <> - <div className={classes.formHeader}>Sign In</div> + <div className={classes.formHeader}>Sign In</div> <form className={classes.root} noValidate autoComplete="off"> <TextField inputRef={nameRef} @@ -72,7 +72,7 @@ const SignInForm: React.FC<PropTypes> = ({logIn, setAuthorization}) => { <Button variant="contained" onClick={onClick}>submit</Button> </form> <div className={classes.formTransfer}> - <div>Don't have an account?</div> + <div>Don`t have an account?</div> <div onClick={handleSignUp} className={classes.transferButton}>Sign Up</div> </div> </> diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx index 29f17b1..a4271d5 100644 --- a/src/pages/AuthPage/SignUpForm.tsx +++ b/src/pages/AuthPage/SignUpForm.tsx @@ -1,9 +1,8 @@ -import React, {useRef} from 'react'; -import {makeStyles} from '@material-ui/core/styles'; +import React, { useRef } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; import Button from '@material-ui/core/Button'; -import {Authorization} from '../../types'; -import {get, post} from '../../requests'; +import { post } from '../../requests'; interface PropTypes { logIn: (name: string, password: string) => Promise<boolean>; @@ -35,7 +34,7 @@ const useStyles = makeStyles(theme => ({ } })); -const SignUpForm: React.FC<PropTypes> = ({logIn,setAuthorization}) => { +const SignUpForm: React.FC<PropTypes> = ({ logIn, setAuthorization }) => { const classes = useStyles(); const inputRef = useRef<HTMLInputElement>(); const inputRefPassword = useRef<HTMLInputElement>(); @@ -44,40 +43,37 @@ const SignUpForm: React.FC<PropTypes> = ({logIn,setAuthorization}) => { const onClick = () => { const name = inputRef.current?.value; const password = inputRefPassword.current?.value; - const newUser = { - name: name, - password: password, - avatarUrl: '', - }; + const newUser = { name: name, password: password, avatarUrl: '' }; if (name && password) { - post(`/users`,newUser).then(response => { + post('/users', newUser).then(() => { logIn(name, password); }); } }; const handleSignIn = () => { - setAuthorization({authorize: 'signIn'}); + setAuthorization({ authorize: 'signIn' }); }; return ( <> <div className={classes.formHeader}>Sign Up</div> <form className={classes.root} noValidate autoComplete="off"> - <TextField inputRef={inputRef} id="standard-basic" label="Name"/> - <TextField id="standard-basic" label="Email"/> - <TextField inputRef={inputRefPassword} - id="standard-password-input" - label="Password" - type="password" - /> - <Button variant="contained" onClick={onClick}>submit</Button> - </form> - <div className={classes.formTransfer}> - <div>Already have an account?</div> - <div onClick={handleSignIn} className={classes.transferButton}>Sign In</div> - </div> - </> + <TextField inputRef={inputRef} id="standard-basic" label="Name" /> + <TextField id="standard-basic" label="Email" /> + <TextField + inputRef={inputRefPassword} + id="standard-password-input" + label="Password" + type="password" + /> + <Button variant="contained" onClick={onClick}>submit</Button> + </form> + <div className={classes.formTransfer}> + <div>Already have an account?</div> + <div className={classes.transferButton} onClick={handleSignIn}>Sign In</div> + </div> + </> ); }; |