diff options
| -rw-r--r-- | src/index.tsx | 9 | ||||
| -rw-r--r-- | src/pages/AuthPage/AuthPage.tsx | 8 | ||||
| -rw-r--r-- | src/pages/AuthPage/SignInForm.tsx | 28 |
3 files changed, 26 insertions, 19 deletions
diff --git a/src/index.tsx b/src/index.tsx index b9204b6..f28aff8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -52,8 +52,8 @@ const App: React.FC = () => { } }; - const logIn = (name: string, password: string) => { - post('/authentication', { + const logIn = (name: string, password: string): Promise<boolean> => { + return post('/authentication', { strategy: 'local', name, password @@ -65,7 +65,8 @@ const App: React.FC = () => { localStorage.setItem('userId', user._id); localStorage.setItem('token', accessToken); navigate('profile', user._id); - }); + return true; + }).catch(error => false); }; const logOut = () => { @@ -91,7 +92,7 @@ const App: React.FC = () => { <div className={classes.root}> { page.prefix === 'profile' && <ProfilePage logOut={logOut} id={page.id} navigate={navigate} /> } { page.prefix === 'feed' && <FeedPage navigate={navigate} /> } - { page.prefix === 'auth' && <AuthPage logIn={logIn} navigate={navigate} /> } + { page.prefix === 'auth' && <AuthPage logIn={logIn} /> } </div> </ThemeProvider> ); diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx index b694c5d..72733f0 100644 --- a/src/pages/AuthPage/AuthPage.tsx +++ b/src/pages/AuthPage/AuthPage.tsx @@ -1,14 +1,12 @@ import React from 'react'; -import { User } from '../../types'; import SignInForm from './SignInForm'; interface PropTypes { - logIn: (name: string, password: string) => void; - navigate: (prefix: string, id: string) => void; + logIn: (name: string, password: string) => Promise<boolean>; } -const AuthPage: React.FC<PropTypes> = ({ logIn, navigate }) => { - return <SignInForm logIn={logIn} navigate={navigate} />; +const AuthPage: React.FC<PropTypes> = ({ logIn }) => { + return <SignInForm logIn={logIn} />; }; export default AuthPage; diff --git a/src/pages/AuthPage/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx index a83af57..1d4ce0e 100644 --- a/src/pages/AuthPage/SignInForm.tsx +++ b/src/pages/AuthPage/SignInForm.tsx @@ -1,13 +1,10 @@ -import React, { useRef } from 'react'; +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'; -import { User } from '../../types'; -import { get } from '../../requests'; interface PropTypes { - logIn: (name: string, password: string) => void; - navigate: (prefix: string, id: string) => void; + logIn: (name: string, password: string) => Promise<boolean>; } const useStyles = makeStyles(theme => ({ @@ -23,24 +20,34 @@ const useStyles = makeStyles(theme => ({ } })); -const SignInForm: React.FC<PropTypes> = ({ logIn, navigate }) => { +const SignInForm: React.FC<PropTypes> = ({ logIn }) => { + const [error, setError] = useState<boolean>(false); const classes = useStyles(); const nameRef = useRef<HTMLInputElement>(); const passwordRef = useRef<HTMLInputElement>(); - const onClick = () => { + const onClick = async () => { const name = nameRef.current?.value; const password = passwordRef.current?.value; - if (name && password) logIn(name, password); + if (name && password) { + logIn(name, password).then(success => { + if (!success) setError(true); + }); + } }; return ( <form className={classes.root} noValidate autoComplete="off"> <h1>Sign In</h1> - <TextField inputRef={nameRef} id="standard-basic" label="Login" /> + <TextField + inputRef={nameRef} + error={error} + label="Login" + /> <TextField inputRef={passwordRef} - id="standard-password-input" + error={error} + helperText={error && 'Invalid credentials'} label="Password" type="password" /> @@ -50,3 +57,4 @@ const SignInForm: React.FC<PropTypes> = ({ logIn, navigate }) => { }; export default SignInForm; + |