fix: tambah tombol Ganti untuk token Kesiswaan

This commit is contained in:
Bro
2026-07-24 18:52:48 +07:00
parent a2a41adcef
commit c35c41f7ee
+38 -7
View File
@@ -33,17 +33,27 @@
<div>
<label class="block text-sm font-medium text-gray-700 mb-1.5">Token Sinkronisasi</label>
@if($hasToken)
<div class="flex items-center gap-2">
<div class="flex items-center gap-2" id="kesiswaan-token-row">
<code class="flex-1 block bg-gray-50 border border-gray-200 rounded-lg px-3 py-2.5 text-sm font-mono text-gray-800 select-all" id="kesiswaanTokenDisplay">{{ $savedToken }}</code>
<button type="button" onclick="copyKesiswaanToken()"
class="shrink-0 px-3 py-2 text-xs font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition">
<i class="fa-regular fa-copy"></i> Salin
</button>
<button type="button" onclick="gantiKesiswaanToken()"
class="shrink-0 px-3 py-2 text-xs font-medium text-amber-600 bg-amber-50 border border-amber-200 rounded-lg hover:bg-amber-100 transition">
<i class="fa-solid fa-pen"></i> Ganti
</button>
</div>
<input type="hidden" name="token" value="{{ $savedToken }}" id="kesiswaanTokenHidden">
<div id="kesiswaan-token-edit" class="hidden">
<input type="text" name="token_new" value="{{ $savedToken }}"
class="w-full px-4 py-2.5 border border-amber-300 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition"
id="kesiswaanTokenInput">
<p class="mt-1 text-xs text-amber-600">Edit token di atas, lalu simpan form.</p>
</div>
<input type="hidden" name="token" value="{{ $savedToken }}">
<p class="mt-1.5 text-xs text-green-600 flex items-center">
<i class="fa-solid fa-check"></i>
Token tersimpan. Ganti dengan mengisi form di bawah jika diperlukan.
Token tersimpan. Klik <strong>"Ganti"</strong> untuk mengubah.
</p>
@else
<input type="password" name="token" value=""
@@ -169,14 +179,35 @@
const el = document.getElementById('kesiswaanTokenDisplay');
if (!el) return;
navigator.clipboard.writeText(el.textContent).then(() => {
const btn = el.nextElementSibling;
if (btn) {
btn.innerHTML = '<i class="fa-regular fa-check"></i> Tersalin';
setTimeout(() => { btn.innerHTML = '<i class="fa-regular fa-copy"></i> Salin'; }, 2000);
const parent = el.parentElement;
if (parent) {
const btns = parent.querySelectorAll('button');
btns.forEach(b => {
if (b.innerHTML.includes('Salin')) {
b.innerHTML = '<i class="fa-regular fa-check"></i> Tersalin';
setTimeout(() => { b.innerHTML = '<i class="fa-regular fa-copy"></i> Salin'; }, 2000);
}
});
}
});
}
function gantiKesiswaanToken() {
document.getElementById('kesiswaan-token-row').classList.add('hidden');
document.getElementById('kesiswaan-token-edit').classList.remove('hidden');
document.getElementById('kesiswaanTokenHidden').disabled = true;
}
// On form submit: copy token_new to hidden token field
document.addEventListener('submit', function(e) {
const editDiv = document.getElementById('kesiswaan-token-edit');
if (editDiv && !editDiv.classList.contains('hidden')) {
const newToken = document.getElementById('kesiswaanTokenInput').value;
document.getElementById('kesiswaanTokenHidden').value = newToken;
document.getElementById('kesiswaanTokenHidden').disabled = false;
}
});
document.addEventListener('DOMContentLoaded', function () {
const testBtn = document.getElementById('test-kesiswaan-btn');
const st = document.getElementById('kesiswaan-status');