From d5a1fda45745d5d61b3d1a3dbafc499f711e3733 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 7 Aug 2023 12:09:53 -0300 Subject: [PATCH 1/2] created basic authentication contenxt --- src/frontend/src/contexts/authContext.tsx | 77 +++++++++++++++++++++++ src/frontend/src/types/contexts/auth.ts | 16 +++++ 2 files changed, 93 insertions(+) create mode 100644 src/frontend/src/contexts/authContext.tsx create mode 100644 src/frontend/src/types/contexts/auth.ts diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx new file mode 100644 index 000000000..dc4ca52c9 --- /dev/null +++ b/src/frontend/src/contexts/authContext.tsx @@ -0,0 +1,77 @@ +import { createContext, useEffect, useState } from "react"; +import { AuthContextType, userData } from "../types/contexts/auth"; + +const initialValue: AuthContextType = { + isAuthenticated: false, + accessToken: null, + login: () => {}, + logout: () => {}, + refreshAccessToken: () => Promise.resolve(), + userData: null, + setUserData: () => {}, +}; + +const AuthContext = createContext(initialValue); + +export function AuthProvider({ children }): React.ReactElement { + const [accessToken, setAccessToken] = useState(null); + const [userData, setUserData] = useState(null); + + useEffect(() => { + const storedAccessToken = localStorage.getItem("access_token"); + if (storedAccessToken) { + setAccessToken(storedAccessToken); + } + }, []); + + function login(newAccessToken: string, refreshToken: string) { + localStorage.setItem("access_token", newAccessToken); + setAccessToken(newAccessToken); + // Store refreshToken if needed + } + + function logout() { + localStorage.removeItem("access_token"); + // Clear refreshToken if used + setAccessToken(null); + } + + async function refreshAccessToken(refreshToken: string) { + try { + // Call your API to refresh the access token using the refresh token + const response = await fetch("/api/refresh-token", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ refreshToken }), + }); + + if (response.ok) { + const data = await response.json(); + login(data.accessToken, refreshToken); + } else { + logout(); + } + } catch (error) { + logout(); + } + } + + return ( + // !! to convert string to boolean + + {children} + + ); +} diff --git a/src/frontend/src/types/contexts/auth.ts b/src/frontend/src/types/contexts/auth.ts new file mode 100644 index 000000000..af037ecae --- /dev/null +++ b/src/frontend/src/types/contexts/auth.ts @@ -0,0 +1,16 @@ +export type AuthContextType = { + isAuthenticated: boolean; + accessToken: string | null; + login: (accessToken: string, refreshToken: string) => void; + logout: () => void; + refreshAccessToken: (refreshToken: string) => Promise; + userData: userData | null; + setUserData: (userData: userData | null) => void; +}; + +export type userData = { + id: string; + name: string; + email: string; + role: string; +}; From 303f1862c5b52e70054f8681ef9d7e6079c99087 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 8 Aug 2023 10:57:44 -0300 Subject: [PATCH 2/2] chore(baseModal): add support for x-small size option to make the modal smaller in width and height feat(deleteAccountPage): create a new page for deleting user account with a confirmation modal feat(routes): add route for delete account page under /account/delete path --- src/frontend/src/modals/baseModal/index.tsx | 6 +- .../src/pages/deleteAccountPage/index.tsx | 59 +++++++++++++++++++ src/frontend/src/routes.tsx | 4 ++ 3 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 src/frontend/src/pages/deleteAccountPage/index.tsx diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx index 142ad223b..f472fd1ea 100644 --- a/src/frontend/src/modals/baseModal/index.tsx +++ b/src/frontend/src/modals/baseModal/index.tsx @@ -47,7 +47,7 @@ interface BaseModalProps { open?: boolean; setOpen?: (open: boolean) => void; disable?: boolean; - size?: "smaller" | "small" | "medium" | "large" | "large-h-full"; + size?: "x-small" | "smaller" | "small" | "medium" | "large" | "large-h-full"; } function BaseModal({ open, @@ -73,6 +73,10 @@ function BaseModal({ let height: string; switch (size) { + case "x-small": + minWidth = "min-w-[20vw]"; + height = "h-[10vh]"; + break; case "smaller": minWidth = "min-w-[40vw]"; height = "h-[27vh]"; diff --git a/src/frontend/src/pages/deleteAccountPage/index.tsx b/src/frontend/src/pages/deleteAccountPage/index.tsx new file mode 100644 index 000000000..af219209b --- /dev/null +++ b/src/frontend/src/pages/deleteAccountPage/index.tsx @@ -0,0 +1,59 @@ +import { useState } from "react"; +import { Button } from "../../components/ui/button"; +import { Input } from "../../components/ui/input"; +import BaseModal from "../../modals/baseModal"; + +export default function DeleteAccountPage() { + const [showConfirmation, setShowConfirmation] = useState(false); + + const handleDeleteAccount = () => { + // Implement your account deletion logic here + // For example, make an API call to delete the account + // Upon successful deletion, you can redirect the user to another page + console.log("Account deleted!"); + // Implement the logic to redirect the user after account deletion. + // For example, use react-router-dom's useHistory hook. + }; + + return ( +
+
+ ⛓️ + + Delete your account + + + + + +

Are you sure ?

+ + + + + +
+ +
+ + +
+
+ ); +} diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx index b92ce897a..fc51c8ee3 100644 --- a/src/frontend/src/routes.tsx +++ b/src/frontend/src/routes.tsx @@ -2,6 +2,7 @@ import { Route, Routes } from "react-router-dom"; import CommunityPage from "./pages/CommunityPage"; import FlowPage from "./pages/FlowPage"; import HomePage from "./pages/MainPage"; +import DeleteAccountPage from "./pages/deleteAccountPage"; import LoginPage from "./pages/loginPage"; const Router = () => { @@ -14,6 +15,9 @@ const Router = () => { } /> } /> + + }> + ); };