jerl
/
vybe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

threads (real)

main
june moretz 2023-05-09 00:02:57 -04:00
parent 57505e719d
commit 5c700eb425
3 changed files with 78 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
client/chat.js
View File

@ -37,7 +37,11 @@ async function message(e) {
e.preventDefault(); e.preventDefault();
const msg = document.getElementById("msg").value; const msg = document.getElementById("msg").value;
if (!msg) return; if (!msg) return;
window.socket.emit("send_message", { name: window.name, message: msg }); window.socket.emit("send_message", {
name: window.name,
message: msg,
thread: window.currentThreadId,
});
document.getElementById("msg").value = ""; document.getElementById("msg").value = "";
const el = document.createElement("div"); const el = document.createElement("div");
el.classList.add("message"); el.classList.add("message");
@ -50,6 +54,29 @@ function swap() {
document.getElementById("chat").classList.remove("hidden"); document.getElementById("chat").classList.remove("hidden");
} }
function startThreadPicker() {
document.getElementById("chat").classList.add("hidden");
document.getElementById("threads").classList.remove("hidden");
window.socket.emit("list_threads");
}
function chooseThread(thread) {
window.currentThreadId = thread.id;
window.earliestMessage = null;
document.getElementById("loadmore").classList.remove("hidden");
document.getElementById("chat").classList.remove("hidden");
document.getElementById("messages").innerHTML = "";
document.getElementById("threadname").innerHTML = thread.name;
document.getElementById("threads").classList.add("hidden");
}
function createThread(e) {
e.preventDefault();
window.socket.emit("create_thread", {
name: document.getElementById("newthreadname").value,
});
}
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 });
@ -60,14 +87,18 @@ async function loadKeys(keys) {
async function loadMessages() { async function loadMessages() {
window.socket.emit( window.socket.emit(
"get_history", "get_history",
window.earliestMessage ? { before: window.earliestMessage } : {} window.earliestMessage
? { before: window.earliestMessage, thread: window.currentThreadId }
: { thread: window.currentThreadId }
); );
} }
window.onload = () => { window.onload = () => {
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;
const el = document.createElement("div"); const el = document.createElement("div");
el.classList.add("message"); el.classList.add("message");
el.innerHTML = `<strong>${msg.name}: </strong>${msg.message}`; el.innerHTML = `<strong>${msg.name}: </strong>${msg.message}`;
@ -89,7 +120,29 @@ window.onload = () => {
} }
if (!msg.more) document.getElementById("loadmore").classList.add("hidden"); if (!msg.more) document.getElementById("loadmore").classList.add("hidden");
}); });
window.socket.on("authenticate", swap); window.socket.on("authenticate", (msg) => {
if (msg.success) swap();
});
window.socket.on("list_threads", (msg) => {
document.getElementById("threadlist").innerHTML = "";
for (let thread of msg.threads) {
const el = document.createElement("div");
el.classList.add("thread");
el.innerHTML = thread.name;
const btn = document.createElement("button");
btn.innerHTML = "choose";
btn.onclick = () => chooseThread(thread);
el.appendChild(btn);
document.getElementById("threadlist").appendChild(el);
}
});
window.socket.on("create_thread", (msg) => {
chooseThread({
name: document.getElementById("newthreadname").value,
id: msg.id,
});
document.getElementById("newthreadname").value = "";
});
const keys = localStorage.getItem("keys"); const keys = localStorage.getItem("keys");
if (keys) { if (keys) {
window.name = localStorage.getItem("name"); window.name = localStorage.getItem("name");
@ -98,4 +151,6 @@ window.onload = () => {
document.getElementById("registerform").onsubmit = register; document.getElementById("registerform").onsubmit = register;
document.getElementById("msginput").onsubmit = message; document.getElementById("msginput").onsubmit = message;
document.getElementById("loadmore").onclick = loadMessages; document.getElementById("loadmore").onclick = loadMessages;
document.getElementById("change").onclick = startThreadPicker;
document.getElementById("createthread").onsubmit = createThread;
}; };

18
client/index.html
View File

@ -27,6 +27,9 @@
#loadmore { #loadmore {
margin-bottom: 10px; margin-bottom: 10px;
} }
.channel {
font-weight: normal;
}
</style> </style>
</head> </head>
<body> <body>
@ -46,6 +49,10 @@
</div> </div>
<div id="chat" class="hidden"> <div id="chat" class="hidden">
<h1>vybe</h1> <h1>vybe</h1>
<h3 class="thread">
current thread: <strong id="threadname">meow</strong>
<button id="change">change thread</button>
</h3>
<h3>messages will appear below as they are sent</h3> <h3>messages will appear below as they are sent</h3>
<button id="loadmore">load more messages</button> <button id="loadmore">load more messages</button>
<div id="messages"></div> <div id="messages"></div>
@ -54,6 +61,17 @@
<button type="submit" class="hidden" id="sendmsg"></button> <button type="submit" class="hidden" id="sendmsg"></button>
</form> </form>
</div> </div>
<div id="threads" class="hidden">
<h1>threads</h1>
<h3>create thread</h3>
<form id="createthread">
<label for="newthreadname">thread name</label>
<input type="text" id="newthreadname" />
<button id="submitthread" type="submit">create</button>
</form>
<h3>choose existing thread</h3>
<div id="threadlist">loading...</div>
</div>
<script src="/openpgp.min.js"></script> <script src="/openpgp.min.js"></script>
<script src="/chat.js"></script> <script src="/chat.js"></script>
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script> <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>

3
src/create_thread.js
View File

@ -1,4 +1,5 @@
const db = require("../db"); const db = require("../db");
const authwrap = require("./authwrap");
const create_thread = async (msg, respond) => { const create_thread = async (msg, respond) => {
// validate inputs // validate inputs
@ -20,4 +21,4 @@ const create_thread = async (msg, respond) => {
}); });
}; };
module.exports = create_thread; module.exports = authwrap(create_thread);