env + passwd page

client/src/App.tsx

@@ -2,13 +2,15 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { Toaster } from "./ui/elements/sonner";
 import { Home } from "./ui/screens/Home";
 import { TooltipProvider } from "@/ui/elements/tooltip";
+import DevPage from "./ui/screens/DevPage";
 
 export default function App() {
   return (
     <TooltipProvider>
       <Router>
         <Routes>
           <Route path="/" element={<Home />} />
+          <Route path="/dev" element={<DevPage />} />
         </Routes>
         <Toaster position="bottom-right" />
       </Router>

client/src/main.tsx

@@ -13,6 +13,7 @@ import { sepolia, mainnet } from "@starknet-react/chains";
 import cartridgeConnector from "./cartridgeConnector.tsx";
 
 import "./index.css";
+import DevPage from "./ui/screens/DevPage.tsx";
 
 const { VITE_PUBLIC_DEPLOY_TYPE } = import.meta.env;
 
@@ -58,7 +59,10 @@ export function Main() {
                 </SoundPlayerProvider>
               </DojoProvider>
             ) : (
-              <Loading />
+              <>
+                <Loading />
+                {import.meta.env.DEV && <DevPage />}
+              </>
             )}
           </MusicPlayerProvider>
         </StarknetConfig>

client/src/ui/components/PasswordProtected.tsx

@@ -0,0 +1,47 @@
+// src/components/PasswordProtected.jsx
+import React, { useState } from "react";
+
+const PasswordProtected = ({ children }) => {
+  const [password, setPassword] = useState("");
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const correctPassword = import.meta.env.VITE_TESTINGPAGE_PASSWORD;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (password === correctPassword) {
+      setIsAuthenticated(true);
+    } else {
+      alert("Mot de passe incorrect !");
+    }
+  };
+
+  if (isAuthenticated) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <form
+        onSubmit={handleSubmit}
+        className="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full"
+      >
+        <h2 className="text-2xl font-bold mb-4">Entrez le mot de passe</h2>
+        <input
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="Mot de passe"
+          className="w-full px-4 py-2 border rounded mb-4"
+        />
+        <button
+          type="submit"
+          className="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600"
+        >
+          Accéder
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default PasswordProtected;

client/src/ui/screens/DevPage.tsx

@@ -0,0 +1,16 @@
+import PasswordProtected from "../components/PasswordProtected";
+
+const DevPage = () => {
+  return (
+    <PasswordProtected>
+      <div className="p-8">
+        <h1 className="text-2xl font-bold text-red-500">
+          Page de développement
+        </h1>
+        <p>Cette page est uniquement visible en mode développement.</p>
+      </div>
+    </PasswordProtected>
+  );
+};
+
+export default DevPage;