demo-mayagen/login-page/script.js

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');
});