diff options
Diffstat (limited to 'src')
| -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> +    </>    );  };  |