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

src/app/channel/channelManager.js

@@ -51,9 +51,9 @@ module.exports = class{
                 if(ban != null){
                     //Toss out banned user's
                     if(ban.expirationDays < 0){
-                        socket.emit("kick", {type: "Unauthorized", reason: "You have been permanently banned from this channel!"});
+                        socket.emit("kick", {type: "Banned", reason: "You have been permanently banned from this channel!"});
                     }else{
-                        socket.emit("kick", {type: "Unauthorized", reason: `You have been temporarily banned from this channel, and will be unbanned in ${ban.getDaysUntilExpiration()} day(s)!`});
+                        socket.emit("kick", {type: "Banned", reason: `You have been temporarily banned from this channel, and will be unbanned in ${ban.getDaysUntilExpiration()} day(s)!`});
                     }
                     socket.disconnect();
                     return;
@@ -72,7 +72,7 @@ module.exports = class{
             }
         }else{
             //Toss out anon's
-            socket.emit("kick", {type: "Unauthorized", reason: "You must log-in to join this channel!"});
+            socket.emit("kick", {type: "Disconnected", reason: "You must log-in to join this channel!"});
             socket.disconnect();
             return;
         }

src/app/channel/connectedUser.js

@@ -45,7 +45,7 @@ module.exports = class{
     }
 
     //generic disconnect function, defaults to kick
-    disconnect(reason, type = "kick"){
+    disconnect(reason, type = "Disconnected"){
         this.emit("kick",{type, reason});
         this.socketCrawl((socket)=>{socket.disconnect()});
     }

src/controllers/popupController.js

@@ -16,5 +16,9 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 
 //root index functions
 module.exports.get = async function(req, res){
-    res.render('partial/popup/channelUserBan');
+    try{
+        res.render(`partial/popup${req.url}`, {});
+    }catch(err){
+        return res.sendStatus(400);
+    }
 }

src/routers/popupRouter.js

@@ -19,16 +19,12 @@ const { Router } = require('express');
 
 
 //local imports
-const placeholderController = require("../controllers/popup/placeholderController");
+const popupController = require("../controllers/popupController");
-const userBanController = require("../controllers/popup/userBanController");
-const channelUserBanController = require("../controllers/popup/channelUserBanController");
 
 //globals
 const router = Router();
 
 //routing functions
-router.get('/placeholder', placeholderController.get);
+router.get('/*', popupController.get);
-router.get('/userBan', userBanController.get);
-router.get('/channelUserBan', channelUserBanController.get);
 
 module.exports = router;

src/schemas/channel/channelSchema.js

@@ -127,6 +127,8 @@ channelSchema.pre('save', async function (next){
 
             //if the channel is online
             if(activeChan != null){
+                //make sure we're not trying to kick a deleted user
+                if(foundRank.user != null){
                     //Get the relevant user connection
                     const userConn = activeChan.userList.get(foundRank.user.user);
                     //if the user is online
@@ -137,6 +139,7 @@ channelSchema.pre('save', async function (next){
                 }
             }
         }
+    }
 
     next();
 });
@@ -322,7 +325,9 @@ channelSchema.methods.getRankList = async function(){
     await this.populate('rankList.user');
 
     //For each rank object in the rank list
-    this.rankList.forEach(async (rankObj) => {
+    this.rankList.forEach(async (rankObj, rankObjIndex) => {
+        //If the use still exists
+        if(rankObj.user != null){
             //Create a new user object from rank object data
             const userObj = {
                 id: rankObj.user.id,
@@ -333,6 +338,11 @@ channelSchema.methods.getRankList = async function(){
 
             //Add our user object to the list
             rankList.set(rankObj.user.user, userObj);
+        }else{
+            //Otherwise clean deleted users out of list
+            this.rankList.splice(rankObjIndex,1);
+            await this.save();
+        }
     });
 
     //return userList

src/utils/loggerUtils.js

@@ -28,6 +28,6 @@ module.exports.socketExceptionHandler = function(socket, err){
 
 module.exports.socketCriticalExceptionHandler = function(socket, err){
         //if not yell at the browser for fucking up, and tell it what it did wrong.
-        socket.emit("kick", {type: "error", reason: err.message});
+        socket.emit("kick", {type: "Disconnected", reason: `Server Error: ${err.message}`});
         return socket.disconnect();
 }

src/views/partial/popup/nukeChannel.ejs

@@ -1,4 +1,4 @@
-/*Canopy - The next generation of stoner streaming software
+<!--Canopy - The next generation of stoner streaming software
 Copyright (C) 2024  Rainbownapkin and the TTN Community
 
 This program is free software: you can redistribute it and/or modify
@@ -12,9 +12,13 @@ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
+along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
-
+<link rel="stylesheet" type="text/css" href="/css/popup/delete.css">
-//root index functions
+<h3 id="delete-channel-popup-title" class="popup-title">Delete Channel</h3>
-module.exports.get = async function(req, res){
+<form action="javascript:">
-    res.render('partial/popup/placeholder', {});
+    <p id="delete-channel-popup-content">WARNING: You are about to nuke channel '[CHANNEL]' off of the face of the fucking planet.<br>
-}
+    Enter '[CHANNEL]' below to confirm:</p>
+    <span id="delete-channel-popup-prompt-span">
+        <input type="text" id="delete-channel-popup-prompt">
+    </span>
+</form>

src/views/partial/popup/nukeUser.ejs

@@ -1,4 +1,4 @@
-/*Canopy - The next generation of stoner streaming software
+<!--Canopy - The next generation of stoner streaming software
 Copyright (C) 2024  Rainbownapkin and the TTN Community
 
 This program is free software: you can redistribute it and/or modify
@@ -12,9 +12,13 @@ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
+along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
-
+<link rel="stylesheet" type="text/css" href="/css/popup/delete.css">
-//root index functions
+<h3 id="delete-account-popup-title" class="popup-title">Delete Account</h3>
-module.exports.get = async function(req, res){
+<form action="javascript:">
-    res.render('partial/popup/userBan');
+    <p id="delete-account-popup-content">WARNING: You are about to nuke your account off of the face of the fucking planet.<br>
-}
+    Enter your password below to confirm:</p>
+    <span id="delete-account-popup-password-span">
+        <input type="password" id="delete-account-popup-password">
+    </span>
+</form>

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

@@ -306,3 +306,7 @@ select.panel-head-element{
     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"){
+            new canopyUXUtils.popup(`You have been ${data.type} from the channel for the following reason:<br>${data.reason}`);
-                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}`);
-            }
         });
 
         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(){
+    setupInput(){
-        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.delete.addEventListener('click', () => {new deleteAccountPopup(this.channel)});
-        this.deleteChannel(confirm);
     }
 
-    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(){
+    setupInput(){
-        if(this.deleteLink != null){
+        this.deleteLink.addEventListener("click",this.deletePrompt.bind(this));
-            this.deleteLink.addEventListener("click",this.deletePrompt);
-        }
     }
 
     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.");
+        this.popup = new deleteAccountPopup();
-        await utils.ajax.deleteAccount(pass); 
+    }
+}
+
+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();