From 6e18d4fe47fdc2a1b2566d7dd8e8f9c959689a92 Mon Sep 17 00:00:00 2001
From: Antonella Morittu <33493978+AntonellaMorittu@users.noreply.github.com>
Date: Wed, 22 May 2024 14:57:16 +0200
Subject: [PATCH 01/17] Delete netlify.toml

---
 netlify.toml | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 netlify.toml

diff --git a/netlify.toml b/netlify.toml
deleted file mode 100644
index ed9e83391..000000000
--- a/netlify.toml
+++ /dev/null
@@ -1,6 +0,0 @@
-# This file tells netlify where the code for this project is and
-# how it should build the JavaScript assets to deploy from.
-[build]
-  base = "frontend/"
-  publish = "dist"
-  command = "npm run build"

From 080e5e59628e2cf8a73e8d958431c5d0309904eb Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Mon, 27 May 2024 20:32:49 +0200
Subject: [PATCH 02/17] create compontents for login, signup and private.
 import components and set up routes for the app

---
 frontend/package.json        |  3 ++-
 frontend/src/App.jsx         | 22 +++++++++++++++++++---
 frontend/src/LoginPage.jsx   |  3 +++
 frontend/src/PrivatePage.jsx |  3 +++
 frontend/src/SignupPage.jsx  |  3 +++
 5 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/LoginPage.jsx
 create mode 100644 frontend/src/PrivatePage.jsx
 create mode 100644 frontend/src/SignupPage.jsx

diff --git a/frontend/package.json b/frontend/package.json
index e9c95b79f..db1a62a6e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 1091d4310..5a3aa624f 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,3 +1,19 @@
-export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
-};
+// Import code from movie-project
+// here i import the componets 
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { LoginPage } from "./LoginPage";
+import { SignupPage } from "./SignupPage";
+import { PrivatePage } from "./PrivatePage";
+
+// https://reactrouter.com/
+// here setting up routes for the app
+export const App = () => (
+  <Router>
+    <Routes>
+      <Route path="/" element={<LoginPage />} />
+      <Route path="/signup" element={<SignupPage />} />
+      <Route path="/private" element={<PrivatePage />} />
+    </Routes>
+  </Router>
+);
diff --git a/frontend/src/LoginPage.jsx b/frontend/src/LoginPage.jsx
new file mode 100644
index 000000000..ddc0c0549
--- /dev/null
+++ b/frontend/src/LoginPage.jsx
@@ -0,0 +1,3 @@
+export const LoginPage = () => {
+  return <div>Pls log in</div>;
+}
\ No newline at end of file
diff --git a/frontend/src/PrivatePage.jsx b/frontend/src/PrivatePage.jsx
new file mode 100644
index 000000000..6bebb9938
--- /dev/null
+++ b/frontend/src/PrivatePage.jsx
@@ -0,0 +1,3 @@
+export const PrivatePage = () => {
+  return <div>Pls log in</div>;
+}
\ No newline at end of file
diff --git a/frontend/src/SignupPage.jsx b/frontend/src/SignupPage.jsx
new file mode 100644
index 000000000..d03cf11a8
--- /dev/null
+++ b/frontend/src/SignupPage.jsx
@@ -0,0 +1,3 @@
+export const SignupPage = () => {
+  return <div>Pls log in</div>;
+}
\ No newline at end of file

From 19c6b214897e508050f56712e8e207c6e393f3d8 Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Mon, 27 May 2024 20:47:13 +0200
Subject: [PATCH 03/17]  add login and signup components with form

---
 frontend/src/LoginPage.jsx  | 26 ++++++++++++++++++++++++--
 frontend/src/SignupPage.jsx | 26 ++++++++++++++++++++++++--
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/frontend/src/LoginPage.jsx b/frontend/src/LoginPage.jsx
index ddc0c0549..b9d249814 100644
--- a/frontend/src/LoginPage.jsx
+++ b/frontend/src/LoginPage.jsx
@@ -1,3 +1,25 @@
+import { useNavigate } from "react-router-dom";
+
 export const LoginPage = () => {
-  return <div>Pls log in</div>;
-}
\ No newline at end of file
+  const navigate = useNavigate();
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const { username, password } = event.target.elements;
+    console.log(username, password);
+    navigate("/private");
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <h1>Login</h1>
+      <label>
+        Username:
+        <input type="text" name="username" />
+      </label>
+      <label>
+        Password:
+        <input type="password" name="password" />
+      </label>
+      <button type="submit">Login</button>
+    </form>
+  );
+};
diff --git a/frontend/src/SignupPage.jsx b/frontend/src/SignupPage.jsx
index d03cf11a8..8543f8813 100644
--- a/frontend/src/SignupPage.jsx
+++ b/frontend/src/SignupPage.jsx
@@ -1,3 +1,25 @@
+import { useNavigate } from "react-router-dom";
+
 export const SignupPage = () => {
-  return <div>Pls log in</div>;
-}
\ No newline at end of file
+  const navigate = useNavigate();
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const { username, password } = event.target.elements;
+    console.log(username, password);
+    navigate("/private");
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <h1>Sign up</h1>
+      <label>
+        Username:
+        <input type="text" name="username" />
+      </label>
+      <label>
+        Password:
+        <input type="password" name="password" />
+      </label>
+      <button type="submit">Sign up</button>
+    </form>
+  );
+};
\ No newline at end of file

From f07b99c64982a86b7f1a35b14116c781a50ffe18 Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Mon, 27 May 2024 21:06:23 +0200
Subject: [PATCH 04/17] add login api end point

---
 backend/server.js          | 4 ++++
 frontend/src/LoginPage.jsx | 7 +++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/backend/server.js b/backend/server.js
index dfe86fb8e..04288062f 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -21,6 +21,10 @@ app.get("/", (req, res) => {
   res.send("Hello Technigo!");
 });
 
+app.post("/login", async (req, res) => {
+  res.json({ message: "Login route" });
+})
+
 // Start the server
 app.listen(port, () => {
   console.log(`Server running on http://localhost:${port}`);
diff --git a/frontend/src/LoginPage.jsx b/frontend/src/LoginPage.jsx
index b9d249814..e2b1cc7e5 100644
--- a/frontend/src/LoginPage.jsx
+++ b/frontend/src/LoginPage.jsx
@@ -1,14 +1,17 @@
+// here we import the useNavigate hook from react-router-dom and use it to navigate to the /private route when the form is submitted.
 import { useNavigate } from "react-router-dom";
 
 export const LoginPage = () => {
+  // getting the function out
   const navigate = useNavigate();
   const handleSubmit = (event) => {
+    // prevent dedefault stops the page from reloading
     event.preventDefault();
-    const { username, password } = event.target.elements;
-    console.log(username, password);
+    
     navigate("/private");
   };
   return (
+    // here we have to first register an event handler for the form submission
     <form onSubmit={handleSubmit}>
       <h1>Login</h1>
       <label>

From ec732185f34021395e353c2403a8f091bf2edbea Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Tue, 28 May 2024 20:10:23 +0200
Subject: [PATCH 05/17] fetch, post request. add comments on code.

---
 backend/server.js          |  5 ++++-
 frontend/src/LoginPage.jsx | 17 +++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/backend/server.js b/backend/server.js
index 04288062f..c1b1dfd5f 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -21,9 +21,12 @@ app.get("/", (req, res) => {
   res.send("Hello Technigo!");
 });
 
+// created a login endpoint here
 app.post("/login", async (req, res) => {
+  const { username, password } = req.body;
+  console.log(`Login with username: ${username} and password: ${password}`);
   res.json({ message: "Login route" });
-})
+});
 
 // Start the server
 app.listen(port, () => {
diff --git a/frontend/src/LoginPage.jsx b/frontend/src/LoginPage.jsx
index e2b1cc7e5..918f828ba 100644
--- a/frontend/src/LoginPage.jsx
+++ b/frontend/src/LoginPage.jsx
@@ -7,8 +7,21 @@ export const LoginPage = () => {
   const handleSubmit = (event) => {
     // prevent dedefault stops the page from reloading
     event.preventDefault();
-    
-    navigate("/private");
+
+    // fetch is for sending requests to the server. Post is for sending data to the server.
+    fetch("http://localhost:8080/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      // here we are defining what data we are going to send to the server 
+      body: JSON.stringify({
+        username: event.target.username.value,
+        password: event.target.password.value,
+      }),
+    }).then(() => {
+      navigate("/private");
+    });
   };
   return (
     // here we have to first register an event handler for the form submission

From c964e283dc1b138f2502033479625458cd640865 Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Tue, 28 May 2024 20:31:23 +0200
Subject: [PATCH 06/17] create token

---
 backend/server.js            | 12 +++++++++++-
 frontend/src/PrivatePage.jsx | 17 +++++++++++++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/backend/server.js b/backend/server.js
index c1b1dfd5f..ce039ade9 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -25,7 +25,17 @@ app.get("/", (req, res) => {
 app.post("/login", async (req, res) => {
   const { username, password } = req.body;
   console.log(`Login with username: ${username} and password: ${password}`);
-  res.json({ message: "Login route" });
+  // here we are creating a token ... like you get a ticket to a festival, and the wristband is the token
+  res.json({ token: "1234" });
+});
+
+// here we are checking the token, if it is correct we get the message, if not we get a 401 error
+app.get("/private", async (req, res) => {
+  if (req.headers.authorization === "Bearer 1234") {
+    res.json({ message: "This is a secret message" });
+  } else {
+    res.status(401).json({ message: "Not authorized" });
+  }
 });
 
 // Start the server
diff --git a/frontend/src/PrivatePage.jsx b/frontend/src/PrivatePage.jsx
index 6bebb9938..8a4bc4286 100644
--- a/frontend/src/PrivatePage.jsx
+++ b/frontend/src/PrivatePage.jsx
@@ -1,3 +1,16 @@
+import { useEffect, useState } from "react";
+
 export const PrivatePage = () => {
-  return <div>Pls log in</div>;
-}
\ No newline at end of file
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    fetch("http://localhost:8080/private")
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data);
+        setData(data.message);
+      });
+  }, []);
+
+  return <div>{data}</div>;
+};

From 71fd4ee3d7da0c63006be8ba178bb824ae514df3 Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Tue, 28 May 2024 20:41:50 +0200
Subject: [PATCH 07/17] create local storage

---
 frontend/src/LoginPage.jsx   | 14 ++++++++++----
 frontend/src/PrivatePage.jsx |  7 ++++++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/LoginPage.jsx b/frontend/src/LoginPage.jsx
index 918f828ba..f41f9039d 100644
--- a/frontend/src/LoginPage.jsx
+++ b/frontend/src/LoginPage.jsx
@@ -14,14 +14,20 @@ export const LoginPage = () => {
       headers: {
         "Content-Type": "application/json",
       },
-      // here we are defining what data we are going to send to the server 
+      // here we are defining what data we are going to send to the server
       body: JSON.stringify({
         username: event.target.username.value,
         password: event.target.password.value,
       }),
-    }).then(() => {
-      navigate("/private");
-    });
+    })
+    // here converting the response from json, which is a string, to an object that we can work with
+      .then((res) => res.json())
+      .then((res) => {
+        console.log(res);
+        // here we are saving the token in the local storage, so the user can stay logged in
+        localStorage.setItem("token", res.token);
+        navigate("/private");
+      });
   };
   return (
     // here we have to first register an event handler for the form submission
diff --git a/frontend/src/PrivatePage.jsx b/frontend/src/PrivatePage.jsx
index 8a4bc4286..3cbb5d44c 100644
--- a/frontend/src/PrivatePage.jsx
+++ b/frontend/src/PrivatePage.jsx
@@ -4,7 +4,12 @@ export const PrivatePage = () => {
   const [data, setData] = useState(null);
 
   useEffect(() => {
-    fetch("http://localhost:8080/private")
+    fetch("http://localhost:8080/private", {
+      headers: {
+        // this is how we get the token back from the local storage, to prove that the user is still logged in.   
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    })
       .then((res) => res.json())
       .then((data) => {
         console.log(data);

From 003a3c1d143f1018bdc886cf34535c1889540017 Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Tue, 28 May 2024 21:04:06 +0200
Subject: [PATCH 08/17] hiding log out button.

---
 frontend/src/PrivatePage.jsx | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend/src/PrivatePage.jsx b/frontend/src/PrivatePage.jsx
index 3cbb5d44c..e55df64a9 100644
--- a/frontend/src/PrivatePage.jsx
+++ b/frontend/src/PrivatePage.jsx
@@ -1,21 +1,42 @@
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 export const PrivatePage = () => {
+  const navigate = useNavigate();
+
   const [data, setData] = useState(null);
+  const [status, setStatus] = useState(null);
 
   useEffect(() => {
     fetch("http://localhost:8080/private", {
       headers: {
-        // this is how we get the token back from the local storage, to prove that the user is still logged in.   
+        // this is how we get the token back from the local storage, to prove that the user is still logged in.
         Authorization: `Bearer ${localStorage.getItem("token")}`,
       },
     })
-      .then((res) => res.json())
+      .then((res) => {
+        setStatus(res.status);
+        return res.json();
+      })
       .then((data) => {
-        console.log(data);
         setData(data.message);
       });
   }, []);
 
-  return <div>{data}</div>;
+  // here we create the log out function that removes the token from the local storage
+  const logout = (event) => {
+    event.preventDefault();
+    localStorage.removeItem("token");
+    navigate("/");
+  };
+
+  return (
+    <div>
+      {/* data is the msg from the server */}
+      {data}
+      {/* the && is how to write if in jsx, in js we would typ "if (status === 200) <button onClick ... and so on. " */}
+      {/* here we are hiding the log out button if the status is not 200. 200 means user is logged in. 401 is unauthorized, (not logged in) */}
+      {status === 200 && <button onClick={logout}>Log out</button>}
+    </div>
+  );
 };

From cc2953230c1fe7435a85949775ba8df5b3f4e1f2 Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Wed, 29 May 2024 20:46:05 +0200
Subject: [PATCH 09/17] defining endpoitns

---
 backend/server.js           | 27 ++++++++++++++++++++++++++-
 frontend/src/SignupPage.jsx | 25 ++++++++++++++++++++++---
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/backend/server.js b/backend/server.js
index ce039ade9..cf3821d1c 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -6,6 +6,18 @@ const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-mongo";
 mongoose.connect(mongoUrl);
 mongoose.Promise = Promise;
 
+const User = mongoose.model("User", {
+  username: {
+    type: String,
+    unique: true,
+    required: true,
+  },
+  password: {
+    type: String,
+    required: true,
+  },
+});
+
 // Defines the port the app will run on. Defaults to 8080, but can be overridden
 // when starting the server. Example command to overwrite PORT env variable value:
 // PORT=9000 npm start
@@ -21,7 +33,20 @@ app.get("/", (req, res) => {
   res.send("Hello Technigo!");
 });
 
-// created a login endpoint here
+// here is the route for post sign up.
+app.post("/signup", async (req, res) => {
+  // here we are defining what kind of data we are going to get.
+  User.create({ username: req.body.username, password: req.body.password })
+    .then(() => {
+      res.status(201).json({ token: "1234" });
+    })
+    .catch((error) => {
+      console.log(error.message);
+      res.status(400).json({ message: "Could not create user", error });
+    });
+});
+
+// created a login endpoint here. POST/login is the endpoint. POST/sign up is also an endpoint. GET is also an endpoint. The endpoints like log in and user data gets stored in the database (mongoDB)
 app.post("/login", async (req, res) => {
   const { username, password } = req.body;
   console.log(`Login with username: ${username} and password: ${password}`);
diff --git a/frontend/src/SignupPage.jsx b/frontend/src/SignupPage.jsx
index 8543f8813..1a523204e 100644
--- a/frontend/src/SignupPage.jsx
+++ b/frontend/src/SignupPage.jsx
@@ -3,10 +3,29 @@ import { useNavigate } from "react-router-dom";
 export const SignupPage = () => {
   const navigate = useNavigate();
   const handleSubmit = (event) => {
+    // prevent dedefault stops the page from reloading
     event.preventDefault();
-    const { username, password } = event.target.elements;
-    console.log(username, password);
-    navigate("/private");
+
+    // fetch is for sending requests to the server. Post is for sending data to the server.
+    fetch("http://localhost:8080/signup", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      // here we are defining what data we are going to send to the server
+      body: JSON.stringify({
+        username: event.target.username.value,
+        password: event.target.password.value,
+      }),
+    })
+    // here converting the response from json, which is a string, to an object that we can work with
+      .then((res) => res.json())
+      .then((res) => {
+        console.log(res);
+        // here we are saving the token in the local storage, so the user can stay logged in
+        localStorage.setItem("token", res.token);
+        navigate("/private");
+      });
   };
   return (
     <form onSubmit={handleSubmit}>

From 9020f4283e036541f1d8ad67ccd3d1862f881579 Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Wed, 29 May 2024 20:51:22 +0200
Subject: [PATCH 10/17] create log in system

---
 backend/server.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/backend/server.js b/backend/server.js
index cf3821d1c..3ebe12db6 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -51,7 +51,17 @@ app.post("/login", async (req, res) => {
   const { username, password } = req.body;
   console.log(`Login with username: ${username} and password: ${password}`);
   // here we are creating a token ... like you get a ticket to a festival, and the wristband is the token
-  res.json({ token: "1234" });
+  return User.findOne({ username: req.body.username })
+    .then((user) => {
+      if (user && req.body.password === user.password) {
+        console.log("User found", user);
+        res.json({ token: "1234" });
+      } else {
+        console.log("User not found");
+        res.status(401).json({ message: "Could not log in" });
+        return
+      }
+    })
 });
 
 // here we are checking the token, if it is correct we get the message, if not we get a 401 error

From 5a9baa30c334e8176fbb581f95f4ee2c6b95e2cb Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Wed, 29 May 2024 21:21:37 +0200
Subject: [PATCH 11/17] install b crypt, and import and used it for the token

---
 backend/package.json |  1 +
 backend/server.js    | 47 +++++++++++++++++++++++++++++---------------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/backend/package.json b/backend/package.json
index 8de5c4ce0..7499fa261 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -12,6 +12,7 @@
     "@babel/core": "^7.17.9",
     "@babel/node": "^7.16.8",
     "@babel/preset-env": "^7.16.11",
+    "bcrypt": "^5.1.1",
     "cors": "^2.8.5",
     "express": "^4.17.3",
     "mongoose": "^8.0.0",
diff --git a/backend/server.js b/backend/server.js
index 3ebe12db6..b19252b68 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -1,6 +1,8 @@
 import cors from "cors";
 import express from "express";
 import mongoose from "mongoose";
+// install bcrypt with npm install. https://nordvpn.com/sv/blog/what-is-bcrypt/
+import bcrypt from "bcrypt";
 
 const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-mongo";
 mongoose.connect(mongoUrl);
@@ -16,6 +18,12 @@ const User = mongoose.model("User", {
     type: String,
     required: true,
   },
+  token: {
+    type: String,
+    default: () => {
+      return bcrypt.genSaltSync();
+    },
+  },
 });
 
 // Defines the port the app will run on. Defaults to 8080, but can be overridden
@@ -37,8 +45,8 @@ app.get("/", (req, res) => {
 app.post("/signup", async (req, res) => {
   // here we are defining what kind of data we are going to get.
   User.create({ username: req.body.username, password: req.body.password })
-    .then(() => {
-      res.status(201).json({ token: "1234" });
+    .then((user) => {
+      res.status(201).json({ token: user.token });
     })
     .catch((error) => {
       console.log(error.message);
@@ -51,26 +59,33 @@ app.post("/login", async (req, res) => {
   const { username, password } = req.body;
   console.log(`Login with username: ${username} and password: ${password}`);
   // here we are creating a token ... like you get a ticket to a festival, and the wristband is the token
-  return User.findOne({ username: req.body.username })
-    .then((user) => {
-      if (user && req.body.password === user.password) {
-        console.log("User found", user);
-        res.json({ token: "1234" });
-      } else {
-        console.log("User not found");
-        res.status(401).json({ message: "Could not log in" });
-        return
-      }
-    })
+  return User.findOne({ username: req.body.username }).then((user) => {
+    if (user && req.body.password === user.password) {
+      console.log("User found", user);
+      res.json({ token: user.token });
+    } else {
+      console.log("User not found");
+      res.status(401).json({ message: "Could not log in" });
+      return;
+    }
+  });
 });
 
 // here we are checking the token, if it is correct we get the message, if not we get a 401 error
 app.get("/private", async (req, res) => {
-  if (req.headers.authorization === "Bearer 1234") {
-    res.json({ message: "This is a secret message" });
-  } else {
+  if (!req.headers.authorization) {
     res.status(401).json({ message: "Not authorized" });
   }
+
+  const user = await User.findOne({
+    token: req.headers.authorization.split(" ")[1],
+  });
+  if (!user) {
+    res.status(401).json({ message: "Not authorized" });
+  }
+
+  console.log(user);
+  res.json({ message: "This is a secret message" });
 });
 
 // Start the server

From d81924116f9abb33441b08e9732b6f4d670a9f45 Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Thu, 30 May 2024 20:19:01 +0200
Subject: [PATCH 12/17] fixed salt

---
 backend/server.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/backend/server.js b/backend/server.js
index b19252b68..0133f6385 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -3,6 +3,7 @@ import express from "express";
 import mongoose from "mongoose";
 // install bcrypt with npm install. https://nordvpn.com/sv/blog/what-is-bcrypt/
 import bcrypt from "bcrypt";
+import crypto from "crypto";
 
 const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-mongo";
 mongoose.connect(mongoUrl);
@@ -20,9 +21,7 @@ const User = mongoose.model("User", {
   },
   token: {
     type: String,
-    default: () => {
-      return bcrypt.genSaltSync();
-    },
+    default: () => crypto.randomBytes(128).toString("hex"),
   },
 });
 
@@ -43,13 +42,18 @@ app.get("/", (req, res) => {
 
 // here is the route for post sign up.
 app.post("/signup", async (req, res) => {
+  // https://heynode.com/blog/2020-04/salt-and-hash-passwords-bcrypt/
+  const salt = bcrypt.genSaltSync(10);
+
   // here we are defining what kind of data we are going to get.
-  User.create({ username: req.body.username, password: req.body.password })
+  User.create({
+    username: req.body.username,
+    password: bcrypt.hashSync(req.body.password, salt),
+  })
     .then((user) => {
       res.status(201).json({ token: user.token });
     })
     .catch((error) => {
-      console.log(error.message);
       res.status(400).json({ message: "Could not create user", error });
     });
 });
@@ -57,14 +61,11 @@ app.post("/signup", async (req, res) => {
 // created a login endpoint here. POST/login is the endpoint. POST/sign up is also an endpoint. GET is also an endpoint. The endpoints like log in and user data gets stored in the database (mongoDB)
 app.post("/login", async (req, res) => {
   const { username, password } = req.body;
-  console.log(`Login with username: ${username} and password: ${password}`);
   // here we are creating a token ... like you get a ticket to a festival, and the wristband is the token
   return User.findOne({ username: req.body.username }).then((user) => {
-    if (user && req.body.password === user.password) {
-      console.log("User found", user);
+    if (user && bcrypt.compareSync(req.body.password, user.password)) {
       res.json({ token: user.token });
     } else {
-      console.log("User not found");
       res.status(401).json({ message: "Could not log in" });
       return;
     }
@@ -82,9 +83,8 @@ app.get("/private", async (req, res) => {
   });
   if (!user) {
     res.status(401).json({ message: "Not authorized" });
+    return;
   }
-
-  console.log(user);
   res.json({ message: "This is a secret message" });
 });
 

From 669b5ba08235e874fb9baac387703bd332dd26b4 Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Thu, 30 May 2024 20:23:23 +0200
Subject: [PATCH 13/17] added error message

---
 frontend/src/SignupPage.jsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/SignupPage.jsx b/frontend/src/SignupPage.jsx
index 1a523204e..69471dd18 100644
--- a/frontend/src/SignupPage.jsx
+++ b/frontend/src/SignupPage.jsx
@@ -1,6 +1,8 @@
 import { useNavigate } from "react-router-dom";
+import { useState } from "react";
 
 export const SignupPage = () => {
+  const [error, setError] = useState(false);
   const navigate = useNavigate();
   const handleSubmit = (event) => {
     // prevent dedefault stops the page from reloading
@@ -18,9 +20,13 @@ export const SignupPage = () => {
         password: event.target.password.value,
       }),
     })
-    // here converting the response from json, which is a string, to an object that we can work with
+      // here converting the response from json, which is a string, to an object that we can work with
       .then((res) => res.json())
       .then((res) => {
+        if (res.error) {
+          setError(true);
+          return;
+        }
         console.log(res);
         // here we are saving the token in the local storage, so the user can stay logged in
         localStorage.setItem("token", res.token);
@@ -30,6 +36,7 @@ export const SignupPage = () => {
   return (
     <form onSubmit={handleSubmit}>
       <h1>Sign up</h1>
+      {error && <p>Something went wrong</p>}
       <label>
         Username:
         <input type="text" name="username" />
@@ -41,4 +48,4 @@ export const SignupPage = () => {
       <button type="submit">Sign up</button>
     </form>
   );
-};
\ No newline at end of file
+};

From 188505845a32365b62c1c1d74ac85967e713d49c Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Thu, 30 May 2024 20:31:42 +0200
Subject: [PATCH 14/17] updated the back end url

---
 frontend/src/LoginPage.jsx   | 4 ++--
 frontend/src/PrivatePage.jsx | 2 +-
 frontend/src/SignupPage.jsx  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/LoginPage.jsx b/frontend/src/LoginPage.jsx
index f41f9039d..982663645 100644
--- a/frontend/src/LoginPage.jsx
+++ b/frontend/src/LoginPage.jsx
@@ -9,7 +9,7 @@ export const LoginPage = () => {
     event.preventDefault();
 
     // fetch is for sending requests to the server. Post is for sending data to the server.
-    fetch("http://localhost:8080/login", {
+    fetch("https://project-auth-jcs.onrender.com/login", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -20,7 +20,7 @@ export const LoginPage = () => {
         password: event.target.password.value,
       }),
     })
-    // here converting the response from json, which is a string, to an object that we can work with
+      // here converting the response from json, which is a string, to an object that we can work with
       .then((res) => res.json())
       .then((res) => {
         console.log(res);
diff --git a/frontend/src/PrivatePage.jsx b/frontend/src/PrivatePage.jsx
index e55df64a9..434b03538 100644
--- a/frontend/src/PrivatePage.jsx
+++ b/frontend/src/PrivatePage.jsx
@@ -8,7 +8,7 @@ export const PrivatePage = () => {
   const [status, setStatus] = useState(null);
 
   useEffect(() => {
-    fetch("http://localhost:8080/private", {
+    fetch("https://project-auth-jcs.onrender.com/private", {
       headers: {
         // this is how we get the token back from the local storage, to prove that the user is still logged in.
         Authorization: `Bearer ${localStorage.getItem("token")}`,
diff --git a/frontend/src/SignupPage.jsx b/frontend/src/SignupPage.jsx
index 69471dd18..2b221d113 100644
--- a/frontend/src/SignupPage.jsx
+++ b/frontend/src/SignupPage.jsx
@@ -9,7 +9,7 @@ export const SignupPage = () => {
     event.preventDefault();
 
     // fetch is for sending requests to the server. Post is for sending data to the server.
-    fetch("http://localhost:8080/signup", {
+    fetch("https://project-auth-jcs.onrender.com/signup", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

From 378c0898e2877eff998ec46cc8ed642004f5c795 Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Thu, 30 May 2024 20:41:43 +0200
Subject: [PATCH 15/17] added links between pages

---
 frontend/src/LoginPage.jsx  | 33 +++++++++++++++++++--------------
 frontend/src/SignupPage.jsx | 32 +++++++++++++++++++-------------
 2 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/frontend/src/LoginPage.jsx b/frontend/src/LoginPage.jsx
index 982663645..c48d8a6f4 100644
--- a/frontend/src/LoginPage.jsx
+++ b/frontend/src/LoginPage.jsx
@@ -1,5 +1,5 @@
 // here we import the useNavigate hook from react-router-dom and use it to navigate to the /private route when the form is submitted.
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 export const LoginPage = () => {
   // getting the function out
@@ -30,18 +30,23 @@ export const LoginPage = () => {
       });
   };
   return (
-    // here we have to first register an event handler for the form submission
-    <form onSubmit={handleSubmit}>
-      <h1>Login</h1>
-      <label>
-        Username:
-        <input type="text" name="username" />
-      </label>
-      <label>
-        Password:
-        <input type="password" name="password" />
-      </label>
-      <button type="submit">Login</button>
-    </form>
+    <>
+      {/* here we have to first register an event handler for the form submission */}
+      <form onSubmit={handleSubmit}>
+        <h1>Login</h1>
+        <label>
+          Username:
+          <input type="text" name="username" />
+        </label>
+        <label>
+          Password:
+          <input type="password" name="password" />
+        </label>
+        <button type="submit">Login</button>
+      </form>
+      <p>
+        <Link to="/signup">Sign up</Link>
+      </p>
+    </>
   );
 };
diff --git a/frontend/src/SignupPage.jsx b/frontend/src/SignupPage.jsx
index 2b221d113..5a3657907 100644
--- a/frontend/src/SignupPage.jsx
+++ b/frontend/src/SignupPage.jsx
@@ -1,5 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
+import { Link } from "react-router-dom";
 
 export const SignupPage = () => {
   const [error, setError] = useState(false);
@@ -34,18 +35,23 @@ export const SignupPage = () => {
       });
   };
   return (
-    <form onSubmit={handleSubmit}>
-      <h1>Sign up</h1>
-      {error && <p>Something went wrong</p>}
-      <label>
-        Username:
-        <input type="text" name="username" />
-      </label>
-      <label>
-        Password:
-        <input type="password" name="password" />
-      </label>
-      <button type="submit">Sign up</button>
-    </form>
+    <>
+      <form onSubmit={handleSubmit}>
+        <h1>Sign up</h1>
+        {error && <p>Something went wrong</p>}
+        <label>
+          Username:
+          <input type="text" name="username" />
+        </label>
+        <label>
+          Password:
+          <input type="password" name="password" />
+        </label>
+        <button type="submit">Sign up</button>
+      </form>
+      <p>
+        <Link to="/">Log in</Link>
+      </p>
+    </>
   );
 };

From 9bc638ea0b9679e0243212436aa2e9d014956312 Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Thu, 30 May 2024 20:45:00 +0200
Subject: [PATCH 16/17] added link to readme

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index dfa05e177..9efc6efba 100644
--- a/README.md
+++ b/README.md
@@ -10,4 +10,4 @@ Describe how you approached to problem, and what tools and techniques you used t
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://project-auth-jcs.netlify.app/

From e25cd8608c00581abb0bbd41121a689985f59345 Mon Sep 17 00:00:00 2001
From: Johanna Catalini Smith <johannacatalini@gmail.com>
Date: Thu, 30 May 2024 20:50:48 +0200
Subject: [PATCH 17/17] added readme

---
 README.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 9efc6efba..cdb876cc6 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,10 @@
 # Project Auth API
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This assignment was to build an API with authentication to implement a registration flow and a frontend with forms to register, sign in, and view some content once logged in.
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+Struggled a lot with where to salt the password, then found Technigo's example of how to solve it. This was a hard project and it helped a lot to break it down into lots of little steps. So first I just created the React components with no back end. Then I set up the API endpoints but didn't put any code in them yet. After that I made the login form send a POST request to the API but didn't try to code the login check yet.
 
 ## View it live