(function () {
var toggle = document.getElementById(‘hs-login-toggle’);
var panel = document.getElementById(‘hs-login-panel’);
var overlay = document.getElementById(‘hs-login-overlay’);
var togglePass = document.getElementById(‘hs-toggle-pass’);
var form = document.getElementById(‘hs-login-form’);
var passInput = document.getElementById(‘hs-password’);
var userInput = document.getElementById(‘hs-username’);
var eyeIcon = document.getElementById(‘hs-eye-icon’);
var errorBox = document.getElementById(‘hs-login-error’);
var submitBtn = document.getElementById(‘hs-submit-btn’);
var submitLabel = document.getElementById(‘hs-submit-label’);
var isOpen = false;
if (!toggle || !panel || !overlay || !form) return;
// ============================================
// KONFIGURASI BACKEND — GANTI SESUAI ENDPOINT LO
// ============================================
var LOGIN_ENDPOINT = ‘/wp-json/hazkun/v1/login’; // <- ganti ke endpoint lo
var REDIRECT_AFTER_LOGIN = '/dashboard/'; // <- redirect setelah sukses
// ============================================
var EYE_OPEN = '’;
var EYE_OFF = ”;
function showError(msg) {
errorBox.textContent = msg;
errorBox.classList.add(‘show’);
}
function clearError() {
errorBox.textContent = ”;
errorBox.classList.remove(‘show’);
}
function setLoading(loading) {
submitBtn.disabled = loading;
submitLabel.textContent = loading ? ‘MEMPROSES…’ : ‘LOG IN’;
}
function openPanel() {
isOpen = true;
panel.style.display = ‘block’;
overlay.style.display = ‘block’;
toggle.style.background = ‘#dbb668’;
requestAnimationFrame(function () {
panel.style.opacity = ‘1’;
panel.style.transform = ‘translateY(0) scale(1)’;
});
setTimeout(function(){ if (userInput) userInput.focus(); }, 280);
}
function closePanel() {
isOpen = false;
panel.style.opacity = ‘0’;
panel.style.transform = ‘translateY(-8px) scale(.98)’;
toggle.style.background = ‘#c9a24b’;
setTimeout(function () {
if (!isOpen) {
panel.style.display = ‘none’;
overlay.style.display = ‘none’;
}
}, 250);
}
toggle.addEventListener(‘click’, function (e) {
e.stopPropagation();
if (isOpen) { closePanel(); } else { openPanel(); }
});
overlay.addEventListener(‘click’, closePanel);
document.addEventListener(‘keydown’, function (e) {
if (e.key === ‘Escape’ && isOpen) closePanel();
});
// Toggle password visibility
if (togglePass && passInput && eyeIcon) {
togglePass.addEventListener(‘click’, function () {
if (passInput.type === ‘password’) {
passInput.type = ‘text’;
eyeIcon.innerHTML = EYE_OFF;
togglePass.setAttribute(‘aria-label’, ‘Sembunyikan password’);
} else {
passInput.type = ‘password’;
eyeIcon.innerHTML = EYE_OPEN;
togglePass.setAttribute(‘aria-label’, ‘Tampilkan password’);
}
});
}
// Clear error on input
[userInput, passInput].forEach(function(el){
if (el) el.addEventListener(‘input’, clearError);
});
// Form submit handler
form.addEventListener(‘submit’, function (e) {
e.preventDefault();
clearError();
var username = userInput.value.trim();
var password = passInput.value;
var remember = form.remember.checked;
if (!username || !password) {
showError(‘Username dan password wajib diisi.’);
return;
}
if (password.length < 6) {
showError('Password minimal 6 karakter.');
return;
}
setLoading(true);
fetch(LOGIN_ENDPOINT, {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
credentials: 'same-origin',
body: JSON.stringify({ username: username, password: password, remember: remember })
})
.then(function(res){
return res.json().then(function(data){ return { ok: res.ok, status: res.status, data: data }; });
})
.then(function(r){
setLoading(false);
if (r.ok && r.data && r.data.success) {
window.location.href = (r.data.redirect || REDIRECT_AFTER_LOGIN);
} else {
showError((r.data && r.data.message) || 'Username atau password salah.');
}
})
.catch(function(err){
setLoading(false);
showError('Terjadi kesalahan koneksi. Coba lagi.');
console.error('[hs-login]', err);
});
});
// Prevent panel click from closing
panel.addEventListener('click', function (e) {
e.stopPropagation();
});
})();
This is an example of a page. Unlike posts, which are displayed on your blog’s front page in the order they’re published, pages are better suited for more timeless content that you want to be easily accessible, like your About or Contact information. Click the Edit link to make changes to this page or add another page.
Hazkun studio 