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 {
display: none;
}
#permissions {
margin-bottom: 5px;
}
#msginput {
margin-top: 15px;
}

105
client/ui.js
View File

@ -30,10 +30,6 @@ async function auth() {
}
document.getElementById("register").classList.add("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 => {
document.getElementById("threadlist").innerHTML = "";
for (let thread of msg.threads)
@ -116,24 +112,22 @@ function addMember() {
} else {
window.threadmembers.push(name);
}
const member = document.createElement("p");
member.textContent = name;
member.classList.add("member");
document.getElementById("memberlist").appendChild(member);
document.getElementById("memberlist").appendChild(html.node`
<p class='member'>${name}</p>
`);
document.getElementById("membername").value = "";
}
async function createThread(e) {
e.preventDefault();
let members = window.threadmembers
? window.threadmembers.map((i) => ({ name: i }))
: [{ name: window.name }];
let members = window.threadmembers.map(name => { name });
const perms = document.querySelector(
'input[name="permissions"]:checked'
).value;
if (perms === "private_view")
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;
if (perms === "public") {
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", {
name: document.getElementById("newthreadname").value,
permissions,
@ -181,7 +168,7 @@ async function createThread(e) {
name: document.getElementById("newthreadname").value,
id: msg.id,
});
document.getElementById("newthreadname").value = "";
document.getElementById('createthread').remove();
document.getElementById("loadmore").classList.add("hidden");
document.getElementById("msginput").classList.remove("hidden");
});
@ -199,31 +186,20 @@ function sendMessage(e) {
document.getElementById("msg").value = "";
}
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>
<form id="createthread" onsubmit=${createThread}>
function newThread(e) {
let form = document.getElementById('createthread');
if (form) {
form.remove();
e.target.textContent = 'create thread';
}
else {
window.threadmembers = [ window.name ];
document.getElementById('threads').insertAdjacentElement('afterend', html.node`
<form id="createthread" class='column' onsubmit=${createThread}>
<h3>create thread</h3>
<label for="newthreadname">thread name</label>
<input type="text" id="newthreadname" /><br /><br />
<span>thread permissions</span><br />
<input type="text" id="newthreadname" />
<p id='permissions'>thread permissions</p>
<input type="radio" id="public" name="permissions" value="public" />
<label for="public">anyone can view and post</label><br />
<input
@ -250,14 +226,42 @@ render(document.body, html`
}
}}/>
<button id="addmember" onclick=${addMember}>add</button>
<div id="memberlist"></div>
<div id="memberlist">
<p class='member'>${window.name}</p>
</div>
<br />
<input id="submitthread" type="submit" value="create" />
</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 id="chat" class="column">
<h3 class="thread">
current thread: <strong id="threadname">meow</strong>
thread: <strong id="threadname">meow</strong>
</h3>
<h3>messages will appear below as they are sent</h3>
<button id="loadmore" class="hidden" onclick=${loadMessages}>load more messages</button>
@ -276,12 +280,11 @@ window.onload = async () => {
window.socket.on("new_message", (msg) => {
if (msg.thread !== window.currentThreadId)
return;
const el = document.createElement("div");
el.classList.add("message");
const strong = document.createElement("strong");
strong.textContent = msg.name + ": ";
el.append(strong, msg.message);
document.getElementById("messages").appendChild(el);
document.getElementById("messages").appendChild(html.node`
<div class='message'>
<strong>${msg.name}: </strong>
${msg.message}
</div>`);
if (!window.earliestMessage)
window.earliestMessage = msg.id;
});