initial load messages
jerl
parent
5e6ce1a210
commit
767c040634
449
client/chat.js
449
client/chat.js
|
|
@ -1,127 +1,126 @@
|
||||||
function rand() {
|
function rand() {
|
||||||
let str = "";
|
let str = "";
|
||||||
const lookups =
|
const lookups =
|
||||||
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
|
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
|
||||||
while (str.length < 16) {
|
while (str.length < 16) {
|
||||||
const n = Math.random() * lookups.length;
|
const n = Math.random() * lookups.length;
|
||||||
str += lookups[Math.floor(n)];
|
str += lookups[Math.floor(n)];
|
||||||
}
|
}
|
||||||
return str;
|
return str;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function auth() {
|
async function auth() {
|
||||||
let session = rand();
|
let session = rand();
|
||||||
const sig = await openpgp.sign({
|
const sig = await openpgp.sign({
|
||||||
message: new openpgp.CleartextMessage("vybe_auth " + session, ""),
|
message: new openpgp.CleartextMessage("vybe_auth " + session, ""),
|
||||||
signingKeys: window.keys.priv,
|
signingKeys: window.keys.priv,
|
||||||
});
|
});
|
||||||
window.session = session;
|
window.session = session;
|
||||||
window.socket.emit("authenticate", { name: window.name, message: sig });
|
window.socket.emit("authenticate", { name: window.name, message: sig });
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadKeys(keys) {
|
async function loadKeys(keys) {
|
||||||
const priv = await openpgp.readKey({ armoredKey: keys.privateKey });
|
const priv = await openpgp.readKey({ armoredKey: keys.privateKey });
|
||||||
const pub = await openpgp.readKey({ armoredKey: keys.publicKey });
|
const pub = await openpgp.readKey({ armoredKey: keys.publicKey });
|
||||||
window.keys = { priv, pub };
|
window.keys = { priv, pub };
|
||||||
await auth();
|
await auth();
|
||||||
}
|
}
|
||||||
|
|
||||||
function chooseThread(thread) {
|
function chooseThread(thread) {
|
||||||
window.currentThreadId = thread.id;
|
window.currentThreadId = thread.id;
|
||||||
window.earliestMessage = null;
|
window.earliestMessage = null;
|
||||||
document.getElementById("messages").innerHTML = "";
|
document.getElementById("messages").innerHTML = "";
|
||||||
document.getElementById("threadname").innerHTML = thread.name;
|
document.getElementById("threadname").innerHTML = thread.name;
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadMessages() {
|
function loadMessages() {
|
||||||
window.socket.emit("get_history", {
|
window.socket.emit("get_history", {
|
||||||
before: window.earliestMessage,
|
before: window.earliestMessage,
|
||||||
thread: window.currentThreadId,
|
thread: window.currentThreadId,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function addThread(thread) {
|
function addThread(thread) {
|
||||||
const el = document.createElement("div");
|
const el = document.createElement("div");
|
||||||
el.classList.add("thread");
|
el.classList.add("thread");
|
||||||
el.innerHTML = thread.name;
|
el.innerHTML = thread.name;
|
||||||
const btn = document.createElement("button");
|
const btn = document.createElement("button");
|
||||||
btn.innerHTML = "choose";
|
btn.innerHTML = "choose";
|
||||||
btn.onclick = () => {
|
btn.onclick = () => {
|
||||||
chooseThread(thread);
|
chooseThread(thread);
|
||||||
loadMessages();
|
loadMessages();
|
||||||
document.getElementById("loadmore").classList.remove("hidden");
|
if (!thread.permissions.post) {
|
||||||
if (!thread.permissions.post) {
|
document.getElementById("msginput").classList.add("hidden");
|
||||||
document.getElementById("msginput").classList.add("hidden");
|
} else {
|
||||||
} else {
|
document.getElementById("msginput").classList.remove("hidden");
|
||||||
document.getElementById("msginput").classList.remove("hidden");
|
}
|
||||||
}
|
};
|
||||||
};
|
el.appendChild(btn);
|
||||||
el.appendChild(btn);
|
document.getElementById("threadlist").appendChild(el);
|
||||||
document.getElementById("threadlist").appendChild(el);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function addMember() {
|
function addMember() {
|
||||||
const name = document.getElementById("membername").value;
|
const name = document.getElementById("membername").value;
|
||||||
if (!window.threadmembers) {
|
if (!window.threadmembers) {
|
||||||
window.threadmembers = [window.name, name];
|
window.threadmembers = [window.name, name];
|
||||||
} else {
|
} else {
|
||||||
window.threadmembers.push(name);
|
window.threadmembers.push(name);
|
||||||
}
|
}
|
||||||
const member = document.createElement("p");
|
const member = document.createElement("p");
|
||||||
member.textContent = name;
|
member.textContent = name;
|
||||||
member.classList.add("member");
|
member.classList.add("member");
|
||||||
document.getElementById("memberlist").appendChild(member);
|
document.getElementById("memberlist").appendChild(member);
|
||||||
document.getElementById("membername").value = "";
|
document.getElementById("membername").value = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
async function createThread(members) {
|
async function createThread(members) {
|
||||||
const perms = document.querySelector(
|
const perms = document.querySelector(
|
||||||
'input[name="permissions"]:checked'
|
'input[name="permissions"]:checked'
|
||||||
).value;
|
).value;
|
||||||
let permissions;
|
let permissions;
|
||||||
let newmembers = members;
|
let newmembers = members;
|
||||||
if (perms === "public") {
|
if (perms === "public") {
|
||||||
permissions = {
|
permissions = {
|
||||||
view_limited: false,
|
view_limited: false,
|
||||||
post_limited: false,
|
post_limited: false,
|
||||||
};
|
};
|
||||||
} else if (perms === "private_post") {
|
} else if (perms === "private_post") {
|
||||||
permissions = {
|
permissions = {
|
||||||
view_limited: false,
|
view_limited: false,
|
||||||
post_limited: true,
|
post_limited: true,
|
||||||
};
|
};
|
||||||
} else if (perms === "private_view") {
|
} else if (perms === "private_view") {
|
||||||
permissions = {
|
permissions = {
|
||||||
view_limited: true,
|
view_limited: true,
|
||||||
post_limited: true,
|
post_limited: true,
|
||||||
};
|
};
|
||||||
// generate key
|
// generate key
|
||||||
/* wip
|
/* wip
|
||||||
var buf = new Uint8Array(32);
|
var buf = new Uint8Array(32);
|
||||||
crypto.getRandomValues(buf);
|
crypto.getRandomValues(buf);
|
||||||
const key = aesjs.utils.hex.fromBytes(Array.from(buf));
|
const key = aesjs.utils.hex.fromBytes(Array.from(buf));
|
||||||
// sign it to each of the members
|
// sign it to each of the members
|
||||||
for (let i = 0; i < newmembers.length; i++) {
|
for (let i = 0; i < newmembers.length; i++) {
|
||||||
const member = newmembers[i];
|
const member = newmembers[i];
|
||||||
const sig = await openpgp.encrypt({
|
const sig = await openpgp.encrypt({
|
||||||
message: await openpgp.createMessage({ text: key }),
|
message: await openpgp.createMessage({ text: key }),
|
||||||
signingKeys: window.keys.priv,
|
signingKeys: window.keys.priv,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
window.socket.emit("create_thread", {
|
window.socket.emit("create_thread", {
|
||||||
name: document.getElementById("newthreadname").value,
|
name: document.getElementById("newthreadname").value,
|
||||||
permissions,
|
permissions,
|
||||||
newmembers,
|
newmembers,
|
||||||
});
|
});
|
||||||
document.getElementById(perms).checked = false;
|
document.getElementById(perms).checked = false;
|
||||||
window.threadmembers = null;
|
window.threadmembers = null;
|
||||||
document.getElementById("memberlist").innerHTML = "";
|
document.getElementById("memberlist").innerHTML = "";
|
||||||
const member = document.createElement("p");
|
const member = document.createElement("p");
|
||||||
member.textContent = window.name;
|
member.textContent = window.name;
|
||||||
member.classList.add("member");
|
member.classList.add("member");
|
||||||
document.getElementById("memberlist").appendChild(member);
|
document.getElementById("memberlist").appendChild(member);
|
||||||
}
|
}
|
||||||
|
|
||||||
function decryptMessage(thread, message) {}
|
function decryptMessage(thread, message) {}
|
||||||
|
|
@ -129,126 +128,130 @@ function decryptMessage(thread, message) {}
|
||||||
function encryptMessage(thread, message) {}
|
function encryptMessage(thread, message) {}
|
||||||
|
|
||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
window.currentThreadId = 1;
|
window.currentThreadId = 1;
|
||||||
window.socket = io();
|
window.socket = io();
|
||||||
window.socket.on("create_user", auth);
|
window.socket.on("create_user", auth);
|
||||||
window.socket.on("new_message", (msg) => {
|
window.socket.on("new_message", (msg) => {
|
||||||
if (msg.thread !== window.currentThreadId) return;
|
if (msg.thread !== window.currentThreadId) return;
|
||||||
const el = document.createElement("div");
|
const el = document.createElement("div");
|
||||||
el.classList.add("message");
|
el.classList.add("message");
|
||||||
const strong = document.createElement("strong");
|
const strong = document.createElement("strong");
|
||||||
strong.textContent = msg.name + ": ";
|
strong.textContent = msg.name + ": ";
|
||||||
el.append(strong, msg.message);
|
el.append(strong, msg.message);
|
||||||
document.getElementById("messages").appendChild(el);
|
document.getElementById("messages").appendChild(el);
|
||||||
if (!window.earliestMessage) window.earliestMessage = msg.id;
|
if (!window.earliestMessage) window.earliestMessage = msg.id;
|
||||||
});
|
});
|
||||||
window.socket.on("get_history", (msg) => {
|
window.socket.on("get_history", (msg) => {
|
||||||
if (msg.messages.length > 0) {
|
if (msg.messages.length > 0) {
|
||||||
window.earliestMessage = msg.messages[msg.messages.length - 1].id;
|
window.earliestMessage = msg.messages[msg.messages.length - 1].id;
|
||||||
for (let message of msg.messages) {
|
for (let message of msg.messages) {
|
||||||
const el = document.createElement("div");
|
const el = document.createElement("div");
|
||||||
el.classList.add("message");
|
el.classList.add("message");
|
||||||
const strong = document.createElement("strong");
|
const strong = document.createElement("strong");
|
||||||
strong.textContent = message.name + ": ";
|
strong.textContent = message.name + ": ";
|
||||||
el.append(strong, message.message);
|
el.append(strong, message.message);
|
||||||
document.getElementById("messages").prepend(el);
|
document.getElementById("messages").prepend(el);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!msg.more) document.getElementById("loadmore").classList.add("hidden");
|
if (!msg.more)
|
||||||
});
|
document.getElementById("loadmore").classList.add("hidden");
|
||||||
window.socket.on("authenticate", (msg) => {
|
else
|
||||||
if (msg.success) {
|
document.getElementById("loadmore").classList.remove("hidden");
|
||||||
document.getElementById("register").classList.add("hidden");
|
});
|
||||||
document.getElementById("threads").classList.remove("hidden");
|
window.socket.on("authenticate", (msg) => {
|
||||||
document.getElementById("chat").classList.remove("hidden");
|
if (msg.success) {
|
||||||
const member = document.createElement("p");
|
document.getElementById("register").classList.add("hidden");
|
||||||
member.textContent = window.name;
|
document.getElementById("threads").classList.remove("hidden");
|
||||||
member.classList.add("member");
|
document.getElementById("chat").classList.remove("hidden");
|
||||||
document.getElementById("memberlist").appendChild(member);
|
const member = document.createElement("p");
|
||||||
let emitter = window.socket.emit;
|
member.textContent = window.name;
|
||||||
window.socket.emit = (type, data) => {
|
member.classList.add("member");
|
||||||
if (data)
|
document.getElementById("memberlist").appendChild(member);
|
||||||
return emitter.call(window.socket, type, {
|
let emitter = window.socket.emit;
|
||||||
...data,
|
window.socket.emit = (type, data) => {
|
||||||
__session: window.session,
|
if (data)
|
||||||
});
|
return emitter.call(window.socket, type, {
|
||||||
else return emitter.call(window.socket, type);
|
...data,
|
||||||
};
|
__session: window.session,
|
||||||
window.socket.emit("list_threads", {});
|
});
|
||||||
} else {
|
else return emitter.call(window.socket, type);
|
||||||
document.getElementById("register").classList.remove("hidden");
|
};
|
||||||
}
|
window.socket.emit("list_threads", {});
|
||||||
});
|
loadMessages();
|
||||||
window.socket.on("list_threads", (msg) => {
|
} else {
|
||||||
document.getElementById("threadlist").innerHTML = "";
|
document.getElementById("register").classList.remove("hidden");
|
||||||
for (let thread of msg.threads) addThread(thread);
|
}
|
||||||
});
|
});
|
||||||
window.socket.on("new_thread", addThread);
|
window.socket.on("list_threads", (msg) => {
|
||||||
window.socket.on("create_thread", (msg) => {
|
document.getElementById("threadlist").innerHTML = "";
|
||||||
chooseThread({
|
for (let thread of msg.threads) addThread(thread);
|
||||||
name: document.getElementById("newthreadname").value,
|
});
|
||||||
id: msg.id,
|
window.socket.on("new_thread", addThread);
|
||||||
});
|
window.socket.on("create_thread", (msg) => {
|
||||||
document.getElementById("newthreadname").value = "";
|
chooseThread({
|
||||||
document.getElementById("loadmore").classList.add("hidden");
|
name: document.getElementById("newthreadname").value,
|
||||||
document.getElementById("msginput").classList.remove("hidden");
|
id: msg.id,
|
||||||
});
|
});
|
||||||
window.socket.on("get_keys", (msg) => {
|
document.getElementById("newthreadname").value = "";
|
||||||
createThread(msg.keys);
|
document.getElementById("loadmore").classList.add("hidden");
|
||||||
});
|
document.getElementById("msginput").classList.remove("hidden");
|
||||||
document.getElementById("registerform").onsubmit = async (e) => {
|
});
|
||||||
e.preventDefault();
|
window.socket.on("get_keys", (msg) => {
|
||||||
const name = document.getElementById("name").value;
|
createThread(msg.keys);
|
||||||
if (!name) return;
|
});
|
||||||
const keys = await openpgp.generateKey({
|
document.getElementById("registerform").onsubmit = async (e) => {
|
||||||
userIDs: [{ name }],
|
e.preventDefault();
|
||||||
});
|
const name = document.getElementById("name").value;
|
||||||
const priv = await openpgp.readKey({ armoredKey: keys.privateKey });
|
if (!name) return;
|
||||||
const pub = await openpgp.readKey({ armoredKey: keys.publicKey });
|
const keys = await openpgp.generateKey({
|
||||||
window.keys = { priv, pub };
|
userIDs: [{ name }],
|
||||||
localStorage.setItem("keys", JSON.stringify(keys));
|
});
|
||||||
localStorage.setItem("name", name);
|
const priv = await openpgp.readKey({ armoredKey: keys.privateKey });
|
||||||
window.name = name;
|
const pub = await openpgp.readKey({ armoredKey: keys.publicKey });
|
||||||
window.socket.emit("create_user", { name, pubkey: keys.publicKey });
|
window.keys = { priv, pub };
|
||||||
};
|
localStorage.setItem("keys", JSON.stringify(keys));
|
||||||
document.getElementById("msginput").onsubmit = (e) => {
|
localStorage.setItem("name", name);
|
||||||
e.preventDefault();
|
window.name = name;
|
||||||
const msg = document.getElementById("msg").value;
|
window.socket.emit("create_user", { name, pubkey: keys.publicKey });
|
||||||
if (!msg) return;
|
};
|
||||||
window.socket.emit("send_message", {
|
document.getElementById("msginput").onsubmit = (e) => {
|
||||||
message: msg,
|
e.preventDefault();
|
||||||
thread: window.currentThreadId,
|
const msg = document.getElementById("msg").value;
|
||||||
});
|
if (!msg) return;
|
||||||
document.getElementById("msg").value = "";
|
window.socket.emit("send_message", {
|
||||||
};
|
message: msg,
|
||||||
document.getElementById("loadmore").onclick = (e) => {
|
thread: window.currentThreadId,
|
||||||
loadMessages();
|
});
|
||||||
};
|
document.getElementById("msg").value = "";
|
||||||
document.getElementById("createthread").onsubmit = (e) => {
|
};
|
||||||
e.preventDefault();
|
document.getElementById("loadmore").onclick = (e) => {
|
||||||
const members = window.threadmembers
|
loadMessages();
|
||||||
? window.threadmembers.map((i) => ({ name: i }))
|
};
|
||||||
: [{ name: window.name }];
|
document.getElementById("createthread").onsubmit = (e) => {
|
||||||
const perms = document.querySelector(
|
e.preventDefault();
|
||||||
'input[name="permissions"]:checked'
|
const members = window.threadmembers
|
||||||
).value;
|
? window.threadmembers.map((i) => ({ name: i }))
|
||||||
console.log(perms, members);
|
: [{ name: window.name }];
|
||||||
if (perms === "private_view") {
|
const perms = document.querySelector(
|
||||||
window.socket.emit("get_keys", { names: members.map((i) => i.name) });
|
'input[name="permissions"]:checked'
|
||||||
} else {
|
).value;
|
||||||
createThread(members);
|
console.log(perms, members);
|
||||||
}
|
if (perms === "private_view") {
|
||||||
};
|
window.socket.emit("get_keys", { names: members.map((i) => i.name) });
|
||||||
document.getElementById("membername").onkeydown = (e) => {
|
} else {
|
||||||
if (e.key == "Enter") {
|
createThread(members);
|
||||||
addMember();
|
}
|
||||||
}
|
};
|
||||||
};
|
document.getElementById("membername").onkeydown = (e) => {
|
||||||
document.getElementById("addmember").onclick = addMember;
|
if (e.key == "Enter") {
|
||||||
|
addMember();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.getElementById("addmember").onclick = addMember;
|
||||||
|
|
||||||
const keys = localStorage.getItem("keys");
|
const keys = localStorage.getItem("keys");
|
||||||
if (keys) {
|
if (keys) {
|
||||||
window.name = localStorage.getItem("name");
|
window.name = localStorage.getItem("name");
|
||||||
loadKeys(JSON.parse(keys)).then(() => {});
|
loadKeys(JSON.parse(keys)).then(() => {});
|
||||||
} else document.getElementById("register").classList.remove("hidden");
|
} else document.getElementById("register").classList.remove("hidden");
|
||||||
};
|
};
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue