[dyad] wrote 3 file(s)

src/App.tsx

@@ -2,26 +2,74 @@ import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { useEffect, useState } from "react";
 import Index from "./pages/Index";
+import Login from "./pages/Login";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
 
-const App = () => (
+// Protected Route Component
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const token = localStorage.getItem("token");
+  if (!token) {
+    return <Navigate to="/login" replace />;
+  }
+  return <>{children}</>;
+};
+
+const App = () => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Vérifier le token au démarrage
+    const token = localStorage.getItem("token");
+    if (token) {
+      // Optionnel: Vérifier la validité du token avec le serveur
+      fetch("/api/auth/me", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+        .catch(() => {
+          localStorage.removeItem("token");
+          localStorage.removeItem("user");
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    } else {
+      setIsLoading(false);
+    }
+  }, []);
+
+  if (isLoading) {
+    return <div>Chargement...</div>;
+  }
+
+  return (
     <QueryClientProvider client={queryClient}>
       <TooltipProvider>
         <Toaster />
         <Sonner />
         <BrowserRouter>
           <Routes>
-          <Route path="/" element={<Index />} />
-          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+            <Route path="/login" element={<Login />} />
+            <Route
+              path="/"
+              element={
+                <ProtectedRoute>
+                  <Index />
+                </ProtectedRoute>
+              }
+            />
             <Route path="*" element={<NotFound />} />
           </Routes>
         </BrowserRouter>
       </TooltipProvider>
     </QueryClientProvider>
   );
+};
 
 export default App;

src/pages/Index.tsx

@@ -1,16 +1,115 @@
-// Update this page (the content is just a fallback if you fail to update the page)
-
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { showSuccess } from "@/utils/toast";
 import { MadeWithDyad } from "@/components/made-with-dyad";
 
 const Index = () => {
+  const [user, setUser] = useState<any>(null);
+  const [showAdmin, setShowAdmin] = useState(false);
+
+  useEffect(() => {
+    const userStr = localStorage.getItem("user");
+    if (userStr) {
+      setUser(JSON.parse(userStr));
+    }
+  }, []);
+
+  const handleLogout = () => {
+    localStorage.removeItem("token");
+    localStorage.removeItem("user");
+    showSuccess("Déconnexion réussie");
+    window.location.href = "/login";
+  };
+
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
-        <p className="text-xl text-gray-600">
-          Start building your amazing project here!
-        </p>
+    <div className="min-h-screen bg-gray-50">
+      {/* Top Navigation */}
+      <nav className="bg-white border-b border-gray-200 fixed w-full z-30 top-0">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-16">
+            <div className="flex">
+              <div className="flex-shrink-0 flex items-center">
+                <span className="text-xl font-semibold">Notes App</span>
               </div>
+            </div>
+            <div className="flex items-center space-x-4">
+              <span className="text-sm text-gray-500">
+                Connecté en tant que <span className="font-medium">{user?.username}</span>
+              </span>
+              {user?.is_admin && (
+                <Button
+                  variant="outline"
+                  onClick={() => setShowAdmin(true)}
+                >
+                  Administration
+                </Button>
+              )}
+              <Button
+                variant="outline"
+                onClick={handleLogout}
+              >
+                Déconnexion
+              </Button>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {/* Main Content */}
+      <div className="pt-16 grid grid-cols-[300px_1fr] h-screen">
+        {/* Sidebar */}
+        <aside className="bg-white border-r border-gray-200 p-4">
+          <div className="space-y-4">
+            <Input
+              type="search"
+              placeholder="Rechercher une note..."
+              className="w-full"
+            />
+            <Button className="w-full">
+              Nouvelle Note
+            </Button>
+            <div className="space-y-2">
+              {/* Notes list will go here */}
+            </div>
+          </div>
+        </aside>
+
+        {/* Note Editor */}
+        <main className="p-6 bg-gray-50">
+          <div className="bg-white rounded-lg shadow p-6">
+            <Input
+              type="text"
+              placeholder="Titre de la note"
+              className="text-xl font-semibold mb-4"
+            />
+            <div
+              className="min-h-[500px] p-4 border rounded-lg"
+              contentEditable
+              suppressContentEditableWarning
+            />
+          </div>
+        </main>
+      </div>
+
+      {/* Admin Modal */}
+      {showAdmin && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 w-[600px] max-h-[80vh] overflow-y-auto">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-semibold">Administration</h2>
+              <Button
+                variant="ghost"
+                onClick={() => setShowAdmin(false)}
+              >
+                ✕
+              </Button>
+            </div>
+            {/* Admin content will go here */}
+          </div>
+        </div>
+      )}
+
       <MadeWithDyad />
     </div>
   );

src/pages/Login.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { showError, showSuccess } from "@/utils/toast";
+
+const Login = () => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    try {
+      const response = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, password }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.message || "Erreur de connexion");
+      }
+
+      localStorage.setItem("token", data.token);
+      localStorage.setItem("user", JSON.stringify(data.user));
+      showSuccess("Connexion réussie");
+      window.location.href = "/";
+    } catch (error) {
+      showError(error instanceof Error ? error.message : "Erreur de connexion");
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <Card className="w-[400px]">
+        <CardHeader>
+          <CardTitle className="text-2xl text-center">Notes App</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleLogin} className="space-y-4">
+            <div className="space-y-2">
+              <label htmlFor="username" className="text-sm font-medium">
+                Nom d'utilisateur
+              </label>
+              <Input
+                id="username"
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="password" className="text-sm font-medium">
+                Mot de passe
+              </label>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              Se connecter
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default Login;