$

src/App.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import { Authenticated } from "./components";
+import Layout from "./layout/Layout";
+import { Router } from "./router";
+
+const App = () => (
+    <Authenticated>
+        <Layout>
+            <Router />
+        </Layout>
+    </Authenticated>
+);
+
+export default App;

src/api/authentication.js

@@ -0,0 +1,34 @@
+import axios from "axios";
+
+export const isLoggedIn = async () => {
+    try {
+        const response = await axios.get("/authenticate");
+
+        return response.data;
+    } catch (error) {
+        return error.response.data;
+    }
+};
+
+export const login = async (username, password) => {
+    try {
+        const response = await axios.post("/authenticate", {
+            username,
+            password,
+        });
+
+        return response.data;
+    } catch (error) {
+        return error.response.data;
+    }
+};
+
+export const logout = async () => {
+    try {
+        const response = await axios.delete("/authenticate");
+
+        return response.data;
+    } catch (error) {
+        return error.response.data;
+    }
+};

src/api/index.js

@@ -0,0 +1,3 @@
+export * from "./authentication";
+export * from "./user";
+export * from "./rooms";

src/api/rooms.js

@@ -0,0 +1,23 @@
+import axios from "axios";
+
+export const createRoom = async (name) => {
+    const response = await axios.post("/room", {
+        name,
+    });
+    return response.data;
+};
+
+export const deleteRoom = async (id) => {
+    const response = await axios.delete(`/room/${id}`);
+    return response.data;
+};
+
+export const getRooms = async () => {
+    const response = await axios.get(`/room`);
+    return response.data;
+};
+
+export const getRoom = async (id) => {
+    const response = await axios.get(`/room/${id}`);
+    return response.data;
+};

src/api/user.js

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+export const createUser = async (username, password, confirmation) => {
+    try {
+        const response = await axios.post("/user", {
+            username,
+            password,
+            confirmation,
+        });
+        return response.data;
+    } catch (error) {
+        return error.response.data;
+    }
+};

src/assets/styles/index.css

@@ -0,0 +1,9 @@
+body {
+    height: 100vh;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}

src/components/NavBar/NavBar.jsx

@@ -0,0 +1,50 @@
+import { useAuth } from "../../hooks";
+import "./NavBar.scss";
+import { logout } from "../../api";
+import { Link } from "react-router-dom/";
+
+export default function NavBar() {
+    const { user } = useAuth();
+    console.log(user);
+
+    const onLogout = () => {
+        logout().then((res) => {
+            if (res === "Ok") {
+                window.location.reload();
+            }
+        });
+    };
+
+    return (
+        <nav id="nav-container">
+            <ul id="leafs-container">
+                <li className="leaf">
+                    <Link to="/">Accueil</Link>
+                </li>
+
+                <li className="leaf">
+                    <Link to="rooms">Pieces</Link>
+                </li>
+
+                {user ? (
+                    <div className="leaf-into">
+                        <li className="leaf">
+                            <Link to="profile">Profile</Link>
+                        </li>
+
+                        <button className="leaf-btn" onClick={onLogout}>
+                            Deconnexion
+                        </button>
+                    </div>
+                ) : (
+                    <li className="leaf-into">
+                        <span className="leaf-txt">
+                            <Link to="login">Connexion</Link>&nbsp;/&nbsp;
+                            <Link to="register">Inscription</Link>
+                        </span>
+                    </li>
+                )}
+            </ul>
+        </nav>
+    );
+}

src/components/NavBar/NavBar.scss

@@ -0,0 +1,41 @@
+#nav-container {
+    background: rgb(123, 106, 156);
+    padding: 15px;
+
+    a {
+        font-weight: bold;
+        color: white;
+        text-decoration: none;
+
+        &:hover {
+            border-bottom: 1.5px solid white;
+        }
+    }
+
+    #leafs-container {
+        list-style-type: none;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        color: white;
+        gap: 50px;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+
+        .leaf-into {
+            .leaf-btn {
+            }
+
+            .leaf {
+            }
+
+            .leaf-txt {
+            }
+        }
+
+        .leaf {
+            font-weight: bold;
+        }
+    }
+}

src/components/authenticated.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { AuthenticationProvider } from "../contexts";
+
+export const Authenticated = ({ children }) => {
+  return <AuthenticationProvider>{children}</AuthenticationProvider>;
+};

src/components/index.js

@@ -0,0 +1 @@
+export * from "./authenticated";

src/contexts/auth-context.jsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from "react";
+
+import {
+    createUser as registerApi,
+    isLoggedIn,
+    login as loginApi,
+    logout as logoutApi,
+} from "../api";
+import { useQuery } from "../hooks";
+
+import { useLocation, useNavigate } from "react-router-dom";
+
+const initState = {
+    user: undefined,
+};
+
+export const AuthenticationContext = React.createContext({
+    ...initState,
+    login: () => {},
+    register: () => {},
+    logout: () => {},
+});
+
+export const AuthenticationProvider = ({ children }) => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const query = useQuery();
+    const [authState, setAuthState] = useState(initState);
+    const [isLoading, setIsLoading] = useState(true);
+
+    const redirect = () => {
+        navigate(query.get("redirect_uri") || "/");
+    };
+
+    const login = async (email, password) => {
+        loginApi(email, password)
+            .then((user) => {
+                setAuthState({ user });
+                redirect();
+            })
+            .catch(() => {
+                setAuthState({ user: undefined });
+            });
+    };
+
+    const register = async (username, password, confirmation) => {
+        registerApi(username, password, confirmation).then((user) => {
+            setAuthState({ user });
+            redirect();
+        });
+    };
+
+    const logout = () => {
+        logoutApi().then(() => {
+            setAuthState(initState);
+            navigate(`/login`);
+        });
+    };
+
+    useEffect(() => {
+        isLoggedIn()
+            .then((user) => {
+                if (user === "Unauthorized") throw new Error("Unauthorized");
+                setAuthState({ user });
+                if (location.pathname === "/login") {
+                    redirect();
+                }
+            })
+            .catch(() => {
+                setAuthState({ user: undefined });
+
+                if (!location.pathname.match(/^(\/|\/login|\/register)$/)) {
+                    navigate(
+                        `/login?redirect_uri=${encodeURI(location.pathname)}`
+                    );
+                }
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    }, []);
+
+    useEffect(() => {
+        if (location.pathname === "/logout") {
+            logout();
+        }
+    }, [location]);
+
+    if (isLoading) {
+        return <p>Loading...</p>;
+    }
+
+    return (
+        <AuthenticationContext.Provider
+            value={{ ...authState, login, logout, register }}
+        >
+            {children}
+        </AuthenticationContext.Provider>
+    );
+};

src/contexts/index.js

@@ -0,0 +1 @@
+export * from './auth-context'

src/hooks/index.js

@@ -0,0 +1,2 @@
+export * from "./use-auth";
+export * from "./use-query";

src/hooks/use-auth.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { AuthenticationContext } from "../contexts";
+
+export function useAuth() {
+  return React.useContext(AuthenticationContext);
+}

src/hooks/use-query.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import { useLocation } from 'react-router-dom'
+
+export const useQuery = () => {
+  const { search } = useLocation()
+
+  return React.useMemo(() => new URLSearchParams(search), [search])
+}

src/layout/Layout.css

@@ -0,0 +1,9 @@
+#layout-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+
+    main {
+        height: 100%;
+    }
+}

src/layout/Layout.jsx

@@ -0,0 +1,11 @@
+import NavBar from "../components/NavBar/NavBar";
+import "./Layout.css";
+
+export default function Layout({ children }) {
+    return (
+        <div id="layout-container">
+            <NavBar />
+            <main>{children}</main>
+        </div>
+    );
+}

src/main.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./assets/styles/index.css";
+import { BrowserRouter } from "react-router-dom";
+import { CookiesProvider } from "react-cookie";
+import setupAxios from "./setupAxios";
+
+setupAxios();
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+    <React.StrictMode>
+        <BrowserRouter>
+            <CookiesProvider>
+                <App />
+            </CookiesProvider>
+        </BrowserRouter>
+    </React.StrictMode>
+);

src/pages/authenticated/index.js

@@ -0,0 +1,2 @@
+export * from './login'
+export * from './register'

src/pages/authenticated/login.jsx

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+
+import { useAuth } from "../../hooks";
+
+export const Login = () => {
+    const { login } = useAuth();
+
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState();
+
+    const onSubmit = async (e) => {
+        e.preventDefault();
+        const response = await login(username, password);
+
+        if (response && !response.success) {
+            setError(response.error);
+        }
+    };
+
+    return (
+        <div>
+            <h1>Login page</h1>
+            {error && <p className="text-red-500">{error}</p>}
+            <form onSubmit={onSubmit}>
+                <input
+                    type="text"
+                    value={username}
+                    placeholder="username"
+                    onChange={(e) => setUsername(e.target.value)}
+                />
+                <input
+                    type="password"
+                    value={password}
+                    placeholder="password"
+                    onChange={(e) => setPassword(e.target.value)}
+                />
+                <button type="submit">submit</button>
+            </form>
+        </div>
+    );
+};

src/pages/authenticated/register.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+
+import { useAuth } from "../../hooks";
+
+export const Register = () => {
+    const { register } = useAuth();
+
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [confirmation, setConfirmation] = useState("");
+    const [error, setError] = useState();
+
+    const onSubmit = async (e) => {
+        e.preventDefault();
+        const response = await register(username, password, confirmation);
+        console.log(response);
+
+        if (response && !response.success) {
+            setError(response.error);
+        }
+    };
+
+    return (
+        <div>
+            <h1>Register page</h1>
+            {error && <p className="text-red-500">{error}</p>}
+            <form onSubmit={onSubmit}>
+                <input
+                    type="text"
+                    value={username}
+                    placeholder="username"
+                    onChange={(e) => setUsername(e.target.value)}
+                />
+                <input
+                    type="password"
+                    value={password}
+                    placeholder="password"
+                    onChange={(e) => setPassword(e.target.value)}
+                />
+                <input
+                    type="password"
+                    value={confirmation}
+                    placeholder="confirmation"
+                    onChange={(e) => setConfirmation(e.target.value)}
+                />
+                <button type="submit">submit</button>
+            </form>
+        </div>
+    );
+};

src/pages/home.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import { useAuth } from "../hooks";
+
+export const Home = () => {
+    const { user } = useAuth();
+    console.log(user);
+
+    return (
+        <div>
+            <h1>Home page</h1>
+            {user && <h2>Hello {user.user.username}</h2>}
+        </div>
+    );
+};

src/pages/index.js

@@ -0,0 +1,2 @@
+export * from "./authenticated";
+export * from "./home";

src/pages/profile/Profile.jsx

@@ -0,0 +1,50 @@
+import { useAuth } from "../../hooks";
+import "./Profile.scss";
+//Bilouuuuuuu94!@@
+
+export default function Profile() {
+    const { user } = useAuth();
+
+    return (
+        <div id="profile-container">
+            <div id="title-container">
+                <h3 id="title">
+                    Heureux de vous voir <b>{user.user.username}</b> !
+                </h3>
+            </div>
+
+            <div className="profile-modifier-container">
+                <span className="profile-modifier-title">
+                    Change ton pseudo
+                </span>
+
+                <input
+                    className="profile-modifier-ipt"
+                    type="text"
+                    placeholder="Nouveau nom"
+                />
+
+                <button>OK</button>
+            </div>
+
+            <div className="profile-modifier-container">
+                <span className="profile-modifier-title">
+                    Change ton mot de passe
+                </span>
+
+                <input
+                    className="profile-modifier-ipt"
+                    type="password"
+                    placeholder="Nouveau mot de passe"
+                />
+                <input
+                    className="profile-modifier-ipt"
+                    type="password"
+                    placeholder="Confirmation"
+                />
+
+                <button>OK</button>
+            </div>
+        </div>
+    );
+}

src/pages/profile/Profile.scss

@@ -0,0 +1,35 @@
+#profile-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    margin-top: 15px;
+
+    #title-container {
+        #title {
+        }
+    }
+
+    .profile-modifier-container {
+        border: 1px dashed black;
+        width: 500px;
+        display: flex;
+        flex-direction: column;
+        padding: 10px;
+        justify-content: space-between;
+        align-items: center;
+        gap: 10px;
+
+        .profile-modifier-title {
+            color: rgb(70, 70, 70);
+            font-weight: bold;
+        }
+
+        .profile-modifier-ipt {
+            text-align: center;
+            width: 50%;
+            height: 30px;
+        }
+    }
+}

src/pages/room/Room.jsx

@@ -0,0 +1,21 @@
+import { useParams } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { getRoom } from "../../api";
+
+export default function Room() {
+    const { id } = useParams();
+    const [data, setData] = useState();
+
+    useEffect(() => {
+        getRoom(id).then((res) => {
+            setData(res);
+            console.log(res);
+        });
+    }, []);
+
+    return (
+        <div>
+            <span>Piece n{id}</span>
+        </div>
+    );
+}

src/pages/rooms/Rooms.jsx

@@ -0,0 +1,87 @@
+import "./Rooms.scss";
+import { useState, useEffect } from "react";
+import { createRoom, getRooms, deleteRoom } from "../../api";
+import { Link } from "react-router-dom";
+
+export default function Rooms() {
+    const [rooms, setRooms] = useState([]);
+
+    const onClickCreate = () => {
+        const name = prompt("Nom de la piece ?");
+
+        createRoom(name).then((res) => {
+            const values = [...rooms];
+            values.push(res);
+            setRooms(values);
+        });
+    };
+
+    const onClickDelete = (id, name) => {
+        const confirmation = prompt(
+            `Etes-vous sur de vouloir supprimer ${name} ? (Oui ou non)`
+        );
+
+        if (confirmation.toLocaleLowerCase() !== "oui") return;
+
+        deleteRoom(id).then((res) => {
+            const values = rooms.filter((e) => e._id !== id);
+            setRooms(values);
+        });
+    };
+
+    useEffect(() => {
+        getRooms().then((res) => {
+            setRooms(res);
+        });
+    }, []);
+
+    return (
+        <div id="rooms-container">
+            {rooms.length === 0 ? (
+                <span id="err-no-rooms">Aucune piece enregistree</span>
+            ) : (
+                <div id="rooms-list-container">
+                    {rooms.map((i, j) => (
+                        <div className="room" key={j}>
+                            <div
+                                className="room-delete"
+                                onClick={() => {
+                                    onClickDelete(i._id, i.name);
+                                }}
+                            >
+                                <span className="room-delete-ascii">×</span>
+                            </div>
+
+                            <div className="room-id-container">
+                                <span className="label-id">ID</span>
+                                <span className="room-id">
+                                    {i._id[0]}
+                                    {i._id[1]}
+                                    {i._id[2]}
+                                    {i._id[3]}
+                                    {i._id[4]}
+                                    {i._id[5]}
+                                    ...
+                                </span>
+                            </div>
+
+                            <div className="room-name-container">
+                                <span className="label-name">Nom&nbsp;</span>
+                                <Link to={`/room/${i._id}`}>
+                                    <span className="room-name">{i.name}</span>
+                                </Link>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+
+            <div id="rooms-add-container">
+                <div id="rooms-text-on">Creer une nouvelle piece</div>
+                <button id="add-rooms" onClick={onClickCreate}>
+                    +
+                </button>
+            </div>
+        </div>
+    );
+}

src/pages/rooms/Rooms.scss

@@ -0,0 +1,119 @@
+#rooms-container {
+    height: 100%;
+    width: 100%;
+
+    #err-no-rooms {
+        height: 100%;
+        display: flex;
+        color: red;
+        font-weight: bold;
+        justify-content: center;
+        align-items: center;
+    }
+
+    #rooms-list-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 50px;
+        margin-top: 20px;
+
+        .room {
+            width: 200px;
+            height: 200px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            border: 1px dashed rgb(54, 54, 54);
+            position: relative;
+
+            &:hover {
+                .room-delete {
+                    display: block;
+                }
+            }
+
+            .room-delete {
+                width: 25px;
+                height: 25px;
+                position: absolute;
+                top: 0;
+                right: 0;
+                background: red;
+                display: none;
+
+                .room-delete-ascii {
+                    display: flex;
+                    width: 100%;
+                    height: 100%;
+                    justify-content: center;
+                    align-items: center;
+                    color: white;
+                    font-weight: bold;
+                }
+            }
+
+            .room-id-container {
+                display: flex;
+                justify-content: space-between;
+                width: 60%;
+
+                .label-id {
+                }
+
+                .room-id {
+                }
+            }
+
+            .room-name-container {
+                width: 60%;
+                display: flex;
+                justify-content: space-between;
+
+                .label-name {
+                }
+
+                .room-name {
+                }
+            }
+
+            &:hover {
+                cursor: pointer;
+                transform: scale(1.02);
+                transition: 0.2s;
+            }
+        }
+    }
+
+    #rooms-add-container {
+        position: absolute;
+        bottom: 20px;
+        right: 20px;
+        gap: 25px;
+
+        #rooms-text-on {
+            width: 100px;
+            background: rgb(123, 106, 156);
+            color: white;
+            display: none;
+        }
+
+        #add-rooms {
+            text-align: center;
+            width: 40px;
+            height: 40px;
+            border-radius: 50px;
+            border: none;
+            background: rgb(123, 106, 156);
+            color: white;
+            font-size: 1em;
+            font-weight: bold;
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+    }
+}

src/router.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Route, Routes } from "react-router-dom";
+import Profile from "./pages/profile/Profile";
+import Rooms from "./pages/rooms/Rooms";
+import Room from "./pages/room/Room";
+import { Home, Login, Register } from "./pages";
+
+export const Router = () => (
+    <Routes>
+        <Route index element={<Home />} />
+        <Route path="login" element={<Login />} />
+        <Route path="register" element={<Register />} />
+        <Route path="rooms" element={<Rooms />} />
+        <Route path="room/:id" element={<Room />} />
+        <Route path="profile" element={<Profile />} />
+    </Routes>
+);

src/setupAxios.js

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+const setupAxios = () => {
+  axios.defaults.baseURL = import.meta.env.VITE_API_URL;
+  axios.defaults.withCredentials = true;
+};
+
+export default setupAxios;