- You are not authorized to view this page. Please log in.
+
+
You are not authorized to view this page. Please log in.
Back to first page
@@ -57,9 +58,7 @@ export const UserPage = () => {
return (
-
- Congratulations! You are logged in, {user.name}!
-
+ Congratulations! You are logged in!
diff --git a/frontend/src/contexts/AuthContext.jsx b/frontend/src/contexts/AuthContext.jsx
index 1187287c4..a5bb751ea 100644
--- a/frontend/src/contexts/AuthContext.jsx
+++ b/frontend/src/contexts/AuthContext.jsx
@@ -11,7 +11,7 @@ export const AuthProvider = ({ children }) => {
})
const login = (user, accessToken) => {
- localStorage.setItem("accessToken, accessToken")
+ localStorage.setItem("accessToken", accessToken)
setAuthState({
isAuthenticated: true,
user,
diff --git a/pull_request_template.md b/pull_request_template.md
deleted file mode 100644
index d92c89b51..000000000
--- a/pull_request_template.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## Netlify link
-Add your Netlify link here.
-PS. Don't forget to add it in your readme as well.
-
-## Collaborators
-Add your collaborators here. Write their GitHub usernames in square brackets. If there's more than one, separate them with a comma, like this:
-[github-username-1, github-username-2]
From e9a003e3a4e89155821fcdad6dde9de6933669b4 Mon Sep 17 00:00:00 2001
From: Caracal23 <154092424+Caracal23@users.noreply.github.com>
Date: Thu, 23 May 2024 17:38:01 +0200
Subject: [PATCH 15/29] error handling on the backend; registration form
adjustments
---
README.md | 2 +-
backend/server.js | 89 +++++++++++---------
frontend/src/components/LoginForm.jsx | 77 +++++++----------
frontend/src/components/LogoutButton.jsx | 2 +
frontend/src/components/RegistrationForm.jsx | 61 +++++++++-----
frontend/src/components/UserPage.jsx | 48 +++++------
frontend/src/contexts/AuthContext.jsx | 46 +++++-----
package.json | 3 +-
8 files changed, 174 insertions(+), 154 deletions(-)
diff --git a/README.md b/README.md
index dab3c1b68..d5ff2aa1c 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ Every project should be deployed somewhere. Be sure to include the link to the d
## To do
-- Clear the registration form when the user has registered successfully
+- Clear the registration form when the user has registered successfully DONE
- Make sure user is logged out when clicking log out button - should not be able to see the user-page again by writing it in the url. User-page only to be reached throguh the login
diff --git a/backend/server.js b/backend/server.js
index 47e92e66e..6a7c5cb7a 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -1,12 +1,12 @@
-import cors from "cors"
-import express from "express"
-import mongoose from "mongoose"
-import bcrypt from "bcrypt"
-import expressListEndpoints from "express-list-endpoints"
+import cors from "cors";
+import express from "express";
+import mongoose from "mongoose";
+import bcrypt from "bcrypt";
+import expressListEndpoints from "express-list-endpoints";
-const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-mongo"
-mongoose.connect(mongoUrl)
-mongoose.Promise = Promise
+const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-mongo";
+mongoose.connect(mongoUrl);
+mongoose.Promise = Promise;
const User = mongoose.model("User", {
name: {
@@ -25,80 +25,93 @@ const User = mongoose.model("User", {
type: String,
default: () => bcrypt.genSaltSync(),
},
-})
+});
// 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 port = process.env.PORT || 8080
-const app = express()
+const port = process.env.PORT || 8080;
+const app = express();
// Add middlewares to enable cors and json body parsing
-app.use(cors())
-app.use(express.json())
+app.use(cors());
+app.use(express.json());
const authenticateUser = async (req, res, next) => {
- const token = req.header("Authorization")
+ const token = req.header("Authorization");
if (!token) {
- return res.status(401).json({ message: "Access token is missing" })
+ return res.status(401).json({ message: "Access token is missing" });
}
- const user = await User.findOne({ accessToken: token })
+ const user = await User.findOne({ accessToken: token });
if (!user) {
- res.status(403).json({ message: "Invalid access token" })
+ res.status(403).json({ message: "Invalid access token" });
}
- req.user = user
- next()
-}
+ req.user = user;
+ next();
+};
// List routes here
app.get("/", (req, res) => {
- const endpoints = expressListEndpoints(app)
- res.json(endpoints)
-})
+ const endpoints = expressListEndpoints(app);
+ res.json(endpoints);
+});
// Create user endpoint
app.post("/users", async (req, res) => {
- const salt = bcrypt.genSaltSync(10)
+ const salt = bcrypt.genSaltSync(10);
try {
- const { name, email, password } = req.body
+ const { name, email, password } = req.body;
+
+ if (name === "" || email === "" || password === "") {
+ res.status(400).json({});
+ }
+
+ if (User.findOne({ email })) {
+ res.status(409).json({});
+ }
+
const user = new User({
name,
email,
password: bcrypt.hashSync(password, salt),
- })
- user.save()
- res.status(201).json({ id: user._id, accessToken: user.accessToken })
+ });
+ user.save();
+ res.status(201).json({ id: user._id, accessToken: user.accessToken });
} catch (error) {
res.status(400).json({
response: error.message,
success: false,
message: "Could not create user",
errors: error.errors,
- })
+ });
}
-})
+});
// Endpoint once user is signed in
app.get("/user-page", authenticateUser, (req, res) => {
- res.json({ message: "You are logged in!", user: req.user })
-})
+ res.json({ message: "You are logged in!", user: req.user });
+});
// Sign-in endpoint
app.post("/sessions", async (req, res) => {
- const user = await User.findOne({ email: req.body.email })
+ const user = await User.findOne({ email: req.body.email });
if (user && bcrypt.compareSync(req.body.password, user.password)) {
- res.json({ userId: user._id, accessToken: user.accessToken })
+ res.json({ userId: user._id, accessToken: user.accessToken });
+ } else if (user && !bcrypt.compareSync(req.body.password, user.password)) {
+ // Wrong password
+ res.status(400).json({});
} else {
- res.json({ notFound: true })
+ // User does not exist
+ res.status(404).json({});
}
-})
+});
// Start the server
app.listen(port, () => {
- console.log(`Server running on http://localhost:${port}`)
-})
+ console.log(`Server running on http://localhost:${port}`);
+});
diff --git a/frontend/src/components/LoginForm.jsx b/frontend/src/components/LoginForm.jsx
index a178e0830..d9cae4730 100644
--- a/frontend/src/components/LoginForm.jsx
+++ b/frontend/src/components/LoginForm.jsx
@@ -1,64 +1,42 @@
//POST request to sessions with email and password
-import { useState, useContext } from "react"
-import { useNavigate, Link } from "react-router-dom"
-import { IoIosArrowBack } from "react-icons/io"
-import { AuthContext } from "../contexts/AuthContext"
+import { useState, useContext } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { IoIosArrowBack } from "react-icons/io";
+import { AuthContext } from "../contexts/AuthContext";
export const LoginForm = () => {
- const [email, setEmail] = useState("")
- const [password, setPassword] = useState("")
- const { login } = useContext(AuthContext)
- const navigate = useNavigate()
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [errorMessage, setErrorMessage] = useState(null);
+
+ const { login } = useContext(AuthContext);
+ const navigate = useNavigate();
//New function "handlelogin" where we use login from the global state
const handleLogin = async (event) => {
- event.preventDefault()
+ event.preventDefault();
try {
const response = await fetch("http://localhost:8080/sessions", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, password }),
- })
- const data = await response.json()
+ });
+ const data = await response.json();
if (response.ok) {
//Login the user and navigate to login page
- login(data.user, data.accessToken)
- navigate("/user-page")
+ login(data.user, data.accessToken);
+ navigate("/user-page");
} else {
- alert("Incorrect password, try again")
+ if (response.status === 400) {
+ setErrorMessage("Incorrect password, try again");
+ } else {
+ setErrorMessage("User does not exist");
+ }
}
} catch (error) {
- console.error("Error logging in", error)
- }
- }
-
- /*const login = () => {
- const options = {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ email: email, password: password }),
+ console.error("Error logging in", error);
}
- fetch(`http://localhost:8080/sessions`, options)
- .then((response) => response.json())
- .then((response) => {
- if (response.accessToken == undefined) {
- alert("Incorrect password, try again")
- } else {
- navigate("/user-page")
-
- console.log(response)
- console.log("Login was successful")
- }
- })
- }
-
- const handleEmailChange = (event) => {
- setEmail(event.target.value)
- }
-
- const handlePasswordChange = (event) => {
- setPassword(event.target.value)
- }*/
+ };
return (
<>
@@ -72,7 +50,8 @@ export const LoginForm = () => {
id="user-email"
placeholder="example@email.com"
value={email}
- onChange={(e) => setEmail(e.target.value)}>
+ onChange={(e) => setEmail(e.target.value)}
+ >
@@ -81,16 +60,18 @@ export const LoginForm = () => {
type="password"
id="user-password"
value={password}
- onChange={(e) => setPassword(e.target.value)}>
+ onChange={(e) => setPassword(e.target.value)}
+ >
+ {errorMessage != null &&
{errorMessage}
}
Back to first page
>
- )
-}
+ );
+};
diff --git a/frontend/src/components/LogoutButton.jsx b/frontend/src/components/LogoutButton.jsx
index 5e3c0201d..d2c0e7c73 100644
--- a/frontend/src/components/LogoutButton.jsx
+++ b/frontend/src/components/LogoutButton.jsx
@@ -1,4 +1,6 @@
import { useNavigate } from "react-router-dom"
+import { AuthContext } from "../contexts/AuthContext"
+import { useState } from "react"
export const LogoutButton = () => {
const navigate = useNavigate()
diff --git a/frontend/src/components/RegistrationForm.jsx b/frontend/src/components/RegistrationForm.jsx
index 0e7fb5472..6132d6965 100644
--- a/frontend/src/components/RegistrationForm.jsx
+++ b/frontend/src/components/RegistrationForm.jsx
@@ -1,17 +1,27 @@
-import { useState } from "react"
-import { Link } from "react-router-dom"
-import { IoIosArrowBack } from "react-icons/io"
-import "./RegistrationForm.css"
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { IoIosArrowBack } from "react-icons/io";
+import "./RegistrationForm.css";
//POST to the API endpoint /users to create a new user (name, email, password)
export const RegistrationForm = () => {
- const [name, setName] = useState("")
- const [email, setEmail] = useState("")
- const [password, setPassword] = useState("")
+ const [name, setName] = useState("");
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [registrationStatus, setRegistrationStatus] = useState({
+ error: null,
+ success: false,
+ });
+
+ const clearForm = () => {
+ setName("");
+ setEmail("");
+ setPassword("");
+ };
const handleSubmit = async (event) => {
- event.preventDefault()
+ event.preventDefault();
try {
const response = await fetch("http://localhost:8080/users", {
method: "POST",
@@ -19,17 +29,22 @@ export const RegistrationForm = () => {
"Content-Type": "application/json",
},
body: JSON.stringify({ name, email, password }),
- })
- const data = await response.json()
+ });
+ const data = await response.json();
if (response.ok) {
- console.log("User created successfully", data)
+ clearForm();
+ setRegistrationStatus({ error: null, success: true });
+ console.log("User created successfully", data);
} else {
- console.error("Error creating user", data)
+ setRegistrationStatus({ error: response.error, success: false });
+ console.error("Error creating user", data);
}
} catch (error) {
- console.error("Error creating user", error)
+ console.log(error.message);
+ setRegistrationStatus({ error: error, success: false });
+ console.error("Error creating user", error);
}
- }
+ };
return (
@@ -38,38 +53,46 @@ export const RegistrationForm = () => {
setName(e.target.value)}>
+ onChange={(e) => setName(e.target.value)}
+ >
setEmail(e.target.value)}>
+ onChange={(e) => setEmail(e.target.value)}
+ >
setPassword(e.target.value)}>
+ onChange={(e) => setPassword(e.target.value)}
+ >
+ {registrationStatus.success &&
Success!
}
+ {registrationStatus.error != null &&
Error!
}
Back to first page
- )
-}
+ );
+};
diff --git a/frontend/src/components/UserPage.jsx b/frontend/src/components/UserPage.jsx
index 018926bf7..ae919ee81 100644
--- a/frontend/src/components/UserPage.jsx
+++ b/frontend/src/components/UserPage.jsx
@@ -1,19 +1,19 @@
-import { useContext, useEffect, useState } from "react"
-import { Link } from "react-router-dom"
-import Lottie from "lottie-react"
-import { IoIosArrowBack } from "react-icons/io"
-import animationData from "../assets/lottie.json"
-import { AuthContext } from "../contexts/AuthContext"
-import { LogoutButton } from "./LogoutButton"
-import "./UserPage.css"
+import { useContext, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import Lottie from "lottie-react";
+import { IoIosArrowBack } from "react-icons/io";
+import animationData from "../assets/lottie.json";
+import { AuthContext } from "../contexts/AuthContext";
+import { LogoutButton } from "./LogoutButton";
+import "./UserPage.css";
//authorize with access token from /user-page
export const UserPage = () => {
- const { authState, logout } = useContext(AuthContext)
- const { isAuthenticated, accessToken } = authState
+ const { authState, logout } = useContext(AuthContext);
+ const { isAuthenticated, accessToken } = authState;
- const [loading, setLoading] = useState(true)
+ const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchUserPage = async () => {
@@ -22,26 +22,26 @@ export const UserPage = () => {
headers: {
Authorization: accessToken,
},
- })
+ });
if (!response.ok) {
- throw new Error("Failed to fetch user page")
+ throw new Error("Failed to fetch user page");
}
- setLoading(false)
+ setLoading(false);
} catch (error) {
- console.error(error)
- logout()
+ console.error(error);
+ logout();
}
- }
+ };
if (isAuthenticated) {
- fetchUserPage()
+ fetchUserPage();
} else {
- setLoading(false)
+ setLoading(false);
}
- }, [isAuthenticated, accessToken, logout])
+ }, [isAuthenticated, accessToken, logout]);
if (loading) {
- return
Loading...
+ return
Loading...
;
}
if (!isAuthenticated) {
@@ -53,7 +53,7 @@ export const UserPage = () => {
Back to first page
- )
+ );
}
return (
@@ -62,5 +62,5 @@ export const UserPage = () => {
Date: Thu, 23 May 2024 21:03:41 +0200
Subject: [PATCH 17/29] added logout functionality and unauthorized nimation
---
frontend/src/App.css | 26 +++++-----
frontend/src/assets/lottie-unauth.json | 1 +
frontend/src/assets/lottie-unauth1.json | 1 +
.../assets/{lottie.json => lottie-user.json} | 0
frontend/src/components/LoginForm.jsx | 3 --
frontend/src/components/LogoutButton.jsx | 18 +++----
frontend/src/components/UserPage.css | 18 +++++++
frontend/src/components/UserPage.jsx | 8 ++--
frontend/src/contexts/AuthContext.jsx | 48 ++++++++++---------
frontend/src/index.css | 15 ------
10 files changed, 67 insertions(+), 71 deletions(-)
create mode 100644 frontend/src/assets/lottie-unauth.json
create mode 100644 frontend/src/assets/lottie-unauth1.json
rename frontend/src/assets/{lottie.json => lottie-user.json} (100%)
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4897182fc..01cb30da6 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -21,24 +21,20 @@ body {
button {
font-family: "Encode Sans Expanded", sans-serif;
-}
-
-.user-message {
- font-family: "Gamja Flower", sans-serif;
+ margin-top: 20px;
+ height: 30px;
+ border-radius: 40px;
+ border: none;
+ background-color: #d56e90;
color: white;
- font-size: 36px;
- text-align: center;
-}
-
-.lottie {
- width: 280px;
+ font-weight: 500;
+ font-size: 14px;
+ cursor: pointer;
+ width: 100px;
}
-.user-page-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 20px;
+.full-width {
+ width: 100%;
}
/*Common styling for back-links*/
diff --git a/frontend/src/assets/lottie-unauth.json b/frontend/src/assets/lottie-unauth.json
new file mode 100644
index 000000000..652b7d229
--- /dev/null
+++ b/frontend/src/assets/lottie-unauth.json
@@ -0,0 +1 @@
+{"v":"5.8.0","fr":60,"ip":0,"op":120,"w":1000,"h":1000,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null 1","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[500,490,0],"to":[0,1.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[500,510,0],"to":[0,0,0],"ti":[0,1.667,0]},{"t":120,"s":[500,490,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[200,200,100],"ix":6,"l":2}},"ao":0,"ip":0,"op":121,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"face","parent":1,"sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.748,"y":0},"t":30,"s":[0,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.352,"y":1},"o":{"x":0.178,"y":0},"t":45,"s":[8,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.491,"y":1},"o":{"x":0.077,"y":0},"t":60,"s":[-8,0,0],"to":[0,0,0],"ti":[-1.333,0,0]},{"i":{"x":0.491,"y":1},"o":{"x":0.333,"y":0},"t":73,"s":[3,0,0],"to":[1.333,0,0],"ti":[0.5,0,0]},{"t":84,"s":[0,0,0]}],"ix":2,"l":2},"a":{"a":0,"k":[250,250,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.964,0],[0.926,1.269],[-2.109,1.537],[-12.421,0],[-9.638,-6.507],[1.46,-2.163],[2.164,1.463],[9.78,0],[8.382,-6.108]],"o":[[-1.46,0],[-1.537,-2.109],[10.009,-7.294],[11.67,0],[2.163,1.46],[-1.458,2.163],[-8.071,-5.448],[-10.408,0],[-0.84,0.612]],"v":[[-30.712,9.847],[-34.536,7.904],[-33.499,1.302],[0.788,-9.847],[33.361,0.099],[34.633,6.66],[28.073,7.932],[0.788,-0.396],[-27.934,8.941]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7803921568627451,0.28627450980392155,0.22745098039215686,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[250,273.902],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-5.22],[5.22,0],[0,5.22],[-5.22,0]],"o":[[0,5.22],[-5.22,0],[0,-5.22],[5.22,0]],"v":[[9.451,0],[0,9.451],[-9.451,0],[0,-9.451]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7803921568627451,0.28627450980392155,0.22745098039215686,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[212.197,225.702],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-5.22],[5.22,0],[0,5.22],[-5.22,0]],"o":[[0,5.22],[-5.22,0],[0,-5.22],[5.22,0]],"v":[[9.451,0],[0,9.451],[-9.451,0],[0,-9.451]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7803921568627451,0.28627450980392155,0.22745098039215686,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[287.803,225.702],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[287.803,225.702],"ix":2},"a":{"a":0,"k":[287.803,225.702],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"magnification glass","parent":1,"sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[27,24,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[14.17,-15.84],[0.87,-0.89],[25.14,0],[0,49.35],[-49.35,0],[0,-49.35]],"o":[[-0.82,0.93],[-16.27,16.75],[-49.35,0],[0,-49.35],[49.35,0],[0,22.88]],"v":[[39.949,35.36],[37.419,38.08],[-26.751,65.25],[-116.251,-24.25],[-26.751,-113.75],[62.749,-24.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[4.11,4.1],[0,0],[0,25.41],[60.93,0],[0,-60.93],[-60.93,0],[-19.48,17.2],[0,0],[-2.69,0],[-2.05,2.05]],"o":[[0,0],[14.48,-18.69],[0,-60.93],[-60.93,0],[0,60.93],[27.96,0],[0,0],[2.05,2.05],[2.69,0],[4.11,-4.1]],"v":[[134.169,116.83],[60.639,43.3],[83.749,-24.25],[-26.751,-134.75],[-137.251,-24.25],[-26.751,86.25],[46.269,58.61],[119.329,131.67],[126.749,134.75],[134.169,131.67]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7803921568627451,0.28627450980392155,0.22745098039215686,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/frontend/src/assets/lottie-unauth1.json b/frontend/src/assets/lottie-unauth1.json
new file mode 100644
index 000000000..9ed67dc4e
--- /dev/null
+++ b/frontend/src/assets/lottie-unauth1.json
@@ -0,0 +1 @@
+{"v":"5.6.10","fr":30,"ip":0,"op":60,"w":900,"h":900,"nm":"Wrong Mark","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":45,"ix":10},"p":{"a":0,"k":[450,450,0],"ix":2},"a":{"a":0,"k":[-1025,18,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0,0,0.667],"y":[1,1,1]},"o":{"x":[0,0,0.333],"y":[0,0,0]},"t":13,"s":[120.951,0,100]},{"t":26,"s":[120.951,83.956,100]}],"ix":6}},"ao":0,"ef":[{"ty":22,"nm":"Stroke","np":13,"mn":"ADBE Stroke","ix":1,"en":1,"ef":[{"ty":10,"nm":"Path","mn":"ADBE Stroke-0001","ix":1,"v":{"a":0,"k":0,"ix":1}},{"ty":7,"nm":"All Masks","mn":"ADBE Stroke-0010","ix":2,"v":{"a":0,"k":0,"ix":2}},{"ty":7,"nm":"Stroke Sequentially","mn":"ADBE Stroke-0011","ix":3,"v":{"a":0,"k":1,"ix":3}},{"ty":2,"nm":"Color","mn":"ADBE Stroke-0002","ix":4,"v":{"a":0,"k":[1,1,1,1],"ix":4}},{"ty":0,"nm":"Brush Size","mn":"ADBE Stroke-0003","ix":5,"v":{"a":0,"k":2,"ix":5}},{"ty":0,"nm":"Brush Hardness","mn":"ADBE Stroke-0004","ix":6,"v":{"a":0,"k":0.75,"ix":6}},{"ty":0,"nm":"Opacity","mn":"ADBE Stroke-0005","ix":7,"v":{"a":0,"k":1,"ix":7}},{"ty":0,"nm":"Start","mn":"ADBE Stroke-0008","ix":8,"v":{"a":0,"k":0,"ix":8}},{"ty":0,"nm":"End","mn":"ADBE Stroke-0009","ix":9,"v":{"a":0,"k":100,"ix":9}},{"ty":7,"nm":"Spacing","mn":"ADBE Stroke-0006","ix":10,"v":{"a":0,"k":15,"ix":10}},{"ty":7,"nm":"Paint Style","mn":"ADBE Stroke-0007","ix":11,"v":{"a":0,"k":1,"ix":11}}]}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0]],"o":[[0,0]],"v":[[-1016.231,288.356]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.501960754395,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[54,476],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.501960754395,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-1025,18],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-45,"ix":10},"p":{"a":0,"k":[450,450,0],"ix":2},"a":{"a":0,"k":[-1025,18,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0,0,0.667],"y":[1,1,1]},"o":{"x":[0,0,0.333],"y":[0,0,0]},"t":13,"s":[120.951,0,100]},{"t":26,"s":[120.951,83.956,100]}],"ix":6}},"ao":0,"ef":[{"ty":22,"nm":"Stroke","np":13,"mn":"ADBE Stroke","ix":1,"en":1,"ef":[{"ty":10,"nm":"Path","mn":"ADBE Stroke-0001","ix":1,"v":{"a":0,"k":0,"ix":1}},{"ty":7,"nm":"All Masks","mn":"ADBE Stroke-0010","ix":2,"v":{"a":0,"k":0,"ix":2}},{"ty":7,"nm":"Stroke Sequentially","mn":"ADBE Stroke-0011","ix":3,"v":{"a":0,"k":1,"ix":3}},{"ty":2,"nm":"Color","mn":"ADBE Stroke-0002","ix":4,"v":{"a":0,"k":[1,1,1,1],"ix":4}},{"ty":0,"nm":"Brush Size","mn":"ADBE Stroke-0003","ix":5,"v":{"a":0,"k":2,"ix":5}},{"ty":0,"nm":"Brush Hardness","mn":"ADBE Stroke-0004","ix":6,"v":{"a":0,"k":0.75,"ix":6}},{"ty":0,"nm":"Opacity","mn":"ADBE Stroke-0005","ix":7,"v":{"a":0,"k":1,"ix":7}},{"ty":0,"nm":"Start","mn":"ADBE Stroke-0008","ix":8,"v":{"a":0,"k":0,"ix":8}},{"ty":0,"nm":"End","mn":"ADBE Stroke-0009","ix":9,"v":{"a":0,"k":100,"ix":9}},{"ty":7,"nm":"Spacing","mn":"ADBE Stroke-0006","ix":10,"v":{"a":0,"k":15,"ix":10}},{"ty":7,"nm":"Paint Style","mn":"ADBE Stroke-0007","ix":11,"v":{"a":0,"k":1,"ix":11}}]}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0]],"o":[[0,0]],"v":[[-1016.231,288.356]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.501960754395,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[54,476],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.501960754395,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-1025,18],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0],"y":[0]},"t":0,"s":[0]},{"t":9,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[441.39,446.72,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[90,90,100]},{"t":9,"s":[82,82,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[676,676],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.501960754395,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.501960754395,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[14,4],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/frontend/src/assets/lottie.json b/frontend/src/assets/lottie-user.json
similarity index 100%
rename from frontend/src/assets/lottie.json
rename to frontend/src/assets/lottie-user.json
diff --git a/frontend/src/components/LoginForm.jsx b/frontend/src/components/LoginForm.jsx
index 4ce527284..11624bb44 100644
--- a/frontend/src/components/LoginForm.jsx
+++ b/frontend/src/components/LoginForm.jsx
@@ -1,4 +1,3 @@
-//POST request to sessions with email and password
import { useState, useContext } from "react";
import { useNavigate, Link } from "react-router-dom";
import { IoIosArrowBack } from "react-icons/io";
@@ -46,7 +45,6 @@ export const LoginForm = () => {
{
{
- const navigate = useNavigate()
-
- const logout = () => {
- navigate("/")
- }
+ const { logout } = useContext(AuthContext)
return (
- <>
-
- >
+
+
{" "}
+
)
}
diff --git a/frontend/src/components/UserPage.css b/frontend/src/components/UserPage.css
index 1b0458f52..07ea144f3 100644
--- a/frontend/src/components/UserPage.css
+++ b/frontend/src/components/UserPage.css
@@ -5,3 +5,21 @@
.unauthorized-message p {
padding-bottom: 10px;
}
+
+.lottie {
+ width: 280px;
+}
+
+.user-message {
+ font-family: "Gamja Flower", sans-serif;
+ color: white;
+ font-size: 36px;
+ text-align: center;
+}
+
+.user-page-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 20px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/UserPage.jsx b/frontend/src/components/UserPage.jsx
index ae919ee81..31a76c2d2 100644
--- a/frontend/src/components/UserPage.jsx
+++ b/frontend/src/components/UserPage.jsx
@@ -1,8 +1,9 @@
import { useContext, useEffect, useState } from "react";
import { Link } from "react-router-dom";
-import Lottie from "lottie-react";
import { IoIosArrowBack } from "react-icons/io";
-import animationData from "../assets/lottie.json";
+import Lottie from "lottie-react";
+import animationCat from "../assets/lottie-user.json";
+import animationUnauth from "../assets/lottie-unauth.json";
import { AuthContext } from "../contexts/AuthContext";
import { LogoutButton } from "./LogoutButton";
import "./UserPage.css";
@@ -47,6 +48,7 @@ export const UserPage = () => {
if (!isAuthenticated) {
return (
+
You are not authorized to view this page. Please log in.
@@ -59,7 +61,7 @@ export const UserPage = () => {
return (
Congratulations! You are logged in!
-
+
);
diff --git a/frontend/src/contexts/AuthContext.jsx b/frontend/src/contexts/AuthContext.jsx
index 60621302c..b765fba1d 100644
--- a/frontend/src/contexts/AuthContext.jsx
+++ b/frontend/src/contexts/AuthContext.jsx
@@ -1,69 +1,71 @@
-import { createContext, useState, useEffect } from "react";
-import PropTypes from "prop-types";
+import { createContext, useState, useEffect } from "react"
+import PropTypes from "prop-types"
-export const AuthContext = createContext();
+export const AuthContext = createContext()
export const AuthProvider = ({ children }) => {
const [authState, setAuthState] = useState({
isAuthenticated: false,
user: null,
accessToken: localStorage.getItem("accessToken"),
- });
+ })
const login = (user, accessToken) => {
- localStorage.setItem("accessToken", accessToken);
+ localStorage.setItem("accessToken", accessToken)
setAuthState({
isAuthenticated: true,
user,
accessToken,
- });
- };
+ })
+ console.log("User is logged in")
+ }
const logout = () => {
- localStorage.removeItem("accessToken");
+ localStorage.removeItem("accessToken")
setAuthState({
isAuthenticated: false,
user: null,
accessToken: null,
- });
- };
+ })
+ console.log("User is logged out")
+ }
useEffect(() => {
const fetchUser = async () => {
- const token = localStorage.getItem("accessToken");
+ const token = localStorage.getItem("accessToken")
if (token) {
try {
const response = await fetch("http://localhost:8080/user-page", {
headers: {
Authorization: token,
},
- });
+ })
if (response.ok) {
- const data = await response.json();
+ const data = await response.json()
setAuthState({
isAuthenticated: true,
user: data.user,
accessToken: token,
- });
+ })
} else {
- logout();
+ logout()
}
} catch (error) {
- console.error("Failed to fetch user data", error);
- logout();
+ console.error("Failed to fetch user data", error)
+ logout()
}
}
- };
- fetchUser();
- }, []);
+ }
+ fetchUser()
+ }, [])
return (
{children}
- );
-};
+ )
+}
AuthProvider.propTypes = {
children: PropTypes.node.isRequired,
-};
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ea34cdb3f..e69de29bb 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,15 +0,0 @@
-button {
- margin-top: 20px;
- height: 30px;
- border-radius: 40px;
- border: none;
- background-color: #d56e90;
- color: white;
- font-weight: 500;
- font-size: 14px;
- width: 100px;
-}
-
-.full-width {
- width: 100%;
-}
From c3df09a24f633ece3ffb2ac5fba7c6f9cbe09fe0 Mon Sep 17 00:00:00 2001
From: Alma Herrstrom
Date: Thu, 23 May 2024 22:03:31 +0200
Subject: [PATCH 18/29] updated animation in unauthorized page
---
frontend/src/assets/lottie-unauth.json | 2 +-
frontend/src/assets/lottie-unauth1.json | 1 -
frontend/src/components/AlertMessage.css | 2 +-
frontend/src/components/UserPage.css | 11 ++++-
frontend/src/components/UserPage.jsx | 52 ++++++++++++------------
frontend/src/components/WelcomePage.css | 4 ++
6 files changed, 41 insertions(+), 31 deletions(-)
delete mode 100644 frontend/src/assets/lottie-unauth1.json
diff --git a/frontend/src/assets/lottie-unauth.json b/frontend/src/assets/lottie-unauth.json
index 652b7d229..5aab626c6 100644
--- a/frontend/src/assets/lottie-unauth.json
+++ b/frontend/src/assets/lottie-unauth.json
@@ -1 +1 @@
-{"v":"5.8.0","fr":60,"ip":0,"op":120,"w":1000,"h":1000,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null 1","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[500,490,0],"to":[0,1.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[500,510,0],"to":[0,0,0],"ti":[0,1.667,0]},{"t":120,"s":[500,490,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[200,200,100],"ix":6,"l":2}},"ao":0,"ip":0,"op":121,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"face","parent":1,"sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.748,"y":0},"t":30,"s":[0,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.352,"y":1},"o":{"x":0.178,"y":0},"t":45,"s":[8,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.491,"y":1},"o":{"x":0.077,"y":0},"t":60,"s":[-8,0,0],"to":[0,0,0],"ti":[-1.333,0,0]},{"i":{"x":0.491,"y":1},"o":{"x":0.333,"y":0},"t":73,"s":[3,0,0],"to":[1.333,0,0],"ti":[0.5,0,0]},{"t":84,"s":[0,0,0]}],"ix":2,"l":2},"a":{"a":0,"k":[250,250,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.964,0],[0.926,1.269],[-2.109,1.537],[-12.421,0],[-9.638,-6.507],[1.46,-2.163],[2.164,1.463],[9.78,0],[8.382,-6.108]],"o":[[-1.46,0],[-1.537,-2.109],[10.009,-7.294],[11.67,0],[2.163,1.46],[-1.458,2.163],[-8.071,-5.448],[-10.408,0],[-0.84,0.612]],"v":[[-30.712,9.847],[-34.536,7.904],[-33.499,1.302],[0.788,-9.847],[33.361,0.099],[34.633,6.66],[28.073,7.932],[0.788,-0.396],[-27.934,8.941]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7803921568627451,0.28627450980392155,0.22745098039215686,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[250,273.902],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-5.22],[5.22,0],[0,5.22],[-5.22,0]],"o":[[0,5.22],[-5.22,0],[0,-5.22],[5.22,0]],"v":[[9.451,0],[0,9.451],[-9.451,0],[0,-9.451]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7803921568627451,0.28627450980392155,0.22745098039215686,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[212.197,225.702],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-5.22],[5.22,0],[0,5.22],[-5.22,0]],"o":[[0,5.22],[-5.22,0],[0,-5.22],[5.22,0]],"v":[[9.451,0],[0,9.451],[-9.451,0],[0,-9.451]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7803921568627451,0.28627450980392155,0.22745098039215686,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[287.803,225.702],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[287.803,225.702],"ix":2},"a":{"a":0,"k":[287.803,225.702],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"magnification glass","parent":1,"sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[27,24,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[14.17,-15.84],[0.87,-0.89],[25.14,0],[0,49.35],[-49.35,0],[0,-49.35]],"o":[[-0.82,0.93],[-16.27,16.75],[-49.35,0],[0,-49.35],[49.35,0],[0,22.88]],"v":[[39.949,35.36],[37.419,38.08],[-26.751,65.25],[-116.251,-24.25],[-26.751,-113.75],[62.749,-24.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[4.11,4.1],[0,0],[0,25.41],[60.93,0],[0,-60.93],[-60.93,0],[-19.48,17.2],[0,0],[-2.69,0],[-2.05,2.05]],"o":[[0,0],[14.48,-18.69],[0,-60.93],[-60.93,0],[0,60.93],[27.96,0],[0,0],[2.05,2.05],[2.69,0],[4.11,-4.1]],"v":[[134.169,116.83],[60.639,43.3],[83.749,-24.25],[-26.751,-134.75],[-137.251,-24.25],[-26.751,86.25],[46.269,58.61],[119.329,131.67],[126.749,134.75],[134.169,131.67]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7803921568627451,0.28627450980392155,0.22745098039215686,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
+{"v":"5.8.0","fr":60,"ip":0,"op":120,"w":1000,"h":1000,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null 1","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[500,490,0],"to":[0,1.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[500,510,0],"to":[0,0,0],"ti":[0,1.667,0]},{"t":120,"s":[500,490,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[200,200,100],"ix":6,"l":2}},"ao":0,"ip":0,"op":121,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"face","parent":1,"sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.748,"y":0},"t":30,"s":[0,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.352,"y":1},"o":{"x":0.178,"y":0},"t":45,"s":[8,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.491,"y":1},"o":{"x":0.077,"y":0},"t":60,"s":[-8,0,0],"to":[0,0,0],"ti":[-1.333,0,0]},{"i":{"x":0.491,"y":1},"o":{"x":0.333,"y":0},"t":73,"s":[3,0,0],"to":[1.333,0,0],"ti":[0.5,0,0]},{"t":84,"s":[0,0,0]}],"ix":2,"l":2},"a":{"a":0,"k":[250,250,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.964,0],[0.926,1.269],[-2.109,1.537],[-12.421,0],[-9.638,-6.507],[1.46,-2.163],[2.164,1.463],[9.78,0],[8.382,-6.108]],"o":[[-1.46,0],[-1.537,-2.109],[10.009,-7.294],[11.67,0],[2.163,1.46],[-1.458,2.163],[-8.071,-5.448],[-10.408,0],[-0.84,0.612]],"v":[[-30.712,9.847],[-34.536,7.904],[-33.499,1.302],[0.788,-9.847],[33.361,0.099],[34.633,6.66],[28.073,7.932],[0.788,-0.396],[-27.934,8.941]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.8706,0.2078,0.4314,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[250,273.902],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-5.22],[5.22,0],[0,5.22],[-5.22,0]],"o":[[0,5.22],[-5.22,0],[0,-5.22],[5.22,0]],"v":[[9.451,0],[0,9.451],[-9.451,0],[0,-9.451]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.8706,0.2078,0.4314,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[212.197,225.702],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-5.22],[5.22,0],[0,5.22],[-5.22,0]],"o":[[0,5.22],[-5.22,0],[0,-5.22],[5.22,0]],"v":[[9.451,0],[0,9.451],[-9.451,0],[0,-9.451]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.8706,0.2078,0.4314,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[287.803,225.702],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[287.803,225.702],"ix":2},"a":{"a":0,"k":[287.803,225.702],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"magnification glass","parent":1,"sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[27,24,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[14.17,-15.84],[0.87,-0.89],[25.14,0],[0,49.35],[-49.35,0],[0,-49.35]],"o":[[-0.82,0.93],[-16.27,16.75],[-49.35,0],[0,-49.35],[49.35,0],[0,22.88]],"v":[[39.949,35.36],[37.419,38.08],[-26.751,65.25],[-116.251,-24.25],[-26.751,-113.75],[62.749,-24.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[4.11,4.1],[0,0],[0,25.41],[60.93,0],[0,-60.93],[-60.93,0],[-19.48,17.2],[0,0],[-2.69,0],[-2.05,2.05]],"o":[[0,0],[14.48,-18.69],[0,-60.93],[-60.93,0],[0,60.93],[27.96,0],[0,0],[2.05,2.05],[2.69,0],[4.11,-4.1]],"v":[[134.169,116.83],[60.639,43.3],[83.749,-24.25],[-26.751,-134.75],[-137.251,-24.25],[-26.751,86.25],[46.269,58.61],[119.329,131.67],[126.749,134.75],[134.169,131.67]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.8706,0.2078,0.4314,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/frontend/src/assets/lottie-unauth1.json b/frontend/src/assets/lottie-unauth1.json
deleted file mode 100644
index 9ed67dc4e..000000000
--- a/frontend/src/assets/lottie-unauth1.json
+++ /dev/null
@@ -1 +0,0 @@
-{"v":"5.6.10","fr":30,"ip":0,"op":60,"w":900,"h":900,"nm":"Wrong Mark","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":45,"ix":10},"p":{"a":0,"k":[450,450,0],"ix":2},"a":{"a":0,"k":[-1025,18,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0,0,0.667],"y":[1,1,1]},"o":{"x":[0,0,0.333],"y":[0,0,0]},"t":13,"s":[120.951,0,100]},{"t":26,"s":[120.951,83.956,100]}],"ix":6}},"ao":0,"ef":[{"ty":22,"nm":"Stroke","np":13,"mn":"ADBE Stroke","ix":1,"en":1,"ef":[{"ty":10,"nm":"Path","mn":"ADBE Stroke-0001","ix":1,"v":{"a":0,"k":0,"ix":1}},{"ty":7,"nm":"All Masks","mn":"ADBE Stroke-0010","ix":2,"v":{"a":0,"k":0,"ix":2}},{"ty":7,"nm":"Stroke Sequentially","mn":"ADBE Stroke-0011","ix":3,"v":{"a":0,"k":1,"ix":3}},{"ty":2,"nm":"Color","mn":"ADBE Stroke-0002","ix":4,"v":{"a":0,"k":[1,1,1,1],"ix":4}},{"ty":0,"nm":"Brush Size","mn":"ADBE Stroke-0003","ix":5,"v":{"a":0,"k":2,"ix":5}},{"ty":0,"nm":"Brush Hardness","mn":"ADBE Stroke-0004","ix":6,"v":{"a":0,"k":0.75,"ix":6}},{"ty":0,"nm":"Opacity","mn":"ADBE Stroke-0005","ix":7,"v":{"a":0,"k":1,"ix":7}},{"ty":0,"nm":"Start","mn":"ADBE Stroke-0008","ix":8,"v":{"a":0,"k":0,"ix":8}},{"ty":0,"nm":"End","mn":"ADBE Stroke-0009","ix":9,"v":{"a":0,"k":100,"ix":9}},{"ty":7,"nm":"Spacing","mn":"ADBE Stroke-0006","ix":10,"v":{"a":0,"k":15,"ix":10}},{"ty":7,"nm":"Paint Style","mn":"ADBE Stroke-0007","ix":11,"v":{"a":0,"k":1,"ix":11}}]}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0]],"o":[[0,0]],"v":[[-1016.231,288.356]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.501960754395,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[54,476],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.501960754395,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-1025,18],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-45,"ix":10},"p":{"a":0,"k":[450,450,0],"ix":2},"a":{"a":0,"k":[-1025,18,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0,0,0.667],"y":[1,1,1]},"o":{"x":[0,0,0.333],"y":[0,0,0]},"t":13,"s":[120.951,0,100]},{"t":26,"s":[120.951,83.956,100]}],"ix":6}},"ao":0,"ef":[{"ty":22,"nm":"Stroke","np":13,"mn":"ADBE Stroke","ix":1,"en":1,"ef":[{"ty":10,"nm":"Path","mn":"ADBE Stroke-0001","ix":1,"v":{"a":0,"k":0,"ix":1}},{"ty":7,"nm":"All Masks","mn":"ADBE Stroke-0010","ix":2,"v":{"a":0,"k":0,"ix":2}},{"ty":7,"nm":"Stroke Sequentially","mn":"ADBE Stroke-0011","ix":3,"v":{"a":0,"k":1,"ix":3}},{"ty":2,"nm":"Color","mn":"ADBE Stroke-0002","ix":4,"v":{"a":0,"k":[1,1,1,1],"ix":4}},{"ty":0,"nm":"Brush Size","mn":"ADBE Stroke-0003","ix":5,"v":{"a":0,"k":2,"ix":5}},{"ty":0,"nm":"Brush Hardness","mn":"ADBE Stroke-0004","ix":6,"v":{"a":0,"k":0.75,"ix":6}},{"ty":0,"nm":"Opacity","mn":"ADBE Stroke-0005","ix":7,"v":{"a":0,"k":1,"ix":7}},{"ty":0,"nm":"Start","mn":"ADBE Stroke-0008","ix":8,"v":{"a":0,"k":0,"ix":8}},{"ty":0,"nm":"End","mn":"ADBE Stroke-0009","ix":9,"v":{"a":0,"k":100,"ix":9}},{"ty":7,"nm":"Spacing","mn":"ADBE Stroke-0006","ix":10,"v":{"a":0,"k":15,"ix":10}},{"ty":7,"nm":"Paint Style","mn":"ADBE Stroke-0007","ix":11,"v":{"a":0,"k":1,"ix":11}}]}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0]],"o":[[0,0]],"v":[[-1016.231,288.356]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.501960754395,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[54,476],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.501960754395,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-1025,18],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0],"y":[0]},"t":0,"s":[0]},{"t":9,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[441.39,446.72,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[90,90,100]},{"t":9,"s":[82,82,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[676,676],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.501960754395,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.501960754395,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[14,4],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/frontend/src/components/AlertMessage.css b/frontend/src/components/AlertMessage.css
index 7d5427098..49264c317 100644
--- a/frontend/src/components/AlertMessage.css
+++ b/frontend/src/components/AlertMessage.css
@@ -7,7 +7,7 @@
.background-error {
background-color: rgba(234, 134, 133, 1);
- color: rgba(230, 103, 103, 1);
+ color: rgb(111, 3, 3);
}
.background-success {
diff --git a/frontend/src/components/UserPage.css b/frontend/src/components/UserPage.css
index 07ea144f3..ff9f11b6e 100644
--- a/frontend/src/components/UserPage.css
+++ b/frontend/src/components/UserPage.css
@@ -1,5 +1,12 @@
.unauthorized-message {
- padding: 10px;
+ margin: 10px;
+ padding: 15px;
+ background-color: rgba(255, 255, 255, 0.371);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 40px;
}
.unauthorized-message p {
@@ -22,4 +29,4 @@
flex-direction: column;
align-items: center;
padding: 20px;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/UserPage.jsx b/frontend/src/components/UserPage.jsx
index 31a76c2d2..922001a7a 100644
--- a/frontend/src/components/UserPage.jsx
+++ b/frontend/src/components/UserPage.jsx
@@ -1,20 +1,20 @@
-import { useContext, useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import { IoIosArrowBack } from "react-icons/io";
-import Lottie from "lottie-react";
-import animationCat from "../assets/lottie-user.json";
-import animationUnauth from "../assets/lottie-unauth.json";
-import { AuthContext } from "../contexts/AuthContext";
-import { LogoutButton } from "./LogoutButton";
-import "./UserPage.css";
+import { useContext, useEffect, useState } from "react"
+import { Link } from "react-router-dom"
+import { IoIosArrowBack } from "react-icons/io"
+import Lottie from "lottie-react"
+import animationCat from "../assets/lottie-user.json"
+import animationUnauth from "../assets/lottie-unauth.json"
+import { AuthContext } from "../contexts/AuthContext"
+import { LogoutButton } from "./LogoutButton"
+import "./UserPage.css"
//authorize with access token from /user-page
export const UserPage = () => {
- const { authState, logout } = useContext(AuthContext);
- const { isAuthenticated, accessToken } = authState;
+ const { authState, logout } = useContext(AuthContext)
+ const { isAuthenticated, accessToken } = authState
- const [loading, setLoading] = useState(true);
+ const [loading, setLoading] = useState(true)
useEffect(() => {
const fetchUserPage = async () => {
@@ -23,39 +23,39 @@ export const UserPage = () => {
headers: {
Authorization: accessToken,
},
- });
+ })
if (!response.ok) {
- throw new Error("Failed to fetch user page");
+ throw new Error("Failed to fetch user page")
}
- setLoading(false);
+ setLoading(false)
} catch (error) {
- console.error(error);
- logout();
+ console.error(error)
+ logout()
}
- };
+ }
if (isAuthenticated) {
- fetchUserPage();
+ fetchUserPage()
} else {
- setLoading(false);
+ setLoading(false)
}
- }, [isAuthenticated, accessToken, logout]);
+ }, [isAuthenticated, accessToken, logout])
if (loading) {
- return Loading...
;
+ return Loading...
}
if (!isAuthenticated) {
return (
-
+
You are not authorized to view this page. Please log in.
Back to first page
- );
+ )
}
return (
@@ -64,5 +64,5 @@ export const UserPage = () => {
- );
-};
+ )
+}
diff --git a/frontend/src/components/WelcomePage.css b/frontend/src/components/WelcomePage.css
index c76c10ddf..4a665582d 100644
--- a/frontend/src/components/WelcomePage.css
+++ b/frontend/src/components/WelcomePage.css
@@ -3,3 +3,7 @@
gap: 20px;
justify-content: center;
}
+
+.title {
+ margin: 0 10px;
+}
From a117242f8284da5dd629bbbd2869191cfb3ed048 Mon Sep 17 00:00:00 2001
From: Alma Herrstrom
Date: Thu, 23 May 2024 22:20:00 +0200
Subject: [PATCH 19/29] unauthorized message styling
---
frontend/src/components/UserPage.css | 16 ++++++++++++----
1 file changed, 12 insertions(+), 4 deletions(-)
diff --git a/frontend/src/components/UserPage.css b/frontend/src/components/UserPage.css
index ff9f11b6e..332080d1f 100644
--- a/frontend/src/components/UserPage.css
+++ b/frontend/src/components/UserPage.css
@@ -1,12 +1,20 @@
.unauthorized-message {
- margin: 10px;
- padding: 15px;
- background-color: rgba(255, 255, 255, 0.371);
+ margin: 20px;
+ padding: 30px;
+ background-color: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
- border-radius: 40px;
+ border-radius: 20px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ max-width: 300px;
+ margin: auto;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ position: absolute;
}
.unauthorized-message p {
From 7e885359db5bdf9a4270e06b9ad2fb7ff39e566f Mon Sep 17 00:00:00 2001
From: Alma Herrstrom
Date: Thu, 23 May 2024 22:36:20 +0200
Subject: [PATCH 20/29] fixed bug that caused 409 error for every new user
---
backend/server.js | 102 ++++++++++---------
frontend/src/components/AlertMessage.css | 2 +-
frontend/src/components/AlertMessage.jsx | 13 ++-
frontend/src/components/LoginForm.jsx | 48 +++++----
frontend/src/components/RegistrationForm.css | 4 +
frontend/src/components/RegistrationForm.jsx | 87 ++++++++--------
6 files changed, 135 insertions(+), 121 deletions(-)
diff --git a/backend/server.js b/backend/server.js
index 89db959a3..32bfc7cfc 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -1,12 +1,12 @@
-import cors from "cors";
-import express from "express";
-import mongoose from "mongoose";
-import bcrypt from "bcrypt";
-import expressListEndpoints from "express-list-endpoints";
+import cors from "cors"
+import express from "express"
+import mongoose from "mongoose"
+import bcrypt from "bcrypt"
+import expressListEndpoints from "express-list-endpoints"
-const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-mongo";
-mongoose.connect(mongoUrl);
-mongoose.Promise = Promise;
+const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-mongo"
+mongoose.connect(mongoUrl)
+mongoose.Promise = Promise
const User = mongoose.model("User", {
name: {
@@ -25,91 +25,99 @@ const User = mongoose.model("User", {
type: String,
default: () => bcrypt.genSaltSync(),
},
-});
+})
// 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 port = process.env.PORT || 8080;
-const app = express();
+const port = process.env.PORT || 8080
+const app = express()
// Add middlewares to enable cors and json body parsing
-app.use(cors());
-app.use(express.json());
+app.use(cors())
+app.use(express.json())
const authenticateUser = async (req, res, next) => {
- const token = req.header("Authorization");
+ const token = req.header("Authorization")
if (!token) {
- return res.status(401).json({ message: "Access token is missing" });
+ return res.status(401).json({ message: "Access token is missing" })
}
- const user = await User.findOne({ accessToken: token });
+ const user = await User.findOne({ accessToken: token })
if (!user) {
- res.status(403).json({ message: "Invalid access token" });
+ res.status(403).json({ message: "Invalid access token" })
}
- req.user = user;
- next();
-};
+ req.user = user
+ next()
+}
// List routes here
app.get("/", (req, res) => {
- const endpoints = expressListEndpoints(app);
- res.json(endpoints);
-});
+ const endpoints = expressListEndpoints(app)
+ res.json(endpoints)
+})
// Create user endpoint
app.post("/users", async (req, res) => {
- const salt = bcrypt.genSaltSync(10);
+ const salt = bcrypt.genSaltSync(10)
try {
- const { name, email, password } = req.body;
+ const { name, email, password } = req.body
if (name === "" || email === "" || password === "") {
- res.status(400).json({});
- } else if (User.findOne({ email })) {
- res.status(409).json({});
- } else {
- const user = new User({
- name,
- email,
- password: bcrypt.hashSync(password, salt),
- });
- user.save();
- res.status(201).json({ id: user._id, accessToken: user.accessToken });
+ res.status(400).json({ message: "All fields are required" })
}
+
+ // Check if the user already exists
+ const existingUser = await User.findOne({ email })
+
+ if (existingUser) {
+ return res.status(409).json({ message: "User already exists" })
+ }
+
+ // Create new user
+ const user = new User({
+ name,
+ email,
+ password: bcrypt.hashSync(password, salt),
+ })
+
+ await user.save()
+
+ return res.status(201).json({ id: user._id, accessToken: user.accessToken })
} catch (error) {
res.status(400).json({
response: error.message,
success: false,
message: "Could not create user",
errors: error.errors,
- });
+ })
}
-});
+})
// Endpoint once user is signed in
app.get("/user-page", authenticateUser, (req, res) => {
- res.json({ message: "You are logged in!", user: req.user });
-});
+ res.json({ message: "You are logged in!", user: req.user })
+})
// Sign-in endpoint
app.post("/sessions", async (req, res) => {
- const user = await User.findOne({ email: req.body.email });
+ const user = await User.findOne({ email: req.body.email })
if (user && bcrypt.compareSync(req.body.password, user.password)) {
- res.json({ userId: user._id, accessToken: user.accessToken });
+ res.json({ userId: user._id, accessToken: user.accessToken })
} else if (user && !bcrypt.compareSync(req.body.password, user.password)) {
// Wrong password
- res.status(400).json({});
+ res.status(400).json({})
} else {
// User does not exist
- res.status(404).json({});
+ res.status(404).json({})
}
-});
+})
// Start the server
app.listen(port, () => {
- console.log(`Server running on http://localhost:${port}`);
-});
+ console.log(`Server running on http://localhost:${port}`)
+})
diff --git a/frontend/src/components/AlertMessage.css b/frontend/src/components/AlertMessage.css
index 49264c317..c0dcbdbb0 100644
--- a/frontend/src/components/AlertMessage.css
+++ b/frontend/src/components/AlertMessage.css
@@ -12,5 +12,5 @@
.background-success {
background-color: rgba(29, 209, 161, 1);
- color: rgba(16, 172, 132, 1);
+ color: rgb(6, 87, 67);
}
diff --git a/frontend/src/components/AlertMessage.jsx b/frontend/src/components/AlertMessage.jsx
index 3682c0ad1..5a8666718 100644
--- a/frontend/src/components/AlertMessage.jsx
+++ b/frontend/src/components/AlertMessage.jsx
@@ -1,19 +1,18 @@
-import PropTypes from "prop-types";
-import "./AlertMessage.css";
+import PropTypes from "prop-types"
+import "./AlertMessage.css"
export const AlertMessage = ({ type, message }) => {
return (
- );
-};
+ )
+}
AlertMessage.propTypes = {
type: PropTypes.string.isRequired,
message: PropTypes.string.isRequired,
-};
+}
diff --git a/frontend/src/components/LoginForm.jsx b/frontend/src/components/LoginForm.jsx
index 11624bb44..a12a973bf 100644
--- a/frontend/src/components/LoginForm.jsx
+++ b/frontend/src/components/LoginForm.jsx
@@ -1,42 +1,42 @@
-import { useState, useContext } from "react";
-import { useNavigate, Link } from "react-router-dom";
-import { IoIosArrowBack } from "react-icons/io";
-import { AuthContext } from "../contexts/AuthContext";
-import { AlertMessage } from "./AlertMessage";
+import { useState, useContext } from "react"
+import { useNavigate, Link } from "react-router-dom"
+import { IoIosArrowBack } from "react-icons/io"
+import { AuthContext } from "../contexts/AuthContext"
+import { AlertMessage } from "./AlertMessage"
export const LoginForm = () => {
- const [email, setEmail] = useState("");
- const [password, setPassword] = useState("");
- const [errorMessage, setErrorMessage] = useState(null);
+ const [email, setEmail] = useState("")
+ const [password, setPassword] = useState("")
+ const [errorMessage, setErrorMessage] = useState(null)
- const { login } = useContext(AuthContext);
- const navigate = useNavigate();
+ const { login } = useContext(AuthContext)
+ const navigate = useNavigate()
//New function "handlelogin" where we use login from the global state
const handleLogin = async (event) => {
- event.preventDefault();
+ event.preventDefault()
try {
const response = await fetch("http://localhost:8080/sessions", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, password }),
- });
- const data = await response.json();
+ })
+ const data = await response.json()
if (response.ok) {
//Login the user and navigate to login page
- login(data.user, data.accessToken);
- navigate("/user-page");
+ login(data.user, data.accessToken)
+ navigate("/user-page")
} else {
if (response.status === 400) {
- setErrorMessage("Incorrect password, try again");
+ setErrorMessage("Incorrect password, try again")
} else {
- setErrorMessage("User does not exist");
+ setErrorMessage("User does not exist")
}
}
} catch (error) {
- console.error("Error logging in", error);
+ console.error("Error logging in", error)
}
- };
+ }
return (
<>
@@ -49,8 +49,7 @@ export const LoginForm = () => {
id="user-email"
placeholder="example@email.com"
value={email}
- onChange={(e) => setEmail(e.target.value)}
- >
+ onChange={(e) => setEmail(e.target.value)}>
@@ -58,8 +57,7 @@ export const LoginForm = () => {
type="password"
id="user-password"
value={password}
- onChange={(e) => setPassword(e.target.value)}
- >
+ onChange={(e) => setPassword(e.target.value)}>
@@ -57,7 +61,8 @@ export const LoginForm = () => {
type="password"
id="user-password"
value={password}
- onChange={(e) => setPassword(e.target.value)}>
+ onChange={(e) => setPassword(e.target.value)}
+ >
- {errorMessage != null && (
-
+
+ {loading ? (
+
+ ) : (
+ <>
+ {errorMessage != null && (
+
+ )}
+ >
)}
diff --git a/frontend/src/components/RegistrationForm.css b/frontend/src/components/RegistrationForm.css
index 8af5baee0..d0ed00011 100644
--- a/frontend/src/components/RegistrationForm.css
+++ b/frontend/src/components/RegistrationForm.css
@@ -62,3 +62,12 @@ button {
display: flex;
justify-content: space-between;
}
+
+.user-loading {
+ padding: 8px 12px;
+ border-radius: 4px;
+ font-size: 13px;
+ margin: 6px auto;
+ background-color: rgba(209, 204, 192, 1);
+ color: black;
+}
diff --git a/frontend/src/components/RegistrationForm.jsx b/frontend/src/components/RegistrationForm.jsx
index d5d60cf14..7e288721d 100644
--- a/frontend/src/components/RegistrationForm.jsx
+++ b/frontend/src/components/RegistrationForm.jsx
@@ -1,59 +1,66 @@
-import { useState } from "react"
-import { Link } from "react-router-dom"
-import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io"
-import "./RegistrationForm.css"
-import { AlertMessage } from "./AlertMessage"
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
+import { AlertMessage } from "./AlertMessage";
+import "./RegistrationForm.css";
//POST to the API endpoint /users to create a new user (name, email, password)
export const RegistrationForm = () => {
- const [name, setName] = useState("")
- const [email, setEmail] = useState("")
- const [password, setPassword] = useState("")
+ const [name, setName] = useState("");
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [loading, setLoading] = useState(false);
const [registrationStatus, setRegistrationStatus] = useState({
error: null,
success: false,
- })
+ });
const clearForm = () => {
- setName("")
- setEmail("")
- setPassword("")
- }
+ setName("");
+ setEmail("");
+ setPassword("");
+ };
const getErrorMessage = () => {
if (registrationStatus.error === 409) {
- return "User already exists"
+ return "User already exists";
} else {
- return "Something went wrong. Please verify your information."
+ return "Something went wrong. Please verify your information.";
}
- }
+ };
const handleSubmit = async (event) => {
- event.preventDefault()
+ event.preventDefault();
+ setLoading(true);
try {
- const response = await fetch("https://bubblegum-auth.onrender.com/users", {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify({ name, email, password }),
- })
- const data = await response.json()
+ const response = await fetch(
+ "https://bubblegum-auth.onrender.com/users",
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ name, email, password }),
+ }
+ );
+ const data = await response.json();
if (response.ok) {
- clearForm()
- setRegistrationStatus({ error: null, success: true })
- console.log("User created successfully", data)
+ clearForm();
+ setRegistrationStatus({ error: null, success: true });
+ console.log("User created successfully", data);
} else {
- setRegistrationStatus({ error: response.status, success: false })
- console.error("Error creating user", data)
+ setRegistrationStatus({ error: response.status, success: false });
+ console.error("Error creating user", data);
}
} catch (error) {
- console.log(error.message)
- setRegistrationStatus({ error: 400, success: false })
- console.error("Error creating user", error)
+ console.log(error.message);
+ setRegistrationStatus({ error: 400, success: false });
+ console.error("Error creating user", error);
+ } finally {
+ setLoading(false);
}
- }
+ };
return (
@@ -67,7 +74,8 @@ export const RegistrationForm = () => {
id="name"
placeholder="Name McName"
value={name}
- onChange={(e) => setName(e.target.value)}>
+ onChange={(e) => setName(e.target.value)}
+ >
@@ -77,7 +85,8 @@ export const RegistrationForm = () => {
id="email"
placeholder="example@email.com"
value={email}
- onChange={(e) => setEmail(e.target.value)}>
+ onChange={(e) => setEmail(e.target.value)}
+ >
@@ -87,19 +96,29 @@ export const RegistrationForm = () => {
id="password"
placeholder="*********"
value={password}
- onChange={(e) => setPassword(e.target.value)}>
+ onChange={(e) => setPassword(e.target.value)}
+ >
- {registrationStatus.success && (
-
- )}
- {registrationStatus.error != null && (
-
+ {loading ? (
+
+
User being created...
+
+ ) : (
+ <>
+ {registrationStatus.success && (
+
+ )}
+ {registrationStatus.error != null && (
+
+ )}
+ >
)}
+
@@ -113,5 +132,5 @@ export const RegistrationForm = () => {
)}
- )
-}
+ );
+};