Add web client, update CLI client

2024-11-05 20:35:10 +11:00
parent 41c9e7f53f
commit a4b6721ebc
10 changed files with 312 additions and 3 deletions
--- a/client-web/index.js
+++ b/client-web/index.js
@@ -0,0 +1,117 @@
+alert("Chookpen is currently in early development, expect bugs! Please don't try breaking the public server, do that with your own test server (read more in the Git repo). Thanks for trying Chookpen!")
+
+let ws;
+let username;
+let password;
+
+function showConfig() {
+    const serverconfig = document.getElementById('serverconfig')
+    if (serverconfig) {
+        serverconfig.style.display = 'block';
+    }
+}
+
+function md5(string) {
+    return CryptoJS.MD5(string).toString();
+}
+
+function getUrl() {
+    const serverUrl = document.getElementById('serverUrl').value.trim();
+    const serverPort = document.getElementById('serverPort').value;
+    const useWss = document.getElementById('securityStatus').checked;
+    const protocol = useWss ? 'wss' : 'ws';
+
+    const cleanUrl = serverUrl.replace(/^(https?:\/\/|wss?:\/\/)/, '');
+
+    return `${protocol}://${cleanUrl}:${serverPort}/api/websocket`;
+}
+function getSignupUrl() {
+    const serverUrl = document.getElementById('serverUrl').value.trim();
+    const serverPort = document.getElementById('serverPort').value;
+    const useWss = document.getElementById('securityStatus').checked;
+    const protocol = useWss ? 'https' : 'http';
+
+    const cleanUrl = serverUrl.replace(/^(https?:\/\/|wss?:\/\/)/, '');
+
+    return `${protocol}://${cleanUrl}:${serverPort}/api/createaccount/`;
+}
+
+function connect() {
+    username = document.getElementById('username').value;
+    password = document.getElementById('password').value;
+
+    if (!username || !password) {
+        alert('Please enter a username and password');
+        return;
+    }
+
+    const wsUrl = getUrl();
+    if (ws) {
+        ws.close();
+    }
+
+    ws = new WebSocket(wsUrl);
+
+    ws.onopen = () => {
+        Notification.requestPermission();
+        console.log('Connected!');
+        document.getElementById('login').style.display = 'none';
+        document.getElementById('messaging').style.display = 'block';
+        ws.send(`username:{${username}}token:{${md5(password)}}command:{login}commandArg:{${username}}`);
+        ws.send(`username:{${username}}token:{${md5(password)}}message:{Joined the room}`);
+        ws.onmessage = (event) => {
+            if (event.data === "ping") {
+                ws.send("pong");
+                return;
+            }
+            console.log(event.data);
+            const messagesDiv = document.getElementById('messagebox');
+            const messageElement = document.createElement('div');
+            if (messageElement) {
+                if (messagesDiv) {
+                    messagesDiv.appendChild(messageElement);
+                    messagesDiv.scrollTop = messagesDiv.scrollHeight;
+                    messageElement.className = 'message';
+                    messageElement.textContent = event.data;
+                }
+            }
+            if (document.hidden) {
+                const notifiction = new Notification("Chookpen", {body: messageElement.textContent});
+            }
+        };
+    }
+}
+
+function sendMessage() {
+    const messageInput = document.getElementById('messageInput');
+    const message = messageInput.value.trim();
+
+    if (message && ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(`username:{${username}}token:{${md5(password)}}message:{${message}}`);
+        messageInput.value = '';
+    }
+}
+
+document.getElementById('messageInput').addEventListener('keypress', (event) => {
+    if (event.key === 'Enter') {
+        sendMessage();
+    }
+});
+
+document.getElementById('password').addEventListener('keypress', (event) => {
+    if (event.key === 'Enter') {
+        connect();
+    }
+});
+
+function register() {
+    username = document.getElementById('username').value;
+    password = document.getElementById('password').value;
+
+    if (!username || !password) {
+        alert('Please enter a username and password');
+        return;
+    }
+
+    window.open(`${getSignupUrl()}username:{${username}}token:{${md5(password)}}`);
+}