add client and groups member logic
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user