Add login page with email/phone toggle and form validation

- Created login page with email/number toggle functionality - Added input validation and phone number formatting - Implemented background animation and responsive design - Set up webhook integration for form submissions
2025-07-12 09:49:12 +07:00
parent 5ae81e4ecc
commit 28b4d09993
3 changed files with 494 additions and 0 deletions
--- a/login-page/script.js
+++ b/login-page/script.js
@@ -0,0 +1,175 @@
+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');
+});