From 181d40fab14c9170a7bbd9fe1782db727f5b19d6 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Tue, 16 Jun 2020 15:14:40 +0300 Subject: add form transfer to signIn and signUp --- src/pages/AuthPage/SignUpForm.tsx | 84 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 src/pages/AuthPage/SignUpForm.tsx (limited to 'src/pages/AuthPage/SignUpForm.tsx') diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx new file mode 100644 index 0000000..29f17b1 --- /dev/null +++ b/src/pages/AuthPage/SignUpForm.tsx @@ -0,0 +1,84 @@ +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'; + +interface PropTypes { + logIn: (name: string, password: string) => Promise; + setAuthorization: (authorization: { authorize: string }) => void ; +} + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + margin: theme.spacing(1), + width: '25ch' + }, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + textAlign: 'center' + }, + formTransfer: { + display: 'flex', + justifyContent: 'center' + }, + transferButton: { + marginLeft: 10, + color: 'green' + }, + formHeader: { + textAlign: 'center', + fontSize: 25 + } +})); + +const SignUpForm: React.FC = ({logIn,setAuthorization}) => { + const classes = useStyles(); + const inputRef = useRef(); + const inputRefPassword = useRef(); + + + const onClick = () => { + const name = inputRef.current?.value; + const password = inputRefPassword.current?.value; + const newUser = { + name: name, + password: password, + avatarUrl: '', + }; + if (name && password) { + post(`/users`,newUser).then(response => { + logIn(name, password); + }); + } + }; + + const handleSignIn = () => { + setAuthorization({authorize: 'signIn'}); + }; + + return ( + <> +
Sign Up
+
+ + + + + +
+
Already have an account?
+
Sign In
+
+ + ); +}; + +export default SignUpForm; -- cgit v1.2.3 From ad91510c6d0a600cb19678e6f3dd64f66656e01a Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Tue, 16 Jun 2020 17:24:29 +0300 Subject: fix: clear eslint errors --- src/pages/AuthPage/SignUpForm.tsx | 48 ++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 26 deletions(-) (limited to 'src/pages/AuthPage/SignUpForm.tsx') 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; @@ -35,7 +34,7 @@ const useStyles = makeStyles(theme => ({ } })); -const SignUpForm: React.FC = ({logIn,setAuthorization}) => { +const SignUpForm: React.FC = ({ logIn, setAuthorization }) => { const classes = useStyles(); const inputRef = useRef(); const inputRefPassword = useRef(); @@ -44,40 +43,37 @@ const SignUpForm: React.FC = ({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 ( <>
Sign Up
- - - - - -
-
Already have an account?
-
Sign In
-
- + + + + + +
+
Already have an account?
+
Sign In
+
+ ); }; -- cgit v1.2.3 From 171af45318b3c27c232fc7d1aee99976dfb3046e Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Tue, 16 Jun 2020 18:52:58 +0300 Subject: replace interface with simple string for authorization --- src/pages/AuthPage/SignUpForm.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/pages/AuthPage/SignUpForm.tsx') diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx index a4271d5..0013372 100644 --- a/src/pages/AuthPage/SignUpForm.tsx +++ b/src/pages/AuthPage/SignUpForm.tsx @@ -6,7 +6,7 @@ import { post } from '../../requests'; interface PropTypes { logIn: (name: string, password: string) => Promise; - setAuthorization: (authorization: { authorize: string }) => void ; + setAuth: (auth: string) => void ; } const useStyles = makeStyles(theme => ({ @@ -34,7 +34,7 @@ const useStyles = makeStyles(theme => ({ } })); -const SignUpForm: React.FC = ({ logIn, setAuthorization }) => { +const SignUpForm: React.FC = ({ logIn, setAuth }) => { const classes = useStyles(); const inputRef = useRef(); const inputRefPassword = useRef(); @@ -52,7 +52,7 @@ const SignUpForm: React.FC = ({ logIn, setAuthorization }) => { }; const handleSignIn = () => { - setAuthorization({ authorize: 'signIn' }); + setAuth( 'signIn'); }; return ( -- cgit v1.2.3 From e68d60d60880f4b1e847f7b092210fadfe5d6ab5 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 16 Jun 2020 20:08:01 +0300 Subject: refactor: restructure components --- src/pages/AuthPage/SignUpForm.tsx | 24 +++--------------------- 1 file changed, 3 insertions(+), 21 deletions(-) (limited to 'src/pages/AuthPage/SignUpForm.tsx') diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx index 0013372..2769eb0 100644 --- a/src/pages/AuthPage/SignUpForm.tsx +++ b/src/pages/AuthPage/SignUpForm.tsx @@ -6,44 +6,34 @@ import { post } from '../../requests'; interface PropTypes { logIn: (name: string, password: string) => Promise; - setAuth: (auth: string) => void ; } const useStyles = makeStyles(theme => ({ root: { '& > *': { margin: theme.spacing(1), - width: '25ch' + width: theme.spacing(35) }, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }, - formTransfer: { - display: 'flex', - justifyContent: 'center' - }, - transferButton: { - marginLeft: 10, - color: 'green' - }, formHeader: { textAlign: 'center', fontSize: 25 } })); -const SignUpForm: React.FC = ({ logIn, setAuth }) => { +const SignUpForm: React.FC = ({ logIn }) => { const classes = useStyles(); const inputRef = useRef(); const inputRefPassword = useRef(); - const onClick = () => { const name = inputRef.current?.value; const password = inputRefPassword.current?.value; - const newUser = { name: name, password: password, avatarUrl: '' }; + const newUser = { name, password }; if (name && password) { post('/users', newUser).then(() => { logIn(name, password); @@ -51,10 +41,6 @@ const SignUpForm: React.FC = ({ logIn, setAuth }) => { } }; - const handleSignIn = () => { - setAuth( 'signIn'); - }; - return ( <>
Sign Up
@@ -69,10 +55,6 @@ const SignUpForm: React.FC = ({ logIn, setAuth }) => { /> -
-
Already have an account?
-
Sign In
-
); }; -- cgit v1.2.3