Skip to content

Commit

Permalink
role overhaul
Browse files Browse the repository at this point in the history
  • Loading branch information
@ION606
ION606 committed Mar 19, 2024
1 parent 4db07e2 commit d60e72a
Show file tree
Hide file tree
Showing 18 changed files with 546 additions and 112 deletions.
2 changes: 2 additions & 0 deletions client/CSS/chatServer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,11 +160,13 @@
margin-right: 10px;
margin-top: 5px;
float: left;
cursor: pointer;
}

.user-info {
display: flex;
flex-direction: column;
cursor: pointer;
}

.username {
Expand Down
15 changes: 12 additions & 3 deletions client/CSS/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -432,9 +432,18 @@ body {
opacity: 1; /* Make the button fully visible on hover */
}

/* #sidebarWrapper {
transition: width 0.3s;
} */

.msgcontentlink {
color: #BB86FC; /* A light purple, visible against the dark background */
text-decoration: none; /* Removes underline */
transition: color 0.3s ease-in-out; /* Smooth transition for hover effect */
}


.msgcontentlink:hover, .msgcontentlink:focus {
color: #3700B3; /* Darker shade of purple on hover/focus */
text-decoration: underline; /* Adds underline on hover/focus */
}


#errWrapper {
Expand Down
10 changes: 6 additions & 4 deletions client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,9 +141,11 @@
case 5: messageRecieved(response);
break;

case 6:
window.location.href = `/server/${response.serverId}`;
break;
case 6: {
// window.location.href = `/server/${response.serverId}`;
getServerDataPreview(response.serverId);
}
break;

case 10: break;

Expand Down Expand Up @@ -244,7 +246,7 @@ <h2 style="margin-top: 0; color: darkred;">Problems Connecting</h2>
<div id="loadingdiv">
<div id="loader"></div>
<h1>L O A D I N G . . .</h1>
<h2 id="loadingstatus"></h2>
<h2 id="loadingstatus" style="color: white !important;"></h2>
</div>
<div id="loginDiv">

Expand Down
40 changes: 40 additions & 0 deletions client/invite.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/CSS/login.css">
<script src="/scripts/encryption.js"></script>

<title>proto-chat</title>
<script>
window.onload = (e) => {
var req = new XMLHttpRequest();
req.open('POST', `${window.location.origin}/invite`, true);
// req.responseType = 'text';
const serverId = window.location.pathname.replace("/invite/", "");
if (!serverId) window.location.pathname = '/';

req.onloadend = () => {
try {
if (req.response == 'OK') window.location.pathname = `/server/${serverId}`;
else alert("ERROR!");
console.log(req.response);
}
catch(err) {
console.error(err);
console.log(req.response);
alert("ERROR!");
}
}

req.setRequestHeader('sessionid', localStorage.getItem('sessionid'));
req.setRequestHeader('serverid', serverId);
req.send();
}
</script>
</head>
<body style="color:whitesmoke">
<h1 style="text-align: center;">Processing Request...</h1>
</body>
</html>
121 changes: 112 additions & 9 deletions client/scripts/chatServerChannel.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,33 @@
const getRoles = (serverId) => {
return new Promise((resolve, reject) => {
var req = new XMLHttpRequest();
req.open('POST', `${window.location.origin}/serverroles`, true);
req.responseType = 'text';

req.onloadend = () => {
try {
const r = JSON.parse(req.response);
if (!r.roles) throw "NO ROLES";
resolve(r.roles);
}
catch(err) {
console.error(err);
console.log(req.response);
reject();
alert("ERROR!");
}
}

req.setRequestHeader('sessionid', localStorage.getItem('sessionid'));
req.setRequestHeader('serverid', serverId);
req.setRequestHeader('getroles', 'true');
req.send();
});
}


//#region New Channel
function createNewChannelPopup(serverId) {
async function createNewChannelPopup(serverId) {
// Create popup container
const popupContainer = document.createElement('div');
popupContainer.id = 'newChannelPopupContainer';
Expand All @@ -13,6 +41,7 @@ function createNewChannelPopup(serverId) {
// Add header
const header = document.createElement('h2');
header.textContent = 'Add a New Channel';
header.style.display = 'block';
popup.appendChild(header);

// Add input field
Expand All @@ -22,6 +51,46 @@ function createNewChannelPopup(serverId) {
input.placeholder = 'Channel Name';
popup.appendChild(input);

// choose roles
const btn = document.createElement('button');
btn.onclick = async (_) => {
const roles = await getRoles(serverId);
const roleDiv = document.createElement('div');
roleDiv.style = "position:absolute;margin-top:10px;background:#5c5c5c;padding:10px;text-align:left;border:solid black 1px;";

const rtba = (popup.dataset.rtba) ? JSON.parse(popup.dataset.rtba) : null;

for (const role of roles) {
const d = document.createElement('div');
const opt = document.createElement("input");
opt.type = 'checkbox';
opt.name = role.id;
opt.value = role.id;

if (rtba && rtba.includes(role.id)) opt.checked = true;

const label = document.createElement('label');
label.setAttribute("for", role.id);
label.innerText = role.name;
label.style = "display:inline;margin:10px;";

d.append(opt, label);
roleDiv.appendChild(d);
}
const btnDone = document.createElement('button');
btnDone.innerText = "done";
btnDone.onclick = (_) => {
// roles to be added
popup.dataset.rtba = JSON.stringify(Array.from(roleDiv.querySelectorAll("input")).map(o => (o.checked) ? o.value : undefined)
.filter(o => o));
roleDiv.remove();
}
roleDiv.appendChild(btnDone);
popup.append(roleDiv);
}
btn.innerText = "Choose Roles";
popup.appendChild(btn);

// Add Add button
const addButton = document.createElement('button');
addButton.id = 'newChannelAddBtn';
Expand Down Expand Up @@ -51,7 +120,7 @@ function hideNewChannelPopup() {
document.getElementById('newChannelPopupContainer').style.display = 'none';
}

function addNewChannel(serverId) {
function addNewChannel(serverId, rolesAllowed) {
const channelName = document.getElementById('newChannelInput').value;
if (channelName) {
ws.send(JSON.stringify({
Expand All @@ -60,7 +129,8 @@ function addNewChannel(serverId) {
data: {
sid: localStorage.getItem('sessionid'),
serverId: serverId,
channelName: channelName
channelName: channelName,
rolesAllowed
}
}));

Expand Down Expand Up @@ -170,6 +240,7 @@ function createRoleChangeBtn(role) {
}

function dispChannelRoles(data) {
console.log("ROLES", data);
document.getElementById("rolepopup").style.display = "block";
const roleContainer = document.getElementById("dataContainer");
roleContainer.innerHTML = '<h1 style="text-align: center; margin-bottom: 0px;">Users and Roles</h1>';
Expand All @@ -194,7 +265,7 @@ function dispChannelRoles(data) {
uList.style.marginTop = '0px';
uList.style.border = 'solid black 1px';

role.users = role.users.map((uid => data.users.find(u => u.uid == uid)));
role.users = role.users.map((uid => data.serverConfs.usersAll.find(u => u.uid == uid)));
role.users.forEach(user => {
const li = document.createElement('li');
li.dataset.uid = user.uid;
Expand All @@ -215,7 +286,7 @@ function dispChannelRoles(data) {
const btn = e.target.parentElement.parentElement;
const {roleid, isinchannel} = btn.dataset;
if (!roleid) return alert("ERROR!");

ws.send(JSON.stringify({
code: 6,
op: 8,
Expand Down Expand Up @@ -457,7 +528,7 @@ async function fillUSideBar(serverConfs) {

// a modified setupDM
function setUpChannel(response) {
console.log(response);
console.log("SETUPCHANNEL", response);

if (!response.channelconfs || !response.messages) return alert("ERROR!");
const channelConfigs = response.channelconfs.find(o => o._id == 'channelConfigs');
Expand Down Expand Up @@ -672,9 +743,41 @@ function setUpChannel(response) {
}


// const observer = new MutationObserver(observerCallback);
// const config = { childList: true, subtree: true };
// observer.observe(document.body, config);
// modified `createContextMenu()`
messages.querySelectorAll('.msgauthor').forEach((el) => {
el.addEventListener('contextmenu', (e) => {
e.preventDefault();

const dropdown = document.createElement('div');
dropdown.className = "msgdropdown";

window.addEventListener('click', (e2) => {
if (e2.target == dropdown) return;
dropdown.remove();
});

const createActionBtn = (txt, actioncode) => {
const btn = document.createElement('a');
btn.onclick = () => {
ws.send(JSON.stringify({
code: 6,
op: 10,
actioncode,
data: {
sid: localStorage.getItem('sessionid'),
target: el.id,
serverId: channelConfigs.serverId,
}
}));
}
btn.innerText = txt;
return btn
}

dropdown.append(createActionBtn('kick', 0), createActionBtn('ban', 1));
e.target.appendChild(dropdown);
});
});

element.appendChild(messages);
element.appendChild(inpwrapper);
Expand Down
25 changes: 14 additions & 11 deletions client/scripts/chatServerUserActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -452,21 +452,24 @@ async function displayRoles(data) {
}


/*
{
banned: [
{
"status": "ehe >:3",
"icon": "",
"username": "ION606",
"uid": "5aa9b536-e0fb-4d61-9145-07f192ca2cf3",
"reasonforban": "too gay"
}
]
}
*/
async function handleActionCode(data) {
console.log(data);

switch (data.actioncode) {
case 3: displayBanned({
banned: [
{
"status": "ehe >:3",
"icon": "",
"username": "ION606",
"uid": "5aa9b536-e0fb-4d61-9145-07f192ca2cf3",
"reasonforban": "too gay"
}
]
});
case 3: displayBanned(data.banned);
break;
}
}
2 changes: 2 additions & 0 deletions client/scripts/initialize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,7 @@ async function setupDM(response) {


// decryption
/*
const symmKeyEnc = await getSymmKey();
if (!symmKeyEnc) return alert("SYMMETRIC KEY NOT FOUND");
Expand All @@ -302,6 +303,7 @@ async function setupDM(response) {
msg.content = msgContent;
return msg;
}
*/

let lastVideo;
var counter = 0;
Expand Down
10 changes: 10 additions & 0 deletions client/scripts/messages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,6 +386,9 @@ function createNewMessage(msg) {
req.setRequestHeader('username', JSON.parse(localStorage.getItem('user')).username);
req.send();
}
else if (isValidUrl(msg.content)) {
msgContentContainer.innerHTML = `<a href=${msg.content} target="_blank" class="msgcontentlink">${msg.content}</a>`;
}
else msgContentContainer.innerText = `${msg.content}`;

container.appendChild(msgContentContainer);
Expand Down Expand Up @@ -506,6 +509,13 @@ async function createDmLink(dmRaw, isServer = false) {
// don't show the reconnecting bar
document.getElementById('reconnectingbar')?.remove();
window.location.pathname = `/server/${a.id}`;

// var req = new XMLHttpRequest();
// req.open('GET', `${window.location.origin}/server/${a.id}`, true);

// req.responseType = 'document';
// req.setRequestHeader('sessionid', localStorage.getItem('sessionid'));
// req.send();
}
}
else {
Expand Down
2 changes: 1 addition & 1 deletion client/scripts/send.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ async function send(serverId = undefined) {
// encrypt the data
const encContent = content; //(serverId) ? content : await encryptMsg(await getSymmKey(), content);

var msg = {author: {username: username, uid: authorID}, id: crypto.randomUUID(), channelId: channelId, content: encContent, timestamp: (new Date()).toISOString()};
var msg = {author: {username: username, uid: authorID}, id: crypto.randomUUID(), channelId: channelId, content: encContent, timestamp: (new Date()).toISOString(), sid: localStorage.getItem('sessionid')};

if (serverId) {
msg['serverId'] = serverId;
Expand Down
Loading

0 comments on commit d60e72a

Please sign in to comment.