From d547ea8b3acffa30fa44e0715661490d066bf580 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 15 Jun 2020 16:51:04 +0300 Subject: feat: create logIn function and get access token --- src/index.tsx | 23 ++++++++++++++++++++--- src/pages/AuthPage/AuthPage.tsx | 6 +++--- src/pages/AuthPage/SignInForm.tsx | 22 +++++++++------------- 3 files changed, 32 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/index.tsx b/src/index.tsx index 876491d..b9204b6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -14,7 +14,7 @@ import ProfilePage from './pages/ProfilePage/ProfilePage'; import FeedPage from './pages/FeedPage/FeedPage'; import AuthPage from './pages/AuthPage/AuthPage'; import { User, Page } from './types'; -import { get } from './requests'; +import { get, post } from './requests'; const theme = createMuiTheme({ @@ -52,9 +52,26 @@ const App: React.FC = () => { } }; + const logIn = (name: string, password: string) => { + post('/authentication', { + strategy: 'local', + name, + password + }).then(response => { + const user = response.data.undefined; // TODO: rename 'undefined' field + const { accessToken } = response.data; + + setUser(user); + localStorage.setItem('userId', user._id); + localStorage.setItem('token', accessToken); + navigate('profile', user._id); + }); + }; + const logOut = () => { - localStorage.removeItem('userId'); setUser(undefined); + localStorage.removeItem('userId'); + localStorage.removeItem('token'); navigate('auth'); }; @@ -74,7 +91,7 @@ const App: React.FC = () => {
{ page.prefix === 'profile' && } { page.prefix === 'feed' && } - { page.prefix === 'auth' && } + { page.prefix === 'auth' && }
); diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx index 82d468d..b694c5d 100644 --- a/src/pages/AuthPage/AuthPage.tsx +++ b/src/pages/AuthPage/AuthPage.tsx @@ -3,12 +3,12 @@ import { User } from '../../types'; import SignInForm from './SignInForm'; interface PropTypes { - setUser: (newUser: User | undefined) => void; + logIn: (name: string, password: string) => void; navigate: (prefix: string, id: string) => void; } -const AuthPage: React.FC = ({ setUser, navigate }) => { - return ; +const AuthPage: React.FC = ({ logIn, navigate }) => { + return ; }; export default AuthPage; diff --git a/src/pages/AuthPage/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx index b7696e7..a83af57 100644 --- a/src/pages/AuthPage/SignInForm.tsx +++ b/src/pages/AuthPage/SignInForm.tsx @@ -6,7 +6,7 @@ import { User } from '../../types'; import { get } from '../../requests'; interface PropTypes { - setUser: (newUser: User) => void; + logIn: (name: string, password: string) => void; navigate: (prefix: string, id: string) => void; } @@ -23,27 +23,23 @@ const useStyles = makeStyles(theme => ({ } })); -const SignInForm: React.FC = ({ setUser, navigate }) => { +const SignInForm: React.FC = ({ logIn, navigate }) => { const classes = useStyles(); - const inputRef = useRef(); + const nameRef = useRef(); + const passwordRef = useRef(); const onClick = () => { - const username = inputRef.current?.value; - if (username) { - get(`/users?name=${username}`).then(response => { - const user = response.data[0]; - setUser(user); - localStorage.setItem('userId', user._id); - navigate('profile', user._id); - }); - } + const name = nameRef.current?.value; + const password = passwordRef.current?.value; + if (name && password) logIn(name, password); }; return (

Sign In

- + Date: Mon, 15 Jun 2020 17:27:11 +0300 Subject: feat: invalidate from on error --- src/index.tsx | 9 +++++---- src/pages/AuthPage/AuthPage.tsx | 8 +++----- src/pages/AuthPage/SignInForm.tsx | 28 ++++++++++++++++++---------- 3 files changed, 26 insertions(+), 19 deletions(-) (limited to 'src') 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 => { + 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 = () => {
{ page.prefix === 'profile' && } { page.prefix === 'feed' && } - { page.prefix === 'auth' && } + { page.prefix === 'auth' && }
); 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; } -const AuthPage: React.FC = ({ logIn, navigate }) => { - return ; +const AuthPage: React.FC = ({ logIn }) => { + return ; }; 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; } const useStyles = makeStyles(theme => ({ @@ -23,24 +20,34 @@ const useStyles = makeStyles(theme => ({ } })); -const SignInForm: React.FC = ({ logIn, navigate }) => { +const SignInForm: React.FC = ({ logIn }) => { + const [error, setError] = useState(false); const classes = useStyles(); const nameRef = useRef(); const passwordRef = useRef(); - 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 (

Sign In

- + @@ -50,3 +57,4 @@ const SignInForm: React.FC = ({ logIn, navigate }) => { }; export default SignInForm; + -- cgit v1.2.3 From d5643baf50a3e8a99d545e3e08a06872a3cfb4cc Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 15 Jun 2020 17:39:32 +0300 Subject: fix: parse response correctly --- src/index.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/index.tsx b/src/index.tsx index f28aff8..4e2a0b7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -58,13 +58,12 @@ const App: React.FC = () => { name, password }).then(response => { - const user = response.data.undefined; // TODO: rename 'undefined' field - const { accessToken } = response.data; - - setUser(user); - localStorage.setItem('userId', user._id); - localStorage.setItem('token', accessToken); - navigate('profile', user._id); + const me = response.data.user; + const token = response.data.accessToken; + setUser(me); + localStorage.setItem('userId', me._id); + localStorage.setItem('token', token); + navigate('profile', me._id); return true; }).catch(error => false); }; -- cgit v1.2.3 From dd297844bd602625804e0ddb0706e737ab655334 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 15 Jun 2020 17:59:13 +0300 Subject: fix: remove unused var --- src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/index.tsx b/src/index.tsx index 4e2a0b7..a06ec62 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -65,7 +65,7 @@ const App: React.FC = () => { localStorage.setItem('token', token); navigate('profile', me._id); return true; - }).catch(error => false); + }).catch(() => false); }; const logOut = () => { -- cgit v1.2.3