Doing frontend now. Added these cool popup windows in list-rooms.nytl.html

assets/HypertextPages/list-rooms.nytl.html

@@ -15,16 +15,36 @@
         let userinfo = {% PUT jsinsert userinfo %};
         let initial_chatListUpdResp = {% PUT jsinsert initial_chatListUpdResp %};
     </script>
-    <div id="popup-overlay-veil"></div>
     <div id="chat-creation-win" class="popup-window">
-        <h1>Input identifying information for your new chat</h1>
+        <h1 class="popup-window-msg">Input identifying information for your new chat</h1>
+        <table class="id-str-input-table">
+            <tr>
+                <td class="id-str-input-td1">
+                    <label for="chat-nickname-input">Enter nickname for new chat:</label>
+                </td>
+                <td class="id-str-input-td2">
+                    <input name="name" id="chat-nickname-input" type="text" placeholder="Take a nickname" class="one-line-input" required>
+                </td>
+            </tr>
+            <tr>
+                <td class="id-str-input-td1">
+                    <label for="chat-name-input">Enter name for new chat:</label>
+                </td>
+                <td class="id-str-input-td2">
+                    <input name="password" id="chat-name-input" type="text" placeholder="Come up with name" class="one-line-input" required>
+                </td>
+            </tr>
+        </table>
+        <h1 class="popup-window-msg">Create new chat?</h1>
+        <button class="popup-window-btn-yes" id="chat-creation-win-yes">Yes, create</button>
+        <button class="popup-window-btn-no" id="chat-creation-win-no">No, cancel</button>
     </div>
 
     <div id="chat-renunciation-win" class="popup-window">
         <!-- header will actually be rewritten before showing the window to include chat nickname -->
-        <h1 id="chat-renunciation-win-title">Are you sure you want to leave chat?</h1>
+        <h1 id="chat-renunciation-win-title" class="popup-window-msg">Are you sure you want to leave chat?</h1>
-        <button class="chat-renunciation-win-yes">Yes, leave</button>
+        <button class="popup-window-btn-yes" id="chat-renunciation-win-yes">Yes, leave</button>
-        <button class="chat-renunciation-win-no">No, cancel</button>
+        <button class="popup-window-btn-no" id="chat-renunciation-win-no">No, cancel</button>
     </div>
 
 x
@@ -45,6 +65,7 @@ x
             </div>
         </div>
     </div>
+    <script src="/assets/js/common-popup.js"></script>
     <script src="/assets/js/list-rooms.js"></script>
 </body>
 </html>

assets/css/common-popup.css

@@ -1,10 +1,10 @@
-#popup-overlay-veil {
+.popup-overlay-veil {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.6);
 
     z-index: 99;
     display: none; /* Hidden by default */
@@ -27,4 +27,24 @@
     display: inline;
     padding: 5px;
     border-bottom: 3px;
+}
+
+.popup-window-btn-yes {
+    background-color: #0c7f0e;
+    border-radius: 5px;
+    padding: 12px;
+    color: white;
+}
+
+.popup-window-btn-no {
+    background-color: #ff0005;
+    border-radius: 5px;
+    padding: 12px;
+    color: white;
+}
+
+.popup-window-msg {
+    padding-left: 20px;
+    font-weight: bold;
+    font-size: 1.3em;
 }

assets/css/list-rooms.css

@@ -33,3 +33,22 @@
     width: 16px;
     cursor: pointer;
 }
+
+/* The morbid thing */
+table.id-str-input-table {
+    width: 100%;
+    border-collapse: collapse; /* Combine borders */
+}
+.id-str-input-td1, .id-str-input-td2 {
+    border: none;
+}
+.id-str-input-td1 {
+    text-align: left;
+    padding-right: 5px;
+    white-space: nowrap; /* Prevent text wrap, keeping it in one line */
+    overflow: hidden; /* Hide overflow content */
+    text-overflow: ellipsis; /* Show ellipsis for overflowing text */
+}
+.id-str-input-td2 {
+    width: 100%;
+}

assets/js/common-popup.js

@@ -0,0 +1,26 @@
+let activePopupWinId = "";
+
+function activatePopupWindow__(el){
+    let veil = document.createElement("div");
+    veil.id = "popup-overlay-veil-OBJ"
+    veil.className = "popup-overlay-veil";
+    veil.style.display = "block";
+    document.body.appendChild(veil);
+    el.style.display = "block";
+}
+
+function activatePopupWindowById(id){
+    if (activePopupWinId !== "")
+        return;
+    /* Lmao, this thing is just... SO unsafe */
+    activePopupWinId = id;
+    activatePopupWindow__(document.getElementById(id))
+}
+
+function deactivateActivePopup(){
+    if (activePopupWinId === "")
+        return
+    document.getElementById("popup-overlay-veil-OBJ").remove();
+    document.getElementById(activePopupWinId).style.display = "none";
+    activePopupWinId = "";
+}

assets/js/list-rooms.js

@@ -38,14 +38,52 @@ function convertStToBox(myMembershipSt){
     inBoxLeaveBtn.className = "CL-my-chat-box-leave-btn";
     inBoxLeaveBtn.src = "/assets/img/delete.svg";
     inBoxLeaveBtn.onclick = function (ev) {
-        if (ev.button === 0){
+        if (ev.button !== 0)
-            console.log("Tried to leave chat" + ID);
+            return;
-        }
+        console.log("Tried to leave chat" + ID);
+        activatePopupWindowById("chat-renunciation-win");
     };
 
     return box;
 }
 
+function configureChatCreationInterface(){
+    document.getElementById("chat-creation-win-yes").onclick = function (ev) {
+        if (ev.button !== 0)
+            return;
+        deactivateActivePopup();
+        // todo: create chat, send request
+    };
+
+    document.getElementById("chat-creation-win-no").onclick = function (ev) {
+        if (ev.button !== 0)
+            return;
+        deactivateActivePopup();
+    }
+
+    document.getElementById("CL-bacbe").onclick = function (ev){
+        if (ev.button !== 0)
+            return;
+        activatePopupWindowById("chat-creation-win");
+        console.log("Tried to show chat creation window");
+    };
+}
+
+function configureChatRenunciationInterfaceWinPart(){
+    document.getElementById("chat-renunciation-win-yes").onclick = function (ev){
+        if (ev.button !== 0)
+            return;
+        deactivateActivePopup();
+        // todo: actually leave chat
+    }
+
+    document.getElementById("chat-renunciation-win-no").onclick = function(ev) {
+        if (ev.button !== 0)
+            return;
+        deactivateActivePopup();
+    }
+}
+
 window.onload = function () {
     console.log("Loading complete");
     LocalHistoryId = initial_chatListUpdResp.HistoryId;
@@ -64,9 +102,6 @@ window.onload = function () {
         }
     }
 
-    document.getElementById("CL-bacbe").onclick = function (ev){
+    configureChatCreationInterface();
-        if (ev.button === 0){
+    configureChatRenunciationInterfaceWinPart();
-
-        }
-    };
 };