Merge pull request #74 from WildCodeSchool/70-access-auth

70-access-auth: handle accessfor admin & user

frontend/src/App.tsx

@@ -9,15 +9,15 @@ import Login from "./pages/Login";
 import SearchPage from "./pages/search/[searchKeywords]";
 import SearchError from "./pages/search/SearchError";
 import AccessRestriction from "./restrictions/AccessRestriction";
-
-const user = {
-  role: "admin",
-};
+import Profile from "./pages/Profile";
 
 const App = () => {
+
+  const user = "admin";
+
   return (
     <Routes>
-      <Route path="/" element={<Layout />}>
+      <Route path="/" element={<Layout user={user}/>}>
         <Route index element={<HomePage />} />
         <Route path="register" element={<Register />} />
         <Route
@@ -28,6 +28,14 @@ const App = () => {
             </AccessRestriction>
           }
         />
+        <Route
+          path="profile"
+          element={
+            <AccessRestriction user={user}>
+              <Profile />
+            </AccessRestriction>
+          }
+        />
         <Route path="login" element={<Login />} />
         <Route path="/product/:productId" element={<ProductDescription />} />
         <Route path="search/:keyword" element={<SearchPage />} />

frontend/src/components/Layout.tsx

@@ -12,7 +12,10 @@ export const UserContext = createContext({
   refetch: () => {},
 });
 
-function Layout() {
+interface LayoutType {
+  user: string;
+}
+function Layout({ user }: LayoutType) {
   const { data, refetch, loading, error } = useWhoAmIQuery();
 
   if (loading) {
@@ -35,7 +38,7 @@ function Layout() {
         }}
       >
         <div>
-          <Navbar />
+          <Navbar user={user} />
           <main className="main-content m-10">
             <Outlet />
           </main>
@@ -46,5 +49,4 @@ function Layout() {
       </UserContext.Provider>
     );
 }
-
 export default Layout;

frontend/src/components/Navbar.tsx

@@ -13,7 +13,11 @@ import { useLogoutLazyQuery } from "../generated/graphql-types";
 
 const { Search } = Input;
 
-function Navbar() {
+interface NavbarType {
+  user: string;
+}
+
+function Navbar({ user }: NavbarType) {
   const navigate = useNavigate();
 
   const onSearch = (value: string) => {
@@ -22,7 +26,7 @@ function Navbar() {
 
   const [logout] = useLogoutLazyQuery();
   const userInfo = useContext(UserContext);
-
+  console.log(userInfo, "userinfo");
   return (
     <div className="flex justify-between items-center p-4 bg-lightBlue mb-4">
       <div className="flex items-center">
@@ -44,10 +48,15 @@ function Navbar() {
         {userInfo.isLoggedIn && (
           <p className="mr-4">Bonjour, {userInfo.firstname}</p>
         )}
-
-        <Link to="/Admin" className="mr-4">
-          <UserOutlined style={{ fontSize: "18px", color: "black" }} />
-        </Link>
+        {user === "admin" ? (
+          <Link to="/admin" className="mr-4">
+            <UserOutlined style={{ fontSize: "18px", color: "black" }} />
+          </Link>
+        ) : (
+          <Link to="/profile" className="mr-4">
+            <UserOutlined style={{ fontSize: "18px", color: "black" }} />
+          </Link>
+        )}
 
         <ShoppingCartOutlined style={{ fontSize: "18px", color: "black" }} />
 

frontend/src/pages/Profile.tsx

@@ -0,0 +1,5 @@
+const Profile = () => {
+  return <div>test</div>;
+};
+
+export default Profile;

frontend/src/restrictions/AccessRestriction.tsx

@@ -3,15 +3,13 @@ import { Navigate } from "react-router-dom";
 
 export type AccessRestrictionTypes = {
   children: ReactNode;
-  user?: {
-    role: string;
-  };
+  user: string;
 };
 const AccessRestriction: React.FC<AccessRestrictionTypes> = ({
   children,
   user,
 }) => {
-  if (!user || user.role !== "admin") {
+  if (!user || user !== "admin" && user !== "user") {
     return <Navigate to="/" />;
   }