refactor: SMTP form and health check into modals with toolbar buttons

This commit is contained in:
mirivlad 2026-06-02 00:03:35 +08:00
parent 015c8fdec7
commit 04af88940b
1 changed files with 29 additions and 14 deletions

View File

@ -1337,8 +1337,6 @@ a{color:#6366f1}
h1{border-bottom:1px solid #2a2a3c;padding-bottom:12px}
h2{margin-top:24px;font-size:16px}
.stat{background:#1a1a28;border:1px solid #2a2a3c;padding:12px 16px;border-radius:8px;margin:8px 0}
.row{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px}
.col{flex:1;min-width:280px;max-width:50%}
table{width:100%;border-collapse:collapse;margin-top:8px}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid #2a2a3c}
th{font-size:12px;color:#888;text-transform:uppercase}
@ -1350,23 +1348,29 @@ th{font-size:12px;color:#888;text-transform:uppercase}
.btn-danger{color:#ff6b6b;border-color:#4a2222}
.btn-danger:hover{background:#3a2222}
.copy-btn{padding:2px 8px;font-size:11px;margin-left:6px}
input,select{font-family:inherit;font-size:14px;padding:8px 12px;border:1px solid #2a2a3c;background:#13131f;color:#e4e4ef;border-radius:6px;margin:0;box-sizing:border-box}
input:focus,select:focus{outline:none;border-color:#6366f1}
form{margin-top:8px}
input{font-family:inherit;font-size:14px;padding:8px 12px;border:1px solid #2a2a3c;background:#13131f;color:#e4e4ef;border-radius:6px;margin:0;box-sizing:border-box}
input:focus{outline:none;border-color:#6366f1}
.form-row{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.form-row label{font-size:12px;color:#888;min-width:80px;flex-shrink:0}
.form-row input{flex:1}
.section{background:#1a1a28;border:1px solid #2a2a3c;border-radius:8px;padding:16px;margin-top:12px}
.toolbar{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:100}
.modal{background:#1a1a28;border:1px solid #2a2a3c;border-radius:12px;padding:24px;width:420px;max-width:90vw;position:relative;max-height:80vh;overflow-y:auto}
.modal h2{margin-top:0}
.modal-close{position:absolute;top:10px;right:14px;font-size:20px;cursor:pointer;background:none;border:none;color:#888}
.modal-close:hover{color:#e4e4ef}
pre{background:#13131f;border:1px solid #2a2a3c;border-radius:8px;padding:12px;overflow-x:auto;white-space:pre-wrap}
</style>
</head><body>
<h1>Verstak Sync Server</h1>
<div class="row">
<div class="stat"><strong>Устройств:</strong> <span id="dev-count">0</span></div>
<div class="stat"><strong>Операций:</strong> <span id="op-count">0</span></div>
<div class="toolbar">
<button class="btn btn-primary" onclick="openSMTP()">Настройка SMTP</button>
<button class="btn" onclick="openHealth()">Health check</button>
</div>
<div class="row">
<div class="col">
<h2>API-ключи</h2>
<div id="keys"></div>
<script>
@ -1389,17 +1393,22 @@ function copyKey(key,btn){
})
}
function delKey(id){if(confirm('Удалить ключ?'))fetch('/admin/api/keys/'+id,{method:'DELETE'}).then(()=>location.reload())}
function openSMTP(){document.getElementById('smtp-modal').style.display='flex'}
function closeSMTP(e){if(!e||e.target.id==='smtp-modal')document.getElementById('smtp-modal').style.display='none'}
function openHealth(){var m=document.getElementById('health-modal');m.style.display='flex';document.getElementById('health-result').textContent='Загрузка...';fetch('/api/v1/health').then(function(r){return r.text()}).then(function(t){document.getElementById('health-result').textContent=t})}
function closeHealth(e){if(!e||e.target.id==='health-modal')document.getElementById('health-modal').style.display='none'}
</script>
<h3>Новый ключ</h3>
<form action="/admin/api/keys" method="POST" style="display:flex;gap:8px">
<input name="name" placeholder="Название устройства" required style="flex:1">
<button class="btn btn-primary">Создать</button>
</form>
</div>
<div class="col">
<div id="smtp-modal" class="modal-overlay" style="display:none" onclick="closeSMTP(event)">
<div class="modal">
<button class="modal-close" onclick="closeSMTP()">&times;</button>
<h2>SMTP (для писем)</h2>
<div class="section">
<form action="/admin/api/smtp" method="POST">
<div class="form-row"><label>Сервер</label><input name="smtp_host" value="` + smtpHost + `" placeholder="smtp.example.com"></div>
<div class="form-row"><label>Порт</label><input name="smtp_port" value="` + smtpPort + `" placeholder="587"></div>
@ -1407,13 +1416,19 @@ function delKey(id){if(confirm('Удалить ключ?'))fetch('/admin/api/key
<div class="form-row"><label>Пароль</label><input type="password" name="smtp_pass" placeholder="••••••••"></div>
<div class="form-row"><label>От кого</label><input name="smtp_from" value="` + smtpFrom + `" placeholder="noreply@example.com"></div>
<div class="form-row"><label>URL сервера</label><input name="server_url" value="` + srvURL + `" placeholder="https://example.com:47732"></div>
<div style="margin-top:8px"><button class="btn btn-primary">Сохранить SMTP</button></div>
<div style="margin-top:12px"><button class="btn btn-primary">Сохранить SMTP</button></div>
</form>
</div>
</div>
<div id="health-modal" class="modal-overlay" style="display:none" onclick="closeHealth(event)">
<div class="modal">
<button class="modal-close" onclick="closeHealth()">&times;</button>
<h2>Health check</h2>
<pre id="health-result">Загрузка...</pre>
</div>
</div>
<p style="margin-top:16px"><a href="/api/v1/health">Health check</a></p>
</body></html>`)
w.Write([]byte(html))
}