Replaced window.prompt()/alert() with custom popup

www/css/popup/delete.css

@@ -0,0 +1,13 @@
+ #delete-channel-popup-content, #delete-account-popup-content{
+    text-align: center;
+}
+
+#delete-channel-popup-prompt, #delete-account-popup-password{
+    width: 75%;
+    margin: 0 auto;
+}
+
+#delete-channel-popup-prompt-span, #delete-account-popup-password-span{
+    display: flex;
+    flex-direction: column;
+}

www/css/theme/movie-night.css

@@ -305,4 +305,8 @@ select.panel-head-element{
     color: var(--accent1);
     box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
     border-radius: 1em;
+}
+
+#delete-account-popup-title, #delete-channel-popup-title{
+    color: var(--accent0-warning);
 }

www/js/channel/channel.js

@@ -44,11 +44,7 @@ class channel{
         });
 
         this.socket.on("kick", (data) => {
-            if(data.type == "kick"){
-                window.alert(`You have been kicked from the channel for the following reason:\n\n${data.reason}`);
-            }else{
-                window.alert(`You have been disconnceted from the channel by the server!\nType: ${data.type}\nReason: ${data.reason}`);
-            }
+            new canopyUXUtils.popup(`You have been ${data.type} from the channel for the following reason:<br>${data.reason}`);
         });
 
         this.socket.on("clientMetadata", this.handleClientInfo.bind(this));

www/js/channelSettings.js

@@ -335,17 +335,41 @@ class deleteBtn{
         this.channel = channel;
         this.delete = document.querySelector("#channel-delete");
     
-        this.delete.addEventListener('click', this.promptDelete.bind(this));
+        this.setupInput();
     }
 
-   promptDelete(){
-        var confirm = window.prompt(`Warning: You are about to nuke ${this.channel} off of the face of the fucking planet, no taksie-backsies. \n \n Type in ${this.channel} to confirm.`);
-        this.deleteChannel(confirm);
+    setupInput(){
+        this.delete.addEventListener('click', () => {new deleteAccountPopup(this.channel)});
     }
 
-    async deleteChannel(confirm){
-        if(this.channel === confirm){
-            utils.ajax.deleteChannel(this.channel, confirm);
+}
+
+class deleteAccountPopup{
+    constructor(channel){
+        this.channel = channel;
+        this.popup = new canopyUXUtils.popup("nukeChannel", true, this.asyncConstructor.bind(this));
+    }
+
+    asyncConstructor(){
+        this.prompt = document.querySelector("#delete-channel-popup-prompt");
+        this.label = document.querySelector("#delete-channel-popup-content");
+
+        //Fill channel label
+        this.label.innerHTML = this.label.innerHTML.replaceAll("[CHANNEL]", this.channel);
+
+        this.setupInput();
+    }
+
+    setupInput(){
+        this.prompt.addEventListener("keydown", this.nukeAccount.bind(this));
+    }
+
+    async nukeAccount(event){
+        if(event.key == "Enter"){
+            console.log(this.channel);
+            if(this.channel === event.target.value){
+                await utils.ajax.deleteChannel(this.channel, event.target.value);
+            }
         }
     }
 }

www/js/profile.js

@@ -155,21 +155,41 @@ class passwordResetPrompt{
     }
 }
 
-class deleteAccountPrompt{
+class deleteAccountButton{
     constructor(){
         this.deleteLink = document.querySelector('#account-settings-delete-link');
-        this.setupEvent();
+
+        this.setupInput();
     }
 
-    setupEvent(){
-        if(this.deleteLink != null){
-            this.deleteLink.addEventListener("click",this.deletePrompt);
-        }
+    setupInput(){
+        this.deleteLink.addEventListener("click",this.deletePrompt.bind(this));
     }
 
     async deletePrompt(event){
-        const pass = window.prompt("Warning: You are about to nuke your account off of the face of the fucking planet, no taksie-backsies.\n \n (todo: replace with dialog that has obscured password input) \n Enter your password to confirm.");
-        await utils.ajax.deleteAccount(pass); 
+        this.popup = new deleteAccountPopup();
+    }
+}
+
+class deleteAccountPopup{
+    constructor(){
+        this.popup = new canopyUXUtils.popup("nukeUser", true, this.asyncConstructor.bind(this));
+    }
+
+    asyncConstructor(){
+        this.passwordPrompt = document.querySelector("#delete-account-popup-password");
+
+        this.setupInput();
+    }
+
+    setupInput(){
+        this.passwordPrompt.addEventListener("keydown", this.nukeAccount.bind(this));
+    }
+
+    async nukeAccount(event){
+        if(event.key == "Enter"){
+            await utils.ajax.deleteAccount(event.target.value); 
+        }
     }
 }
 
@@ -178,4 +198,4 @@ new profileTextEditPrompt("signature");
 new profileTextEditPrompt("bio", true);
 new profileImgEditPrompt();
 new passwordResetPrompt();
-new deleteAccountPrompt();
+new deleteAccountButton();