Adminator/geograsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0d765961afd2bd2072389bc73c21c1e506dcd2e2
geograsim/App/admin-accounts.html
T

172 lines
9.2 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeoGraSim — Admin-Accounts</title>
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="stylesheet" href="assets/fonts/inter.css">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#f7f6f3;min-height:100vh}
.topbar{background:#fff;padding:.6rem 1.2rem;display:flex;align-items:center;gap:.8rem;border-bottom:1px solid rgba(0,0,0,.06);flex-wrap:wrap}
.topbar h1{font-size:.95rem;font-weight:800;color:#4a7c8a;flex:1;display:flex;align-items:center;gap:.5rem}
.topbar h1 img{height:28px}
.btn-sm{padding:.3rem .6rem;border:1px solid rgba(0,0,0,.08);border-radius:6px;background:#fff;font-size:.68rem;font-weight:600;cursor:pointer;color:#4a4a4a;text-decoration:none}
.btn-sm:hover{background:#dae8ec;color:#4a7c8a}
.btn-sm.active{background:#4a7c8a;color:#fff;border-color:#4a7c8a}
.wrap{max-width:900px;margin:1rem auto;padding:0 1rem}
.card{background:#fff;border-radius:10px;padding:1rem;box-shadow:0 1px 4px rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.04);margin-bottom:1rem}
.card-h{font-size:.62rem;font-weight:700;color:#4a7c8a;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.6rem}
label{display:block;font-size:.65rem;font-weight:600;color:#4a4a4a;margin-bottom:.15rem}
input{width:100%;padding:.45rem .6rem;border:1.5px solid rgba(0,0,0,.1);border-radius:6px;font-size:.8rem;font-family:inherit;outline:none;transition:border .15s}
input:focus{border-color:#4a7c8a}
.btn{padding:.45rem .9rem;border:none;border-radius:6px;background:#4a7c8a;color:#fff;font-size:.75rem;font-weight:700;cursor:pointer}
.btn:hover{background:#3a6470}
.btn-outline{background:transparent;color:#4a7c8a;border:1.5px solid #4a7c8a}
.btn-danger{background:transparent;color:#c07a6b;border:1.5px solid #e0b5ac}
.btn-danger:hover{background:#f2ddd8}
.btn-xs{padding:.28rem .5rem;font-size:.66rem;border-radius:5px;font-weight:700;cursor:pointer}
table{width:100%;border-collapse:collapse;font-size:.74rem}
th{background:#f7f6f3;padding:.4rem .5rem;text-align:left;font-weight:600;font-size:.6rem;color:#8a8a8a;text-transform:uppercase;letter-spacing:.04em}
td{padding:.45rem .5rem;border-bottom:1px solid rgba(0,0,0,.04);vertical-align:middle}
td input{padding:.35rem .5rem;font-size:.74rem}
.uname{font-weight:800;color:#1f4e5a}
.self-badge{display:inline-block;margin-left:.35rem;font-size:.58rem;font-weight:700;color:#4a7c8a;background:#dae8ec;border-radius:99px;padding:.05rem .4rem;vertical-align:middle}
.row-actions{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.grid-form{display:grid;grid-template-columns:1fr 1.4fr 1fr auto;gap:.6rem;align-items:end}
@media(max-width:640px){.grid-form{grid-template-columns:1fr}}
.muted{color:#8a8a8a;font-size:.68rem}
.msg{font-size:.72rem;padding:.45rem .6rem;border-radius:6px;margin-top:.6rem;display:none}
.msg.ok{display:block;background:#dceadd;color:#5a8a5e}
.msg.err{display:block;background:#f2ddd8;color:#c07a6b}
</style>
</head>
<body>
<div class="topbar">
<h1><img src="assets/img/geograsim_t.svg" alt="GeoGraSim"> Admin-Accounts</h1>
<a href="admin-licenses.html" class="btn-sm">🎫 Lizenzen</a>
<a href="admin-modules.html" class="btn-sm">🧩 Module</a>
<a href="admin-levels.html" class="btn-sm">🎮 Level</a>
<a href="admin-styleguide.html" class="btn-sm">🎨 Styleguide</a>
<a href="admin-accounts.html" class="btn-sm active">👤 Admins</a>
<a href="admin.html" class="btn-sm" onclick="doLogout(event)">Logout</a>
</div>
<div class="wrap">
<div class="card">
<div class="card-h">Neuen Admin-Account anlegen</div>
<div class="grid-form">
<div>
<label>Benutzername</label>
<input type="text" id="c-user" autocomplete="off" placeholder="z. B. maria">
</div>
<div>
<label>2FA-E-Mail (PIN-Empfang)</label>
<input type="email" id="c-email" autocomplete="off" placeholder="name@schule.at">
</div>
<div>
<label>Passwort (min. 10 Zeichen)</label>
<input type="text" id="c-pass" autocomplete="new-password" placeholder="Passwort">
</div>
<button class="btn" onclick="createAdmin()">Anlegen</button>
</div>
<div class="muted" style="margin-top:.5rem">Der 4-stellige Login-PIN wird bei jeder Anmeldung an die hinterlegte 2FA-E-Mail geschickt.</div>
<div class="msg" id="create-msg"></div>
</div>
<div class="card">
<div class="card-h">Bestehende Admins</div>
<div id="admin-table"></div>
<div class="msg" id="list-msg"></div>
</div>
</div>
<script>
var BASE = (window.__GGS__?.baseUrl) || '';
if (!BASE) { var p = location.pathname, i = p.indexOf('/geograsim'); if (i !== -1) { var rest = p.substring(i + '/geograsim'.length); BASE = rest.indexOf('/App/') === 0 ? p.substring(0, i) + '/geograsim/App' : p.substring(0, i) + '/geograsim'; } }
async function api(endpoint, data) {
var r = await fetch(BASE + '/api/' + endpoint, {
method:'POST', headers:{'Content-Type':'application/json'}, credentials:'same-origin',
body: JSON.stringify(data)
});
return await r.json();
}
function esc(s){ return String(s==null?'':s).replace(/[&<>"']/g, function(c){ return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]; }); }
function showMsg(id, text, type){ var m=document.getElementById(id); m.textContent=text; m.className='msg '+type; }
async function loadAdmins() {
var r = await api('admin-accounts', {action:'list'});
if (r.error) { showMsg('list-msg', r.error, 'err'); return; }
var rows = r.admins || [];
var html = '<table><tr><th>Benutzername</th><th>2FA-E-Mail</th><th>Angelegt</th><th style="text-align:right">Aktionen</th></tr>';
rows.forEach(function(a){
var created = (a.created_at || '').replace('T',' ').substring(0,16);
html += '<tr data-id="'+a.id+'">';
html += '<td><span class="uname">'+esc(a.username)+'</span>'+(a.is_self?'<span class="self-badge">du</span>':'')+'</td>';
html += '<td><input type="email" class="edit-email" value="'+esc(a.email_2fa)+'"></td>';
html += '<td class="muted">'+esc(created)+'</td>';
html += '<td><div class="row-actions">'
+ '<button class="btn-xs btn-outline" onclick="saveEmail('+a.id+')">💾 Mail</button>'
+ '<button class="btn-xs btn-outline" onclick="setPassword('+a.id+',\''+esc(a.username)+'\')">🔑 Passwort</button>'
+ '<button class="btn-xs btn-danger" '+(a.is_self?'disabled title="Eigener Account"':'onclick="delAdmin('+a.id+',\''+esc(a.username)+'\')"')+'>🗑</button>'
+ '</div></td>';
html += '</tr>';
});
html += '</table>';
document.getElementById('admin-table').innerHTML = html;
}
async function createAdmin() {
var username = document.getElementById('c-user').value.trim();
var email = document.getElementById('c-email').value.trim();
var password = document.getElementById('c-pass').value;
if (!username || !email || !password) { showMsg('create-msg','Bitte alle Felder ausfüllen.','err'); return; }
var r = await api('admin-accounts', {action:'create', username:username, email_2fa:email, password:password});
if (r.error) { showMsg('create-msg', r.error, 'err'); return; }
showMsg('create-msg', r.message || 'Angelegt.', 'ok');
document.getElementById('c-user').value=''; document.getElementById('c-email').value=''; document.getElementById('c-pass').value='';
loadAdmins();
}
async function saveEmail(id) {
var row = document.querySelector('tr[data-id="'+id+'"]');
var email = row.querySelector('.edit-email').value.trim();
var r = await api('admin-accounts', {action:'update', id:id, email_2fa:email});
showMsg('list-msg', r.error || (r.message||'Gespeichert.'), r.error?'err':'ok');
if (!r.error) loadAdmins();
}
async function setPassword(id, username) {
var pw = prompt('Neues Passwort für „'+username+'" (min. 10 Zeichen):');
if (pw === null) return;
if (pw.length < 10) { showMsg('list-msg','Passwort muss mindestens 10 Zeichen haben.','err'); return; }
var r = await api('admin-accounts', {action:'update', id:id, password:pw});
showMsg('list-msg', r.error || (r.message||'Passwort gesetzt.'), r.error?'err':'ok');
}
async function delAdmin(id, username) {
if (!confirm('Admin-Account „'+username+'" wirklich löschen?')) return;
var r = await api('admin-accounts', {action:'delete', id:id});
showMsg('list-msg', r.error || (r.message||'Gelöscht.'), r.error?'err':'ok');
if (!r.error) loadAdmins();
}
async function doLogout(e) {
e.preventDefault();
await fetch(BASE + '/api/admin', {method:'POST', headers:{'Content-Type':'application/json'}, credentials:'same-origin', body:JSON.stringify({action:'logout'})});
location.href = 'admin.html';
}
// Admin-Auth prüfen (2FA erforderlich)
fetch(BASE + '/api/admin', {method:'POST', headers:{'Content-Type':'application/json'}, credentials:'same-origin', body:JSON.stringify({action:'status'})})
.then(function(r){return r.json()})
.then(function(r){ if (!r.authenticated) { location.href = 'admin.html'; return; } loadAdmins(); });
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink