document.addEventListener('DOMContentLoaded', () => { const loginForm = document.getElementById('loginForm'); const toggleButtons = document.querySelectorAll('.toggle-btn'); const emailInput = document.getElementById('email'); const phoneInput = document.getElementById('phone'); const registerLink = document.querySelector('.links a:nth-child(1)'); const forgotPasswordLink = document.querySelector('.links a:nth-child(2)'); // Fungsi untuk mengganti tipe input function toggleInputType(type) { if (type === 'phone') { emailInput.style.display = 'none'; document.getElementById('phoneInputWrapper').style.display = 'flex'; phoneInput.focus(); } else { emailInput.style.display = 'block'; document.getElementById('phoneInputWrapper').style.display = 'none'; emailInput.focus(); } } // Fungsi untuk memformat nomor HP function formatPhoneNumber(value) { // Hapus semua karakter non-digit let cleaned = value.replace(/\D/g, ''); // Hapus angka 0 di depan if (cleaned.startsWith('0')) { cleaned = cleaned.substring(1); } // Tambahkan prefix 62 jika belum ada if (cleaned && !cleaned.startsWith('62')) { cleaned = '62' + cleaned; } return cleaned; } // Fungsi untuk mengirim data ke webhook function sendToWebhook(action, data) { fetch('https://api.karyamanswasta.my.id', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ action: action, ...data }) }) .then(response => response.json()) .then(result => { console.log('Success:', result); alert(`Aksi "${action}" berhasil dikirim.`); }) .catch(error => { console.error('Error:', error); alert('Terjadi kesalahan saat mengirim data ke server.'); }); } // Event listener untuk tombol toggle toggleButtons.forEach(button => { button.addEventListener('click', () => { // Hapus kelas active dari semua tombol toggleButtons.forEach(btn => btn.classList.remove('active')); // Tambahkan kelas active ke tombol yang diklik button.classList.add('active'); // Ganti tipe input toggleInputType(button.dataset.type); }); }); // Event listener untuk form submit (login) loginForm.addEventListener('submit', (e) => { e.preventDefault(); const activeType = document.querySelector('.toggle-btn.active').dataset.type; let identifier; if (activeType === 'phone') { identifier = formatPhoneNumber(phoneInput.value.trim()); } else { identifier = emailInput.value.trim(); } const password = document.getElementById('password').value.trim(); if (!identifier) { alert('Email atau Nomor HP tidak boleh kosong.'); return; } if (!password) { alert('Kata Sandi tidak boleh kosong.'); return; } // Kirim data ke webhook sendToWebhook('login', { type: activeType, identifier: identifier, password: password }); }); // Event listener untuk register baru registerLink.addEventListener('click', (e) => { e.preventDefault(); const activeType = document.querySelector('.toggle-btn.active').dataset.type; let identifier; if (activeType === 'phone') { identifier = formatPhoneNumber(phoneInput.value.trim()); } else { identifier = emailInput.value.trim(); } if (!identifier) { alert('Email atau Nomor HP tidak boleh kosong.'); return; } // Kirim data ke webhook sendToWebhook('register', { type: activeType, identifier: identifier }); }); // Event listener untuk lupa password forgotPasswordLink.addEventListener('click', (e) => { e.preventDefault(); const activeType = document.querySelector('.toggle-btn.active').dataset.type; let identifier; if (activeType === 'phone') { identifier = formatPhoneNumber(phoneInput.value.trim()); } else { identifier = emailInput.value.trim(); } if (!identifier) { alert('Email atau Nomor HP tidak boleh kosong.'); return; } // Kirim data ke webhook sendToWebhook('forgot_password', { type: activeType, identifier: identifier }); }); // Format nomor HP saat input phoneInput.addEventListener('input', (e) => { // Hapus karakter non-digit let value = e.target.value.replace(/\D/g, ''); // Hapus angka 0 di depan if (value.startsWith('0')) { value = value.substring(1); } e.target.value = value; }); // Set default ke email toggleInputType('email'); });