threads (real)
june moretz
parent
57505e719d
commit
5c700eb425
|
|
@ -37,7 +37,11 @@ async function message(e) {
|
|||
e.preventDefault();
|
||||
const msg = document.getElementById("msg").value;
|
||||
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 = "";
|
||||
const el = document.createElement("div");
|
||||
el.classList.add("message");
|
||||
|
|
@ -50,6 +54,29 @@ function swap() {
|
|||
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) {
|
||||
const priv = await openpgp.readKey({ armoredKey: keys.privateKey });
|
||||
const pub = await openpgp.readKey({ armoredKey: keys.publicKey });
|
||||
|
|
@ -60,14 +87,18 @@ async function loadKeys(keys) {
|
|||
async function loadMessages() {
|
||||
window.socket.emit(
|
||||
"get_history",
|
||||
window.earliestMessage ? { before: window.earliestMessage } : {}
|
||||
window.earliestMessage
|
||||
? { before: window.earliestMessage, thread: window.currentThreadId }
|
||||
: { thread: window.currentThreadId }
|
||||
);
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
window.currentThreadId = 1;
|
||||
window.socket = io();
|
||||
window.socket.on("create_user", auth);
|
||||
window.socket.on("new_message", (msg) => {
|
||||
if (msg.thread !== window.currentThreadId) return;
|
||||
const el = document.createElement("div");
|
||||
el.classList.add("message");
|
||||
el.innerHTML = `<strong>${msg.name}: </strong>${msg.message}`;
|
||||
|
|
@ -89,7 +120,29 @@ window.onload = () => {
|
|||
}
|
||||
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");
|
||||
if (keys) {
|
||||
window.name = localStorage.getItem("name");
|
||||
|
|
@ -98,4 +151,6 @@ window.onload = () => {
|
|||
document.getElementById("registerform").onsubmit = register;
|
||||
document.getElementById("msginput").onsubmit = message;
|
||||
document.getElementById("loadmore").onclick = loadMessages;
|
||||
document.getElementById("change").onclick = startThreadPicker;
|
||||
document.getElementById("createthread").onsubmit = createThread;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -27,6 +27,9 @@
|
|||
#loadmore {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.channel {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -46,6 +49,10 @@
|
|||
</div>
|
||||
<div id="chat" class="hidden">
|
||||
<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>
|
||||
<button id="loadmore">load more messages</button>
|
||||
<div id="messages"></div>
|
||||
|
|
@ -54,6 +61,17 @@
|
|||
<button type="submit" class="hidden" id="sendmsg"></button>
|
||||
</form>
|
||||
</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="/chat.js"></script>
|
||||
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
const db = require("../db");
|
||||
const authwrap = require("./authwrap");
|
||||
|
||||
const create_thread = async (msg, respond) => {
|
||||
// validate inputs
|
||||
|
|
@ -20,4 +21,4 @@ const create_thread = async (msg, respond) => {
|
|||
});
|
||||
};
|
||||
|
||||
module.exports = create_thread;
|
||||
module.exports = authwrap(create_thread);
|
||||
|
|
|
|||
Loading…
Reference in New Issue