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

little a organization

main
jerl 2023-07-30 19:31:26 -07:00
parent ca78144083
commit e594746b4c
2 changed files with 57 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/index.html
View File

@ -42,6 +42,9 @@
.hidden { .hidden {
display: none; display: none;
} }
#permissions {
margin-bottom: 5px;
}
#msginput { #msginput {
margin-top: 15px; margin-top: 15px;
} }

105
client/ui.js
View File

@ -30,10 +30,6 @@ async function auth() {
} }
document.getElementById("register").classList.add("hidden"); document.getElementById("register").classList.add("hidden");
document.getElementById("app").classList.remove("hidden"); document.getElementById("app").classList.remove("hidden");
const member = document.createElement("p");
member.textContent = window.name;
member.classList.add("member");
document.getElementById("memberlist").appendChild(member);
window.emit("list_threads", {}, msg => { window.emit("list_threads", {}, msg => {
document.getElementById("threadlist").innerHTML = ""; document.getElementById("threadlist").innerHTML = "";
for (let thread of msg.threads) for (let thread of msg.threads)
@ -116,24 +112,22 @@ function addMember() {
} else { } else {
window.threadmembers.push(name); window.threadmembers.push(name);
} }
const member = document.createElement("p"); document.getElementById("memberlist").appendChild(html.node`
member.textContent = name; <p class='member'>${name}</p>
member.classList.add("member"); `);
document.getElementById("memberlist").appendChild(member);
document.getElementById("membername").value = ""; document.getElementById("membername").value = "";
} }
async function createThread(e) { async function createThread(e) {
e.preventDefault(); e.preventDefault();
let members = window.threadmembers let members = window.threadmembers.map(name => { name });
? window.threadmembers.map((i) => ({ name: i }))
: [{ name: window.name }];
const perms = document.querySelector( const perms = document.querySelector(
'input[name="permissions"]:checked' 'input[name="permissions"]:checked'
).value; ).value;
if (perms === "private_view") if (perms === "private_view")
members = (await new Promise(resolve => members = (await new Promise(resolve =>
window.emit("get_keys", { names: members.map((i) => i.name) }, resolve))).keys; window.emit("get_keys", { names: window.threadmembers }, resolve)
)).keys;
let permissions; let permissions;
if (perms === "public") { if (perms === "public") {
permissions = { permissions = {
@ -165,13 +159,6 @@ async function createThread(e) {
} }
*/ */
} }
document.getElementById(perms).checked = false;
window.threadmembers = null;
document.getElementById("memberlist").innerHTML = "";
const member = document.createElement("p");
member.textContent = window.name;
member.classList.add("member");
document.getElementById("memberlist").appendChild(member);
window.emit("create_thread", { window.emit("create_thread", {
name: document.getElementById("newthreadname").value, name: document.getElementById("newthreadname").value,
permissions, permissions,
@ -181,7 +168,7 @@ async function createThread(e) {
name: document.getElementById("newthreadname").value, name: document.getElementById("newthreadname").value,
id: msg.id, id: msg.id,
}); });
document.getElementById("newthreadname").value = ""; document.getElementById('createthread').remove();
document.getElementById("loadmore").classList.add("hidden"); document.getElementById("loadmore").classList.add("hidden");
document.getElementById("msginput").classList.remove("hidden"); document.getElementById("msginput").classList.remove("hidden");
}); });
@ -199,31 +186,20 @@ function sendMessage(e) {
document.getElementById("msg").value = ""; document.getElementById("msg").value = "";
} }
render(document.body, html` function newThread(e) {
<div id="register" class="hidden"> let form = document.getElementById('createthread');
<h1>welcome to vybe</h1> if (form) {
<h3>a communication network (beta)</h3> form.remove();
<p> e.target.textContent = 'create thread';
to get started, you'll need an account. we use public key cryptography }
for security, rather than passwords. your keys are stored in your else {
browser storage only, so do this on a browser you can access again. window.threadmembers = [ window.name ];
</p> document.getElementById('threads').insertAdjacentElement('afterend', html.node`
<form onsubmit=${register} id="registerform"> <form id="createthread" class='column' onsubmit=${createThread}>
<label for="name">username: </label>
<input type="text" id="name" />
<input id="submit" type="submit" value='generate keys & register'>
</form>
</div>
<div id="app" class="hidden">
<div id="threads" class="column">
<h1>vybe</h1>
<h3>threads</h3>
<div id="threadlist">loading...</div>
<form id="createthread" onsubmit=${createThread}>
<h3>create thread</h3> <h3>create thread</h3>
<label for="newthreadname">thread name</label> <label for="newthreadname">thread name</label>
<input type="text" id="newthreadname" /><br /><br /> <input type="text" id="newthreadname" />
<span>thread permissions</span><br /> <p id='permissions'>thread permissions</p>
<input type="radio" id="public" name="permissions" value="public" /> <input type="radio" id="public" name="permissions" value="public" />
<label for="public">anyone can view and post</label><br /> <label for="public">anyone can view and post</label><br />
<input <input
@ -250,14 +226,42 @@ render(document.body, html`
} }
}}/> }}/>
<button id="addmember" onclick=${addMember}>add</button> <button id="addmember" onclick=${addMember}>add</button>
<div id="memberlist"></div> <div id="memberlist">
<p class='member'>${window.name}</p>
</div>
<br /> <br />
<input id="submitthread" type="submit" value="create" /> <input id="submitthread" type="submit" value="create" />
</form> </form>
`);
e.target.textContent = 'cancel';
}
}
render(document.body, html`
<div id="register" class="hidden">
<h1>welcome to vybe</h1>
<h3>a communication network (beta)</h3>
<p>
to get started, you'll need an account. we use public key cryptography
for security, rather than passwords. your keys are stored in your
browser storage only, so do this on a browser you can access again.
</p>
<form onsubmit=${register} id="registerform">
<label for="name">username: </label>
<input type="text" id="name" />
<input id="submit" type="submit" value='generate keys & register'>
</form>
</div>
<div id="app" class="hidden">
<div id="threads" class="column">
<h1>vybe</h1>
<h3>threads</h3>
<div id="threadlist">loading...</div>
<button id='newthread' onclick=${newThread}>create thread</button>
</div> </div>
<div id="chat" class="column"> <div id="chat" class="column">
<h3 class="thread"> <h3 class="thread">
current thread: <strong id="threadname">meow</strong> thread: <strong id="threadname">meow</strong>
</h3> </h3>
<h3>messages will appear below as they are sent</h3> <h3>messages will appear below as they are sent</h3>
<button id="loadmore" class="hidden" onclick=${loadMessages}>load more messages</button> <button id="loadmore" class="hidden" onclick=${loadMessages}>load more messages</button>
@ -276,12 +280,11 @@ window.onload = async () => {
window.socket.on("new_message", (msg) => { window.socket.on("new_message", (msg) => {
if (msg.thread !== window.currentThreadId) if (msg.thread !== window.currentThreadId)
return; return;
const el = document.createElement("div"); document.getElementById("messages").appendChild(html.node`
el.classList.add("message"); <div class='message'>
const strong = document.createElement("strong"); <strong>${msg.name}: </strong>
strong.textContent = msg.name + ": "; ${msg.message}
el.append(strong, msg.message); </div>`);
document.getElementById("messages").appendChild(el);
if (!window.earliestMessage) if (!window.earliestMessage)
window.earliestMessage = msg.id; window.earliestMessage = msg.id;
}); });