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

This commit is contained in:
rainbow napkin 2024-12-05 03:46:44 -05:00
parent 8ccb9003cc
commit ee5a8d9516
14 changed files with 138 additions and 63 deletions

View file

@ -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;
}

View file

@ -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()});
}

View file

@ -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);
}
}

View file

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

View file

@ -127,12 +127,15 @@ channelSchema.pre('save', async function (next){
//if the channel is online
if(activeChan != null){
//Get the relevant user connection
const userConn = activeChan.userList.get(foundRank.user.user);
//if the user is online
if(userConn != null){
//kick the user
userConn.disconnect("Your channel rank has changed!");
//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
if(userConn != null){
//kick the user
userConn.disconnect("Your channel rank has changed!");
}
}
}
}
@ -322,17 +325,24 @@ channelSchema.methods.getRankList = async function(){
await this.populate('rankList.user');
//For each rank object in the rank list
this.rankList.forEach(async (rankObj) => {
//Create a new user object from rank object data
const userObj = {
id: rankObj.user.id,
user: rankObj.user.user,
img: rankObj.user.img,
rank: rankObj.rank
}
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,
user: rankObj.user.user,
img: rankObj.user.img,
rank: rankObj.rank
}
//Add our user object to the list
rankList.set(rankObj.user.user, userObj);
//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

View file

@ -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();
}

View file

@ -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/>.*/
//root index functions
module.exports.get = async function(req, res){
res.render('partial/popup/placeholder', {});
}
along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<link rel="stylesheet" type="text/css" href="/css/popup/delete.css">
<h3 id="delete-channel-popup-title" class="popup-title">Delete Channel</h3>
<form action="javascript:">
<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>

View file

@ -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/>.*/
//root index functions
module.exports.get = async function(req, res){
res.render('partial/popup/userBan');
}
along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<link rel="stylesheet" type="text/css" href="/css/popup/delete.css">
<h3 id="delete-account-popup-title" class="popup-title">Delete Account</h3>
<form action="javascript:">
<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>

13
www/css/popup/delete.css Normal file
View file

@ -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;
}

View file

@ -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);
}

View file

@ -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));

View file

@ -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);
}
}
}
}

View file

@ -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();