rainbownapkin/canopy
1
0
Fork 0
Code Issues 2 Pull requests Actions Packages Projects Releases Wiki Activity

Finished up with channel rank/perms frontend.

Browse source
This commit is contained in:
rainbow napkin 2024-11-27 02:16:54 -05:00
parent edb4215929
commit 796bb033a7
22 changed files with 472 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app/channel/channelManager.js
View file

@ -16,7 +16,6 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
//Local Imports //Local Imports
const channelModel = require('../../schemas/channel/channelSchema'); const channelModel = require('../../schemas/channel/channelSchema');
const flairModel = require('../../schemas/flairSchema');
const userModel = require('../../schemas/userSchema'); const userModel = require('../../schemas/userSchema');
const loggerUtils = require('../../utils/loggerUtils'); const loggerUtils = require('../../utils/loggerUtils');
const activeChannel = require('./activeChannel'); const activeChannel = require('./activeChannel');

1
src/app/channel/chatHandler.js
View file

@ -54,7 +54,6 @@ module.exports = class{
async setFlair(socket, data){ async setFlair(socket, data){
var userDB = await userModel.findOne({user: socket.user.user}); var userDB = await userModel.findOne({user: socket.user.user});
const chanList = this.server.getConnectedChannels(socket)
if(userDB){ if(userDB){
try{ try{

29
src/controllers/api/account/rankEnumController.js Normal file
View file

@ -0,0 +1,29 @@
/*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
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
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/>.*/
//local imports
const permissionModel = require('../../../schemas/permissionSchema.js');
const {exceptionHandler} = require('../../../utils/loggerUtils.js');
//api account functions
module.exports.get = async function(req, res){
try{
res.status(200);
return res.send(permissionModel.rankEnum);
}catch(err){
return exceptionHandler(res, err);
}
}

6
src/controllers/api/channel/rankController.js
View file

@ -50,7 +50,7 @@ module.exports.get = async function(req, res){
//Send out the userlist we created //Send out the userlist we created
res.status(200); res.status(200);
res.send(userList); res.send(Object.fromEntries(userList));
}else{ }else{
//If we received bad input, we have only one action: bitch, moan, and complain! //If we received bad input, we have only one action: bitch, moan, and complain!
res.status(400); res.status(400);
@ -97,10 +97,10 @@ module.exports.post = async function(req, res){
} }
//Set rank //Set rank
var rankList = await chanDB.setRank(userDB, data.rank); await chanDB.setRank(userDB, data.rank);
res.status(200); res.status(200);
res.send(rankList); res.send(Object.fromEntries(await chanDB.getRankList()));
}else{ }else{
//If we received bad input, we have only one action: bitch, moan, and complain! //If we received bad input, we have only one action: bitch, moan, and complain!
res.status(400); res.status(400);

15
src/controllers/channelSettingsController.js
View file

@ -18,20 +18,27 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
const config = require('../../config.json'); const config = require('../../config.json');
//local imports //local imports
const {exceptionHandler} = require('../utils/loggerUtils.js'); const {exceptionHandler} = require('../utils/loggerUtils');
const channelModel = require('../schemas/channel/channelSchema'); const channelModel = require('../schemas/channel/channelSchema');
const permissionModel = require('../schemas/permissionSchema');
//root index functions //root index functions
module.exports.get = async function(req, res){ module.exports.get = async function(req, res){
try{ try{
const chanName = (req.url.slice(1).replace('/settings','')); const chanName = (req.url.slice(1).replace('/settings',''));
const channel = await channelModel.findOne({name: chanName}); const chanDB = await channelModel.findOne({name: chanName});
const reqRank = await chanDB.getChannelRank(req.session.user);
if(channel == null){ await chanDB.populate("rankList.user");
//Take out the permissions doc id since we don't need it.
delete chanDB.permissions._doc._id;
if(chanDB == null){
throw new Error("Channel not found."); throw new Error("Channel not found.");
} }
return res.render('channelSettings', {instance: config.instanceName, user: req.session.user, channel}); return res.render('channelSettings', {instance: config.instanceName, user: req.session.user, channel: chanDB, reqRank, rankEnum: permissionModel.rankEnum});
}catch(err){ }catch(err){
return exceptionHandler(res, err); return exceptionHandler(res, err);
} }

4
src/routers/api/accountRouter.js
View file

@ -23,6 +23,7 @@ const loginController = require("../../controllers/api/account/loginController")
const logoutController = require("../../controllers/api/account/logoutController"); const logoutController = require("../../controllers/api/account/logoutController");
const registerController = require("../../controllers/api/account/registerController"); const registerController = require("../../controllers/api/account/registerController");
const updateController = require("../../controllers/api/account/updateController"); const updateController = require("../../controllers/api/account/updateController");
const rankEnumController = require("../../controllers/api/account/rankEnumController");
const deleteController = require("../../controllers/api/account/deleteController"); const deleteController = require("../../controllers/api/account/deleteController");
//globals //globals
@ -45,6 +46,9 @@ router.post('/update', accountValidator.img(),
accountValidator.securePass('passChange.newPass'), accountValidator.securePass('passChange.newPass'),
accountValidator.pass('passChange.confirmPass'), updateController.post); accountValidator.pass('passChange.confirmPass'), updateController.post);
//This might seem silly, but it allows us to cleanly get the current rank list to compare against, without storing it in multiple places
router.get('/rankEnum', rankEnumController.get);
router.post('/delete', accountValidator.pass(), deleteController.post); router.post('/delete', accountValidator.pass(), deleteController.post);
module.exports = router; module.exports = router;

5
src/schemas/channel/channelSchema.js
View file

@ -241,7 +241,7 @@ channelSchema.methods.setRank = async function(userDB,rank){
channelSchema.methods.getRankList = async function(){ channelSchema.methods.getRankList = async function(){
//Create an empty array to hold the user list //Create an empty array to hold the user list
const rankList = []; const rankList = new Map()
//Populate the user objects in our ranklist based off of their DB ID's //Populate the user objects in our ranklist based off of their DB ID's
await this.populate('rankList.user'); await this.populate('rankList.user');
@ -252,11 +252,12 @@ channelSchema.methods.getRankList = async function(){
const userObj = { const userObj = {
id: rankObj.user.id, id: rankObj.user.id,
user: rankObj.user.user, user: rankObj.user.user,
img: rankObj.user.img,
rank: rankObj.rank rank: rankObj.rank
} }
//Add our user object to the list //Add our user object to the list
rankList.push(userObj); rankList.set(rankObj.user.user, userObj);
}); });
//return userList //return userList

1
src/views/adminPanel.ejs
View file

@ -22,6 +22,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
</head> </head>
<body> <body>
<%- include('partial/navbar', {user}); %> <%- include('partial/navbar', {user}); %>
<h1 class="panel-title"><%= instance %> Admin Panel</h1>
<%- include('partial/adminPanel/channelList', {chanGuide}) %> <%- include('partial/adminPanel/channelList', {chanGuide}) %>
<%- include('partial/adminPanel/userList', {user, userList, rankEnum}) %> <%- include('partial/adminPanel/userList', {user, userList, rankEnum}) %>
<%- include('partial/adminPanel/permList', {permList, rankEnum}) %> <%- include('partial/adminPanel/permList', {permList, rankEnum}) %>

15
src/views/channelSettings.ejs
View file

@ -17,17 +17,16 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<html> <html>
<head> <head>
<%- include('partial/styles', {instance, user}); %> <%- include('partial/styles', {instance, user}); %>
<link rel="stylesheet" type="text/css" href="/css/newChannel.css"> <!-- Gonna be a shitter and re-use the adminPanel css :P -->
<title><%= instance %> - Channel Settings: <%= channel.name %></title> <link rel="stylesheet" type="text/css" href="/css/adminPanel.css">
<title><%= instance %> - <%= channel.name %> - Channel Settings</title>
</head> </head>
<body> <body>
<%- include('partial/navbar', {user}); %> <%- include('partial/navbar', {user}); %>
<form action="javascript:"> <h1 class="panel-title"><%- channel.name %> - Channel Settings</h1>
<span> <%- include('partial/channelSettings/userList.ejs'); %>
<label>Hidden:</label> <%- include('partial/channelSettings/settings.ejs'); %>
<input id="channel-hidden" type="checkbox" <% if(channel.settings.hidden){ %> checked <% } %>> <%- include('partial/channelSettings/permList.ejs'); %>
</span>
</form>
<a href="javascript:" id="channel-delete">Delete Channel</a> <a href="javascript:" id="channel-delete">Delete Channel</a>
<footer> <footer>
<%- include('partial/scripts', {user}); %> <%- include('partial/scripts', {user}); %>

8
src/views/partial/adminPanel/channelList.ejs
View file

@ -20,10 +20,10 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<td id="admin-channel-list-entry-img-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-img-title"> <td id="admin-channel-list-entry-img-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
<h3>Img</h3> <h3>Img</h3>
</td> </td>
<td id="admin-channel-list-entry-name-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-row"> <td id="admin-channel-list-entry-name-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
<h3>Name</h3> <h3>Name</h3>
</td> </td>
<td id="admin-channel-list-entry-description-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-row"> <td id="admin-channel-list-entry-description-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
<h3>Description</h3> <h3>Description</h3>
</td> </td>
</tr> </tr>
@ -34,12 +34,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<img id="admin-channel-list-entry-img-<%- channel.name %>" class="admin-list-entry admin-list-entry-item" src="<%- channel.thumbnail %>"> <img id="admin-channel-list-entry-img-<%- channel.name %>" class="admin-list-entry admin-list-entry-item" src="<%- channel.thumbnail %>">
</a> </a>
</td> </td>
<td id="admin-channel-list-entry-name-<%- channel.name %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-row"> <td id="admin-channel-list-entry-name-<%- channel.name %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-col">
<a href="/c/<%- channel.name %>" class="admin-list-entry admin-list-entry-item"> <a href="/c/<%- channel.name %>" class="admin-list-entry admin-list-entry-item">
<%- channel.name %> <%- channel.name %>
</a> </a>
</td> </td>
<td id="admin-channel-list-entry-description-<%- channel.name %>" class="admin-list-entry admin-list-entry-large admin-list-entry-item admin-list-entry-not-first-row"> <td id="admin-channel-list-entry-description-<%- channel.name %>" class="admin-list-entry admin-list-entry-large admin-list-entry-item admin-list-entry-not-first-col">
<%- channel.description %> <%- channel.description %>
</td> </td>
</tr> </tr>

4
src/views/partial/adminPanel/permList.ejs
View file

@ -15,7 +15,7 @@ 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/>.-->
<div id="admin-perm-list-div" class="admin-list-div"> <div id="admin-perm-list-div" class="admin-list-div">
<h3>Permissions:</h3> <h3>Permissions:</h3>
<field id="admin-perm-list-field" class="admin-list-field"> <form action="javascript:" id="admin-perm-list-field" class="admin-list-field">
<% Object.keys(permList).forEach((key)=>{ %> <% Object.keys(permList).forEach((key)=>{ %>
<% if(key != "channelOverrides"){ %> <% if(key != "channelOverrides"){ %>
<span class="admin-list-field-container"> <span class="admin-list-field-container">
@ -41,5 +41,5 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
</span> </span>
<% } %> <% } %>
<% }); %> <% }); %>
</field> </form>
</div> </div>

20
src/views/partial/adminPanel/userList.ejs
View file

@ -20,19 +20,19 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<td id="admin-user-list-entry-img-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-img-title"> <td id="admin-user-list-entry-img-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
<h3>Img</h3> <h3>Img</h3>
</td> </td>
<td id="admin-user-list-entry-id-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-row"> <td id="admin-user-list-entry-id-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
<h3>ID</h3> <h3>ID</h3>
</td> </td>
<td id="admin-user-list-entry-name-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-row"> <td id="admin-user-list-entry-name-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
<h3>Name</h3> <h3>Name</h3>
</td> </td>
<td id="admin-user-list-entry-rank-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-row"> <td id="admin-user-list-entry-rank-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
<h3>Rank</h3> <h3>Rank</h3>
</td> </td>
<td id="admin-user-list-entry-rank-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-row"> <td id="admin-user-list-entry-rank-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
<h3>E-Mail</h3> <h3>E-Mail</h3>
</td> </td>
<td id="admin-user-list-entry-rank-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-row"> <td id="admin-user-list-entry-rank-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
<h3>Sign-Up Date</h3> <h3>Sign-Up Date</h3>
</td> </td>
</tr> </tr>
@ -43,17 +43,17 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<img id="admin-user-list-entry-img-<%- curUser.name %>" class="admin-list-entry admin-list-entry-item" src="<%- curUser.img %>"> <img id="admin-user-list-entry-img-<%- curUser.name %>" class="admin-list-entry admin-list-entry-item" src="<%- curUser.img %>">
</a> </a>
</td> </td>
<td id="admin-user-list-entry-id-<%- curUser.name %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-row"> <td id="admin-user-list-entry-id-<%- curUser.name %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-col">
<a href="/profile/<%- curUser.name %>" class="admin-list-entry admin-list-entry-item"> <a href="/profile/<%- curUser.name %>" class="admin-list-entry admin-list-entry-item">
<%- curUser.id %> <%- curUser.id %>
</a> </a>
</td> </td>
<td id="admin-user-list-entry-name-<%- curUser.name %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-row"> <td id="admin-user-list-entry-name-<%- curUser.name %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-col">
<a href="/profile/<%- curUser.name %>" class="admin-list-entry admin-list-entry-item"> <a href="/profile/<%- curUser.name %>" class="admin-list-entry admin-list-entry-item">
<%- curUser.name %> <%- curUser.name %>
</a> </a>
</td> </td>
<td id="admin-user-list-entry-rank-<%- curUser.name %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-row"> <td id="admin-user-list-entry-rank-<%- curUser.name %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-col">
<% if(rankEnum.indexOf(curUser.rank) < rankEnum.indexOf(user.rank)){%> <% if(rankEnum.indexOf(curUser.rank) < rankEnum.indexOf(user.rank)){%>
<select id="admin-user-list-rank-select-<%- curUser.name %>" class="admin-user-list-rank-select"> <select id="admin-user-list-rank-select-<%- curUser.name %>" class="admin-user-list-rank-select">
<%rankEnum.slice().reverse().forEach((rank)=>{ %> <%rankEnum.slice().reverse().forEach((rank)=>{ %>
@ -64,10 +64,10 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<%- curUser.rank %> <%- curUser.rank %>
<% } %> <% } %>
</td> </td>
<td id="admin-user-list-entry-email-<%- curUser.name %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-row"> <td id="admin-user-list-entry-email-<%- curUser.name %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-col">
<%- curUser.email ? curUser.email : "N/A" %> <%- curUser.email ? curUser.email : "N/A" %>
</td> </td>
<td id="admin-user-list-entry-date-<%- curUser.name %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-row"> <td id="admin-user-list-entry-date-<%- curUser.name %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-col">
<%- curUser.date.toUTCString() %> <%- curUser.date.toUTCString() %>
</td> </td>
</tr> </tr>

32
src/views/partial/channelSettings/permList.ejs Normal file
View file

@ -0,0 +1,32 @@
<!--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
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
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/>.-->
<div class="admin-list-div">
<h3> Permissions:</h3>
<form action="javascript:" class="admin-list-field">
<% Object.keys(channel.permissions.toObject()).forEach((key)=>{ %>
<% if(key != "channelOverrides"){ %>
<span class="admin-list-field-container">
<label id="admin-perm-list-label-<%- key %>" class="admin-list-label admin-perm-list" for="admin-perm-list-rank-select-<%- key %>"><%- key %>: </label>
<select id="admin-perm-list-rank-select-<%- key %>" name="admin-perm-list-rank-select-<%- key %>" class="channel-perm-select admin-list-select admin-perm-list-rank-select">
<%rankEnum.slice().reverse().forEach((rank)=>{ %>
<option <%if(channel.permissions.toObject()[key] == rank){%> selected <%}%> value="<%- rank %>"><%- rank %></option>
<% }); %>
</select>
</span>
<% } %>
<% }); %>
</form>
</div>

26
src/views/partial/channelSettings/settings.ejs Normal file
View file

@ -0,0 +1,26 @@
<!--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
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
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/>.-->
<div class="admin-list-div">
<h3>Channel Preferences:</h3>
<form action="javascript:" class="admin-list-field">
<% Object.keys(channel.settings).forEach((key) => { %>
<span class="admin-list-field-container">
<label class="admin-list-label"><%- key %>:</label>
<input id=<%- `channel-preference-${key}` %> class="channel-preference-list-item" type="checkbox" <% if(channel.settings[key]){ %> checked <% } %>>
</span>
<% }); %>
</form>
</div>

36
src/views/partial/channelSettings/userList.ejs Normal file
View file

@ -0,0 +1,36 @@
<!--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
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
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/>.-->
<div class="admin-list-div">
<h3 id="channel-rank-title">Channel Ranks:</h3>
<sup id="channel-rank-sup">Users set to default channel rank 'user' will NOT be listed below.</sup>
<span id="new-rank-span">
<input placeholder="Add Username..." id="new-rank-input">
<select id="new-rank-select">
<%rankEnum.slice().reverse().forEach((rank)=>{ %>
<option value="<%= rank %>"><%= rank %></option>
<% }); %>
</select>
</span>
<table class="admin-list-table">
<tr class="admin-list-entry-title-row">
<td class="admin-list-entry-item admin-list-entry admin-list-entry-img-title"><h3>Img</h3></td>
<td id="admin-user-list-entry-id-title" class="admin-list-entry-item admin-list-entry admin-list-entry-not-first-col"><h3>ID</h3></td>
<td class="admin-list-entry-item admin-list-entry admin-list-entry-not-first-col"><h3>Name</h3></td>
<td id="channel-user-list-entry-rank-title" class="admin-list-entry-item admin-list-entry admin-list-entry-not-first-col"><h3>Rank</h3></td>
</tr>
<!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. -->
</table>
</div>

2
src/views/partial/navbar.ejs
View file

@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<p class="navbar-item" id="instance-title"><a href="/" class="navbar-item"><%= instance %></a></p> <p class="navbar-item" id="instance-title"><a href="/" class="navbar-item"><%= instance %></a></p>
<span class="navbar-item" id="right-controls"> <span class="navbar-item" id="right-controls">
<% if(user){ %> <% if(user){ %>
<p class="navbar-item">Welcome, <a class="navbar-item" href="/profile"><%= user.user %></a> - <% if(user.rank == "admin"){ %><a href="/adminPanel" title="Admin Panel" class="bi bi-server navbar-item"></a> <% } %><a class="navbar-item" href="javascript:" id="logout-button">logout</a></p> <p class="navbar-item">Welcome, <a class="navbar-item" id="username" href="/profile"><%= user.user %></a> - <% if(user.rank == "admin"){ %><a href="/adminPanel" title="Admin Panel" class="bi bi-server navbar-item"></a> <% } %><a class="navbar-item" href="javascript:" id="logout-button">logout</a></p>
<% }else{ %> <% }else{ %>
<input class="navbar-item login-prompt" id="username-prompt" placeholder="username"> <input class="navbar-item login-prompt" id="username-prompt" placeholder="username">
<input class="navbar-item login-prompt" id="password-prompt" placeholder="password" type="password"> <input class="navbar-item login-prompt" id="password-prompt" placeholder="password" type="password">

12
src/views/profile.ejs
View file

@ -29,28 +29,28 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<%- include('partial/navbar', {user}); %> <%- include('partial/navbar', {user}); %>
<% if(profile){ %> <% if(profile){ %>
<div class="profile" id="profile-div"> <div class="profile" id="profile-div">
<h1 class="profile-item" id="profile-username"><%= profile.user %></h1> <h1 class="profile-item" id="profile-username"><%- profile.user %></h1>
<img class="profile-item" id="profile-img" src="<%= profile.img %>"> <img class="profile-item" id="profile-img" src="<%- profile.img %>">
<% if(selfProfile){ %> <% if(selfProfile){ %>
<p class="profile-item-edit">(<a class="profile-item-edit" id="profile-img-edit" href="javascript:">edit</a>)</p> <p class="profile-item-edit">(<a class="profile-item-edit" id="profile-img-edit" href="javascript:">edit</a>)</p>
<% } %> <% } %>
<p class="profile-item" id="profile-tokes">tokes: <%= profile.tokes %> (Not yet implemented)</p> <p class="profile-item" id="profile-tokes">tokes: <%- profile.tokes %> (Not yet implemented)</p>
<span class="profile-item" id="profile-signature"> <span class="profile-item" id="profile-signature">
<p class="profile-item profile-item-label" id="profile-signature-label">Signature: <span class="profile-content" id="profile-signature-content"><%= profile.signature %></span></p> <p class="profile-item profile-item-label" id="profile-signature-label">Signature: <span class="profile-content" id="profile-signature-content"><%- profile.signature %></span></p>
<% if(selfProfile){ %> <% if(selfProfile){ %>
<p class="profile-item-edit">(<a class="profile-item-edit" id="profile-signature-edit" href="javascript:">edit</a>)</p> <p class="profile-item-edit">(<a class="profile-item-edit" id="profile-signature-edit" href="javascript:">edit</a>)</p>
<% } %> <% } %>
</span> </span>
<span class="profile-item" id="profile-bio"> <span class="profile-item" id="profile-bio">
<p class="profile-item profile-item-label" id="profile-bio-label">Bio: <span class="profile-content" id="profile-bio-content"><%= profile.bio %></span></p> <p class="profile-item profile-item-label" id="profile-bio-label">Bio: <span class="profile-content" id="profile-bio-content"><%- profile.bio %></span></p>
<% if(selfProfile){ %> <% if(selfProfile){ %>
<p class="profile-item-edit">(<a class="profile-item-edit" id="profile-bio-edit" href="javascript:">edit</a>)</p> <p class="profile-item-edit">(<a class="profile-item-edit" id="profile-bio-edit" href="javascript:">edit</a>)</p>
<% } %> <% } %>
</span> </span>
<p class="profile-item" id="profile-creation-date">Joined: <%= profile.date.toUTCString(); %></p> <p class="profile-item" id="profile-creation-date">Joined: <%- profile.date.toUTCString(); %></p>
<div class="profile-item" id="profile-badge-shelf"> <div class="profile-item" id="profile-badge-shelf">
<h3 class="profile-item" id="no-badge-label">Badgeless?</h3> <h3 class="profile-item" id="no-badge-label">Badgeless?</h3>
</div> </div>

33
www/css/adminPanel.css
View file

@ -76,3 +76,36 @@ img.admin-list-entry-item{
.admin-list-field-container{ .admin-list-field-container{
text-align: center; text-align: center;
} }
#channel-rank-title{
margin-bottom: 0;
}
#channel-rank-sup{
margin-bottom: 1em;
}
#channel-user-list-entry-rank-title{
width: 5em;
}
.panel-title{
text-align: center;
}
#new-rank-span{
display: flex;
padding: 0 1em;
height: 1.5em;
margin-bottom: 1em;
}
#new-rank-input{
flex-grow: 1;
}
#new-rank-select{
margin: auto;
height: 1.3em;
}

20
www/css/theme/movie-night.css
View file

@ -145,7 +145,7 @@ tr.admin-list-entry{
box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em; box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em;
} }
td.admin-list-entry-not-first-row{ td.admin-list-entry-not-first-col{
box-shadow: var(--accent1) 1em 0px 1px -2em, var(--accent1) -1em 0px 1px -1em; box-shadow: var(--accent1) 1em 0px 1px -2em, var(--accent1) -1em 0px 1px -1em;
} }
@ -264,3 +264,21 @@ select.panel-head-element{
.cpanel-header-div{ .cpanel-header-div{
border-bottom: solid 1px var(--accent0); border-bottom: solid 1px var(--accent0);
} }
#new-rank-span{
background-color: white;
border-radius: 1em;
}
#new-rank-span:focus-within{
box-shadow: 2px 2px 3px var(--focus0), -2px 2px 3px var(--focus0), 2px -2px 3px var(--focus0), -2px -2px 3px var(--focus0);
}
#new-rank-input{
border: none;
}
#new-rank-input:focus{
border: none;
outline: none;
}

229
www/js/channelSettings.js
View file

@ -14,32 +14,207 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License 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/>.*/
class channelSettingsPrompt{ class channelSettingsPage{
constructor(){ constructor(){
//Get channel name off of the URL
this.channel = window.location.pathname.slice(3).replace('/settings',''); this.channel = window.location.pathname.slice(3).replace('/settings','');
this.hidden = document.querySelector("#channel-hidden"); //Instantiate UX handling objects, making sure to pass the channel name.
this.delete = document.querySelector("#channel-delete"); this.deleteBtn = new deleteBtn(this.channel);
this.rankList = new rankList(this.channel);
this.prefrenceList = new prefrenceList(this.channel);
this.permList = new permList(this.channel);
}
}
this.hidden.addEventListener('change', this.submitUpdate.bind(this)); class rankList{
this.delete.addEventListener('click', this.promptDelete.bind(this)); constructor(channel){
this.channel = channel
this.table = document.querySelector(".admin-list-table");
this.userPrompt = document.querySelector("#new-rank-input");
this.rankSelect = document.querySelector("#new-rank-select");
//Load the userlist and setup input
this.loadList();
this.setupInput();
}
setupInput(){
this.userPrompt.addEventListener("keydown", this.submitNewRank.bind(this));
}
resetInput(){
//These change every time the table is refreshed, so we should reset the property as well.
this.inputs = document.querySelectorAll(".channel-rank-select");
this.inputs.forEach((input) => {
input.addEventListener("change", this.submitUpdate.bind(this));
});
}
async loadList(){
const list = await utils.ajax.getChannelRank(this.channel);
this.updateList(list);
}
async submitNewRank(event){
if(event.key != "Enter" && event.key != null){
//Bail out if we didn't hit enter
return;
}
//Send new rank
this.submitUserRank(this.userPrompt.value, this.rankSelect.value);
//Clear out prompt
this.userPrompt.value = "";
} }
async submitUpdate(event){ async submitUpdate(event){
//probably not the cleanest way to get the chan name :P const user = event.target.id.replace("channel-rank-select-","");
const key = event.target.id.split("-").pop(); const rank = event.target.value;
const value = event.target.type == "checkbox" ? event.target.checked : event.target.value;
await this.submitUserRank(user, rank);
}
async submitUserRank(user, rank){
await this.updateList(await utils.ajax.setChannelRank(this.channel, user, rank));
}
async updateList(data){
//If no data
if(!data){
//Do not pass go, do not collect $200
return;
}
//Get rank of logged in user
const curName = document.querySelector("#username").textContent
const curUser = data[curName];
const rankEnum = await utils.ajax.getRankEnum();
//clear the table
this.clearTable();
Object.entries(data).forEach((userAr) => {
//pull user object from entry array
const user = userAr[1];
//Create entry row
const entryRow = document.createElement('tr');
entryRow.classList.add("admin-list-entry");
//Create IMG cell
const imgCell = document.createElement('td')
imgCell.classList.add("admin-list-entry","admin-list-entry-item");
//Create IMG node inside of IMG cell
const imgNode = document.createElement('img');
imgNode.classList.add("admin-list-entry","admin-list-entry-item");
imgNode.src = user.img;
//append Img Node to Img Cell
imgCell.appendChild(imgNode);
//Create ID cell
const idCell = document.createElement('td');
idCell.classList.add("admin-list-entry","admin-list-entry-item","admin-list-entry-not-first-col");
idCell.innerHTML = user.id;
//Create Name cell
const nameCell = document.createElement('td');
nameCell.classList.add("admin-list-entry","admin-list-entry-item","admin-list-entry-not-first-col");
nameCell.innerHTML = user.user;
//Create Rank cell
const rankCell = document.createElement('td');
rankCell.classList.add("admin-list-entry","admin-list-entry-item","admin-list-entry-not-first-col");
//If the listed user rank is equal or higher than the signed-in user
if(rankEnum.indexOf(user.rank) >= rankEnum.indexOf(curUser.rank)){
rankCell.innerHTML = user.rank;
}else{
//Create rank select
const rankSelect = document.createElement('select');
rankSelect.id = `channel-rank-select-${user.user}`
rankSelect.classList.add("channel-rank-select")
//for each rank in the enum
rankEnum.slice().reverse().forEach((rank) => {
//Create an option for the given rank
const rankOption = document.createElement('option');
rankOption.value = rank;
rankOption.innerHTML = rank;
rankOption.selected = user.rank == rank;
rankSelect.appendChild(rankOption);
});
//Set value to current user rank and append it to Rank Cell
rankCell.appendChild(rankSelect);
}
//Append cells to row
entryRow.appendChild(imgCell);
entryRow.appendChild(idCell);
entryRow.appendChild(nameCell);
entryRow.appendChild(rankCell);
//Append row to table
this.table.appendChild(entryRow);
//reset input events
this.resetInput();
});
}
clearTable(){
//get all non-title table rows
const rows = this.table.querySelectorAll("tr.admin-list-entry");
//for each row
rows.forEach((row) => {
//The Lord Yeeteth, and The Lord Yoinketh away...
row.remove();
});
}
}
class prefrenceList{
constructor(channel){
this.channel = channel;
this.inputs = document.querySelectorAll(".channel-preference-list-item");
}
setupInput(){
this.inputs.forEach((input) => {
input.addEventListener("change", this.submitUpdate.bind(this));
});
}
async submitUpdate(event){
const key = event.target.id.replace("channel-preference-","");
const value = event.target.checked;
const settingsMap = new Map([ const settingsMap = new Map([
[key, value] [key, value]
]); ]);
this.handleUpdate(await utils.ajax.setChannelSetting(this.channel, settingsMap)); this.handleUpdate(await utils.ajax.setChannelSetting(this.channel, settingsMap), event.target, key);
} }
handleUpdate(updateObj){ handleUpdate(data, target, key){
this.hidden.checked = updateObj.hidden; if(data){
target = data[key];
}
}
}
class deleteBtn{
constructor(channel){
this.channel = channel;
this.delete = document.querySelector("#channel-delete");
this.delete.addEventListener('click', this.promptDelete.bind(this));
} }
promptDelete(){ 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.`); 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); this.deleteChannel(confirm);
} }
@ -51,4 +226,32 @@ class channelSettingsPrompt{
} }
} }
new channelSettingsPrompt(); class permList{
constructor(channel){
this.channel = channel
this.inputs = document.querySelectorAll(".channel-perm-select");
this.setupInput();
}
setupInput(){
this.inputs.forEach((input) => {
input.addEventListener("change", this.submitUpdate.bind(this));
});
}
async submitUpdate(event){
const key = event.target.id.replace("admin-perm-list-rank-select-","");
const value = event.target.value;
const permMap = new Map([
[key, value]
]);
this.handleUpdate(await utils.ajax.setChannelPermissions(this.channel, permMap), event.target, key);
}
handleUpdate(data, target, key){
target.value = data[key];
}
}
new channelSettingsPage();

6
www/js/profile.js
View file

@ -47,7 +47,11 @@ class profileEditPrompt{
//Setup properties //Setup properties
this.prompt.id = `profile-${this.field}-prompt`; this.prompt.id = `profile-${this.field}-prompt`;
this.prompt.classList.add("profile-edit-prompt"); this.prompt.classList.add("profile-edit-prompt");
this.prompt.placeholder = this.content.innerHTML; if(this.field == "img"){
this.prompt.placeholder = this.content.src;
}else{
this.prompt.placeholder = this.content.innerHTML;
}
//Setup event listener //Setup event listener
this.prompt.addEventListener("keydown", this.update.bind(this)); this.prompt.addEventListener("keydown", this.update.bind(this));

24
www/js/utils.js
View file

@ -187,6 +187,18 @@ class canopyAjaxUtils{
} }
} }
async getRankEnum(){
var response = await fetch(`/api/account/rankEnum`,{
method: "GET"
});
if(response.status == 200){
return (await response.json())
}else{
utils.ux.displayResponseError(await response.json());
}
}
async deleteAccount(pass){ async deleteAccount(pass){
const response = await fetch(`/api/account/delete`,{ const response = await fetch(`/api/account/delete`,{
method: "POST", method: "POST",
@ -253,6 +265,18 @@ class canopyAjaxUtils{
} }
} }
async getChannelRank(channel){
var response = await fetch(`/api/channel/rank?chanName=${channel}`,{
method: "GET"
});
if(response.status == 200){
return (await response.json())
}else{
utils.ux.displayResponseError(await response.json());
}
}
async setChannelRank(chanName, user, rank){ async setChannelRank(chanName, user, rank){
var response = await fetch(`/api/channel/rank`,{ var response = await fetch(`/api/channel/rank`,{
method: "POST", method: "POST",