Finished authentification page

package.json

@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.12",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.8.2",
+    "tailwindcss": "^4.1.12"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",

src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.jsx

@@ -1,33 +1,22 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  Link
+} from 'react-router-dom'
+import AuthPage from './pages/AuthPage'
+import HomePage from './pages/HomePage'
 
 function App() {
-  const [count, setCount] = useState(0)
 
   return (
     <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <Router>
+          <Routes>
+            <Route path="/" element={<AuthPage />} />
+            <Route path="/home" element={<HomePage />} />
+          </Routes>
+      </Router>
     </>
   )
 }

src/index.css

@@ -1,68 +1,20 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@import "tailwindcss";
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+@font-face {
+    font-family: "BigBlueTerm437 Nerd Font";
+    src: url("./assets/fonts/BigBlueTerm437NerdFont-Regular.ttf") format("truetype");
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
+@theme {
+    --color-black: #0D0608;
+    --color-brown: #9A8271;
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
+    --color-primary-100: #884C59;
+    --color-primary-200: #945662;
+    --color-primary-300: #9E6268;
+    --color-primary-400: #B46D79;
     
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
+    --color-pink: #BE687C;
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+    --font-bigblueterm: "BigBlueTerm437 Nerd Font", monospace;
 }

src/pages/AuthPage.jsx

@@ -0,0 +1,160 @@
+import {useState} from 'react'
+
+export default function AuthPage() {
+    const [username, setUsername] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [isLogin, setIsLogin] = useState(true);
+
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        if (isLogin) {
+            const request = await fetch('http://localhost:3000/api/users/login', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ username, password }),
+            });
+
+            const response = await request.json();
+
+            if (response.code === 200) {
+                localStorage.setItem('token', response.token);
+            } else {
+                // Handle login error
+            }
+        } else {
+            const request = await fetch('http://localhost:3000/api/users/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ username, email, password }),
+            });
+
+            const response = await request.json();
+
+            if (response.code === 201) {
+                alert('Registration successful!');
+            } else {
+                // Handle registration error
+            }
+        }
+
+    }
+
+    return (
+        <div className="bg-black w-screen h-screen flex items-center justify-center">
+            <div className="w-128 border-4 border-primary-400">
+                {
+                    isLogin ? (
+                        <>
+                            <div className="bg-primary-400 h-16 flex justify-center items-center ">
+                                <h1 className="text-white font-bigblueterm text-4xl">Se connecter</h1>
+                            </div>
+
+                            <div className="flex flex-col items-center justify-center mt-8 px-8">
+
+                                <label htmlFor="username" className="mb-2 text-white font-bigblueterm w-full">Nom d'utilisateur</label>
+                                <input 
+                                    type="text" 
+                                    id="username" 
+                                    placeholder="Nom d'utilisateur" 
+                                    value={username}
+                                    onChange={(e) => setUsername(e.target.value)}
+                                    className="mb-4 p-2 border-2 border-primary-400 font-bigblueterm w-full text-white placeholder:text-brown focus:outline-none focus:border-primary-200" 
+                                />
+
+                                <label htmlFor="password" className="mb-2 text-white font-bigblueterm w-full">Mot de passe</label>
+                                <input 
+                                    type="password" 
+                                    id="password" 
+                                    placeholder="Mot de passe"
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    className="mb-4 p-2 border-2 border-primary-400 font-bigblueterm w-full text-white placeholder:text-brown focus:outline-none focus:border-primary-200" 
+                                />
+
+                                <button 
+                                    className="bg-primary-400 text-white p-2 font-bigblueterm mb-4"
+                                    onClick={handleSubmit}
+                                >
+                                    Se connecter
+                                </button>
+
+                                <hr className="border-primary-400 border w-full" />
+
+                                <div className="flex justify-center">
+                                    <button 
+                                        className="bg-primary-400 text-white p-2 font-bigblueterm my-4"
+                                        onClick={() => setIsLogin(false)}
+                                    >
+                                        S'inscrire
+                                    </button>
+                                </div>
+
+                            </div>
+                        </>
+                    ) : (
+                        <>
+                            <div className="bg-primary-400 h-16 flex justify-center items-center ">
+                                <h1 className="text-white font-bigblueterm text-4xl">S'inscrire</h1>
+                            </div>
+
+                            <div className="flex flex-col items-center justify-center mt-8 px-8">
+
+                                <label htmlFor="name" className="mb-2 text-white font-bigblueterm w-full">Nom d'utilisateur</label>
+                                <input 
+                                    type="text" 
+                                    id="name" 
+                                    placeholder="Nom" 
+                                    value={username}
+                                    onChange={(e) => setUsername(e.target.value)}
+                                    className="mb-4 p-2 border-2 border-primary-400 font-bigblueterm w-full text-white placeholder:text-brown focus:outline-none focus:border-primary-200" 
+                                />
+
+                                <label htmlFor="email" className="mb-2 text-white font-bigblueterm w-full">Email</label>
+                                <input 
+                                    type="text" 
+                                    id="email" 
+                                    placeholder="Email" 
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                    className="mb-4 p-2 border-2 border-primary-400 font-bigblueterm w-full text-white placeholder:text-brown focus:outline-none focus:border-primary-200" 
+                                />
+
+                                <label htmlFor="password" className="mb-2 text-white font-bigblueterm w-full">Mot de passe</label>
+                                <input 
+                                    type="password" 
+                                    id="password" 
+                                    placeholder="Mot de passe" 
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    className="mb-4 p-2 border-2 border-primary-400 font-bigblueterm w-full text-white placeholder:text-brown focus:outline-none focus:border-primary-200" 
+                                />
+
+                                <button className="bg-primary-400 text-white p-2 font-bigblueterm mb-4" onClick={handleSubmit}>S'inscrire</button>
+
+                                <hr className="border-primary-400 border w-full" />
+
+                                <div className="flex justify-center">
+                                    <button 
+                                        className="bg-primary-400 text-white p-2 font-bigblueterm my-4"
+                                        onClick={() => setIsLogin(true)}
+                                    >
+                                        Se connecter
+                                    </button>
+                                </div>
+
+                            </div>
+                        </>
+
+                    )
+                }
+            </div>
+        </div>
+    )
+}

src/pages/HomePage.jsx

@@ -0,0 +1,9 @@
+
+
+export default function HomePage() {
+    return (
+        <div>
+            <h1>Welcome to the Home Page</h1>
+        </div>
+    );
+}

vite.config.js

@@ -1,7 +1,11 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    tailwindcss()
+  ],
 })