267 lines
8.3 KiB
PHP
267 lines
8.3 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
require __DIR__ . '/../vendor/autoload.php';
|
|
|
|
use ComCen\Html\Html;
|
|
|
|
$html = new Html();
|
|
$html->content = <<<'HTML'
|
|
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>ComCen</title>
|
|
<style>
|
|
html{
|
|
background: #666;
|
|
font-family: monospace;
|
|
}
|
|
.hidden { display: none !important; }
|
|
|
|
/* Kontenery główne */
|
|
#view-auth, #view-chat {
|
|
margin-top: 5%;
|
|
display: flex;
|
|
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>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="view-auth">
|
|
<h2 class="logotext">ComCen - Terminal Autoryzacji</h2>
|
|
<div class="box">
|
|
<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 id="view-chat" class="hidden">
|
|
<h2 class="logotext">ComCen - IRC - Zalogowany jako: <span id="current-user"></span></h2>
|
|
<div class="box">
|
|
<div id="log"></div>
|
|
<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>
|
|
|
|
<script>
|
|
const API = "http://localhost:8080";
|
|
let ws = null;
|
|
let myToken = "";
|
|
|
|
function showAuth(mode) {
|
|
document.getElementById('form-login').classList.toggle('hidden', mode !== 'login');
|
|
document.getElementById('form-reg').classList.toggle('hidden', mode !== 'reg');
|
|
document.getElementById('stat-msg').classList.add('hidden');
|
|
}
|
|
|
|
function addLog(txt, cls = '') {
|
|
const log = document.getElementById('log');
|
|
const div = document.createElement('div');
|
|
if(cls) div.className = cls;
|
|
div.textContent = txt;
|
|
log.appendChild(div);
|
|
log.scrollTop = log.scrollHeight;
|
|
}
|
|
|
|
async function runAuth(type) {
|
|
const msgDiv = document.getElementById('stat-msg');
|
|
const u = document.getElementById(type === 'login' ? 'l-u' : 'r-u').value.trim();
|
|
const p = document.getElementById(type === 'login' ? 'l-p' : 'r-p').value.trim();
|
|
|
|
if (type === 'register') {
|
|
const regex = /^[a-zA-Z0-9_\.]+$/;
|
|
if (!regex.test(u)) {
|
|
msgDiv.textContent = "Błąd: Niepoprawne znaki!";
|
|
msgDiv.className = "stat-msg-div error";
|
|
msgDiv.classList.remove('hidden');
|
|
return;
|
|
}
|
|
}
|
|
|
|
try {
|
|
const res = await fetch(`${API}/${type}?username=${encodeURIComponent(u)}&password=${encodeURIComponent(p)}`);
|
|
const data = await res.json();
|
|
|
|
if (type === 'login' && data.token) {
|
|
myToken = data.token;
|
|
document.getElementById('current-user').textContent = u;
|
|
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');
|
|
}
|
|
}
|
|
|
|
function startWS() {
|
|
ws = new WebSocket("ws://localhost:8080/ws");
|
|
ws.onopen = () => ws.send(JSON.stringify({ token: myToken }));
|
|
|
|
ws.onmessage = (e) => {
|
|
try {
|
|
const d = JSON.parse(e.data);
|
|
if (d.success) {
|
|
if (d.success.includes("authenticated")) addLog("Połączono pomyślnie z czatem.", "system");
|
|
return;
|
|
}
|
|
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 = () => {
|
|
addLog("Połączenie przerwane.", "error");
|
|
document.getElementById('m-in').disabled = true;
|
|
};
|
|
}
|
|
|
|
function send() {
|
|
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 = "";
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
HTML;
|
|
$html->renderContent(); |