Add user creation popup

public/javascripts/commands.js

@@ -1,4 +1,4 @@
-import {alert, prompt, confirm} from "./popups.js";
+import {alert, confirm, createUserPopup} from "./popups.js";
 
 const socket = io();
 const list = document.querySelector(".list");
@@ -157,18 +157,12 @@ function price() {
 async function addUser() {
     let firstName, lastName;
     do {
-        firstName = await prompt("First name");
-    } while (firstName === "");
-    if (firstName) {
-        do {
-            lastName = await prompt("Last name");
-        } while (lastName === "");
-        if (lastName)
-            socket.emit("add user", {username: current.client, firstName: firstName, lastName: lastName});
-    }
-    if (!firstName|| !lastName) {
+        [firstName, lastName] = await createUserPopup(current.client);
+    } while (firstName === "" || lastName === "");
+    if (firstName && lastName)
+        socket.emit("add user", {username: current.client, firstName: firstName, lastName: lastName});
+    else
         await alert("User creation aborted");
-    }
 }
 
 function addCommand() {
@@ -304,7 +298,7 @@ document.querySelector(".validation").addEventListener("click", async ev => {
     ev.stopPropagation();
     if (!current.dish && !current.ingredient.length && !current.sauce.length && !current.drink && !current.dessert)
         await alert("Empty command !");
-    else if (user.style.color === "red")
+    else if (current.client && user.style.color === "red")
         await addUser();
     else
         addCommand();

public/javascripts/popups.js

@@ -93,3 +93,50 @@ export function prompt(message, inputArgs) {
         });
     });
 }
+
+export function createUserPopup(username) {
+    return new Promise(next => {
+        if (document.getElementById("popup-container"))
+            throw new Error("Popup already exist !")
+        document.querySelector("body").insertAdjacentHTML("afterend", `<div id="popup-container">
+    <div id="popup">
+        <h1>Creation of user ${username}</h1>
+        <div class="wrap-input2">
+            <input class="input2" id="firstName" type="text" placeholder="First Name">
+        </div>
+        <div class="wrap-input2">
+            <input class="input2" id="lastName" type="text" placeholder="Last Name">
+        </div>
+        <div id="popup-validation">
+            <div class="container-contact2-form-btn">
+                <div class="wrap-contact2-form-btn">
+                    <div class="contact2-form-bgbtn"></div>
+                    <a><button id="popup-cancel" class="contact2-form-btn">Cancel</button></a>
+                </div>
+            </div>
+            <div class="container-contact2-form-btn">
+                <div class="wrap-contact2-form-btn">
+                    <div class="contact2-form-bgbtn"></div>
+                    <a><button id="popup-ok" class="contact2-form-btn">Ok</button></a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`);
+        let ok = document.getElementById("popup-ok");
+        document.getElementById("lastName").addEventListener("keyup", ev => {
+            if (ev.key === "Enter")
+                ok.click()
+        });
+        ok.addEventListener("click", () => {
+            let firstName = document.getElementById("firstName").value;
+            let lastName = document.getElementById("lastName").value;
+            document.getElementById("popup-container").remove();
+            next([firstName, lastName]);
+        });
+        document.getElementById("popup-cancel").addEventListener("click", () => {
+            document.getElementById("popup-container").remove();
+            next(null, null);
+        });
+    });
+}

public/javascripts/service.js

@@ -1,4 +1,4 @@
-import {alert, prompt} from "./popups.js";
+import {alert, createUserPopup} from "./popups.js";
 
 let socket = io();
 let users = {};
@@ -7,16 +7,11 @@ let usersAdd = [];
 async function addUser(username) {
     let firstName, lastName;
     do {
-        firstName = await prompt("First name for " + username);
-    } while (firstName === "");
-    if (firstName) {
-        do {
-            lastName = await prompt("Last name for " + username);
-        } while (lastName === "");
-        if (lastName)
-            socket.emit("add user", {username: username, firstName: firstName, lastName: lastName});
-    }
-    if (!firstName|| !lastName)
+        [firstName, lastName] = await createUserPopup(username);
+    } while (firstName === "" || lastName === "");
+    if (firstName && lastName)
+        socket.emit("add user", {username: username, firstName: firstName, lastName: lastName});
+    else
         await alert("User creation aborted for " + username);
 }
 
@@ -25,6 +20,7 @@ async function next() {
         await addUser(usersAdd.pop());
     else
         socket.emit("set service", users);
+    console.log(users)
 }
 
 function hinter(ev) {
@@ -40,9 +36,8 @@ socket.on("connected", () => {
 });
 
 socket.on("list service", data => {
-    for (let s in data) {
-        document.getElementById(s).value = data[s]
-    }
+    for (let s in data)
+        document.getElementById(s).value = data[s];
 });
 
 socket.on("list user", data => {
@@ -66,7 +61,6 @@ socket.on("add user", async () => {
 });
 
 socket.on("set service", () => {
-    console.log("close !")
     window.close();
 });
 
@@ -86,7 +80,7 @@ document.querySelectorAll("input[type='text']").forEach(e => {
 
 document.querySelector("button").addEventListener("click", async () => {
     document.querySelectorAll("input[type='text']").forEach(e=> {
-        if (e.style.color)
+        if (e.value && e.style.color)
             usersAdd.push(e.value);
         users[e.id] = e.value;
     });