token system now fullly works

2026-03-06 17:05:54 +01:00
parent 14359b9de1
commit 51a94fea19
2 changed files with 112 additions and 30 deletions
@@ -5,46 +5,128 @@ require __DIR__ . '/../vendor/autoload.php';
 use ComCen\Html\Html;

 $html = new Html();
-$html->content .= "
+$html->content = <<<'HTML'
 <!DOCTYPE html>
-<html lang=\"en\">
+<html lang="en">
 <head>
-    <meta charset=\"UTF-8\">
-    <title>Chat</title>
+    <meta charset="UTF-8">
+    <title>ComCen</title>
+    <style>
+        body { font-family: monospace; max-width: 600px; margin: 40px auto; padding: 0 16px; }
+        #log { border: 1px solid #ccc; height: 300px; overflow-y: auto; padding: 8px; margin-bottom: 8px; background: #f9f9f9; }
+        .log-entry { margin: 2px 0; }
+        .log-system { color: #888; }
+        .log-error  { color: #c00; }
+        input, button { font-family: monospace; font-size: 14px; }
+        #token    { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 4px; }
+        #msg-row  { display: flex; gap: 8px; }
+        #message  { flex: 1; padding: 4px; }
+        button    { padding: 4px 12px; cursor: pointer; }
+        button:disabled { cursor: not-allowed; opacity: 0.5; }
+    </style>
 </head>
 <body>
-    <h2>WebSocket Test</h2>
-    <div id=\"log\"></div>
-    <input id=\"msg\" type=\"text\" placeholder=\"Type a message...\" />
-    <button onclick=\"send()\">Send</button>
-    <button onclick='closeConnection()'>Disconnect</button>
+    <h2>ComCen</h2>
+
+    <input id="token" type="text" placeholder="Paste token from curl login/register here" />
+    <div style="display:flex; gap:8px; margin-bottom:8px;">
+        <button id="connect-btn" onclick="connect()">Connect</button>
+        <button id="disconnect-btn" onclick="disconnect()" disabled>Disconnect</button>
+    </div>
+
+    <div id="log"></div>
+
+    <div id="msg-row">
+        <input id="message" type="text" placeholder="Message..." disabled onkeydown="if(event.key==='Enter') send()" />
+        <button id="send-btn" onclick="send()" disabled>Send</button>
+    </div>

    <script>
-        const log = document.getElementById('log');
-        const ws = new WebSocket('ws://localhost:8080/ws');
+        let ws = null;
+        let authenticated = false;

-        ws.onopen = () => append('Connected');
-        ws.onmessage = e => append('Server: ' + e.data);
-        ws.onclose = () => append('Disconnected');
-        ws.onerror = e => append('Error: ' + e.message);
+        function log(text, type = '') {
+            const log = document.getElementById('log');
+            const div = document.createElement('div');
+            div.className = 'log-entry' + (type ? ' log-' + type : '');
+            div.textContent = text;
+            log.appendChild(div);
+            log.scrollTop = log.scrollHeight;
+        }
+
+        function setConnected(connected) {
+            document.getElementById('connect-btn').disabled = connected;
+            document.getElementById('disconnect-btn').disabled = !connected;
+        }
+
+        function setAuthenticated(auth) {
+            authenticated = auth;
+            document.getElementById('message').disabled = !auth;
+            document.getElementById('send-btn').disabled = !auth;
+        }
+
+        function connect() {
+            const token = document.getElementById('token').value.trim();
+            if (!token) {
+                log('Enter a token first.', 'error');
+                return;
+            }
+
+            ws = new WebSocket('ws://localhost:8080/ws');
+
+            ws.onopen = () => {
+                log('Connected. Authenticating...', 'system');
+                setConnected(true);
+                ws.send(JSON.stringify({ token }));
+            };
+
+            ws.onmessage = (event) => {
+                const text = event.data;
+                if (text === 'authenticated') {
+                    log('Authenticated.', 'system');
+                    setAuthenticated(true);
+                } else if (text === 'invalid token') {
+                    log('Invalid token. Connection closed.', 'error');
+                    ws.close();
+                } else if (text === 'not authenticated') {
+                    log('Server: not authenticated', 'error');
+                } else {
+                    try {
+                        const data = JSON.parse(text);
+                        log(`${data.sender}: ${data.msg}`);
+                    } catch {
+                        log(text);
+                    }
+                }
+            };
+
+            ws.onclose = () => {
+                log('Disconnected.', 'system');
+                setConnected(false);
+                setAuthenticated(false);
+                ws = null;
+            };
+
+            ws.onerror = () => {
+                log('WebSocket error.', 'error');
+            };
+        }
+
+        function disconnect() {
+            if (ws) ws.close();
+        }

        function send() {
-            const input = document.getElementById('msg');
-            ws.send(input.value);
-            append('You: ' + input.value);
+            const input = document.getElementById('message');
+            const text = input.value.trim();
+            if (!text || !ws || !authenticated) return;
+            ws.send(JSON.stringify({ message: text }));
+            log(`You: ${text}`);
            input.value = '';
        }
-
-        function append(text) {
-            const p = document.createElement('p');
-            p.textContent = text;
-            log.appendChild(p);
-        }
-        function closeConnection() {
-            ws.close();
-        }
    </script>
 </body>
 </html>
-";
+
+HTML;
 $html->renderContent();