admin/php-com-cen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

naprawa logiki i update stylu

Browse Source
This commit is contained in:
Tonik
2026-03-08 18:49:35 +01:00
parent 533fcaa498
commit 1bed0e7774
3 changed files with 245 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bin/WebSocketServer.php
+6 -6
View File
@@ -65,7 +65,7 @@ class WebSocketServer implements MessageComponentInterface
{ {
$decodedMsg = json_decode($msg, true); $decodedMsg = json_decode($msg, true);
if (!$decodedMsg) { if (!$decodedMsg) {
$from->send("{\"error\"}: \"not or empty json\""); $from->send("{\"error\": \"not or empty json\"}");
return; return;
} }
$index = $this->getConnectionIndex($from); $index = $this->getConnectionIndex($from);
@@ -75,10 +75,10 @@ class WebSocketServer implements MessageComponentInterface
$msgContent = $decodedMsg["message"] ?? null; $msgContent = $decodedMsg["message"] ?? null;
if ($msgContent) { if ($msgContent) {
$this->sendToAllAuthenticated($this->connectionsData[$index]["username"], $msgContent); $this->sendToAllAuthenticated($this->connectionsData[$index]["username"], $msgContent);
$from->send("{\"success\"}: \"message send\""); $from->send("{\"success\": \"message send\"}");
return; return;
} }
$from->send("{\"error\"}: \"no message\""); $from->send("{\"error\": \"no message\"}");
return; return;
} }
@@ -87,13 +87,13 @@ class WebSocketServer implements MessageComponentInterface
$tokenUser = TokenHandler::getTokenOwnership($token); $tokenUser = TokenHandler::getTokenOwnership($token);
if ($tokenUser) { if ($tokenUser) {
$this->connectionsData[$index]["username"] = $tokenUser; $this->connectionsData[$index]["username"] = $tokenUser;
$from->send("{\"success\"}: \"authenticated\""); $from->send("{\"success\": \"authenticated\"}");
return; return;
} }
$from->send("{\"error\"}: \"invalid token\""); $from->send("{\"error\": \"invalid token\"}");
return; return;
} }
$from->send("{\"error\"}: \"you are not authenticated\""); $from->send("{\"error\": \"you are not authenticated\"}");
} }
public function onClose(ConnectionInterface $conn): void public function onClose(ConnectionInterface $conn): void
public/index.php
+230 -95
View File
@@ -7,126 +7,261 @@ use ComCen\Html\Html;
$html = new Html(); $html = new Html();
$html->content = <<<'HTML' $html->content = <<<'HTML'
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="pl">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>ComCen</title> <title>ComCen</title>
<style> <style>
body { font-family: monospace; max-width: 600px; margin: 40px auto; padding: 0 16px; } html{
#log { border: 1px solid #ccc; height: 300px; overflow-y: auto; padding: 8px; margin-bottom: 8px; background: #f9f9f9; } background: #666;
.log-entry { margin: 2px 0; } font-family: monospace;
.log-system { color: #888; } }
.log-error { color: #c00; } .hidden { display: none !important; }
input, button { font-family: monospace; font-size: 14px; }
#token { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 4px; } /* Kontenery główne */
#msg-row { display: flex; gap: 8px; } #view-auth, #view-chat {
#message { flex: 1; padding: 4px; } margin-top: 5%;
button { padding: 4px 12px; cursor: pointer; } display: flex;
button:disabled { cursor: not-allowed; opacity: 0.5; } flex-direction: column;
align-items: center;
}
/* Nagłówki okien */
.logotext {
font-size: 24px;
margin: 0px;
color: #333;
background-color: #ccc;
border: 1px solid #000;
border-bottom: none;
width: 75%;
text-align: center;
padding: 5px 0;
}
/* Główny boks (fioletowy) */
.box {
border: 1px solid #000;
background-color: #88f;
width: 75%;
}
/* Obszar logów / formularza */
#log, .auth-content {
border-bottom: 1px solid #000;
height: 500px;
background-color: #b0ebbb;
overflow-y: auto;
}
/* Stylizacja formularza wewnątrz zielonego pola */
.auth-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}
/* Elementy wiadomości i logów */
#log div, .stat-msg-div {
color: #000;
background-color: #a9f;
margin: 4px 10px;
padding: 5px 6px;
font-size: 12px;
border: 1px solid #000;
}
/* Inputy i Przyciski */
input[type="text"], input[type="password"] {
border: 1px solid #000;
padding: 5px;
width: 250px;
background: #fff;
}
button {
border: 1px solid #000;
background: #ccc;
cursor: pointer;
padding: 5px 10px;
}
button:hover {
background: #ddd;
}
#m-in {
margin: 8px 0px 8px 8px;
width: 77%;
padding: 3px;
}
.send, .logout {
border: 1px solid #000;
padding: 3px 0px;
width: 10%;
}
.send { margin: 8px -7px; border-left: none; }
.logout {
float: right;
border: none;
border-left: 1px solid #000;
height: 40px;
background-color: #fcc;
}
.logout:hover {
background: #faa;
}
/* Kolory systemowe */
.error { background-color: #f66 !important; font-weight: bold; }
.system { background-color: #66f !important; font-weight: bold; }
#auth-nav {
margin-bottom: 15px;
}
</style> </style>
</head> </head>
<body> <body>
<h2>ComCen</h2>
<input id="token" type="text" placeholder="Paste token from curl login/register here" /> <div id="view-auth">
<div style="display:flex; gap:8px; margin-bottom:8px;"> <h2 class="logotext">ComCen - Terminal Autoryzacji</h2>
<button id="connect-btn" onclick="connect()">Connect</button> <div class="box">
<button id="disconnect-btn" onclick="disconnect()" disabled>Disconnect</button> <div class="auth-content">
<div id="auth-nav">
<button onclick="showAuth('login')">LOGIN</button>
<button onclick="showAuth('reg')">REGISTER</button>
</div>
<div id="form-login">
<input type="text" id="l-u" placeholder="Użytkownik">
<br><br>
<input type="password" id="l-p" placeholder="Hasło">
<br><br>
<button onclick="runAuth('login')" style="width: 100%">ZALOGUJ</button>
</div>
<div id="form-reg" class="hidden">
<input type="text" id="r-u" placeholder="Nowy login (a-z, 0-9)">
<br><br>
<input type="password" id="r-p" placeholder="Hasło">
<br><br>
<button onclick="runAuth('register')" style="width: 100%">ZAREJESTRUJ</button>
</div>
<div id="stat-msg" class="stat-msg-div hidden"></div>
</div>
</div>
</div> </div>
<div id="log"></div> <div id="view-chat" class="hidden">
<h2 class="logotext">ComCen - IRC - Zalogowany jako: <span id="current-user"></span></h2>
<div id="msg-row"> <div class="box">
<input id="message" type="text" placeholder="Message..." disabled onkeydown="if(event.key==='Enter') send()" /> <div id="log"></div>
<button id="send-btn" onclick="send()" disabled>Send</button> <input type="text" id="m-in" placeholder="Wiadomość..." onkeydown="if(event.key==='Enter') send()">
<button class="send" onclick="send()">Wyślij</button>
<button class="logout" onclick="location.reload()">Wyloguj</button>
</div>
</div> </div>
<script> <script>
let ws = null; const API = "http://localhost:8080";
let authenticated = false; let ws = null;
let myToken = "";
function log(text, type = '') { function showAuth(mode) {
const log = document.getElementById('log'); document.getElementById('form-login').classList.toggle('hidden', mode !== 'login');
const div = document.createElement('div'); document.getElementById('form-reg').classList.toggle('hidden', mode !== 'reg');
div.className = 'log-entry' + (type ? ' log-' + type : ''); document.getElementById('stat-msg').classList.add('hidden');
div.textContent = text; }
log.appendChild(div);
log.scrollTop = log.scrollHeight;
}
function setConnected(connected) { function addLog(txt, cls = '') {
document.getElementById('connect-btn').disabled = connected; const log = document.getElementById('log');
document.getElementById('disconnect-btn').disabled = !connected; const div = document.createElement('div');
} if(cls) div.className = cls;
div.textContent = txt;
log.appendChild(div);
log.scrollTop = log.scrollHeight;
}
function setAuthenticated(auth) { async function runAuth(type) {
authenticated = auth; const msgDiv = document.getElementById('stat-msg');
document.getElementById('message').disabled = !auth; const u = document.getElementById(type === 'login' ? 'l-u' : 'r-u').value.trim();
document.getElementById('send-btn').disabled = !auth; const p = document.getElementById(type === 'login' ? 'l-p' : 'r-p').value.trim();
}
function connect() { if (type === 'register') {
const token = document.getElementById('token').value.trim(); const regex = /^[a-zA-Z0-9_\.]+$/;
if (!token) { if (!regex.test(u)) {
log('Enter a token first.', 'error'); msgDiv.textContent = "Błąd: Niepoprawne znaki!";
msgDiv.className = "stat-msg-div error";
msgDiv.classList.remove('hidden');
return; return;
} }
}
ws = new WebSocket('ws://localhost:8080/ws'); try {
const res = await fetch(`${API}/${type}?username=${encodeURIComponent(u)}&password=${encodeURIComponent(p)}`);
const data = await res.json();
ws.onopen = () => { if (type === 'login' && data.token) {
log('Connected. Authenticating...', 'system'); myToken = data.token;
setConnected(true); document.getElementById('current-user').textContent = u;
ws.send(JSON.stringify({ token })); document.getElementById('view-auth').classList.add('hidden');
}; document.getElementById('view-chat').classList.remove('hidden');
startWS();
} else if (type === 'register' && data.error === 'none') {
msgDiv.textContent = "Konto utworzone. Zaloguj się.";
msgDiv.className = "stat-msg-div system";
msgDiv.classList.remove('hidden');
showAuth('login');
} else {
msgDiv.textContent = "Błąd: " + (data.error || "odmowa");
msgDiv.className = "stat-msg-div error";
msgDiv.classList.remove('hidden');
}
} catch (e) {
msgDiv.textContent = "Błąd połączenia z API";
msgDiv.classList.remove('hidden');
}
}
ws.onmessage = (event) => { function startWS() {
const text = event.data; ws = new WebSocket("ws://localhost:8080/ws");
if (text === '{"success"}: "authenticated"') { ws.onopen = () => ws.send(JSON.stringify({ token: myToken }));
log('Authenticated.', 'system');
setAuthenticated(true); ws.onmessage = (e) => {
} else if (text === '{"error"}: "invalid token"') { try {
log('Invalid token. Connection closed.', 'error'); const d = JSON.parse(e.data);
ws.close(); if (d.success) {
} else if (text === '{"error"}: "you are not authenticated"') { if (d.success.includes("authenticated")) addLog("Połączono pomyślnie z czatem.", "system");
log('Server: not authenticated', 'error'); return;
} else {
try {
const data = JSON.parse(text);
log(`${data.sender}: ${data.msg}`);
} catch {
log(text);
}
} }
}; if (d.sender && d.msg) addLog(`${d.sender}: ${d.msg}`);
else if (d.error) addLog("Błąd: " + d.error, "error");
} catch (err) { console.error("Błąd parsowania:", e.data); }
};
ws.onclose = () => { ws.onclose = () => {
log('Disconnected.', 'system'); addLog("Połączenie przerwane.", "error");
setConnected(false); document.getElementById('m-in').disabled = true;
setAuthenticated(false); };
ws = null; }
};
ws.onerror = () => { function send() {
log('WebSocket error.', 'error'); const input = document.getElementById('m-in');
}; if(input.value.trim() && ws && ws.readyState === 1) {
ws.send(JSON.stringify({ message: input.value }));
addLog("Ty: " + input.value);
input.value = "";
} }
}
function disconnect() { </script>
if (ws) ws.close();
}
function send() {
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 = '';
}
</script>
</body> </body>
</html> </html>
HTML; HTML;
$html->renderContent(); $html->renderContent();
src/Http/Utils.php
+9 -2
View File
@@ -4,15 +4,22 @@ namespace ComCen\Http;
use Ratchet\ConnectionInterface; use Ratchet\ConnectionInterface;
/*
Access-Control-Allow-Origin: *
zezwala na urzycie portu 8080
portalowi chodzącemu na porcie 8000
*/
class Utils class Utils
{ {
static function responeJson(ConnectionInterface $conn, string $head, string $jsonData): void static function responeJson(ConnectionInterface $conn, string $head, string $jsonData): void
{ {
$conn->send("HTTP/1.1 {$head}\r\nContent-Type: application/json\r\n\r\n{$jsonData}"); $conn->send("HTTP/1.1 {$head}\r\nContent-Type: application/json\r\nAccess-Control-Allow-Origin: *\r\n\r\n{$jsonData}");
} }
static function respondHtml(ConnectionInterface $conn, string $html): void static function respondHtml(ConnectionInterface $conn, string $html): void
{ {
$conn->send("HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n{$html}"); $conn->send("HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nAccess-Control-Allow-Origin: *\r\n\r\n{$html}");
} }
} }