Fix Login and Signup with tokens in local storage

Relates #3 #6 Co-authored-by: CampbellDocherty <campbellsofitsidocherty@gmail.com>
fac19 · May 26, 2020 · c7e7833 · c7e7833
1 parent 3987b24
commit c7e7833
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 42 deletions.
diff --git a/wip-app/src/components/LogInForm/LogInForm.js b/wip-app/src/components/LogInForm/LogInForm.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom";
+// import { Link } from "react-router-dom";
 import { Container, Button, TextField } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useHistory } from "react-router-dom";
@@ -34,11 +34,11 @@ const LogInForm = (props) => {
     const logInFormData = new FormData(form);
 
     logInPost({
-      emai: logInFormData.email,
-      password: logInFormData.password,
+      username: logInFormData.get("username"),
+      password: logInFormData.get("password"),
     })
       .then(() => history.push("/feed"))
-      .catch(console.error("LoginForm.js line 41"));
+      .catch(console.error("Could not log in!"));
   };
 
   return (
@@ -48,18 +48,18 @@ const LogInForm = (props) => {
         className={classes.form}
         noValidate
         autoComplete="off"
-        onSubmit={handleSubmit}
+        // onSubmit={handleSubmit}
       >
         <TextField
           className={classes.formElement}
           variant="outlined"
           margin="normal"
           required
           fullWidth
-          id="email"
-          label="Email Address"
-          name="email"
-          autoComplete="email"
+          id="username"
+          label="Username"
+          name="username"
+          autoComplete="username"
           autoFocus
         />
         <TextField
@@ -79,7 +79,7 @@ const LogInForm = (props) => {
           className={classes.formElement}
           variant="contained"
           color="primary"
-          // onClick={handleSubmit}
+          onClick={handleSubmit}
         >
           Log In
         </Button>

diff --git a/wip-app/src/components/SignUpForm/SignUpForm.js b/wip-app/src/components/SignUpForm/SignUpForm.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom";
+// import { Link } from "react-router-dom";
 import { Container, Button, TextField } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useHistory } from "react-router-dom";

diff --git a/wip-app/src/utils/fetch.js b/wip-app/src/utils/fetch.js
@@ -1,12 +1,9 @@
 async function postFetch({ endpoint, body, error }) {
-  const headers = {
-    "content-type": "application/JSON",
-  };
-
   const fetchObject = {
     method: "POST",
-    mode: "no-cors",
-    headers,
+    headers: {
+      "content-type": "application/json",
+    },
     body: JSON.stringify(body),
   };
 
@@ -36,43 +33,22 @@ function signUpPost(signUpFormData) {
   };
   return postFetch(options).then((res) => {
     console.log("postFetch-> res", res);
-    localStorage.setItem("auth", JSON.stringify(res));
+    localStorage.setItem("auth", JSON.stringify(res.token));
   });
 }
 
-// function signUpPost(signUpFormData) {
-//    const formObject = {
-//       username: signUpFormData.username,
-//       email: signUpFormData.email,
-//       password: signUpFormData.password
-//    }
-
-//   return fetch(`https://wip-rest-api.herokuapp.com/signup`, {
-//     method: "POST",
-//     mode: "no-cors",
-//     headers: {
-//       "content-type": "application/json"
-//     },
-//     body: JSON.stringify(formObject)
-//   }).then((res) => {
-//     if (res.status !== 201) {
-//       throw new Error(`Error, status: ${res.status}`);
-//     }
-//     return res.json();
-//   })
-// }
-
 function logInPost(logInFormData) {
   const options = {
     endpoint: "logIn",
     body: {
-      email: logInFormData.email,
+      username: logInFormData.username,
       password: logInFormData.password,
     },
     errorMessage: "Could not log you in",
   };
+  console.log("hello", options);
   return postFetch(options).then((res) => {
-    localStorage.setItem("auth", JSON.stringify(res));
+    localStorage.setItem("auth", JSON.stringify(res.token));
   });
 }