add client and groups member logic

This commit is contained in:
2026-03-27 18:49:45 +01:00
parent a95bc43be6
commit c5fc74d142
9 changed files with 256 additions and 70 deletions
+44 -4
View File
@@ -72,13 +72,14 @@
<button class="tab-btn active" onclick="switchTab('login')">Login</button>
<button class="tab-btn" onclick="switchTab('register')">Register</button>
<button class="tab-btn" onclick="switchTab('connect')">Connect</button>
<button class="tab-btn" onclick="switchTab('group')">Group</button>
</div>
<div id="tab-login" class="tab active">
<label>Username</label>
<input id="login-username" type="text" placeholder="alice">
<label style="margin-top:10px;">Password</label>
<input id="login-password" type="password" placeholder="••••••••">
<input id="login-password" type="text" placeholder="password">
<button onclick="login()">Login</button>
</div>
@@ -86,7 +87,7 @@
<label>Username</label>
<input id="reg-username" type="text" placeholder="alice">
<label style="margin-top:10px;">Password</label>
<input id="reg-password" type="password" placeholder="••••••••">
<input id="reg-password" type="text" placeholder="password">
<label style="margin-top:10px;">Color (r,g,b)</label>
<input id="reg-color" type="text" placeholder="255,100,50">
<button onclick="register()">Register</button>
@@ -100,6 +101,18 @@
<button id="connect-btn" onclick="connect()">Connect</button>
</div>
<div id="tab-group" class="tab">
<label>Token</label>
<input id="group-token" type="text" placeholder="Paste token from login">
<label style="margin-top:10px;">Name (optional)</label>
<input id="group-name" type="text" placeholder="Best group ever">
<label style="margin-top:10px;">Color (r,g,b or red/green/blue)</label>
<input id="group-color" type="text" placeholder="255,100,50">
<label style="margin-top:10px;">Enable client colors</label>
<input id="group-client-colors" type="text" placeholder="1 or 0">
<button onclick="createGroup()">Create Group</button>
</div>
<div id="form-status"></div>
<div id="status">Not connected</div>
</div>
@@ -141,7 +154,7 @@
const body = new URLSearchParams({ username, password, color });
try {
const res = await fetch('http://localhost:8080/newuser', { method: 'POST', body });
const res = await fetch('http://localhost:8080/new/client', { method: 'POST', body });
const text = await res.text();
if (res.ok) {
setFormStatus('Registered! Now login.', 'ok');
@@ -160,11 +173,12 @@
const body = new URLSearchParams({ username, password });
try {
const res = await fetch('http://localhost:8080/login', { method: 'POST', body });
const res = await fetch('http://localhost:8080/new/token', { method: 'POST', body });
const text = await res.text();
if (res.ok) {
document.getElementById('username-input').value = username;
document.getElementById('token-input').value = text;
document.getElementById('group-token').value = text;
setFormStatus('Logged in! Token copied to Connect tab.', 'ok');
switchTab('connect');
} else {
@@ -175,6 +189,32 @@
}
}
async function createGroup() {
const token = document.getElementById('group-token').value.trim();
if (!token) { setFormStatus('Paste a token first', 'err'); return; }
const body = new URLSearchParams({ token });
const name = document.getElementById('group-name').value.trim();
if (name) body.set('name', name);
const color = document.getElementById('group-color').value.trim();
if (color) body.set('color', color);
const enableClientColors = document.getElementById('group-client-colors').value.trim();
if (enableClientColors) body.set('enableClientColors', enableClientColors);
try {
const res = await fetch('http://localhost:8080/new/group', { method: 'POST', body });
if (res.ok) {
const buf = await res.arrayBuffer();
const id = new DataView(buf).getUint32(0, false);
setFormStatus('Group created! ID: ' + id, 'ok');
} else {
setFormStatus('Error: ' + await res.text(), 'err');
}
} catch (e) {
setFormStatus('Request failed: ' + e.message, 'err');
}
}
function setStatus(text, cls) {
const el = document.getElementById('status');
el.textContent = text;