Skip to content

Commit

Permalink
added channel edit icons and finished messages in channels
Browse files Browse the repository at this point in the history
  • Loading branch information
@ION606
ION606 committed Jan 4, 2024
1 parent 8160f71 commit b339d09
Show file tree
Hide file tree
Showing 18 changed files with 773 additions and 468 deletions.
13 changes: 13 additions & 0 deletions client/CSS/chatServer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,19 @@
text-decoration: underline;
}

.ceditico {
/* display: inline-block; // ignored due to loaf */
margin-left: 5px;
font-size: 28px;
text-decoration: none;
color: white;
float: right;
outline: none;
background-color: rgba(0, 0, 0, 0);
border-width: 0px;
cursor: pointer;
}

@media screen and (max-height: 450px) {
.channelMenu {
padding-top: 15px;
Expand Down
1 change: 1 addition & 0 deletions client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@
// return setPFP(message);
// }
const response = JSON.parse(message.data);
console.log(response);

switch (response.code) {
case 0:
Expand Down
5 changes: 5 additions & 0 deletions client/join.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
setInterval(() => { ws.send(JSON.stringify({code: 10})); }, 30000);

function fakeWindowOnload() {
ws.addEventListener('open', () => {
console.log("websocket connection established!");
});

ws.addEventListener('error', (err) => {
alert('Uh oh!\nAn error occured!');
window.location.href = '/';
Expand All @@ -31,6 +35,7 @@
else if (data.code != 0) return; // note this deals with the CODE
else if (data.op == 1) recieveCode(data);
else if (data.op == 2) recieveCodeResponse(data);
else console.log(data);
});
}

Expand Down
15 changes: 15 additions & 0 deletions client/scripts/chatServer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,21 @@ function createServerSideBar(data) {
// edit the channel if has perms
// TODO: have this sent from the back-end
if (isOwner) {
const editico = document.createElement('button');
editico.innerText = '⚙';
editico.className = 'ceditico'

editico.onclick = (e) => {
if (document.getElementsByClassName('msgdropdown').length != 0) {
document.getElementsByClassName('msgdropdown')[0].remove();
}

showEditChannelPopup(e.target.parentNode.id, e.target.parentNode.innerText.replace(e.target.innerText, ""));
e.preventDefault();
}
channelLink.appendChild(editico);

// make this a context menu and an icon
channelLink.addEventListener('contextmenu', (e) => {
if (document.getElementsByClassName('msgdropdown').length != 0) {
document.getElementsByClassName('msgdropdown')[0].remove();
Expand Down
47 changes: 43 additions & 4 deletions client/scripts/chatServerChannel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ function saveChannelChanges(channelId, serverId) {
if (newChannelName) {
ws.send(JSON.stringify({
code: 6,
op: 6,
op: 8,
data: {
sid: localStorage.getItem('sessionid'),
serverId: serverId,
Expand All @@ -162,7 +162,7 @@ function saveChannelChanges(channelId, serverId) {
function deleteChannel(channelId, serverId) {
ws.send(JSON.stringify({
code: 6,
op: 7,
op: 9,
data: {
sid: localStorage.getItem('sessionid'),
serverId: serverId,
Expand Down Expand Up @@ -193,13 +193,17 @@ function createCollapsable(toColl, collLeft = true) {
collapseBtn.innerText = (collLeft) ? "<" : ">";
const oldWidth = toColl.style.width || '200px';

const mainElement = document.querySelector('.main');
const inpelement = document.querySelector('.msginp');
const oldMainMarLeft = mainElement?.style.marginLeft;
const oldInpWidth = inpelement?.style.width;

if (!collLeft) {
collapseBtn.style.right = '0px';
// collapseBtn.style.top = '75px';
}

collapseBtn.style.top = '20px';

collapseBtn.style.height = 'calc(100% - 150px)';

const posBtn = (isCollapsed) => {
Expand All @@ -215,7 +219,22 @@ function createCollapsable(toColl, collLeft = true) {
const newWidth = (isCollapsed) ? oldWidth : '0px';

toColl.childNodes.forEach((c) => { if (c.style) c.style.display = (isCollapsed) ? 'block' : 'none' });
if (collLeft) document.getElementsByClassName('backBtn')[0].style.display = (isCollapsed) ? 'block' : 'none';
if (collLeft) {
document.getElementsByClassName('backBtn')[0].style.display = (isCollapsed) ? 'block' : 'none';

// resize and move the input box and chat
if (!isCollapsed) {
// move the main box over
mainElement.style.marginLeft = '0px';

// resize the input box
inpelement.style.width = '93%';
}
else {
mainElement.style.marginLeft = oldMainMarLeft;
inpelement.style.width = oldInpWidth;
}
}

toColl.style.transition = 'width 0.3s';
toColl.style.setProperty('width', newWidth, 'important');
Expand All @@ -233,6 +252,7 @@ function createUCard(uObj) {
// Create the main card container
const userCard = document.createElement('div');
userCard.className = 'user-card';
userCard.id = uObj.uid;

// Create the image element
const icon = document.createElement('img');
Expand All @@ -242,6 +262,25 @@ function createUCard(uObj) {
if (!uObj.icon) icon.src = 'https://github.com/ION606/chatJS/blob/main/client/assets/nopfp.jpg?raw=true';
else setPFP(undefined, icon, uObj.icon);

userCard.onclick = async () => {
const user = inChannel.find(m => (m.uid == userCard.id));

const img = await getFriendPFP(user.uid);
const uProfResponse = await getUProf(user.uid);
if (uProfResponse == 'Not Found') return alert("User Not Found!");
const uProf = JSON.parse(uProfResponse);

createProfilePopup({
icourl: img.src,
editing: false,
username: uProf.username,
status: uProf.status,
description: uProf.description,
icon: true,
me: false
});
}

// Create the user info container
const userInfo = document.createElement('div');
userInfo.className = 'user-info';
Expand Down
31 changes: 19 additions & 12 deletions client/scripts/encryption.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,19 +77,26 @@ async function getPrivKey(asCrypto = false) {
}

async function getSymmKey() {
const symmEncKeyEnc = await (await getDB())?.transaction(storeName).objectStore(storeName).get(symmEncIDBKey) || null;;
const prvKey = await getPrivKey(true);
if (!symmEncKeyEnc || !prvKey) return alert("Encryption Key Error!\nPlease try again later!");
try {
const symmEncKeyEnc = await (await getDB())?.transaction(storeName).objectStore(storeName).get(symmEncIDBKey) || null;;
const prvKey = await getPrivKey(true);
if (!symmEncKeyEnc || !prvKey) return alert("Encryption Key Error!\nPlease try again later!");

// decrypt the symm key with the private key
const symmEncKey = await crypto.subtle.decrypt({ name: "RSA-OAEP" }, prvKey, base64ToArrayBuffer(symmEncKeyEnc));
return await crypto.subtle.importKey(
"raw",
symmEncKey,
{ name: "AES-GCM" },
true,
["encrypt", "decrypt"]
);
// decrypt the symm key with the private key
const symmEncKey = await crypto.subtle.decrypt({ name: "RSA-OAEP" }, prvKey, base64ToArrayBuffer(symmEncKeyEnc));

return await crypto.subtle.importKey(
"raw",
symmEncKey,
{ name: "AES-GCM" },
true,
["encrypt", "decrypt"]
);
}
catch(err) {
console.error("ENCRYPTION ERROR:", err);
return null;
}
}


Expand Down
138 changes: 77 additions & 61 deletions client/scripts/initialize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,80 +64,95 @@ function createPageMenu() {


async function initializeLayout(response, dmid) {
const data = response.data;
const element = document.getElementById('dms');
for (const k of element.childNodes) { k.remove(); }
try {
const data = response.data;
const element = document.getElementById('dms');
for (const k of element.childNodes) { k.remove(); }

localStorage.setItem("user", JSON.stringify(data.user));
localStorage.setItem("user", JSON.stringify(data.user));

element.appendChild(createPageMenu());
element.appendChild(createPageMenu());

const dmSYS = data.dms.find((dm) => dm.uid == '0');
element.appendChild(await createDmLink(dmSYS));
const dmSYS = data.dms.find((dm) => dm.uid == '0');
element.appendChild(await createDmLink(dmSYS));

for (const dmRaw of data.dms) {
const a = await createDmLink(dmRaw);
for (const dmRaw of data.dms) {
const a = await createDmLink(dmRaw);

if (dmRaw.uid != "0") element.appendChild(a);
}
if (dmRaw.uid != "0") element.appendChild(a);
}

const profileConfigs = data.configs.find((c) => c._id == 'myprofile');
const profileConfigs = data.configs.find((c) => c._id == 'myprofile');

if (profileConfigs) {
delete profileConfigs._id;
localStorage.setItem('profileConfigs', JSON.stringify(profileConfigs));
}
if (profileConfigs) {
delete profileConfigs._id;
localStorage.setItem('profileConfigs', JSON.stringify(profileConfigs));
}

const collapseBtn = document.createElement('button');
collapseBtn.className = 'collapseSidebarBtn';
collapseBtn.innerText = "<";
collapseBtn.onclick = () => {
document.getElementById("dms").classList.toggle("sidebar-collapsed");
const uProf = document.getElementsByClassName("userprofile")[0];
// uProf.classList.toggle("sidebar-collapsed"); // BROKEN

const isCollapsed = uProf.style.width == '0px';
const newWidth = (isCollapsed) ? '200px' : '0px';

uProf.childNodes.forEach((c) => {if (c.style) c.style.width = newWidth});
document.getElementsByClassName('nopointer')[0].childNodes.forEach(e => e.style.display = (isCollapsed) ? 'inline' : 'none');

uProf.style.transition = 'width 0.3s';
uProf.style.setProperty('width', newWidth, 'important');

collapseBtn.style.marginLeft = (isCollapsed) ? '170px' : '0px';
collapseBtn.innerText = (isCollapsed) ? '<' : '>';
collapseBtn.style.height = (isCollapsed) ? 'calc(100% - 80px)' : '100%';
}
document.getElementById('maincontent').appendChild(collapseBtn);
const collapseBtn = document.createElement('button');
collapseBtn.className = 'collapseSidebarBtn';
const mainElement = document.querySelector('.main');
const inpelement = document.querySelector('.msginp');
const oldMainMarLeft = mainElement?.style.marginLeft;
const oldInpWidth = inpelement?.style.width;

setUpUser(response.data.user);
collapseBtn.innerText = "<";
collapseBtn.onclick = () => {
document.getElementById("dms").classList.toggle("sidebar-collapsed");
const uProf = document.getElementsByClassName("userprofile")[0];
// uProf.classList.toggle("sidebar-collapsed"); // BROKEN

const isCollapsed = uProf.style.width == '0px';
const newWidth = (isCollapsed) ? '200px' : '0px';

//URL Params
const params = new URLSearchParams(document.location.search);
if (params.has('dmid')) {
const dmid = params.get('dmid');
sessionStorage.setItem('waitforDM', dmid);
window.location.href = '/';
} else {
if (dmid) {
const waitloop = setInterval(() => {
if (document.getElementById(`dmpfp-${dmid}`)) {
clearInterval(waitloop);
if (dmid) requestDM(dmid);

sessionStorage.removeItem('waitforDM');
clearInterval(loadingAnimInterval);
document.getElementById('loadingdiv').style.display = 'none';
document.getElementById('maincontent').style.display = 'block';
}
}, 1000);
uProf.childNodes.forEach((c) => {if (c.style) c.style.width = newWidth});
document.getElementsByClassName('nopointer')[0].childNodes.forEach(e => e.style.display = (isCollapsed) ? 'inline' : 'none');

uProf.style.transition = 'width 0.3s';
uProf.style.setProperty('width', newWidth, 'important');

collapseBtn.style.marginLeft = (isCollapsed) ? '170px' : '0px';
collapseBtn.innerText = (isCollapsed) ? '<' : '>';
collapseBtn.style.height = (isCollapsed) ? 'calc(100% - 80px)' : '100%';

// resize and move the input box and chat

mainElement.style.marginLeft = (!isCollapsed) ? '0px' : oldMainMarLeft;
inpelement.style.width = (!isCollapsed) ? '93%' : oldInpWidth;
}
document.getElementById('maincontent').appendChild(collapseBtn);

setUpUser(response.data.user);

//URL Params
const params = new URLSearchParams(document.location.search);
if (params.has('dmid')) {
const dmid = params.get('dmid');
sessionStorage.setItem('waitforDM', dmid);
window.location.href = '/';
} else {
clearInterval(loadingAnimInterval);
document.getElementById('loadingdiv').style.display = 'none';
document.getElementById('maincontent').style.display = 'block';
if (dmid) {
const waitloop = setInterval(() => {
if (document.getElementById(`dmpfp-${dmid}`)) {
clearInterval(waitloop);
if (dmid) requestDM(dmid);

sessionStorage.removeItem('waitforDM');
clearInterval(loadingAnimInterval);
document.getElementById('loadingdiv').style.display = 'none';
document.getElementById('maincontent').style.display = 'block';
}
}, 1000);
} else {
clearInterval(loadingAnimInterval);
document.getElementById('loadingdiv').style.display = 'none';
document.getElementById('maincontent').style.display = 'block';
}
}
}
catch(err) {
console.error(err);
}
}


Expand Down Expand Up @@ -407,4 +422,5 @@ async function setupDM(response) {
element.appendChild(messages);
element.appendChild(inpwrapper);
element.style = 'display: block;';

}
Loading

1 comment on commit b339d09

@ION606
Copy link
Member Author

@ION606 ION606 commented on b339d09 Jan 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also changed the server to use macros instead of just numbers

Please sign in to comment.