done

friends/src/components/Login.js

@@ -0,0 +1,57 @@
+import axios from 'axios';
+import React from 'react';
+
+class Login extends React.Conponent {
+  state = {
+    credentials: {
+      username: '',
+      password: ''
+    }
+  }
+
+  handleChange = e => {
+    this.setState({
+      credentials:{
+      ...this.state.credentials,
+      [e.target.name]: e.atget.value
+      }
+    })
+  }
+
+  login = e => {
+    e.perventdefault();
+    axios.post('http://localhost:5000/api/login', this.state.credentials).then(resp=>{
+      localStorage.setItem('token', resp.data.token);
+      localStorage.setItem('role', resp.data.role);
+      localStorage.setIem('username', resp.data.username);
+      this.props.history.push('/protected')
+    })
+    .catch(err=>{
+      console.log(err);
+    })
+  }
+
+  render(){
+    return(
+      <div>
+        <form onSubmit={this.login}>
+        <input
+          type='text'
+          name='username'
+          value={this.state.credentials.username}
+          onChange={this.handleChange}
+          />
+          <input
+            type='password'
+            name= 'password'  
+            value={this.state.credentials.password}
+            />
+            <button>Log in</button>
+            </form>
+      </div>
+    )
+  }
+
+}
+
+export default Login;

friends/src/components/Logout.js

@@ -0,0 +1,22 @@
+import React,{ useEffect } from "react";  
+import {useHistory } from 'react-router-dom'; 
+
+
+import axios from 'axios';
+import axiosWithAuth from "../utils/axiosWithAuth";
+
+const Logout = (props)=>{
+  const{push} = useHistory();
+  useEffect(()=> {
+    const token = localStorage.getItem('token');
+
+    axiosWithAuth()
+    .post('/logout')
+    .then(resp => {
+        localStorage.removeItem('tokne')push('/login')
+    })
+  }, [])
+  return(<div></div>) 
+}
+
+export default Logout;

friends/src/components/PrivateRoute.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Route, Redirect} from "react-router-dom";
+
+const PrivateRoute = (
+  {component:Component, ...rest}
+) => { 
+  return <Route {...rest} render={(props)=> {
+    if(localStorage.getItem('token')){
+      return <Component {...props}/>
+    }
+    else{
+      return<Redirect to ='/login'/>
+    }
+  }}/>
+}
+export default PrivateRoute;

package.json

@@ -18,4 +18,3 @@
   "author": "Lambda School",
   "license": "ISC"
 }
-