ajout d'un panel de connection (pas encore de communication avec le backend pour submit)

srcs/frontend/src/app.js

@@ -112,28 +112,121 @@ class Grid {
     
 }
 
-class fenetre{
-    constructor(width = 300, height = 150) {
-        this.width = width;
-        this.height = height;
+class fenetre {
+    constructor(width = 320, height = 220, title = "Window") {
         this.main = document.createElement("div");
-        this.main.style.width = this.width + "px";
-        this.main.style.height = this.height + "px";
-        this.main.style.position = "absolute";
+        this.main.style.width = width + "px";
+        this.main.style.height = height + "px";
+        this.main.style.position = "fixed";
         this.main.style.top = "50%";
         this.main.style.left = "50%";
         this.main.style.transform = "translate(-50%, -50%)";
-        this.main.style.backgroundColor = '#000000ff';
-        this.main.style.border = "1.4mm ridge white";
+        this.main.style.backgroundColor = "#000";
+        this.main.style.border = "2px ridge white";
+        this.main.style.color = "white";
+        this.main.style.zIndex = "100";
+        this.main.style.display = "none";
+
+        // Header
+        this.header = document.createElement("div");
+        this.header.innerText = title;
+        this.header.style.padding = "6px";
+        this.header.style.background = "#222";
+        this.header.style.cursor = "move";
+
+        // Close
+        this.closeBtn = document.createElement("span");
+        this.closeBtn.innerText = "✖";
+        this.closeBtn.style.float = "right";
+        this.closeBtn.style.cursor = "pointer";
+        this.closeBtn.onclick = () => this.hide();
+
+        this.header.appendChild(this.closeBtn);
+
+        // Body
         this.body = document.createElement("div");
-        this.body.style.width = "50%";
-        this.body.style.height = "50%";
-        this.body.style.backgroundColor = '#faeaea';
+        this.body.style.padding = "10px";
+
+        this.main.append(this.header, this.body);
         document.body.appendChild(this.main);
-        this.main.appendChild(this.body);
+    }
+
+    show() {
+        this.main.style.display = "block";
+    }
+
+    hide() {
+        this.main.style.display = "none";
     }
 }
 
+class LoginWindow extends fenetre {
+    constructor() {
+        super(320, 240, "Connexion");
+
+        this.mode = "login"; // login | register
+
+        this.username = document.createElement("input");
+        this.username.placeholder = "Username";
+
+        this.password = document.createElement("input");
+        this.password.type = "password";
+        this.password.placeholder = "Password";
+
+        this.submit = document.createElement("button");
+        this.submit.innerText = "Se connecter";
+
+        this.switch = document.createElement("button");
+        this.switch.innerText = "S'inscrire";
+
+        this.message = document.createElement("div");
+        this.message.style.fontSize = "0.8em";
+
+        this.body.append(
+            this.username,
+            this.password,
+            this.submit,
+            this.switch,
+            this.message
+        );
+
+        this.applyStyles();
+        this.bindEvents();
+    }
+
+    applyStyles() {
+        this.body.style.display = "flex";
+        this.body.style.flexDirection = "column";
+        this.body.style.gap = "8px";
+    }
+
+    bindEvents() {
+        this.switch.onclick = () => this.toggleMode();
+
+        this.submit.onclick = () => {
+            this.message.innerText =
+                this.mode === "login"
+                    ? "Tentative de connexion..."
+                    : "Tentative d'inscription...";
+        };
+    }
+
+    toggleMode() {
+        if (this.mode === "login") {
+            this.mode = "register";
+            this.header.firstChild.textContent = "Inscription";
+            this.submit.innerText = "S'inscrire";
+            this.switch.innerText = "Se connecter";
+        } else {
+            this.mode = "login";
+            this.header.firstChild.textContent = "Connexion";
+            this.submit.innerText = "Se connecter";
+            this.switch.innerText = "S'inscrire";
+        }
+    }
+}
+
+
 const menuElement = new Element("menu");
 const loginElement = new MenuElement("login");
 const registeredElement = new MenuElement("registered");
@@ -145,4 +238,9 @@ const gridgreen = new Grid('#143a0fff', -1, 25, 0.12, "normal");
 const gridReverseRed = new Grid('#3a0f0f75', -1, 12.5, 0.09, "reverse");
 
 //Ajouter les fenetres
-const loginWindow = new fenetre();
+const test = new fenetre();
+const loginWindow = new LoginWindow();
+
+document.getElementById("login").addEventListener("click", () => {
+    loginWindow.show();
+});

srcs/frontend/src/index.html

@@ -14,12 +14,9 @@
         <li><button id="accueil">Accueil</button></li>
         <li><button id="explorer">Explorer</button></li>
         <li><button id="registered">Enregistré</button></li>
-        <svg id ="login" version="1.1" width="15" height="15" >
-            <circle cx="50%" cy="30%" r="5" fill="black" />
-            <circle cx="50%" cy="100%" r="7" fill="black" />
-        </svg>
+        <li><button id="login">Login</button></li>
     </menu>
-    <button onclick="direBonjour()" style="position: absolute; top: 20%; left: 50%; z-index: 1;">Click me !</button>
+    <button onclick="direBonjour()" style="position: absolute; top: 20%; left: 50%; z-index: 1;">Dont click !</button>
   </body>
   <script src="app.js"></script>