aboutsummaryrefslogtreecommitdiff
path: root/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages')
-rw-r--r--src/pages/AuthPage/AuthPage.tsx24
-rw-r--r--src/pages/AuthPage/SignInForm.tsx18
-rw-r--r--src/pages/AuthPage/SignUpForm.tsx48
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>
+ </>
);
};