Merge pull request #37 from ilyayudovin/token

Get access token

3 files changed, 44 insertions, 25 deletions

diff --git a/src/index.tsx b/src/index.tsx
index 876491d..a06ec62 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): Promise<boolean> => {
+    return post('/authentication', {
+      strategy: 'local',
+      name,
+      password
+    }).then(response => {
+      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(() => false);
+  };
+
   const logOut = () => {
-    localStorage.removeItem('userId');
     setUser(undefined);
+    localStorage.removeItem('userId');
+    localStorage.removeItem('token');
     navigate('auth');
   };
 
@@ -74,7 +91,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 setUser={setUser} 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 82d468d..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 {
-  setUser: (newUser: User | undefined) => void;
-  navigate: (prefix: string, id: string) => void;
+  logIn: (name: string, password: string) => Promise<boolean>;
 }
 
-const AuthPage: React.FC<PropTypes> = ({ setUser, navigate }) => {
-  return <SignInForm setUser={setUser} 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 b7696e7..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 {
-  setUser: (newUser: User) => void;
-  navigate: (prefix: string, id: string) => void;
+  logIn: (name: string, password: string) => Promise<boolean>;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -23,18 +20,18 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const SignInForm: React.FC<PropTypes> = ({ setUser, navigate }) => {
+const SignInForm: React.FC<PropTypes> = ({ logIn }) => {
+  const [error, setError] = useState<boolean>(false);
   const classes = useStyles();
-  const inputRef = useRef<HTMLInputElement>();
+  const nameRef = useRef<HTMLInputElement>();
+  const passwordRef = useRef<HTMLInputElement>();
 
-  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 onClick = async () => {
+    const name = nameRef.current?.value;
+    const password = passwordRef.current?.value;
+    if (name && password) {
+      logIn(name, password).then(success => {
+        if (!success) setError(true);
       });
     }
   };
@@ -42,9 +39,15 @@ const SignInForm: React.FC<PropTypes> = ({ setUser, navigate }) => {
   return (
     <form className={classes.root} noValidate autoComplete="off">
       <h1>Sign In</h1>
-      <TextField inputRef={inputRef} id="standard-basic" label="Login" />
       <TextField
-        id="standard-password-input"
+        inputRef={nameRef}
+        error={error}
+        label="Login"
+      />
+      <TextField
+        inputRef={passwordRef}
+        error={error}
+        helperText={error && 'Invalid credentials'}
         label="Password"
         type="password"
       />
@@ -54,3 +57,4 @@ const SignInForm: React.FC<PropTypes> = ({ setUser, navigate }) => {
 };
 
 export default SignInForm;
+