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

add client

main
june moretz 2023-05-05 23:12:07 -04:00
parent ae5b63f1ea
commit 832d86fe02
3 changed files with 133 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
client/chat.js Normal file
View File

@ -0,0 +1,61 @@
const SERVER = "192.168.1.199:3435";
async function register() {
const name = document.getElementById("name").value;
if (!name) return;
const keys = await openpgp.generateKey({
userIDs: [{ name }],
});
const priv = await openpgp.readKey({ armoredKey: keys.privateKey });
const pub = await openpgp.readKey({ armoredKey: keys.publicKey });
window.keys = { priv, pub };
localStorage.setItem("keys", JSON.stringify(keys));
localStorage.setItem("name", name);
window.name = name;
window.socket.emit("create_user", { name, pubkey: keys.publicKey });
}
async function message(e) {
e.preventDefault();
const msg = document.getElementById("msg").value;
if (!msg) return;
const sig = await openpgp.sign({
message: new openpgp.CleartextMessage(msg, ""),
signingKeys: window.keys.priv,
});
window.socket.emit("send_message", { name: window.name, message: sig });
document.getElementById("msg").value = "";
const el = document.createElement("div");
el.classList.add("message");
el.innerHTML = `<strong>${window.name}: </strong>${msg}`;
document.getElementById("messages").appendChild(el);
}
function swap() {
document.getElementById("register").classList.add("hidden");
document.getElementById("chat").classList.remove("hidden");
}
async function loadKeys(keys) {
const priv = await openpgp.readKey({ armoredKey: keys.privateKey });
const pub = await openpgp.readKey({ armoredKey: keys.publicKey });
window.keys = { priv, pub };
}
window.onload = () => {
window.socket = io(SERVER);
window.socket.on("create_user", swap);
window.socket.on("new_message", (msg) => {
const el = document.createElement("div");
el.classList.add("message");
el.innerHTML = `<strong>${msg.name}: </strong>${msg.message}`;
document.getElementById("messages").appendChild(el);
});
const keys = localStorage.getItem("keys");
if (keys) {
window.name = localStorage.getItem("name");
loadKeys(JSON.parse(keys)).then(swap);
}
document.getElementById("submit").onclick = register;
document.getElementById("msginput").onsubmit = message;
};

55
client/index.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vybe</title>
<style>
* {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
sans-serif;
}
body {
background: #171719;
color: #d8d8d8;
}
.hidden {
display: none;
}
#msginput {
margin-top: 15px;
}
.message {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="register">
<h1>welcome to vybe</h1>
<h3>this site is in beta</h3>
<p>
to get started, you'll need to set up an account. we use public key
cryptography for security, rather than passwords. in this early beta
version your keys are stored in your browser storage only.
</p>
<label for="name">name/username</label>
<input type="text" id="name" />
<button id="submit">generate keys & register</button>
</div>
<div id="chat" class="hidden">
<h1>vybe</h1>
<h3>messages will appear below as they are sent</h3>
<div id="messages"></div>
<form id="msginput">
<input type="text" placeholder="write a message..." id="msg" />
<button type="submit" class="hidden" id="sendmsg"></button>
</form>
</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>
</body>
</html>

17
client/openpgp.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long