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/27] 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 2f01730153aef88c9e72b28d8c16d946fb9ed8a5 Mon Sep 17 00:00:00 2001
From: Teddy <yoo.ji.yg@gmail.com>
Date: Wed, 22 May 2024 16:06:41 +0200
Subject: [PATCH 02/27] create folder and form

---
 frontend/.eslintrc.cjs               |  2 ++
 frontend/src/App.jsx                 |  8 +++++++-
 frontend/src/components/Button.jsx   |  5 +++++
 frontend/src/components/Home.jsx     | 12 ++++++++++++
 frontend/src/components/LogIn.jsx    | 20 ++++++++++++++++++++
 frontend/src/components/Register.jsx | 24 ++++++++++++++++++++++++
 frontend/src/components/Session.jsx  |  3 +++
 7 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Button.jsx
 create mode 100644 frontend/src/components/Home.jsx
 create mode 100644 frontend/src/components/LogIn.jsx
 create mode 100644 frontend/src/components/Register.jsx
 create mode 100644 frontend/src/components/Session.jsx

diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
index 4dcb43901..94e01b901 100644
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -17,4 +17,6 @@ module.exports = {
       { allowConstantExport: true },
     ],
   },
+  'react/prop-types': "off"
 }
+
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 1091d4310..16eb81f50 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,3 +1,9 @@
+import { Home } from "./components/Home"
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+<>
+    <Home />
+</>
+  )
 };
diff --git a/frontend/src/components/Button.jsx b/frontend/src/components/Button.jsx
new file mode 100644
index 000000000..94a7b673c
--- /dev/null
+++ b/frontend/src/components/Button.jsx
@@ -0,0 +1,5 @@
+export const Button = ({ btnText }) => {
+  return (
+    <button>{btnText}</button>
+  )  
+}
diff --git a/frontend/src/components/Home.jsx b/frontend/src/components/Home.jsx
new file mode 100644
index 000000000..ee680bd06
--- /dev/null
+++ b/frontend/src/components/Home.jsx
@@ -0,0 +1,12 @@
+import { LogIn } from "./LogIn"
+import { Register } from "./Register"
+
+export const Home = () => {
+  return (
+    <div>
+        <LogIn />
+        <Register />      
+    </div>
+  );
+};
+
diff --git a/frontend/src/components/LogIn.jsx b/frontend/src/components/LogIn.jsx
new file mode 100644
index 000000000..d8aa56251
--- /dev/null
+++ b/frontend/src/components/LogIn.jsx
@@ -0,0 +1,20 @@
+import { Button } from "./Button";
+
+export const LogIn = () => {
+  return (
+    <>
+      <div>LogIn</div>
+      <form>
+        <label>
+          Username
+          <input type="text" placeholder="username" />
+        </label>
+        <label type="password" placeholder="password">
+          Password
+          <input />
+        </label>
+        <Button btnText={"Log in"} />
+      </form>
+    </>
+  );
+};
diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
new file mode 100644
index 000000000..3d7b6a925
--- /dev/null
+++ b/frontend/src/components/Register.jsx
@@ -0,0 +1,24 @@
+import { Button } from "./Button";
+
+export const Register = () => {
+  return (
+    <>
+      <div>Register</div>
+      <form>
+        <label>
+          Full name
+          <input type="text" placeholder="Your full name"></input>
+        </label>
+        <label>
+          Username
+          <input type="text" placeholder="Username"></input>
+        </label>
+        <label>
+          Password
+          <input type="password" placeholder="Your Password"></input>
+        </label>
+        <Button btnText={"Sign up"} />
+      </form>
+    </>
+  );
+};
diff --git a/frontend/src/components/Session.jsx b/frontend/src/components/Session.jsx
new file mode 100644
index 000000000..8ee384e7e
--- /dev/null
+++ b/frontend/src/components/Session.jsx
@@ -0,0 +1,3 @@
+export const Session = () => {
+  return <div>Session: You are logged in</div>;
+};

From 530fca6bf514453ad65fd2aa496572ac3e2f4e06 Mon Sep 17 00:00:00 2001
From: Viktoria Olofsson <viktoriaolofsson@gmail.com>
Date: Wed, 22 May 2024 17:56:59 +0200
Subject: [PATCH 03/27] added backend user

---
 backend/package.json |  3 +-
 backend/server.js    | 86 +++++++++++++++++++++++++++++++++++++++++---
 package.json         |  4 +++
 3 files changed, 88 insertions(+), 5 deletions(-)

diff --git a/backend/package.json b/backend/package.json
index 8de5c4ce0..04b834b0b 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -12,9 +12,10 @@
     "@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",
+    "mongoose": "^8.4.0",
     "nodemon": "^3.0.1"
   }
 }
diff --git a/backend/server.js b/backend/server.js
index dfe86fb8e..c6dfbef2d 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -1,14 +1,58 @@
 import cors from "cors";
 import express from "express";
 import mongoose from "mongoose";
+import bcrypt from "bcrypt";
+import crypto from "crypto";
+import { accessSync } from "fs";
 
-const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-mongo";
+const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-auth";
 mongoose.connect(mongoUrl);
 mongoose.Promise = Promise;
 
-// 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
+const { Schema } = mongoose;
+
+// Schema
+const userSchema = new Schema({
+  name: {
+    type: String,
+    required: true,
+  },
+  username: {
+    type: String,
+    unique: true,
+  },
+  email: {
+    type: String,
+    unique: true,
+  },
+  password: {
+    type: String,
+    required: true,
+  },
+  address: {
+    type: String,
+    required: true,
+  },
+  accessToken: {
+    type: String,
+    default: () => bcrypt.genSaltSync(),
+  },
+});
+
+// Model
+const User = mongoose.model("User", userSchema);
+
+const authenticateUser = async (req, res, next) => {
+  const user = await User.findOne({ accessToken: req.header("Authorization") });
+  if (user) {
+    req.user = user;
+    next();
+  } else {
+    res.status(401).json({ loggedOut: true });
+  }
+};
+
+// Defines the port the app will run on. Defaults to 8080
 const port = process.env.PORT || 8080;
 const app = express();
 
@@ -21,6 +65,40 @@ app.get("/", (req, res) => {
   res.send("Hello Technigo!");
 });
 
+app.post("/users", async (req, res) => {
+  try {
+    const { name, username, email, password, address } = req.body;
+    const salt = bcrypt.genSaltSync();
+    const user = new User({
+      name,
+      username,
+      email,
+      password: bcrypt.hashSync(password, salt),
+      address,
+    });
+    user.save();
+    res.status(201).json({ userId: user._id, accessToken: user.accessToken });
+  } catch (error) {
+    res
+      .status(400)
+      .json({ message: "Could not create user", errors: error.errors });
+  }
+});
+
+app.get("/logged-in", authenticateUser);
+app.get("/logged-in", (req, res) => {
+  res.json({ message: "Only registered users can see this message" });
+});
+
+app.post("/sessions", async (req, res) => {
+  const user = await User.findOne({ username: req.body.username });
+  if (user && bcrypt.compareSync(req.body.password, user.password)) {
+    res.json({ userId: user._id, accessToken: user.accessToken });
+  } else {
+    res.json({ notFound: true });
+  }
+});
+
 // Start the server
 app.listen(port, () => {
   console.log(`Server running on http://localhost:${port}`);
diff --git a/package.json b/package.json
index d774b8cc3..311ca20c4 100644
--- a/package.json
+++ b/package.json
@@ -3,5 +3,9 @@
   "version": "1.0.0",
   "scripts": {
     "postinstall": "npm install --prefix backend"
+  },
+  "dependencies": {
+    "bcrypt": "^5.1.1",
+    "bcrypt-nodejs": "^0.0.3"
   }
 }

From dbd5e3219cbfea2b70c2b37558eb34fd8633ae18 Mon Sep 17 00:00:00 2001
From: schouenkes <m.schouenke@gmail.com>
Date: Thu, 23 May 2024 09:56:52 +0200
Subject: [PATCH 04/27] added some styling to registration section

---
 frontend/index.html                  |  7 ++-
 frontend/src/components/Register.jsx | 72 ++++++++++++++++++----
 frontend/src/index.css               | 91 +++++++++++++++++++++++++---
 3 files changed, 147 insertions(+), 23 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 0c589eccd..f66f7ef81 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,10 +1,11 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans:300,400" />
+    <title>Log in</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
index 3d7b6a925..59ccb61ea 100644
--- a/frontend/src/components/Register.jsx
+++ b/frontend/src/components/Register.jsx
@@ -2,23 +2,73 @@ import { Button } from "./Button";
 
 export const Register = () => {
   return (
-    <>
-      <div>Register</div>
-      <form>
+    <form>
+      <div className="title-box">
+        <h2>Register</h2>
+        <div className="text-box">
+          <p>Love to read and want to meet fellow book enthusiasts?</p>
+          <p>
+            {" "}
+            Register now for our OMC Book Club and dive into lively discussions, discover new genres, and share your
+            favorite reads!
+          </p>
+          <p>We can't wait to welcome you and embark on literary adventures together!</p>
+        </div>
+      </div>
+      <div>
         <label>
-          Full name
-          <input type="text" placeholder="Your full name"></input>
+          First name
+          <input type="text" name="first-name" placeholder="Type your first name" required />
         </label>
+
         <label>
-          Username
-          <input type="text" placeholder="Username"></input>
+          Last name
+          <input type="text" name="last-name" placeholder="Type your last name" required />
         </label>
+      </div>
+
+      <label>
+        Username
+        <input type="text" name="username" placeholder="Type your username" required />
+      </label>
+
+      <label>
+        Password
+        <input type="password" name="username" placeholder="Type your username" required />
+      </label>
+
+      <label>
+        E-mail
+        <input type="email" name="email" placeholder="Type your e-mail" required />
+      </label>
+
+      <fieldset>
+        <legend>Address</legend>
+
         <label>
-          Password
-          <input type="password" placeholder="Your Password"></input>
+          Street
+          <input type="text" name="street" placeholder="Type your street" required />
         </label>
+
+        <div>
+          <div>
+            <label>
+              Post code
+              <input type="text" name="post-code" placeholder="xxx xx" required />
+            </label>
+          </div>
+
+          <div>
+            <label>
+              City
+              <input type="text" name="city" placeholder="Type your city" required />
+            </label>
+          </div>
+        </div>
+      </fieldset>
+      <div className="button-box">
         <Button btnText={"Sign up"} />
-      </form>
-    </>
+      </div>
+    </form>
   );
 };
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3e560a674..f7e0655ea 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,13 +1,86 @@
 :root {
+  --title-font: "Playfair Display";
+  --text-font: "Work Sans";
+  --title-color: #683651;
+  --dark-purple: #683651;
+}
+
+* {
+  box-sizing: border-box;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  padding: 0;
+  background-color: #fffcf5;
+  font-family: var(--text-font);
+}
+
+h2 {
+  font-family: var(--title-font);
+  font-size: 35px;
+  color: var(--title-color);
+}
+
+.title-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 25px 0;
+  gap: 15px;
+}
+
+.text-box {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+form {
+  margin: 10px;
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+  font-weight: 400;
+}
+
+fieldset label {
+  margin-bottom: 8px;
+}
+
+legend {
+  font-size: 18px;
+}
+
+fieldset {
+  border: none;
+  padding-top: 5px;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"] {
+  padding: 10px;
+  width: 100%;
+  border-radius: 3px;
+  border: 0.5px solid black;
+}
+
+.button-box {
+  margin: 20px 0;
+}
+
+button {
+  background-color: var(--dark-purple);
+  color: #fffcf5;
+  font-family: var(--title-font);
+  font-size: 16px;
+  border-radius: 5px;
+  padding: 8px 0;
+  text-transform: uppercase;
+  width: 100%;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
\ No newline at end of file
+/* 3D6E30 */
+/* 725982 */
+/* 683651 */

From 47ae853b46d6c31986167ae734c6fe561f4ddf6a Mon Sep 17 00:00:00 2001
From: schouenkes <m.schouenke@gmail.com>
Date: Thu, 23 May 2024 10:56:25 +0200
Subject: [PATCH 05/27] changed the registration layout for bigger screens

---
 frontend/src/components/Button.jsx   |  6 ++--
 frontend/src/components/Headline.jsx |  3 ++
 frontend/src/components/Register.jsx | 40 ++++++++++-----------
 frontend/src/index.css               | 54 +++++++++++++++++++++++-----
 4 files changed, 70 insertions(+), 33 deletions(-)
 create mode 100644 frontend/src/components/Headline.jsx

diff --git a/frontend/src/components/Button.jsx b/frontend/src/components/Button.jsx
index 94a7b673c..24713c646 100644
--- a/frontend/src/components/Button.jsx
+++ b/frontend/src/components/Button.jsx
@@ -1,5 +1,3 @@
 export const Button = ({ btnText }) => {
-  return (
-    <button>{btnText}</button>
-  )  
-}
+  return <button>{btnText}</button>;
+};
diff --git a/frontend/src/components/Headline.jsx b/frontend/src/components/Headline.jsx
new file mode 100644
index 000000000..917d7025c
--- /dev/null
+++ b/frontend/src/components/Headline.jsx
@@ -0,0 +1,3 @@
+export const Headline = ({ titleText }) => {
+  return <h2>{titleText}</h2>;
+};
diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
index 59ccb61ea..733e30a74 100644
--- a/frontend/src/components/Register.jsx
+++ b/frontend/src/components/Register.jsx
@@ -1,10 +1,11 @@
 import { Button } from "./Button";
+import { Headline } from "./Headline";
 
 export const Register = () => {
   return (
     <form>
       <div className="title-box">
-        <h2>Register</h2>
+        <Headline titleText={"Register"} />
         <div className="text-box">
           <p>Love to read and want to meet fellow book enthusiasts?</p>
           <p>
@@ -15,26 +16,14 @@ export const Register = () => {
           <p>We can't wait to welcome you and embark on literary adventures together!</p>
         </div>
       </div>
-      <div>
-        <label>
-          First name
-          <input type="text" name="first-name" placeholder="Type your first name" required />
-        </label>
-
-        <label>
-          Last name
-          <input type="text" name="last-name" placeholder="Type your last name" required />
-        </label>
-      </div>
-
       <label>
-        Username
-        <input type="text" name="username" placeholder="Type your username" required />
+        First name
+        <input type="text" name="first-name" placeholder="Type your first name" required />
       </label>
 
       <label>
-        Password
-        <input type="password" name="username" placeholder="Type your username" required />
+        Last name
+        <input type="text" name="last-name" placeholder="Type your last name" required />
       </label>
 
       <label>
@@ -50,15 +39,15 @@ export const Register = () => {
           <input type="text" name="street" placeholder="Type your street" required />
         </label>
 
-        <div>
-          <div>
+        <div className="address-tablet-desktop">
+          <div className="postcode-box">
             <label>
               Post code
               <input type="text" name="post-code" placeholder="xxx xx" required />
             </label>
           </div>
 
-          <div>
+          <div className="city-box">
             <label>
               City
               <input type="text" name="city" placeholder="Type your city" required />
@@ -66,6 +55,17 @@ export const Register = () => {
           </div>
         </div>
       </fieldset>
+
+      <label>
+        Username
+        <input type="text" name="username" placeholder="Type your username" required />
+      </label>
+
+      <label>
+        Password
+        <input type="password" name="username" placeholder="Type your username" required />
+      </label>
+
       <div className="button-box">
         <Button btnText={"Sign up"} />
       </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f7e0655ea..5fc991510 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -13,6 +13,12 @@
   font-family: var(--text-font);
 }
 
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 h2 {
   font-family: var(--title-font);
   font-size: 35px;
@@ -23,7 +29,6 @@ h2 {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 25px 0;
   gap: 15px;
 }
 
@@ -34,40 +39,41 @@ h2 {
 }
 
 form {
+  display: flex;
+  flex-direction: column;
   margin: 10px;
+  gap: 20px;
 }
 
 label {
   display: flex;
   flex-direction: column;
-  margin-bottom: 20px;
+  /* margin-bottom: 20px; */
   font-weight: 400;
 }
 
-fieldset label {
-  margin-bottom: 8px;
-}
-
 legend {
   font-size: 18px;
 }
 
 fieldset {
+  display: flex;
+  flex-direction: column;
   border: none;
   padding-top: 5px;
+  gap: 15px;
 }
 
 input[type="text"],
 input[type="password"],
 input[type="email"] {
   padding: 10px;
-  width: 100%;
   border-radius: 3px;
   border: 0.5px solid black;
 }
 
 .button-box {
-  margin: 20px 0;
+  margin: 10px 0;
 }
 
 button {
@@ -76,11 +82,41 @@ button {
   font-family: var(--title-font);
   font-size: 16px;
   border-radius: 5px;
-  padding: 8px 0;
+  border: none;
+  padding: 8px;
   text-transform: uppercase;
   width: 100%;
 }
 
+@media (min-width: 480px) {
+  form {
+    width: 440px;
+  }
+
+  h2 {
+    font-size: 45px;
+  }
+}
+
+@media (min-width: 768px) {
+  form {
+    width: 580px;
+  }
+
+  .address-tablet-desktop {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .postcode-box label {
+    width: 200px;
+  }
+
+  .city-box label {
+    width: 350px;
+  }
+}
+
 /* 3D6E30 */
 /* 725982 */
 /* 683651 */

From f1616bcfd94dd96ce8409bdca0187727fa4d133a Mon Sep 17 00:00:00 2001
From: schouenkes <m.schouenke@gmail.com>
Date: Thu, 23 May 2024 12:05:38 +0200
Subject: [PATCH 06/27] added a focus/blur function for the placeholder

---
 frontend/src/components/Home.jsx      | 11 +++---
 frontend/src/components/LogIn.jsx     | 30 +++++++-------
 frontend/src/components/Register.jsx  | 57 ++++++++-------------------
 frontend/src/components/TextInput.jsx | 20 ++++++++++
 frontend/src/helpers/HandleFocus.jsx  | 20 ++++++++++
 frontend/src/index.css                | 22 ++++++++---
 6 files changed, 95 insertions(+), 65 deletions(-)
 create mode 100644 frontend/src/components/TextInput.jsx
 create mode 100644 frontend/src/helpers/HandleFocus.jsx

diff --git a/frontend/src/components/Home.jsx b/frontend/src/components/Home.jsx
index ee680bd06..a18d67df1 100644
--- a/frontend/src/components/Home.jsx
+++ b/frontend/src/components/Home.jsx
@@ -1,12 +1,11 @@
-import { LogIn } from "./LogIn"
-import { Register } from "./Register"
+import { LogIn } from "./LogIn";
+import { Register } from "./Register";
 
 export const Home = () => {
   return (
-    <div>
-        <LogIn />
-        <Register />      
+    <div className="outer-container">
+      <LogIn />
+      <Register />
     </div>
   );
 };
-
diff --git a/frontend/src/components/LogIn.jsx b/frontend/src/components/LogIn.jsx
index d8aa56251..07b61d9ef 100644
--- a/frontend/src/components/LogIn.jsx
+++ b/frontend/src/components/LogIn.jsx
@@ -1,20 +1,22 @@
 import { Button } from "./Button";
+import { Headline } from "./Headline";
+import { TextInput } from "./TextInput";
 
 export const LogIn = () => {
   return (
-    <>
-      <div>LogIn</div>
-      <form>
-        <label>
-          Username
-          <input type="text" placeholder="username" />
-        </label>
-        <label type="password" placeholder="password">
-          Password
-          <input />
-        </label>
-        <Button btnText={"Log in"} />
-      </form>
-    </>
+    <form>
+      <div className="title-box">
+        <Headline titleText={"Log in"} />
+        <div className="text-box">
+          <p>Welcome back, let the literary adventures continue!</p>
+        </div>
+      </div>
+      <div className="input-tablet-desktop">
+        <TextInput inputType={"text"} inputName={"username"} placeholder={"Type your username"} />
+
+        <TextInput inputType={"password"} inputName={"password"} placeholder={"Type your password"} />
+      </div>
+      <Button btnText={"Log in"} />
+    </form>
   );
 };
diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
index 733e30a74..e0f0654cb 100644
--- a/frontend/src/components/Register.jsx
+++ b/frontend/src/components/Register.jsx
@@ -1,5 +1,6 @@
 import { Button } from "./Button";
 import { Headline } from "./Headline";
+import { TextInput } from "./TextInput";
 
 export const Register = () => {
   return (
@@ -9,66 +10,42 @@ export const Register = () => {
         <div className="text-box">
           <p>Love to read and want to meet fellow book enthusiasts?</p>
           <p>
-            {" "}
             Register now for our OMC Book Club and dive into lively discussions, discover new genres, and share your
             favorite reads!
           </p>
-          <p>We can't wait to welcome you and embark on literary adventures together!</p>
         </div>
       </div>
-      <label>
-        First name
-        <input type="text" name="first-name" placeholder="Type your first name" required />
-      </label>
 
-      <label>
-        Last name
-        <input type="text" name="last-name" placeholder="Type your last name" required />
-      </label>
+      <TextInput
+        label={"First name"}
+        inputType={"text"}
+        inputName={"first-name"}
+        placeholder={"Type your first name"}
+      />
 
-      <label>
-        E-mail
-        <input type="email" name="email" placeholder="Type your e-mail" required />
-      </label>
+      <TextInput label={"Last name"} inputType={"text"} inputName={"last-name"} placeholder={"Type your last name"} />
+
+      <TextInput label={"E-mail"} inputType={"email"} inputName={"email"} placeholder={"Type your e-mail"} />
 
       <fieldset>
         <legend>Address</legend>
-
-        <label>
-          Street
-          <input type="text" name="street" placeholder="Type your street" required />
-        </label>
-
-        <div className="address-tablet-desktop">
+        <TextInput label={"Street"} inputType={"text"} inputName={"street"} placeholder={"Type your street"} />
+        <div className="input-tablet-desktop">
           <div className="postcode-box">
-            <label>
-              Post code
-              <input type="text" name="post-code" placeholder="xxx xx" required />
-            </label>
+            <TextInput label={"Post code"} inputType={"text"} inputName={"post-code"} placeholder={"xxx xx"} />
           </div>
 
           <div className="city-box">
-            <label>
-              City
-              <input type="text" name="city" placeholder="Type your city" required />
-            </label>
+            <TextInput label={"City"} inputType={"text"} inputName={"city"} placeholder={"Type your city"} />
           </div>
         </div>
       </fieldset>
 
-      <label>
-        Username
-        <input type="text" name="username" placeholder="Type your username" required />
-      </label>
+      <TextInput label={"Username"} inputType={"text"} inputName={"username"} placeholder={"Type your username"} />
 
-      <label>
-        Password
-        <input type="password" name="username" placeholder="Type your username" required />
-      </label>
+      <TextInput label={"password"} inputType={"password"} inputName={"password"} placeholder={"Type your password"} />
 
-      <div className="button-box">
-        <Button btnText={"Sign up"} />
-      </div>
+      <Button btnText={"Sign up"} />
     </form>
   );
 };
diff --git a/frontend/src/components/TextInput.jsx b/frontend/src/components/TextInput.jsx
new file mode 100644
index 000000000..c795b78b7
--- /dev/null
+++ b/frontend/src/components/TextInput.jsx
@@ -0,0 +1,20 @@
+import { HandleFocus } from "../helpers/HandleFocus";
+
+export const TextInput = ({ inputType, inputName, placeholder, label }) => {
+  const { placeholder: ourPlaceholder, handleFocus, handleOnBlur } = HandleFocus(placeholder, inputName);
+
+  return (
+    <>
+      <label>
+        {label}
+        <input
+          type={inputType}
+          placeholder={ourPlaceholder}
+          name={inputName}
+          onFocus={handleFocus}
+          onBlur={(e) => handleOnBlur(e.target.value)}
+        />
+      </label>
+    </>
+  );
+};
diff --git a/frontend/src/helpers/HandleFocus.jsx b/frontend/src/helpers/HandleFocus.jsx
new file mode 100644
index 000000000..2b63b4363
--- /dev/null
+++ b/frontend/src/helpers/HandleFocus.jsx
@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+// handles the placeholder visibility depending on, if the input field is active or not
+export const HandleFocus = (initialPlaceholder, inputName) => {
+  const [placeholder, setPlaceholder] = useState(initialPlaceholder);
+
+  // when the input field is active the placeholder disappear
+  const handleFocus = () => {
+    setPlaceholder("");
+  };
+
+  // if the input field is empty when focusing on another input, the placeholder will appear again.
+  const handleOnBlur = (value) => {
+    if (value === "") {
+      setPlaceholder(initialPlaceholder);
+    }
+  };
+
+  return { placeholder, handleFocus, handleOnBlur, inputName };
+};
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 5fc991510..84577c286 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -19,6 +19,12 @@ body {
   align-items: center;
 }
 
+.outer-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
 h2 {
   font-family: var(--title-font);
   font-size: 35px;
@@ -36,6 +42,7 @@ h2 {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  text-align: center;
 }
 
 form {
@@ -72,10 +79,6 @@ input[type="email"] {
   border: 0.5px solid black;
 }
 
-.button-box {
-  margin: 10px 0;
-}
-
 button {
   background-color: var(--dark-purple);
   color: #fffcf5;
@@ -103,11 +106,15 @@ button {
     width: 580px;
   }
 
-  .address-tablet-desktop {
+  .input-tablet-desktop {
     display: flex;
     justify-content: space-between;
   }
 
+  .input-tablet-desktop label {
+    width: 280px;
+  }
+
   .postcode-box label {
     width: 200px;
   }
@@ -115,6 +122,11 @@ button {
   .city-box label {
     width: 350px;
   }
+
+  button {
+    width: 150px;
+    align-self: flex-end;
+  }
 }
 
 /* 3D6E30 */

From fa9f16b7fe95c7e51e286da6b7658df9e58dd9be Mon Sep 17 00:00:00 2001
From: schouenkes <m.schouenke@gmail.com>
Date: Thu, 23 May 2024 13:33:19 +0200
Subject: [PATCH 07/27] small styling changes

---
 frontend/src/components/LogIn.jsx     |  9 +++++++--
 frontend/src/components/Register.jsx  | 12 ++++--------
 frontend/src/components/TextInput.jsx |  5 +++--
 frontend/src/index.css                |  3 ++-
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/LogIn.jsx b/frontend/src/components/LogIn.jsx
index 07b61d9ef..9b98d0afb 100644
--- a/frontend/src/components/LogIn.jsx
+++ b/frontend/src/components/LogIn.jsx
@@ -12,9 +12,14 @@ export const LogIn = () => {
         </div>
       </div>
       <div className="input-tablet-desktop">
-        <TextInput inputType={"text"} inputName={"username"} placeholder={"Type your username"} />
+        <TextInput label={"Username"} inputType={"text"} inputName={"username"} placeholder={"Type your username"} />
 
-        <TextInput inputType={"password"} inputName={"password"} placeholder={"Type your password"} />
+        <TextInput
+          label={"Password"}
+          inputType={"password"}
+          inputName={"password"}
+          placeholder={"Type your password"}
+        />
       </div>
       <Button btnText={"Log in"} />
     </form>
diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
index e0f0654cb..b33bec1fc 100644
--- a/frontend/src/components/Register.jsx
+++ b/frontend/src/components/Register.jsx
@@ -16,23 +16,19 @@ export const Register = () => {
         </div>
       </div>
 
-      <TextInput
-        label={"First name"}
-        inputType={"text"}
-        inputName={"first-name"}
-        placeholder={"Type your first name"}
-      />
+      <TextInput label={"First name"} inputType={"text"} inputName={"firstname"} placeholder={"Type your first name"} />
 
-      <TextInput label={"Last name"} inputType={"text"} inputName={"last-name"} placeholder={"Type your last name"} />
+      <TextInput label={"Last name"} inputType={"text"} inputName={"lastname"} placeholder={"Type your last name"} />
 
       <TextInput label={"E-mail"} inputType={"email"} inputName={"email"} placeholder={"Type your e-mail"} />
 
       <fieldset>
         <legend>Address</legend>
         <TextInput label={"Street"} inputType={"text"} inputName={"street"} placeholder={"Type your street"} />
+
         <div className="input-tablet-desktop">
           <div className="postcode-box">
-            <TextInput label={"Post code"} inputType={"text"} inputName={"post-code"} placeholder={"xxx xx"} />
+            <TextInput label={"Post code"} inputType={"text"} inputName={"postcode"} placeholder={"xxx xx"} />
           </div>
 
           <div className="city-box">
diff --git a/frontend/src/components/TextInput.jsx b/frontend/src/components/TextInput.jsx
index c795b78b7..09205f1f7 100644
--- a/frontend/src/components/TextInput.jsx
+++ b/frontend/src/components/TextInput.jsx
@@ -1,7 +1,7 @@
 import { HandleFocus } from "../helpers/HandleFocus";
 
 export const TextInput = ({ inputType, inputName, placeholder, label }) => {
-  const { placeholder: ourPlaceholder, handleFocus, handleOnBlur } = HandleFocus(placeholder, inputName);
+  const { placeholder: initialPlaceholder, handleFocus, handleOnBlur } = HandleFocus(placeholder, inputName);
 
   return (
     <>
@@ -9,10 +9,11 @@ export const TextInput = ({ inputType, inputName, placeholder, label }) => {
         {label}
         <input
           type={inputType}
-          placeholder={ourPlaceholder}
+          placeholder={initialPlaceholder}
           name={inputName}
           onFocus={handleFocus}
           onBlur={(e) => handleOnBlur(e.target.value)}
+          required
         />
       </label>
     </>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 84577c286..01094f652 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -35,6 +35,7 @@ h2 {
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-bottom: 10px;
   gap: 15px;
 }
 
@@ -76,7 +77,7 @@ input[type="password"],
 input[type="email"] {
   padding: 10px;
   border-radius: 3px;
-  border: 0.5px solid black;
+  border: 1px solid black;
 }
 
 button {

From cdd227f041f1f9d573c3e154122099209afeb141 Mon Sep 17 00:00:00 2001
From: Teddy <yoo.ji.yg@gmail.com>
Date: Thu, 23 May 2024 15:11:42 +0200
Subject: [PATCH 08/27] Co-authored-by: viktoria-olo
 <viktoria-olo@users.noreply.github.com> Co-authored-by: Maja Schouenke
 <schouenkes@users.noreply.github.com>

---
 backend/server.js                     |  11 +-
 frontend/src/components/Button.jsx    |   2 +-
 frontend/src/components/Register.jsx  | 164 ++++++++++++++++++++++++--
 frontend/src/components/TextInput.jsx |   4 +-
 4 files changed, 165 insertions(+), 16 deletions(-)

diff --git a/backend/server.js b/backend/server.js
index c6dfbef2d..0a0f14e16 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -3,7 +3,6 @@ import express from "express";
 import mongoose from "mongoose";
 import bcrypt from "bcrypt";
 import crypto from "crypto";
-import { accessSync } from "fs";
 
 const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-auth";
 mongoose.connect(mongoUrl);
@@ -65,6 +64,16 @@ app.get("/", (req, res) => {
   res.send("Hello Technigo!");
 });
 
+
+app.get("/users", async (req, res) => {
+  const allUsers = await User.find().exec();
+  if (allUsers.length > 0) {
+    res.json(allUsers);
+  } else {
+    res.status(404).send("No users found");
+  }
+});
+
 app.post("/users", async (req, res) => {
   try {
     const { name, username, email, password, address } = req.body;
diff --git a/frontend/src/components/Button.jsx b/frontend/src/components/Button.jsx
index 24713c646..9099dadc9 100644
--- a/frontend/src/components/Button.jsx
+++ b/frontend/src/components/Button.jsx
@@ -1,3 +1,3 @@
 export const Button = ({ btnText }) => {
-  return <button>{btnText}</button>;
+  return <button type="submit">{btnText}</button>;
 };
diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
index b33bec1fc..a494355f7 100644
--- a/frontend/src/components/Register.jsx
+++ b/frontend/src/components/Register.jsx
@@ -1,47 +1,185 @@
 import { Button } from "./Button";
 import { Headline } from "./Headline";
 import { TextInput } from "./TextInput";
+import { useState } from "react";
 
 export const Register = () => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [street, setStreet] = useState("");
+  const [postCode, setPostCode] = useState("");
+  const [city, setCity] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [verifyPassword, setVerifyPassword] = useState("");
+  const [address, setAddress] = useState("");
+  const [accessToken, setAccessToken] = useState("");
+
+  const handleChange = (event) => {};
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setAddress(street + postCode + city);
+    try {
+      const response = await fetch("http://localhost:8080/users", {
+        method: "POST",
+        body: JSON.stringify({
+          name: name,
+          username: username,
+          email: email,
+          password: password,
+          address: address,
+        }),
+        headers: { "Content-Type": "application/json" },
+      });
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      const result = await response.json();
+      console.log(result);
+    } catch (error) {
+      console.error("Error adding new user:", error);
+    }
+  };
+
   return (
-    <form>
+    <form onSubmit={handleSubmit}>
       <div className="title-box">
         <Headline titleText={"Register"} />
         <div className="text-box">
           <p>Love to read and want to meet fellow book enthusiasts?</p>
           <p>
-            Register now for our OMC Book Club and dive into lively discussions, discover new genres, and share your
-            favorite reads!
+            Register now for our OMC Book Club and dive into lively discussions,
+            discover new genres, and share your favorite reads!
           </p>
         </div>
       </div>
 
-      <TextInput label={"First name"} inputType={"text"} inputName={"firstname"} placeholder={"Type your first name"} />
-
-      <TextInput label={"Last name"} inputType={"text"} inputName={"lastname"} placeholder={"Type your last name"} />
-
-      <TextInput label={"E-mail"} inputType={"email"} inputName={"email"} placeholder={"Type your e-mail"} />
+      <TextInput
+        label={"Full name"}
+        inputType={"text"}
+        inputName={"fullname"}
+        placeholder={"Type your full name"}
+        value={name}
+        onChange={(event) => setName(event.target.value)}
+      />
+      <TextInput
+        label={"E-mail"}
+        inputType={"email"}
+        inputName={"email"}
+        placeholder={"Type your e-mail"}
+        value={email}
+        onChange={(event) => setEmail(event.target.value)}
+      />
 
       <fieldset>
         <legend>Address</legend>
-        <TextInput label={"Street"} inputType={"text"} inputName={"street"} placeholder={"Type your street"} />
+        <TextInput
+          label={"Street"}
+          inputType={"text"}
+          inputName={"street"}
+          placeholder={"Type your street"}
+          value={street}
+          onChange={(event) => setStreet(event.target.value)}
+        />
 
         <div className="input-tablet-desktop">
           <div className="postcode-box">
-            <TextInput label={"Post code"} inputType={"text"} inputName={"postcode"} placeholder={"xxx xx"} />
+            <TextInput
+              label={"Post code"}
+              inputType={"text"}
+              inputName={"postcode"}
+              placeholder={"xxx xx"}
+              value={postCode.toString()}
+              onChange={(event) => setPostCode(event.target.value)}
+            />
           </div>
 
           <div className="city-box">
-            <TextInput label={"City"} inputType={"text"} inputName={"city"} placeholder={"Type your city"} />
+            <TextInput
+              label={"City"}
+              inputType={"text"}
+              inputName={"city"}
+              placeholder={"Type your city"}
+              value={city}
+              onChange={(event) => setCity(event.target.value)}
+            />
           </div>
         </div>
       </fieldset>
 
-      <TextInput label={"Username"} inputType={"text"} inputName={"username"} placeholder={"Type your username"} />
+      <TextInput
+        label={"Username"}
+        inputType={"text"}
+        inputName={"username"}
+        placeholder={"Type your username"}
+        value={username}
+        onChange={(event) => setUsername(event.target.value)}
+      />
+
+      <TextInput
+        label={"Password"}
+        inputType={"password"}
+        inputName={"password"}
+        placeholder={"Type your password"}
+        value={password}
+        onChange={(event) => setPassword(event.target.value)}
+      />
 
-      <TextInput label={"password"} inputType={"password"} inputName={"password"} placeholder={"Type your password"} />
+      <TextInput
+        label={"Verifying password"}
+        inputType={"password"}
+        inputName={"verifyingPassword"}
+        placeholder={"Type your password"}
+        value={verifyPassword}
+        onChange={(event) => setVerifyPassword(event.target.value)}
+      />
 
       <Button btnText={"Sign up"} />
     </form>
   );
 };
+
+/* 
+  const [message, setMessage] = useState("");
+  const [charactersUsed, setCharactersUsed] = useState(0);
+  const [errorMessage, setErrorMessage] = useState("");
+
+
+  const handleChange = (event) => {
+    const newMessage = event.target.value;
+    setMessage(newMessage);
+    setCharactersUsed(newMessage.length);
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (message.length < 5) {
+      setErrorMessage("Thought must be longer than 5 characters");
+      return;
+    } else if (message.length > 140) {
+      setErrorMessage("Thought must not exceed 140 characters");
+      return;
+    } else {
+      try {
+        const response = await fetch(apiUrl, {
+          method: "POST",
+          body: JSON.stringify({ message: message }),
+          headers: { "Content-Type": "application/json" },
+        });
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        const result = await response.json();
+        const newThought = result.response;
+
+        setThoughts((previousThoughts) => [newThought, ...previousThoughts]);
+        setMessage("");
+        setErrorMessage("");
+        setCharactersUsed(0);
+      } catch (error) {
+        console.error("Error adding new thought:", error);
+      }
+    }
+  };
+ */
diff --git a/frontend/src/components/TextInput.jsx b/frontend/src/components/TextInput.jsx
index 09205f1f7..2895a99c7 100644
--- a/frontend/src/components/TextInput.jsx
+++ b/frontend/src/components/TextInput.jsx
@@ -1,6 +1,6 @@
 import { HandleFocus } from "../helpers/HandleFocus";
 
-export const TextInput = ({ inputType, inputName, placeholder, label }) => {
+export const TextInput = ({ inputType, inputName, placeholder, label, value, onChange }) => {
   const { placeholder: initialPlaceholder, handleFocus, handleOnBlur } = HandleFocus(placeholder, inputName);
 
   return (
@@ -14,6 +14,8 @@ export const TextInput = ({ inputType, inputName, placeholder, label }) => {
           onFocus={handleFocus}
           onBlur={(e) => handleOnBlur(e.target.value)}
           required
+          value={value}
+          onChange={onChange}
         />
       </label>
     </>

From 980aa59bde705cf25f261a0a3687490e14304a35 Mon Sep 17 00:00:00 2001
From: Teddy <yoo.ji.yg@gmail.com>
Date: Thu, 23 May 2024 16:37:16 +0200
Subject: [PATCH 09/27] create register form

Co-authored-by: Maja Schouenke <schouenkes@users.noreply.github.com>
Co-authored-by: viktoria-olo <viktoria-olo@users.noreply.github.com>
---
 backend/server.js                    |  5 +-
 frontend/src/components/LogIn.jsx    | 41 ++++++++++++++-
 frontend/src/components/Register.jsx | 76 +++++++++++-----------------
 3 files changed, 71 insertions(+), 51 deletions(-)

diff --git a/backend/server.js b/backend/server.js
index 0a0f14e16..b15ca8ff9 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -19,10 +19,12 @@ const userSchema = new Schema({
   username: {
     type: String,
     unique: true,
+    required: true,
   },
   email: {
     type: String,
     unique: true,
+    required: true,
   },
   password: {
     type: String,
@@ -64,7 +66,6 @@ app.get("/", (req, res) => {
   res.send("Hello Technigo!");
 });
 
-
 app.get("/users", async (req, res) => {
   const allUsers = await User.find().exec();
   if (allUsers.length > 0) {
@@ -85,7 +86,7 @@ app.post("/users", async (req, res) => {
       password: bcrypt.hashSync(password, salt),
       address,
     });
-    user.save();
+    await user.save();
     res.status(201).json({ userId: user._id, accessToken: user.accessToken });
   } catch (error) {
     res
diff --git a/frontend/src/components/LogIn.jsx b/frontend/src/components/LogIn.jsx
index 9b98d0afb..1f280a107 100644
--- a/frontend/src/components/LogIn.jsx
+++ b/frontend/src/components/LogIn.jsx
@@ -1,10 +1,37 @@
 import { Button } from "./Button";
 import { Headline } from "./Headline";
 import { TextInput } from "./TextInput";
+import { useState } from "react";
 
 export const LogIn = () => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    try {
+      const response = await fetch("http://localhost:8080/sessions", {
+        method: "POST",
+        body: JSON.stringify({
+          username: username,
+          password: password,
+        }),
+        headers: { "Content-Type": "application/json" },
+      });
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      const result = await response.json();
+      console.log(result);
+    } catch (error) {
+      console.error("Error logging in", error);
+    }
+  };
+
   return (
-    <form>
+    <>
+    <form onSubmit={handleSubmit}>
       <div className="title-box">
         <Headline titleText={"Log in"} />
         <div className="text-box">
@@ -12,16 +39,26 @@ export const LogIn = () => {
         </div>
       </div>
       <div className="input-tablet-desktop">
-        <TextInput label={"Username"} inputType={"text"} inputName={"username"} placeholder={"Type your username"} />
+        <TextInput
+          label={"Username"}
+          inputType={"text"}
+          inputName={"username"}
+          placeholder={"Type your username"}
+          value={username}
+          onChange={(event) => setUsername(event.target.value)}
+        />
 
         <TextInput
           label={"Password"}
           inputType={"password"}
           inputName={"password"}
           placeholder={"Type your password"}
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
         />
       </div>
       <Button btnText={"Log in"} />
     </form>
+    </>
   );
 };
diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
index a494355f7..4f8efb1f1 100644
--- a/frontend/src/components/Register.jsx
+++ b/frontend/src/components/Register.jsx
@@ -15,11 +15,37 @@ export const Register = () => {
   const [address, setAddress] = useState("");
   const [accessToken, setAccessToken] = useState("");
 
-  const handleChange = (event) => {};
+  // const [formData, setFormData] = useState({
+  //   fullname: "",
+  //   email: "",
+  //   street: "",
+  //   postcode: "",
+  //   city: "",
+  //   username: "",
+  //   password: "",
+  //   verifyingPassword: ""
+  // });
+
+  // const handleChange = (event) => {
+  //   const { name, value } = event.target;
+  //   setFormData((prevData) => ({
+  //    ...prevData,
+  //     [name]: value
+  //   }));
+  // };
 
   const handleSubmit = async (event) => {
     event.preventDefault();
-    setAddress(street + postCode + city);
+
+    // Check if passwords match
+    if (password !== verifyPassword) {
+      console.error("Passwords do not match");
+      return;
+    }
+
+    // Construct the address directly here
+    const constructedAddress = street + postCode + city;
+
     try {
       const response = await fetch("http://localhost:8080/users", {
         method: "POST",
@@ -28,7 +54,7 @@ export const Register = () => {
           username: username,
           email: email,
           password: password,
-          address: address,
+          address: constructedAddress,
         }),
         headers: { "Content-Type": "application/json" },
       });
@@ -139,47 +165,3 @@ export const Register = () => {
     </form>
   );
 };
-
-/* 
-  const [message, setMessage] = useState("");
-  const [charactersUsed, setCharactersUsed] = useState(0);
-  const [errorMessage, setErrorMessage] = useState("");
-
-
-  const handleChange = (event) => {
-    const newMessage = event.target.value;
-    setMessage(newMessage);
-    setCharactersUsed(newMessage.length);
-  };
-
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-    if (message.length < 5) {
-      setErrorMessage("Thought must be longer than 5 characters");
-      return;
-    } else if (message.length > 140) {
-      setErrorMessage("Thought must not exceed 140 characters");
-      return;
-    } else {
-      try {
-        const response = await fetch(apiUrl, {
-          method: "POST",
-          body: JSON.stringify({ message: message }),
-          headers: { "Content-Type": "application/json" },
-        });
-        if (!response.ok) {
-          throw new Error("Network response was not ok");
-        }
-        const result = await response.json();
-        const newThought = result.response;
-
-        setThoughts((previousThoughts) => [newThought, ...previousThoughts]);
-        setMessage("");
-        setErrorMessage("");
-        setCharactersUsed(0);
-      } catch (error) {
-        console.error("Error adding new thought:", error);
-      }
-    }
-  };
- */

From d618568d313a19248335c755162ad633965e2bf0 Mon Sep 17 00:00:00 2001
From: Viktoria Olofsson <viktoriaolofsson@gmail.com>
Date: Thu, 23 May 2024 17:49:49 +0200
Subject: [PATCH 10/27] fetch from authenticated endpoint

---
 frontend/src/components/LogIn.jsx   | 58 +++++++++++++++--------------
 frontend/src/components/Session.jsx | 33 +++++++++++++++-
 2 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/LogIn.jsx b/frontend/src/components/LogIn.jsx
index 1f280a107..22afd8090 100644
--- a/frontend/src/components/LogIn.jsx
+++ b/frontend/src/components/LogIn.jsx
@@ -1,11 +1,13 @@
 import { Button } from "./Button";
 import { Headline } from "./Headline";
 import { TextInput } from "./TextInput";
+import { Session } from "./Session";
 import { useState } from "react";
 
 export const LogIn = () => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
+  const [accessToken, setAccessToken] = useState("");
 
   const handleSubmit = async (event) => {
     event.preventDefault();
@@ -23,7 +25,8 @@ export const LogIn = () => {
         throw new Error("Network response was not ok");
       }
       const result = await response.json();
-      console.log(result);
+      setAccessToken(result.accessToken);
+      console.log("accessToken: ", accessToken);
     } catch (error) {
       console.error("Error logging in", error);
     }
@@ -31,34 +34,35 @@ export const LogIn = () => {
 
   return (
     <>
-    <form onSubmit={handleSubmit}>
-      <div className="title-box">
-        <Headline titleText={"Log in"} />
-        <div className="text-box">
-          <p>Welcome back, let the literary adventures continue!</p>
+      <form onSubmit={handleSubmit}>
+        <div className="title-box">
+          <Headline titleText={"Log in"} />
+          <div className="text-box">
+            <p>Welcome back, let the literary adventures continue!</p>
+          </div>
         </div>
-      </div>
-      <div className="input-tablet-desktop">
-        <TextInput
-          label={"Username"}
-          inputType={"text"}
-          inputName={"username"}
-          placeholder={"Type your username"}
-          value={username}
-          onChange={(event) => setUsername(event.target.value)}
-        />
+        <div className="input-tablet-desktop">
+          <TextInput
+            label={"Username"}
+            inputType={"text"}
+            inputName={"username"}
+            placeholder={"Type your username"}
+            value={username}
+            onChange={(event) => setUsername(event.target.value)}
+          />
 
-        <TextInput
-          label={"Password"}
-          inputType={"password"}
-          inputName={"password"}
-          placeholder={"Type your password"}
-          value={password}
-          onChange={(event) => setPassword(event.target.value)}
-        />
-      </div>
-      <Button btnText={"Log in"} />
-    </form>
+          <TextInput
+            label={"Password"}
+            inputType={"password"}
+            inputName={"password"}
+            placeholder={"Type your password"}
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+          />
+        </div>
+        <Button btnText={"Log in"} />
+      </form>
+      {accessToken ? <Session accessToken={accessToken} /> : ""}
     </>
   );
 };
diff --git a/frontend/src/components/Session.jsx b/frontend/src/components/Session.jsx
index 8ee384e7e..507b39522 100644
--- a/frontend/src/components/Session.jsx
+++ b/frontend/src/components/Session.jsx
@@ -1,3 +1,32 @@
-export const Session = () => {
-  return <div>Session: You are logged in</div>;
+import { useEffect, useState } from "react";
+
+export const Session = ({ accessToken }) => {
+  const [message, setMessage] = useState("");
+
+  const fetchData = async (accessToken) => {
+    try {
+      const response = await fetch("http://localhost:8080/logged-in", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: accessToken,
+        },
+      });
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      const result = await response.json();
+      setMessage(result.message);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  };
+  useEffect(() => {
+    if (accessToken) {
+      fetchData(accessToken);
+    }
+  }, []);
+
+  return <div>Session: You are logged in. {message}</div>;
 };

From 95d8b2deafc4258e6abf6b6ee3204a4d92d4e2b3 Mon Sep 17 00:00:00 2001
From: Viktoria Olofsson <viktoriaolofsson@gmail.com>
Date: Thu, 23 May 2024 18:56:53 +0200
Subject: [PATCH 11/27] simplified the form data

---
 frontend/src/components/Button.jsx   |  8 ++-
 frontend/src/components/LogIn.jsx    |  8 ++-
 frontend/src/components/Register.jsx | 97 +++++++++++++---------------
 frontend/src/components/Session.jsx  |  1 +
 4 files changed, 58 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/Button.jsx b/frontend/src/components/Button.jsx
index 9099dadc9..9db3ce541 100644
--- a/frontend/src/components/Button.jsx
+++ b/frontend/src/components/Button.jsx
@@ -1,3 +1,7 @@
-export const Button = ({ btnText }) => {
-  return <button type="submit">{btnText}</button>;
+export const Button = ({ btnText, type, onClick }) => {
+  return (
+    <button onClick={onClick} type={type}>
+      {btnText}
+    </button>
+  );
 };
diff --git a/frontend/src/components/LogIn.jsx b/frontend/src/components/LogIn.jsx
index 22afd8090..67dce60ab 100644
--- a/frontend/src/components/LogIn.jsx
+++ b/frontend/src/components/LogIn.jsx
@@ -32,6 +32,11 @@ export const LogIn = () => {
     }
   };
 
+  const logOut = () => {
+    setAccessToken("");
+    window.location.reload();
+  };
+
   return (
     <>
       <form onSubmit={handleSubmit}>
@@ -60,9 +65,10 @@ export const LogIn = () => {
             onChange={(event) => setPassword(event.target.value)}
           />
         </div>
-        <Button btnText={"Log in"} />
+        <Button type={"submit"} btnText={"Log in"} />
       </form>
       {accessToken ? <Session accessToken={accessToken} /> : ""}
+      {accessToken ? <Button onClick={logOut} btnText={"Sign out"} /> : ""}
     </>
   );
 };
diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
index 4f8efb1f1..e4b5461f1 100644
--- a/frontend/src/components/Register.jsx
+++ b/frontend/src/components/Register.jsx
@@ -4,56 +4,45 @@ import { TextInput } from "./TextInput";
 import { useState } from "react";
 
 export const Register = () => {
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [street, setStreet] = useState("");
-  const [postCode, setPostCode] = useState("");
-  const [city, setCity] = useState("");
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [verifyPassword, setVerifyPassword] = useState("");
-  const [address, setAddress] = useState("");
-  const [accessToken, setAccessToken] = useState("");
-
-  // const [formData, setFormData] = useState({
-  //   fullname: "",
-  //   email: "",
-  //   street: "",
-  //   postcode: "",
-  //   city: "",
-  //   username: "",
-  //   password: "",
-  //   verifyingPassword: ""
-  // });
-
-  // const handleChange = (event) => {
-  //   const { name, value } = event.target;
-  //   setFormData((prevData) => ({
-  //    ...prevData,
-  //     [name]: value
-  //   }));
-  // };
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    street: "",
+    postCode: "",
+    city: "",
+    username: "",
+    password: "",
+    verifyingPassword: "",
+  });
+
+  const handleChange = (fieldName, value) => {
+    setFormData({
+      ...formData,
+      [fieldName]: value,
+    });
+  };
 
   const handleSubmit = async (event) => {
     event.preventDefault();
 
     // Check if passwords match
-    if (password !== verifyPassword) {
+    if (formData.password !== formData.verifyingPassword) {
       console.error("Passwords do not match");
       return;
     }
 
-    // Construct the address directly here
-    const constructedAddress = street + postCode + city;
+    // Create the full address
+    const constructedAddress =
+      formData.street + formData.postCode + formData.city;
 
     try {
       const response = await fetch("http://localhost:8080/users", {
         method: "POST",
         body: JSON.stringify({
-          name: name,
-          username: username,
-          email: email,
-          password: password,
+          name: formData.name,
+          username: formData.username,
+          email: formData.email,
+          password: formData.password,
           address: constructedAddress,
         }),
         headers: { "Content-Type": "application/json" },
@@ -86,16 +75,16 @@ export const Register = () => {
         inputType={"text"}
         inputName={"fullname"}
         placeholder={"Type your full name"}
-        value={name}
-        onChange={(event) => setName(event.target.value)}
+        value={formData.name}
+        onChange={(event) => handleChange("name", event.target.value)}
       />
       <TextInput
         label={"E-mail"}
         inputType={"email"}
         inputName={"email"}
         placeholder={"Type your e-mail"}
-        value={email}
-        onChange={(event) => setEmail(event.target.value)}
+        value={formData.email}
+        onChange={(event) => handleChange("email", event.target.value)}
       />
 
       <fieldset>
@@ -105,8 +94,8 @@ export const Register = () => {
           inputType={"text"}
           inputName={"street"}
           placeholder={"Type your street"}
-          value={street}
-          onChange={(event) => setStreet(event.target.value)}
+          value={formData.street}
+          onChange={(event) => handleChange("street", event.target.value)}
         />
 
         <div className="input-tablet-desktop">
@@ -116,8 +105,8 @@ export const Register = () => {
               inputType={"text"}
               inputName={"postcode"}
               placeholder={"xxx xx"}
-              value={postCode.toString()}
-              onChange={(event) => setPostCode(event.target.value)}
+              value={formData.postCode.toString()}
+              onChange={(event) => handleChange("postCode", event.target.value)}
             />
           </div>
 
@@ -127,8 +116,8 @@ export const Register = () => {
               inputType={"text"}
               inputName={"city"}
               placeholder={"Type your city"}
-              value={city}
-              onChange={(event) => setCity(event.target.value)}
+              value={formData.city}
+              onChange={(event) => handleChange("city", event.target.value)}
             />
           </div>
         </div>
@@ -139,8 +128,8 @@ export const Register = () => {
         inputType={"text"}
         inputName={"username"}
         placeholder={"Type your username"}
-        value={username}
-        onChange={(event) => setUsername(event.target.value)}
+        value={formData.username}
+        onChange={(event) => handleChange("username", event.target.value)}
       />
 
       <TextInput
@@ -148,8 +137,8 @@ export const Register = () => {
         inputType={"password"}
         inputName={"password"}
         placeholder={"Type your password"}
-        value={password}
-        onChange={(event) => setPassword(event.target.value)}
+        value={formData.password}
+        onChange={(event) => handleChange("password", event.target.value)}
       />
 
       <TextInput
@@ -157,11 +146,13 @@ export const Register = () => {
         inputType={"password"}
         inputName={"verifyingPassword"}
         placeholder={"Type your password"}
-        value={verifyPassword}
-        onChange={(event) => setVerifyPassword(event.target.value)}
+        value={formData.verifyingPassword}
+        onChange={(event) =>
+          handleChange("verifyingPassword", event.target.value)
+        }
       />
 
-      <Button btnText={"Sign up"} />
+      <Button type={"submit"} btnText={"Sign up"} />
     </form>
   );
 };
diff --git a/frontend/src/components/Session.jsx b/frontend/src/components/Session.jsx
index 507b39522..457381f7d 100644
--- a/frontend/src/components/Session.jsx
+++ b/frontend/src/components/Session.jsx
@@ -22,6 +22,7 @@ export const Session = ({ accessToken }) => {
       console.error("Error fetching data:", error);
     }
   };
+
   useEffect(() => {
     if (accessToken) {
       fetchData(accessToken);

From 5d0c53f17a390446c0e9b942be15222668eb197d Mon Sep 17 00:00:00 2001
From: Teddy <yoo.ji.yg@gmail.com>
Date: Fri, 24 May 2024 09:54:26 +0200
Subject: [PATCH 12/27] add store.jsx

---
 frontend/package.json           | 3 ++-
 frontend/src/store/useStore.jsx | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/store/useStore.jsx

diff --git a/frontend/package.json b/frontend/package.json
index e9c95b79f..005b6796c 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",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
diff --git a/frontend/src/store/useStore.jsx b/frontend/src/store/useStore.jsx
new file mode 100644
index 000000000..862ffc728
--- /dev/null
+++ b/frontend/src/store/useStore.jsx
@@ -0,0 +1,6 @@
+import { create } from "zustand"
+
+export const useStore = create((set) => ({
+  username: "",
+  password: "",
+}))
\ No newline at end of file

From 8ed5598510148b89c3f6df28e08cc8c8eb0db960 Mon Sep 17 00:00:00 2001
From: Viktoria Olofsson <viktoriaolofsson@gmail.com>
Date: Fri, 24 May 2024 11:15:28 +0200
Subject: [PATCH 13/27] Co-authored-by: Maja Schouenke
 <schouenkes@users.noreply.github.com> Co-authored-by: jyy009
 <jyy009@users.noreply.github.com>

---
 frontend/src/components/LogIn.jsx    |  51 +++--------
 frontend/src/components/Register.jsx |  57 +------------
 frontend/src/components/Session.jsx  |  33 ++------
 frontend/src/store/useStore.jsx      | 122 +++++++++++++++++++++++++--
 4 files changed, 139 insertions(+), 124 deletions(-)

diff --git a/frontend/src/components/LogIn.jsx b/frontend/src/components/LogIn.jsx
index 67dce60ab..e04aaf304 100644
--- a/frontend/src/components/LogIn.jsx
+++ b/frontend/src/components/LogIn.jsx
@@ -2,44 +2,14 @@ import { Button } from "./Button";
 import { Headline } from "./Headline";
 import { TextInput } from "./TextInput";
 import { Session } from "./Session";
-import { useState } from "react";
+import { useStore } from "../store/useStore";
 
 export const LogIn = () => {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [accessToken, setAccessToken] = useState("");
-
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-
-    try {
-      const response = await fetch("http://localhost:8080/sessions", {
-        method: "POST",
-        body: JSON.stringify({
-          username: username,
-          password: password,
-        }),
-        headers: { "Content-Type": "application/json" },
-      });
-      if (!response.ok) {
-        throw new Error("Network response was not ok");
-      }
-      const result = await response.json();
-      setAccessToken(result.accessToken);
-      console.log("accessToken: ", accessToken);
-    } catch (error) {
-      console.error("Error logging in", error);
-    }
-  };
-
-  const logOut = () => {
-    setAccessToken("");
-    window.location.reload();
-  };
+  const { formData, handleSubmitLogin, handleChange } = useStore();
 
   return (
     <>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmitLogin}>
         <div className="title-box">
           <Headline titleText={"Log in"} />
           <div className="text-box">
@@ -52,8 +22,8 @@ export const LogIn = () => {
             inputType={"text"}
             inputName={"username"}
             placeholder={"Type your username"}
-            value={username}
-            onChange={(event) => setUsername(event.target.value)}
+            value={formData.username}
+            onChange={(event) => handleChange("username", event.target.value)}
           />
 
           <TextInput
@@ -61,14 +31,17 @@ export const LogIn = () => {
             inputType={"password"}
             inputName={"password"}
             placeholder={"Type your password"}
-            value={password}
-            onChange={(event) => setPassword(event.target.value)}
+            value={formData.password}
+            onChange={(event) => handleChange("password", event.target.value)}
           />
         </div>
         <Button type={"submit"} btnText={"Log in"} />
       </form>
-      {accessToken ? <Session accessToken={accessToken} /> : ""}
-      {accessToken ? <Button onClick={logOut} btnText={"Sign out"} /> : ""}
+      {formData.accessToken ? (
+        <Session />
+      ) : (
+        ""
+      )}
     </>
   );
 };
diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
index e4b5461f1..8f2ca6719 100644
--- a/frontend/src/components/Register.jsx
+++ b/frontend/src/components/Register.jsx
@@ -1,64 +1,13 @@
+import { useStore } from "../store/useStore";
 import { Button } from "./Button";
 import { Headline } from "./Headline";
 import { TextInput } from "./TextInput";
-import { useState } from "react";
 
 export const Register = () => {
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    street: "",
-    postCode: "",
-    city: "",
-    username: "",
-    password: "",
-    verifyingPassword: "",
-  });
-
-  const handleChange = (fieldName, value) => {
-    setFormData({
-      ...formData,
-      [fieldName]: value,
-    });
-  };
-
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-
-    // Check if passwords match
-    if (formData.password !== formData.verifyingPassword) {
-      console.error("Passwords do not match");
-      return;
-    }
-
-    // Create the full address
-    const constructedAddress =
-      formData.street + formData.postCode + formData.city;
-
-    try {
-      const response = await fetch("http://localhost:8080/users", {
-        method: "POST",
-        body: JSON.stringify({
-          name: formData.name,
-          username: formData.username,
-          email: formData.email,
-          password: formData.password,
-          address: constructedAddress,
-        }),
-        headers: { "Content-Type": "application/json" },
-      });
-      if (!response.ok) {
-        throw new Error("Network response was not ok");
-      }
-      const result = await response.json();
-      console.log(result);
-    } catch (error) {
-      console.error("Error adding new user:", error);
-    }
-  };
+  const { formData, handleSubmitForm, handleChange } = useStore();
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmitForm}>
       <div className="title-box">
         <Headline titleText={"Register"} />
         <div className="text-box">
diff --git a/frontend/src/components/Session.jsx b/frontend/src/components/Session.jsx
index 457381f7d..ed931bd8c 100644
--- a/frontend/src/components/Session.jsx
+++ b/frontend/src/components/Session.jsx
@@ -1,33 +1,14 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
+import { useStore } from "../store/useStore";
 
-export const Session = ({ accessToken }) => {
-  const [message, setMessage] = useState("");
-
-  const fetchData = async (accessToken) => {
-    try {
-      const response = await fetch("http://localhost:8080/logged-in", {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: accessToken,
-        },
-      });
-      if (!response.ok) {
-        throw new Error("Network response was not ok");
-      }
-
-      const result = await response.json();
-      setMessage(result.message);
-    } catch (error) {
-      console.error("Error fetching data:", error);
-    }
-  };
+export const Session = () => {
+  const { formData, fetchLoggedInData } = useStore();
 
   useEffect(() => {
-    if (accessToken) {
-      fetchData(accessToken);
+    if (formData.accessToken) {
+      fetchLoggedInData(formData.accessToken);
     }
   }, []);
 
-  return <div>Session: You are logged in. {message}</div>;
+  return <div>Session: You are logged in. {formData.message}</div>;
 };
diff --git a/frontend/src/store/useStore.jsx b/frontend/src/store/useStore.jsx
index 862ffc728..b469e8933 100644
--- a/frontend/src/store/useStore.jsx
+++ b/frontend/src/store/useStore.jsx
@@ -1,6 +1,118 @@
-import { create } from "zustand"
+import { create } from "zustand";
 
-export const useStore = create((set) => ({
-  username: "",
-  password: "",
-}))
\ No newline at end of file
+export const useStore = create((set, get) => ({
+  formData: {
+    name: "",
+    email: "",
+    street: "",
+    postCode: "",
+    city: "",
+    username: "",
+    password: "",
+    verifyingPassword: "",
+    accessToken: "",
+    message: "",
+  },
+
+  handleSubmitForm: async (event) => {
+    event.preventDefault();
+    const { formData } = get();
+    const constructedAddress =
+      formData.street + formData.postCode + formData.city;
+
+    if (formData.password !== formData.verifyingPassword) {
+      console.error("Passwords do not match");
+      return;
+    }
+
+    try {
+      const response = await fetch("http://localhost:8080/users", {
+        method: "POST",
+        body: JSON.stringify({
+          name: formData.name,
+          username: formData.username,
+          email: formData.email,
+          password: formData.password,
+          address: constructedAddress,
+        }),
+        headers: { "Content-Type": "application/json" },
+      });
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      const result = await response.json();
+      console.log(result);
+      set((state) => ({
+        formData: {
+          ...state.formData,
+          accessToken: result.accessToken,
+        },
+      }));
+      //const updatedFormData = get().formData;
+      //console.log(updatedFormData.accessToken);
+    } catch (error) {
+      console.error("Error adding new user:", error);
+    }
+  },
+
+  handleChange: (fieldName, value) => {
+    set((state) => ({
+      formData: {
+        ...state.formData,
+        [fieldName]: value,
+      },
+    }));
+  },
+
+  handleSubmitLogin: async (event) => {
+    event.preventDefault();
+    const { formData } = get();
+    try {
+      const response = await fetch("http://localhost:8080/sessions", {
+        method: "POST",
+        body: JSON.stringify({
+          username: formData.username,
+          password: formData.password,
+        }),
+        headers: { "Content-Type": "application/json" },
+      });
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      const result = await response.json();
+      set((state) => ({
+        formData: {
+          ...state.formData,
+          accessToken: result.accessToken,
+        },
+      }));
+    } catch (error) {
+      console.error("Error logging in", error);
+    }
+  },
+
+  fetchLoggedInData: async (accessToken) => {
+    try {
+      const response = await fetch("http://localhost:8080/logged-in", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: accessToken,
+        },
+      });
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      const result = await response.json();
+      set((state) => ({
+        formData: {
+          ...state.formData,
+          message: result.message,
+        },
+      }));
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  },
+}));

From 345cb60a50a2c0993c417d44c3855a9c39f63d6d Mon Sep 17 00:00:00 2001
From: Viktoria Olofsson <viktoriaolofsson@gmail.com>
Date: Fri, 24 May 2024 15:19:57 +0200
Subject: [PATCH 14/27] Co-authored-by: Maja Schouenke
 <schouenkes@users.noreply.github.com> Co-authored-by: jyy009
 <jyy009@users.noreply.github.com>

---
 frontend/package.json                 |  1 +
 frontend/src/App.jsx                  | 12 ++---
 frontend/src/components/LogIn.jsx     | 65 +++++++++++++++++++++++----
 frontend/src/components/RouteList.jsx | 14 ++++++
 frontend/src/components/Session.jsx   | 39 +++++++++++++---
 frontend/src/store/useStore.jsx       | 52 +++++++++++----------
 6 files changed, 141 insertions(+), 42 deletions(-)
 create mode 100644 frontend/src/components/RouteList.jsx

diff --git a/frontend/package.json b/frontend/package.json
index 005b6796c..23e2448e4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 16eb81f50..1c7be68f8 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,9 +1,11 @@
-import { Home } from "./components/Home"
+import { BrowserRouter } from "react-router-dom";
+import { Home } from "./components/Home";
+import { RouteList } from "./components/RouteList";
 
 export const App = () => {
   return (
-<>
-    <Home />
-</>
-  )
+    <BrowserRouter>
+      <RouteList />
+    </BrowserRouter>
+  );
 };
diff --git a/frontend/src/components/LogIn.jsx b/frontend/src/components/LogIn.jsx
index e04aaf304..d7ccdc56c 100644
--- a/frontend/src/components/LogIn.jsx
+++ b/frontend/src/components/LogIn.jsx
@@ -1,15 +1,32 @@
 import { Button } from "./Button";
 import { Headline } from "./Headline";
 import { TextInput } from "./TextInput";
-import { Session } from "./Session";
 import { useStore } from "../store/useStore";
+import { useEffect } from "react";
+import { Link } from "react-router-dom";
+import { useState } from "react";
 
 export const LogIn = () => {
   const { formData, handleSubmitLogin, handleChange } = useStore();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleFormSubmit = async (event) => {
+    event.preventDefault();
+    setIsLoading(true);
+
+    try {
+      await handleSubmitLogin(event);
+      // Redirect to /logged-in after successful login
+      window.location.href = "/logged-in";
+    } catch (error) {
+      console.error("Error logging in", error);
+      setIsLoading(false);
+    }
+  };
 
   return (
     <>
-      <form onSubmit={handleSubmitLogin}>
+      <form onSubmit={handleFormSubmit}>
         <div className="title-box">
           <Headline titleText={"Log in"} />
           <div className="text-box">
@@ -35,13 +52,45 @@ export const LogIn = () => {
             onChange={(event) => handleChange("password", event.target.value)}
           />
         </div>
-        <Button type={"submit"} btnText={"Log in"} />
+        <Button type={"submit"} btnText={"Log in"} disabled={isLoading} />
       </form>
-      {formData.accessToken ? (
-        <Session />
-      ) : (
-        ""
-      )}
     </>
   );
 };
+
+// const storedLikes = localStorage.getItem("numberOfLikes");
+// if (!storedLikes) {
+//   localStorage.setItem("numberOfLikes", "0");
+//   return 0;
+// }
+// return JSON.parse(storedLikes);
+
+/*  
+useEffect(() => {
+    updateButtonStatus();
+    // Add tasks to localStorage
+    localStorage.setItem("tasks", JSON.stringify(todos));
+  }, [todos]); 
+*/
+
+/*
+useEffect(() => {
+  localStorage.setItem("token", JSON.stringify((formData.accesstoken));
+}, [formData.accessToken])
+
+
+const storedAccessToken = localStorage.getItem("token");
+    if (storedAccessToken === null) return "";
+    return JSON.parse(storedAccessToken);
+
+
+
+     const [todos, setTodos] = useState(() => {
+    // Check if there are any tasks in localStorage
+    const storedTasks = localStorage.getItem("tasks");
+    if (storedTasks === null) return [];
+    return JSON.parse(storedTasks);
+  });
+
+
+*/
diff --git a/frontend/src/components/RouteList.jsx b/frontend/src/components/RouteList.jsx
new file mode 100644
index 000000000..47d61cb81
--- /dev/null
+++ b/frontend/src/components/RouteList.jsx
@@ -0,0 +1,14 @@
+import { Routes, Route } from "react-router-dom";
+import { Home } from "./Home";
+import { Session } from "./Session";
+
+export const RouteList = () => {
+  return (
+    <>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/logged-in" element={<Session />} />
+      </Routes>
+    </>
+  );
+};
diff --git a/frontend/src/components/Session.jsx b/frontend/src/components/Session.jsx
index ed931bd8c..76a67a8f5 100644
--- a/frontend/src/components/Session.jsx
+++ b/frontend/src/components/Session.jsx
@@ -1,14 +1,43 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useStore } from "../store/useStore";
+import { Navigate } from "react-router-dom";
 
 export const Session = () => {
-  const { formData, fetchLoggedInData } = useStore();
+  const [shouldRedirect, setShouldRedirect] = useState();
+
+  //const { fetchLoggedInData, accessToken, message, checkAccessToken } = useStore();
 
   useEffect(() => {
-    if (formData.accessToken) {
-      fetchLoggedInData(formData.accessToken);
+    const storedAccessToken = localStorage.getItem("token");
+    if (storedAccessToken === null) {
+      console.log("this should redirect to login page");
+      setShouldRedirect(true);
+    } else {
+      console.log("access token exists");
     }
+    // if (storedAccessToken) {
+    //   console.log("if");
+    //   fetchLoggedInData(accessToken);
+    // } else {
+    //   console.log("else");
+    // }
   }, []);
 
-  return <div>Session: You are logged in. {formData.message}</div>;
+  if (shouldRedirect) {
+    return <Navigate replace to="/" />;
+  }
+
+  return <div>Session: You are logged in. </div>;
 };
+
+/*
+   useEffect(() => {
+    const storedAccessToken = localStorage.getItem("token");
+    if (storedAccessToken === null) {
+      console.log("Redirecting...");
+      history.push("/"); // Redirect to the specified route
+    } else {
+      console.log("Access token exists");
+    }
+  }, [history]);
+   */
diff --git a/frontend/src/store/useStore.jsx b/frontend/src/store/useStore.jsx
index b469e8933..2955af3cd 100644
--- a/frontend/src/store/useStore.jsx
+++ b/frontend/src/store/useStore.jsx
@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { redirect } from "react-router-dom";
 
 export const useStore = create((set, get) => ({
   formData: {
@@ -10,12 +11,23 @@ export const useStore = create((set, get) => ({
     username: "",
     password: "",
     verifyingPassword: "",
-    accessToken: "",
-    message: "",
   },
+  accessToken: "",
+  message: "",
+
+  // checkAccessToken: () => {
+  //   const storedAccessToken = localStorage.getItem("token");
+  //   if (storedAccessToken === null) {
+  //     return redirect("/");
+  //   } else {
+  //     set({ accessToken: storedAccessToken });
+  //   }
+  // },
 
   handleSubmitForm: async (event) => {
     event.preventDefault();
+    console.log("inside submitForm");
+
     const { formData } = get();
     const constructedAddress =
       formData.street + formData.postCode + formData.city;
@@ -42,14 +54,10 @@ export const useStore = create((set, get) => ({
       }
       const result = await response.json();
       console.log(result);
-      set((state) => ({
-        formData: {
-          ...state.formData,
-          accessToken: result.accessToken,
-        },
-      }));
-      //const updatedFormData = get().formData;
-      //console.log(updatedFormData.accessToken);
+      set((state) => ({ ...state, accessToken: result.accessToken }));
+      console.log(result);
+      const updatedAccessToken = get().accessToken;
+      localStorage.setItem("token", JSON.stringify(updatedAccessToken));
     } catch (error) {
       console.error("Error adding new user:", error);
     }
@@ -66,6 +74,7 @@ export const useStore = create((set, get) => ({
 
   handleSubmitLogin: async (event) => {
     event.preventDefault();
+    console.log("inside submitLogin");
     const { formData } = get();
     try {
       const response = await fetch("http://localhost:8080/sessions", {
@@ -80,39 +89,34 @@ export const useStore = create((set, get) => ({
         throw new Error("Network response was not ok");
       }
       const result = await response.json();
-      set((state) => ({
-        formData: {
-          ...state.formData,
-          accessToken: result.accessToken,
-        },
-      }));
+      set((state) => ({ ...state, accessToken: result.accessToken }));
+      console.log(result);
+      const updatedAccessToken = get().accessToken;
+      localStorage.setItem("token", JSON.stringify(updatedAccessToken));
     } catch (error) {
       console.error("Error logging in", error);
     }
   },
 
   fetchLoggedInData: async (accessToken) => {
+    // const testToken = localStorage.getItem("token")
     try {
       const response = await fetch("http://localhost:8080/logged-in", {
         method: "GET",
         headers: {
           "Content-Type": "application/json",
-          Authorization: accessToken,
+          Authorization: accessToken, // testToken,
         },
       });
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
-
       const result = await response.json();
-      set((state) => ({
-        formData: {
-          ...state.formData,
-          message: result.message,
-        },
-      }));
+      set({ message: result.message });
     } catch (error) {
       console.error("Error fetching data:", error);
     }
   },
 }));
+
+// localStorage.setItem("numberOfLikes", (parseInt(totalNumberOfLikes) + 1).toString());

From 4d0d982a364bf28b2c383a7b3ff4412006e561e3 Mon Sep 17 00:00:00 2001
From: Viktoria Olofsson <viktoriaolofsson@gmail.com>
Date: Fri, 24 May 2024 15:52:29 +0200
Subject: [PATCH 15/27] redirecting, exchanged errors

---
 frontend/src/components/Session.jsx | 25 +++----------------------
 frontend/src/store/useStore.jsx     | 17 +++--------------
 2 files changed, 6 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/Session.jsx b/frontend/src/components/Session.jsx
index 76a67a8f5..6c0be43e5 100644
--- a/frontend/src/components/Session.jsx
+++ b/frontend/src/components/Session.jsx
@@ -3,41 +3,22 @@ import { useStore } from "../store/useStore";
 import { Navigate } from "react-router-dom";
 
 export const Session = () => {
+  const { message, fetchLoggedInData, accessToken } = useStore();
   const [shouldRedirect, setShouldRedirect] = useState();
 
-  //const { fetchLoggedInData, accessToken, message, checkAccessToken } = useStore();
-
   useEffect(() => {
     const storedAccessToken = localStorage.getItem("token");
     if (storedAccessToken === null) {
       console.log("this should redirect to login page");
       setShouldRedirect(true);
     } else {
-      console.log("access token exists");
+      fetchLoggedInData(storedAccessToken);
     }
-    // if (storedAccessToken) {
-    //   console.log("if");
-    //   fetchLoggedInData(accessToken);
-    // } else {
-    //   console.log("else");
-    // }
   }, []);
 
   if (shouldRedirect) {
     return <Navigate replace to="/" />;
   }
 
-  return <div>Session: You are logged in. </div>;
+  return <div>Session: You are logged in. {message && <p>{message}</p>}</div>;
 };
-
-/*
-   useEffect(() => {
-    const storedAccessToken = localStorage.getItem("token");
-    if (storedAccessToken === null) {
-      console.log("Redirecting...");
-      history.push("/"); // Redirect to the specified route
-    } else {
-      console.log("Access token exists");
-    }
-  }, [history]);
-   */
diff --git a/frontend/src/store/useStore.jsx b/frontend/src/store/useStore.jsx
index 2955af3cd..599440ee2 100644
--- a/frontend/src/store/useStore.jsx
+++ b/frontend/src/store/useStore.jsx
@@ -1,5 +1,4 @@
 import { create } from "zustand";
-import { redirect } from "react-router-dom";
 
 export const useStore = create((set, get) => ({
   formData: {
@@ -15,15 +14,6 @@ export const useStore = create((set, get) => ({
   accessToken: "",
   message: "",
 
-  // checkAccessToken: () => {
-  //   const storedAccessToken = localStorage.getItem("token");
-  //   if (storedAccessToken === null) {
-  //     return redirect("/");
-  //   } else {
-  //     set({ accessToken: storedAccessToken });
-  //   }
-  // },
-
   handleSubmitForm: async (event) => {
     event.preventDefault();
     console.log("inside submitForm");
@@ -105,18 +95,17 @@ export const useStore = create((set, get) => ({
         method: "GET",
         headers: {
           "Content-Type": "application/json",
-          Authorization: accessToken, // testToken,
+          // prettier-ignore
+          "Authorization": accessToken, // testToken,
         },
       });
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
       const result = await response.json();
-      set({ message: result.message });
+      set((state) => ({ ...state, message: result.message }));
     } catch (error) {
       console.error("Error fetching data:", error);
     }
   },
 }));
-
-// localStorage.setItem("numberOfLikes", (parseInt(totalNumberOfLikes) + 1).toString());

From 3462935d1355c22de008f85b1bd1393eb8d66df2 Mon Sep 17 00:00:00 2001
From: Viktoria Olofsson <viktoriaolofsson@gmail.com>
Date: Fri, 24 May 2024 21:57:26 +0200
Subject: [PATCH 16/27] got fetch authorization and sign out to work

---
 frontend/src/components/LogIn.jsx    | 39 -------------------------
 frontend/src/components/Register.jsx |  1 -
 frontend/src/components/Session.jsx  | 43 ++++++++++++++++++++++++----
 frontend/src/store/useStore.jsx      | 25 +++++++++++++---
 4 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/frontend/src/components/LogIn.jsx b/frontend/src/components/LogIn.jsx
index d7ccdc56c..731e67c91 100644
--- a/frontend/src/components/LogIn.jsx
+++ b/frontend/src/components/LogIn.jsx
@@ -2,8 +2,6 @@ import { Button } from "./Button";
 import { Headline } from "./Headline";
 import { TextInput } from "./TextInput";
 import { useStore } from "../store/useStore";
-import { useEffect } from "react";
-import { Link } from "react-router-dom";
 import { useState } from "react";
 
 export const LogIn = () => {
@@ -57,40 +55,3 @@ export const LogIn = () => {
     </>
   );
 };
-
-// const storedLikes = localStorage.getItem("numberOfLikes");
-// if (!storedLikes) {
-//   localStorage.setItem("numberOfLikes", "0");
-//   return 0;
-// }
-// return JSON.parse(storedLikes);
-
-/*  
-useEffect(() => {
-    updateButtonStatus();
-    // Add tasks to localStorage
-    localStorage.setItem("tasks", JSON.stringify(todos));
-  }, [todos]); 
-*/
-
-/*
-useEffect(() => {
-  localStorage.setItem("token", JSON.stringify((formData.accesstoken));
-}, [formData.accessToken])
-
-
-const storedAccessToken = localStorage.getItem("token");
-    if (storedAccessToken === null) return "";
-    return JSON.parse(storedAccessToken);
-
-
-
-     const [todos, setTodos] = useState(() => {
-    // Check if there are any tasks in localStorage
-    const storedTasks = localStorage.getItem("tasks");
-    if (storedTasks === null) return [];
-    return JSON.parse(storedTasks);
-  });
-
-
-*/
diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
index 8f2ca6719..fb6550ed9 100644
--- a/frontend/src/components/Register.jsx
+++ b/frontend/src/components/Register.jsx
@@ -100,7 +100,6 @@ export const Register = () => {
           handleChange("verifyingPassword", event.target.value)
         }
       />
-
       <Button type={"submit"} btnText={"Sign up"} />
     </form>
   );
diff --git a/frontend/src/components/Session.jsx b/frontend/src/components/Session.jsx
index 6c0be43e5..79a0ea5e5 100644
--- a/frontend/src/components/Session.jsx
+++ b/frontend/src/components/Session.jsx
@@ -1,10 +1,13 @@
 import { useEffect, useState } from "react";
 import { useStore } from "../store/useStore";
 import { Navigate } from "react-router-dom";
+import { Button } from "./Button";
+import { Link } from "react-router-dom";
 
 export const Session = () => {
-  const { message, fetchLoggedInData, accessToken } = useStore();
-  const [shouldRedirect, setShouldRedirect] = useState();
+  const { message, fetchLoggedInData, resetState } = useStore();
+  const [shouldRedirect, setShouldRedirect] = useState(false);
+  const [text, setText] = useState("");
 
   useEffect(() => {
     const storedAccessToken = localStorage.getItem("token");
@@ -12,13 +15,43 @@ export const Session = () => {
       console.log("this should redirect to login page");
       setShouldRedirect(true);
     } else {
-      fetchLoggedInData(storedAccessToken);
+      try {
+        const parsedToken = JSON.parse(storedAccessToken);
+        console.log("Parsed token:", parsedToken);
+        fetchLoggedInData(parsedToken);
+      } catch (error) {
+        console.error("Error parsing token:", error);
+        setShouldRedirect(true);
+      }
     }
-  }, []);
+  }, [fetchLoggedInData]);
+
+  const signOut = () => {
+    localStorage.clear();
+    resetState();
+  };
+
+  useEffect(() => {
+    if (message) {
+      setText(`Welcome! We're so happy to see you!`);
+    } else {
+      setText("You are not signed in.");
+    }
+  }, [message]);
 
   if (shouldRedirect) {
     return <Navigate replace to="/" />;
   }
 
-  return <div>Session: You are logged in. {message && <p>{message}</p>}</div>;
+  return (
+    <div>
+      {text}
+      {message && <Button onClick={signOut} btnText={"Sign out"} />}
+      {!message && (
+        <Link to="/">
+          <Button btnText={"Back to Login"} />
+        </Link>
+      )}
+    </div>
+  );
 };
diff --git a/frontend/src/store/useStore.jsx b/frontend/src/store/useStore.jsx
index 599440ee2..0910dbd6c 100644
--- a/frontend/src/store/useStore.jsx
+++ b/frontend/src/store/useStore.jsx
@@ -14,6 +14,22 @@ export const useStore = create((set, get) => ({
   accessToken: "",
   message: "",
 
+  resetState: () =>
+    set({
+      formData: {
+        name: "",
+        email: "",
+        street: "",
+        postCode: "",
+        city: "",
+        username: "",
+        password: "",
+        verifyingPassword: "",
+      },
+      accessToken: "",
+      message: "",
+    }),
+
   handleSubmitForm: async (event) => {
     event.preventDefault();
     console.log("inside submitForm");
@@ -79,7 +95,10 @@ export const useStore = create((set, get) => ({
         throw new Error("Network response was not ok");
       }
       const result = await response.json();
-      set((state) => ({ ...state, accessToken: result.accessToken }));
+      set((state) => ({
+        ...state,
+        accessToken: result.accessToken,
+      }));
       console.log(result);
       const updatedAccessToken = get().accessToken;
       localStorage.setItem("token", JSON.stringify(updatedAccessToken));
@@ -89,14 +108,12 @@ export const useStore = create((set, get) => ({
   },
 
   fetchLoggedInData: async (accessToken) => {
-    // const testToken = localStorage.getItem("token")
     try {
       const response = await fetch("http://localhost:8080/logged-in", {
         method: "GET",
         headers: {
           "Content-Type": "application/json",
-          // prettier-ignore
-          "Authorization": accessToken, // testToken,
+          Authorization: accessToken,
         },
       });
       if (!response.ok) {

From 8d9822c04809871829f25197ae29e054dcb8acba Mon Sep 17 00:00:00 2001
From: Viktoria Olofsson <viktoriaolofsson@gmail.com>
Date: Fri, 24 May 2024 22:04:29 +0200
Subject: [PATCH 17/27] added redirection after signing up

---
 frontend/src/components/Register.jsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
index fb6550ed9..7da878f9b 100644
--- a/frontend/src/components/Register.jsx
+++ b/frontend/src/components/Register.jsx
@@ -2,12 +2,28 @@ import { useStore } from "../store/useStore";
 import { Button } from "./Button";
 import { Headline } from "./Headline";
 import { TextInput } from "./TextInput";
+import { useState } from "react";
 
 export const Register = () => {
   const { formData, handleSubmitForm, handleChange } = useStore();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleFormSubmit = async (event) => {
+    event.preventDefault();
+    setIsLoading(true);
+
+    try {
+      await handleSubmitForm(event);
+      // Redirect to /logged-in after successful login
+      window.location.href = "/logged-in";
+    } catch (error) {
+      console.error("Error logging in", error);
+      setIsLoading(false);
+    }
+  };
 
   return (
-    <form onSubmit={handleSubmitForm}>
+    <form onSubmit={handleFormSubmit}>
       <div className="title-box">
         <Headline titleText={"Register"} />
         <div className="text-box">
@@ -100,7 +116,7 @@ export const Register = () => {
           handleChange("verifyingPassword", event.target.value)
         }
       />
-      <Button type={"submit"} btnText={"Sign up"} />
+      <Button type={"submit"} btnText={"Sign up"} disabled={isLoading} />
     </form>
   );
 };

From c205c88566257f79598fe83e75fdf300237d6ce3 Mon Sep 17 00:00:00 2001
From: Viktoria Olofsson <viktoriaolofsson@gmail.com>
Date: Sat, 25 May 2024 12:55:41 +0200
Subject: [PATCH 18/27] added some validation and greetings

---
 backend/server.js                    |  2 +-
 frontend/src/components/Register.jsx | 17 +++++-----
 frontend/src/components/Session.jsx  | 46 ++++++++++++++++------------
 frontend/src/store/useStore.jsx      | 15 +++++----
 4 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/backend/server.js b/backend/server.js
index b15ca8ff9..71a11160d 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -97,7 +97,7 @@ app.post("/users", async (req, res) => {
 
 app.get("/logged-in", authenticateUser);
 app.get("/logged-in", (req, res) => {
-  res.json({ message: "Only registered users can see this message" });
+  res.json({ message: "You are signed in." });
 });
 
 app.post("/sessions", async (req, res) => {
diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
index 7da878f9b..015b97e65 100644
--- a/frontend/src/components/Register.jsx
+++ b/frontend/src/components/Register.jsx
@@ -7,17 +7,18 @@ import { useState } from "react";
 export const Register = () => {
   const { formData, handleSubmitForm, handleChange } = useStore();
   const [isLoading, setIsLoading] = useState(false);
+  const [passwordError, setPasswordError] = useState(false);
 
   const handleFormSubmit = async (event) => {
     event.preventDefault();
     setIsLoading(true);
 
-    try {
-      await handleSubmitForm(event);
-      // Redirect to /logged-in after successful login
+    const success = await handleSubmitForm(event);
+    if (success) {
       window.location.href = "/logged-in";
-    } catch (error) {
-      console.error("Error logging in", error);
+    } else {
+      console.error("Error logging in");
+      setPasswordError(true);
       setIsLoading(false);
     }
   };
@@ -34,7 +35,6 @@ export const Register = () => {
           </p>
         </div>
       </div>
-
       <TextInput
         label={"Full name"}
         inputType={"text"}
@@ -51,7 +51,6 @@ export const Register = () => {
         value={formData.email}
         onChange={(event) => handleChange("email", event.target.value)}
       />
-
       <fieldset>
         <legend>Address</legend>
         <TextInput
@@ -87,7 +86,6 @@ export const Register = () => {
           </div>
         </div>
       </fieldset>
-
       <TextInput
         label={"Username"}
         inputType={"text"}
@@ -96,7 +94,6 @@ export const Register = () => {
         value={formData.username}
         onChange={(event) => handleChange("username", event.target.value)}
       />
-
       <TextInput
         label={"Password"}
         inputType={"password"}
@@ -105,7 +102,6 @@ export const Register = () => {
         value={formData.password}
         onChange={(event) => handleChange("password", event.target.value)}
       />
-
       <TextInput
         label={"Verifying password"}
         inputType={"password"}
@@ -116,6 +112,7 @@ export const Register = () => {
           handleChange("verifyingPassword", event.target.value)
         }
       />
+      {passwordError && <p>Passwords do not match</p>}
       <Button type={"submit"} btnText={"Sign up"} disabled={isLoading} />
     </form>
   );
diff --git a/frontend/src/components/Session.jsx b/frontend/src/components/Session.jsx
index 79a0ea5e5..7495fed0f 100644
--- a/frontend/src/components/Session.jsx
+++ b/frontend/src/components/Session.jsx
@@ -8,36 +8,43 @@ export const Session = () => {
   const { message, fetchLoggedInData, resetState } = useStore();
   const [shouldRedirect, setShouldRedirect] = useState(false);
   const [text, setText] = useState("");
+  const [error, setError] = useState(false);
+  let user = localStorage.getItem("username");
+  if (user) {
+    user = user.replace(/^"(.*)"$/, "$1");
+  }
 
   useEffect(() => {
     const storedAccessToken = localStorage.getItem("token");
-    if (storedAccessToken === null) {
-      console.log("this should redirect to login page");
-      setShouldRedirect(true);
-    } else {
-      try {
-        const parsedToken = JSON.parse(storedAccessToken);
-        console.log("Parsed token:", parsedToken);
-        fetchLoggedInData(parsedToken);
-      } catch (error) {
-        console.error("Error parsing token:", error);
-        setShouldRedirect(true);
-      }
+    try {
+      const parsedToken = JSON.parse(storedAccessToken);
+      fetchLoggedInData(parsedToken);
+    } catch (err) {
+      setError(true);
+      console.error("Error parsing token:", err);
     }
   }, [fetchLoggedInData]);
 
-  const signOut = () => {
-    localStorage.clear();
-    resetState();
-  };
-
   useEffect(() => {
     if (message) {
-      setText(`Welcome! We're so happy to see you!`);
+      setText(`Welcome, ${user}! We're so happy to see you!`);
+      setError(false);
+    } else if (error) {
+      setText(
+        "The username or password is incorrect. Please try signing in again."
+      );
+      localStorage.clear();
+      resetState();
     } else {
       setText("You are not signed in.");
     }
-  }, [message]);
+  }, [message, error]);
+
+  const signOut = () => {
+    localStorage.clear();
+    resetState();
+    setShouldRedirect(true);
+  };
 
   if (shouldRedirect) {
     return <Navigate replace to="/" />;
@@ -45,6 +52,7 @@ export const Session = () => {
 
   return (
     <div>
+      {message && <h1>{message}</h1>}
       {text}
       {message && <Button onClick={signOut} btnText={"Sign out"} />}
       {!message && (
diff --git a/frontend/src/store/useStore.jsx b/frontend/src/store/useStore.jsx
index 0910dbd6c..88f48443b 100644
--- a/frontend/src/store/useStore.jsx
+++ b/frontend/src/store/useStore.jsx
@@ -32,17 +32,14 @@ export const useStore = create((set, get) => ({
 
   handleSubmitForm: async (event) => {
     event.preventDefault();
-    console.log("inside submitForm");
-
     const { formData } = get();
     const constructedAddress =
       formData.street + formData.postCode + formData.city;
 
     if (formData.password !== formData.verifyingPassword) {
       console.error("Passwords do not match");
-      return;
+      return false;
     }
-
     try {
       const response = await fetch("http://localhost:8080/users", {
         method: "POST",
@@ -59,13 +56,15 @@ export const useStore = create((set, get) => ({
         throw new Error("Network response was not ok");
       }
       const result = await response.json();
-      console.log(result);
       set((state) => ({ ...state, accessToken: result.accessToken }));
-      console.log(result);
       const updatedAccessToken = get().accessToken;
+      const updatedUsername = get().formData.username;
       localStorage.setItem("token", JSON.stringify(updatedAccessToken));
+      localStorage.setItem("username", JSON.stringify(updatedUsername));
+      return true;
     } catch (error) {
       console.error("Error adding new user:", error);
+      return false;
     }
   },
 
@@ -80,7 +79,6 @@ export const useStore = create((set, get) => ({
 
   handleSubmitLogin: async (event) => {
     event.preventDefault();
-    console.log("inside submitLogin");
     const { formData } = get();
     try {
       const response = await fetch("http://localhost:8080/sessions", {
@@ -99,9 +97,10 @@ export const useStore = create((set, get) => ({
         ...state,
         accessToken: result.accessToken,
       }));
-      console.log(result);
       const updatedAccessToken = get().accessToken;
+      const updatedUsername = get().formData.username;
       localStorage.setItem("token", JSON.stringify(updatedAccessToken));
+      localStorage.setItem("username", JSON.stringify(updatedUsername));
     } catch (error) {
       console.error("Error logging in", error);
     }

From ec71b994261e8af88ccee0b8f41be270edf43e81 Mon Sep 17 00:00:00 2001
From: Teddy <yoo.ji.yg@gmail.com>
Date: Sat, 25 May 2024 18:25:38 +0200
Subject: [PATCH 19/27] style session page

---
 backend/package.json                 |  3 ++-
 frontend/src/components/Register.jsx |  2 +-
 frontend/src/components/Session.jsx  |  7 ++++---
 frontend/src/index.css               |  2 +-
 frontend/src/styling/Session.css     | 18 ++++++++++++++++++
 5 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/styling/Session.css

diff --git a/backend/package.json b/backend/package.json
index 04b834b0b..e3202f51c 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -15,7 +15,8 @@
     "bcrypt": "^5.1.1",
     "cors": "^2.8.5",
     "express": "^4.17.3",
+    "express-list-endpoints": "^7.1.0",
     "mongoose": "^8.4.0",
-    "nodemon": "^3.0.1"
+    "nodemon": "^3.1.1"
   }
 }
diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
index 015b97e65..49656e069 100644
--- a/frontend/src/components/Register.jsx
+++ b/frontend/src/components/Register.jsx
@@ -106,7 +106,7 @@ export const Register = () => {
         label={"Verifying password"}
         inputType={"password"}
         inputName={"verifyingPassword"}
-        placeholder={"Type your password"}
+        placeholder={"Re-enter your password"}
         value={formData.verifyingPassword}
         onChange={(event) =>
           handleChange("verifyingPassword", event.target.value)
diff --git a/frontend/src/components/Session.jsx b/frontend/src/components/Session.jsx
index 7495fed0f..31d9fc57a 100644
--- a/frontend/src/components/Session.jsx
+++ b/frontend/src/components/Session.jsx
@@ -3,6 +3,7 @@ import { useStore } from "../store/useStore";
 import { Navigate } from "react-router-dom";
 import { Button } from "./Button";
 import { Link } from "react-router-dom";
+import "../styling/Session.css"
 
 export const Session = () => {
   const { message, fetchLoggedInData, resetState } = useStore();
@@ -51,10 +52,10 @@ export const Session = () => {
   }
 
   return (
-    <div>
+    <div className="session-container">
       {message && <h1>{message}</h1>}
-      {text}
-      {message && <Button onClick={signOut} btnText={"Sign out"} />}
+      <p className="session-in-text">{text}</p>
+      {message && <Button className="session-in-button" onClick={signOut} btnText={"Sign out"} />}
       {!message && (
         <Link to="/">
           <Button btnText={"Back to Login"} />
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 01094f652..670c19746 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -126,7 +126,7 @@ button {
 
   button {
     width: 150px;
-    align-self: flex-end;
+    align-self: center;
   }
 }
 
diff --git a/frontend/src/styling/Session.css b/frontend/src/styling/Session.css
new file mode 100644
index 000000000..cbe30b198
--- /dev/null
+++ b/frontend/src/styling/Session.css
@@ -0,0 +1,18 @@
+.session-container {
+display: flex;
+flex-direction: column;
+align-items: center;
+row-gap: 10px;
+margin-top: 50px;
+}
+
+.session-in-text {
+font-size: 20px;
+text-align: center;
+}
+
+@media (min-width: 768px) {
+  .session-in-button {
+    text-align: center;
+  }
+}
\ No newline at end of file

From 7b6ae70d30e87f151af973f41ee24f9a338b870f Mon Sep 17 00:00:00 2001
From: Teddy <yoo.ji.yg@gmail.com>
Date: Sat, 25 May 2024 20:50:04 +0200
Subject: [PATCH 20/27] split up formData state management

---
 frontend/src/components/LogIn.jsx    | 14 ++++---
 frontend/src/components/Register.jsx | 38 +++++++++--------
 frontend/src/components/Session.jsx  | 19 ++++++---
 frontend/src/store/useStore.jsx      | 61 +++++++++++++++++++---------
 4 files changed, 85 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/LogIn.jsx b/frontend/src/components/LogIn.jsx
index 731e67c91..4a81b5bda 100644
--- a/frontend/src/components/LogIn.jsx
+++ b/frontend/src/components/LogIn.jsx
@@ -5,7 +5,7 @@ import { useStore } from "../store/useStore";
 import { useState } from "react";
 
 export const LogIn = () => {
-  const { formData, handleSubmitLogin, handleChange } = useStore();
+  const { loginData, handleSubmitLogin, handleLoginChange } = useStore();
   const [isLoading, setIsLoading] = useState(false);
 
   const handleFormSubmit = async (event) => {
@@ -37,8 +37,10 @@ export const LogIn = () => {
             inputType={"text"}
             inputName={"username"}
             placeholder={"Type your username"}
-            value={formData.username}
-            onChange={(event) => handleChange("username", event.target.value)}
+            value={loginData.username}
+            onChange={(event) =>
+              handleLoginChange("username", event.target.value)
+            }
           />
 
           <TextInput
@@ -46,8 +48,10 @@ export const LogIn = () => {
             inputType={"password"}
             inputName={"password"}
             placeholder={"Type your password"}
-            value={formData.password}
-            onChange={(event) => handleChange("password", event.target.value)}
+            value={loginData.password}
+            onChange={(event) =>
+              handleLoginChange("password", event.target.value)
+            }
           />
         </div>
         <Button type={"submit"} btnText={"Log in"} disabled={isLoading} />
diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
index 49656e069..ddee1be51 100644
--- a/frontend/src/components/Register.jsx
+++ b/frontend/src/components/Register.jsx
@@ -5,7 +5,7 @@ import { TextInput } from "./TextInput";
 import { useState } from "react";
 
 export const Register = () => {
-  const { formData, handleSubmitForm, handleChange } = useStore();
+  const { signUpData, handleSubmitForm, handleSignUpChange } = useStore();
   const [isLoading, setIsLoading] = useState(false);
   const [passwordError, setPasswordError] = useState(false);
 
@@ -40,16 +40,16 @@ export const Register = () => {
         inputType={"text"}
         inputName={"fullname"}
         placeholder={"Type your full name"}
-        value={formData.name}
-        onChange={(event) => handleChange("name", event.target.value)}
+        value={signUpData.name}
+        onChange={(event) => handleSignUpChange("name", event.target.value)}
       />
       <TextInput
         label={"E-mail"}
         inputType={"email"}
         inputName={"email"}
         placeholder={"Type your e-mail"}
-        value={formData.email}
-        onChange={(event) => handleChange("email", event.target.value)}
+        value={signUpData.email}
+        onChange={(event) => handleSignUpChange("email", event.target.value)}
       />
       <fieldset>
         <legend>Address</legend>
@@ -58,8 +58,8 @@ export const Register = () => {
           inputType={"text"}
           inputName={"street"}
           placeholder={"Type your street"}
-          value={formData.street}
-          onChange={(event) => handleChange("street", event.target.value)}
+          value={signUpData.street}
+          onChange={(event) => handleSignUpChange("street", event.target.value)}
         />
 
         <div className="input-tablet-desktop">
@@ -69,8 +69,10 @@ export const Register = () => {
               inputType={"text"}
               inputName={"postcode"}
               placeholder={"xxx xx"}
-              value={formData.postCode.toString()}
-              onChange={(event) => handleChange("postCode", event.target.value)}
+              value={signUpData.postCode.toString()}
+              onChange={(event) =>
+                handleSignUpChange("postCode", event.target.value)
+              }
             />
           </div>
 
@@ -80,8 +82,10 @@ export const Register = () => {
               inputType={"text"}
               inputName={"city"}
               placeholder={"Type your city"}
-              value={formData.city}
-              onChange={(event) => handleChange("city", event.target.value)}
+              value={signUpData.city}
+              onChange={(event) =>
+                handleSignUpChange("city", event.target.value)
+              }
             />
           </div>
         </div>
@@ -91,25 +95,25 @@ export const Register = () => {
         inputType={"text"}
         inputName={"username"}
         placeholder={"Type your username"}
-        value={formData.username}
-        onChange={(event) => handleChange("username", event.target.value)}
+        value={signUpData.username}
+        onChange={(event) => handleSignUpChange("username", event.target.value)}
       />
       <TextInput
         label={"Password"}
         inputType={"password"}
         inputName={"password"}
         placeholder={"Type your password"}
-        value={formData.password}
-        onChange={(event) => handleChange("password", event.target.value)}
+        value={signUpData.password}
+        onChange={(event) => handleSignUpChange("password", event.target.value)}
       />
       <TextInput
         label={"Verifying password"}
         inputType={"password"}
         inputName={"verifyingPassword"}
         placeholder={"Re-enter your password"}
-        value={formData.verifyingPassword}
+        value={signUpData.verifyingPassword}
         onChange={(event) =>
-          handleChange("verifyingPassword", event.target.value)
+          handleSignUpChange("verifyingPassword", event.target.value)
         }
       />
       {passwordError && <p>Passwords do not match</p>}
diff --git a/frontend/src/components/Session.jsx b/frontend/src/components/Session.jsx
index 31d9fc57a..8550c6c44 100644
--- a/frontend/src/components/Session.jsx
+++ b/frontend/src/components/Session.jsx
@@ -3,10 +3,11 @@ import { useStore } from "../store/useStore";
 import { Navigate } from "react-router-dom";
 import { Button } from "./Button";
 import { Link } from "react-router-dom";
-import "../styling/Session.css"
+import "../styling/Session.css";
 
 export const Session = () => {
-  const { message, fetchLoggedInData, resetState } = useStore();
+  const { message, fetchLoggedInData, resetSignUpData, resetLoginData } =
+    useStore();
   const [shouldRedirect, setShouldRedirect] = useState(false);
   const [text, setText] = useState("");
   const [error, setError] = useState(false);
@@ -35,7 +36,8 @@ export const Session = () => {
         "The username or password is incorrect. Please try signing in again."
       );
       localStorage.clear();
-      resetState();
+      resetSignUpData();
+      resetLoginData();
     } else {
       setText("You are not signed in.");
     }
@@ -43,7 +45,8 @@ export const Session = () => {
 
   const signOut = () => {
     localStorage.clear();
-    resetState();
+    resetSignUpData();
+    resetLoginData();
     setShouldRedirect(true);
   };
 
@@ -55,7 +58,13 @@ export const Session = () => {
     <div className="session-container">
       {message && <h1>{message}</h1>}
       <p className="session-in-text">{text}</p>
-      {message && <Button className="session-in-button" onClick={signOut} btnText={"Sign out"} />}
+      {message && (
+        <Button
+          className="session-in-button"
+          onClick={signOut}
+          btnText={"Sign out"}
+        />
+      )}
       {!message && (
         <Link to="/">
           <Button btnText={"Back to Login"} />
diff --git a/frontend/src/store/useStore.jsx b/frontend/src/store/useStore.jsx
index 88f48443b..5d66230df 100644
--- a/frontend/src/store/useStore.jsx
+++ b/frontend/src/store/useStore.jsx
@@ -1,7 +1,7 @@
 import { create } from "zustand";
 
 export const useStore = create((set, get) => ({
-  formData: {
+  signUpData: {
     name: "",
     email: "",
     street: "",
@@ -11,12 +11,18 @@ export const useStore = create((set, get) => ({
     password: "",
     verifyingPassword: "",
   },
+
+  loginData: {
+    username: "",
+    password: "",
+  },
+
   accessToken: "",
   message: "",
 
-  resetState: () =>
+  resetSignUpData: () =>
     set({
-      formData: {
+      signUpData: {
         name: "",
         email: "",
         street: "",
@@ -26,17 +32,23 @@ export const useStore = create((set, get) => ({
         password: "",
         verifyingPassword: "",
       },
-      accessToken: "",
-      message: "",
+    }),
+
+  resetLoginData: () =>
+    set({
+      loginData: {
+        username: "",
+        password: "",
+      },
     }),
 
   handleSubmitForm: async (event) => {
     event.preventDefault();
-    const { formData } = get();
+    const { signUpData } = get();
     const constructedAddress =
-      formData.street + formData.postCode + formData.city;
+      signUpData.street + signUpData.postCode + signUpData.city;
 
-    if (formData.password !== formData.verifyingPassword) {
+    if (signUpData.password !== signUpData.verifyingPassword) {
       console.error("Passwords do not match");
       return false;
     }
@@ -44,10 +56,10 @@ export const useStore = create((set, get) => ({
       const response = await fetch("http://localhost:8080/users", {
         method: "POST",
         body: JSON.stringify({
-          name: formData.name,
-          username: formData.username,
-          email: formData.email,
-          password: formData.password,
+          name: signUpData.name,
+          username: signUpData.username,
+          email: signUpData.email,
+          password: signUpData.password,
           address: constructedAddress,
         }),
         headers: { "Content-Type": "application/json" },
@@ -58,7 +70,7 @@ export const useStore = create((set, get) => ({
       const result = await response.json();
       set((state) => ({ ...state, accessToken: result.accessToken }));
       const updatedAccessToken = get().accessToken;
-      const updatedUsername = get().formData.username;
+      const updatedUsername = get().signUpData.username;
       localStorage.setItem("token", JSON.stringify(updatedAccessToken));
       localStorage.setItem("username", JSON.stringify(updatedUsername));
       return true;
@@ -68,10 +80,19 @@ export const useStore = create((set, get) => ({
     }
   },
 
-  handleChange: (fieldName, value) => {
+  handleSignUpChange: (fieldName, value) => {
+    set((state) => ({
+      signUpData: {
+        ...state.signUpData,
+        [fieldName]: value,
+      },
+    }));
+  },
+
+  handleLoginChange: (fieldName, value) => {
     set((state) => ({
-      formData: {
-        ...state.formData,
+      loginData: {
+        ...state.loginData,
         [fieldName]: value,
       },
     }));
@@ -79,13 +100,13 @@ export const useStore = create((set, get) => ({
 
   handleSubmitLogin: async (event) => {
     event.preventDefault();
-    const { formData } = get();
+    const { loginData } = get();
     try {
       const response = await fetch("http://localhost:8080/sessions", {
         method: "POST",
         body: JSON.stringify({
-          username: formData.username,
-          password: formData.password,
+          username: loginData.username,
+          password: loginData.password,
         }),
         headers: { "Content-Type": "application/json" },
       });
@@ -98,7 +119,7 @@ export const useStore = create((set, get) => ({
         accessToken: result.accessToken,
       }));
       const updatedAccessToken = get().accessToken;
-      const updatedUsername = get().formData.username;
+      const updatedUsername = get().loginData.username;
       localStorage.setItem("token", JSON.stringify(updatedAccessToken));
       localStorage.setItem("username", JSON.stringify(updatedUsername));
     } catch (error) {

From 339e58070b7be2907c241df177aae03dc0ec70c4 Mon Sep 17 00:00:00 2001
From: Teddy <yoo.ji.yg@gmail.com>
Date: Sun, 26 May 2024 10:24:48 +0200
Subject: [PATCH 21/27] add expressListEndpoints and update readme

---
 README.md         | 7 ++++---
 backend/server.js | 5 +++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index dfa05e177..9c43569e2 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,13 @@
 # Project Auth API
 
-Replace this readme with your own information about your project.
+Developed a backend API and frontend registration & sign-in form. 
+
+API uses mongoose to include endpoints for user registration & sign-in, authenticated endpoint accessible only to logged-in users, storing and removing access tokens.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
 
 ## 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?
+We had issues storing the access token, but figured it out by  parsing the token to JSON.
 
 ## View it live
 
diff --git a/backend/server.js b/backend/server.js
index 71a11160d..d3ebfa70f 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -2,7 +2,7 @@ import cors from "cors";
 import express from "express";
 import mongoose from "mongoose";
 import bcrypt from "bcrypt";
-import crypto from "crypto";
+import expressListEndpoints from "express-list-endpoints";
 
 const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-auth";
 mongoose.connect(mongoUrl);
@@ -63,7 +63,8 @@ app.use(express.json());
 
 // Start defining your routes here
 app.get("/", (req, res) => {
-  res.send("Hello Technigo!");
+const endpoints = expressListEndpoints(app)
+res.json(endpoints)
 });
 
 app.get("/users", async (req, res) => {

From 0a11cbdf45d10ad1110d4e4216debe4aa1098287 Mon Sep 17 00:00:00 2001
From: Teddy <yoo.ji.yg@gmail.com>
Date: Sun, 26 May 2024 14:17:45 +0200
Subject: [PATCH 22/27] i dotenv && mongodb

---
 README.md            | 5 ++++-
 backend/package.json | 2 ++
 package.json         | 3 ++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 9c43569e2..a64542cfa 100644
--- a/README.md
+++ b/README.md
@@ -11,4 +11,7 @@ We had issues storing the access token, but figured it out by  parsing the token
 
 ## 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.
+#### Backend:
+https://project-auth-kh49.onrender.com/
+
+#### Frontend:
diff --git a/backend/package.json b/backend/package.json
index e3202f51c..a00d732a1 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -14,8 +14,10 @@
     "@babel/preset-env": "^7.16.11",
     "bcrypt": "^5.1.1",
     "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
     "express": "^4.17.3",
     "express-list-endpoints": "^7.1.0",
+    "mongodb": "^6.6.2",
     "mongoose": "^8.4.0",
     "nodemon": "^3.1.1"
   }
diff --git a/package.json b/package.json
index 311ca20c4..fea545062 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   },
   "dependencies": {
     "bcrypt": "^5.1.1",
-    "bcrypt-nodejs": "^0.0.3"
+    "bcrypt-nodejs": "^0.0.3",
+    "mongodb": "^6.6.2"
   }
 }

From a30aa7c365172570f747f3e0c442643b5d3f4aad Mon Sep 17 00:00:00 2001
From: Viktoria Olofsson <viktoriaolofsson@gmail.com>
Date: Sun, 26 May 2024 20:14:57 +0200
Subject: [PATCH 23/27] updated the api url

---
 frontend/src/store/useStore.jsx | 61 +++++++++++++++++++--------------
 1 file changed, 35 insertions(+), 26 deletions(-)

diff --git a/frontend/src/store/useStore.jsx b/frontend/src/store/useStore.jsx
index 5d66230df..9488f70b0 100644
--- a/frontend/src/store/useStore.jsx
+++ b/frontend/src/store/useStore.jsx
@@ -53,17 +53,20 @@ export const useStore = create((set, get) => ({
       return false;
     }
     try {
-      const response = await fetch("http://localhost:8080/users", {
-        method: "POST",
-        body: JSON.stringify({
-          name: signUpData.name,
-          username: signUpData.username,
-          email: signUpData.email,
-          password: signUpData.password,
-          address: constructedAddress,
-        }),
-        headers: { "Content-Type": "application/json" },
-      });
+      const response = await fetch(
+        "https://project-auth-kh49.onrender.com/users",
+        {
+          method: "POST",
+          body: JSON.stringify({
+            name: signUpData.name,
+            username: signUpData.username,
+            email: signUpData.email,
+            password: signUpData.password,
+            address: constructedAddress,
+          }),
+          headers: { "Content-Type": "application/json" },
+        }
+      );
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
@@ -102,14 +105,17 @@ export const useStore = create((set, get) => ({
     event.preventDefault();
     const { loginData } = get();
     try {
-      const response = await fetch("http://localhost:8080/sessions", {
-        method: "POST",
-        body: JSON.stringify({
-          username: loginData.username,
-          password: loginData.password,
-        }),
-        headers: { "Content-Type": "application/json" },
-      });
+      const response = await fetch(
+        "https://project-auth-kh49.onrender.com/sessions",
+        {
+          method: "POST",
+          body: JSON.stringify({
+            username: loginData.username,
+            password: loginData.password,
+          }),
+          headers: { "Content-Type": "application/json" },
+        }
+      );
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
@@ -129,13 +135,16 @@ export const useStore = create((set, get) => ({
 
   fetchLoggedInData: async (accessToken) => {
     try {
-      const response = await fetch("http://localhost:8080/logged-in", {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: accessToken,
-        },
-      });
+      const response = await fetch(
+        "https://project-auth-kh49.onrender.com/logged-in",
+        {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: accessToken,
+          },
+        }
+      );
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }

From 53385a5c12d717ec7f75cf890db8353b1a93c4ec Mon Sep 17 00:00:00 2001
From: Viktoria Olofsson <viktoriaolofsson@gmail.com>
Date: Sun, 26 May 2024 20:27:59 +0200
Subject: [PATCH 24/27] added _redirects

---
 frontend/_redirects | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 frontend/_redirects

diff --git a/frontend/_redirects b/frontend/_redirects
new file mode 100644
index 000000000..50a463356
--- /dev/null
+++ b/frontend/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
\ No newline at end of file

From 6b8ca5a83da3bb0eb6705c1f4bbe84a6800e26c5 Mon Sep 17 00:00:00 2001
From: Viktoria Olofsson <viktoriaolofsson@gmail.com>
Date: Sun, 26 May 2024 21:02:19 +0200
Subject: [PATCH 25/27] copied _redirects to public

---
 frontend/public/_redirects | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 frontend/public/_redirects

diff --git a/frontend/public/_redirects b/frontend/public/_redirects
new file mode 100644
index 000000000..50a463356
--- /dev/null
+++ b/frontend/public/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
\ No newline at end of file

From 70dc24e7181d9a302fce6fadcee43e5c22a9ba7d Mon Sep 17 00:00:00 2001
From: Viktoria Olofsson <viktoriaolofsson@gmail.com>
Date: Sun, 26 May 2024 21:06:01 +0200
Subject: [PATCH 26/27] added netlify link

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

diff --git a/README.md b/README.md
index a64542cfa..c84dcd78d 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ API uses mongoose to include endpoints for user registration & sign-in, authenti
 
 ## The problem
 
-We had issues storing the access token, but figured it out by  parsing the token to JSON.
+We had issues storing the access token, but figured it out by parsing the token to JSON.
 
 ## View it live
 
@@ -15,3 +15,4 @@ We had issues storing the access token, but figured it out by  parsing the token
 https://project-auth-kh49.onrender.com/
 
 #### Frontend:
+https://heroic-beignet-77e068.netlify.app/logged-in

From 633f188ae46ff605b9ffdad4f733de71fd05d7bf Mon Sep 17 00:00:00 2001
From: Viktoria Olofsson <viktoriaolofsson@gmail.com>
Date: Mon, 27 May 2024 15:48:46 +0200
Subject: [PATCH 27/27] updated readme

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

diff --git a/README.md b/README.md
index c84dcd78d..3815c7313 100644
--- a/README.md
+++ b/README.md
@@ -15,4 +15,4 @@ We had issues storing the access token, but figured it out by parsing the token
 https://project-auth-kh49.onrender.com/
 
 #### Frontend:
-https://heroic-beignet-77e068.netlify.app/logged-in
+https://heroic-beignet-77e068.netlify.app/