Update tamplates/verify.html

templates/verify.html

@@ -85,7 +85,7 @@
     <div class="verify-card">
         <div class="verify-icon"><i class="fas fa-envelope"></i></div>
         <h2>Verifikasi Akun</h2>
-        <p>Kami telah mengirim kode verifikasi ke</p>
+        <p>Masukkan kode verifikasi 6 digit</p>
         <div class="destination" id="destination">Memuat...</div>
 
         <div class="code-input" id="codeInputs">
@@ -98,7 +98,7 @@
         </div>
         <input type="hidden" id="userId" value="{{ user_id }}">
 
-        <button class="btn-verify" onclick="verifyCode()">
+        <button class="btn-verify" id="verifyBtn" onclick="verifyCode()">
             <i class="fas fa-check"></i> Verifikasi
         </button>
 
@@ -113,16 +113,39 @@
 </div>
 
 <script>
+    let userId = null;
     let countdownInterval = null;
     let resendCount = 0;
 
+    const urlParams = new URLSearchParams(window.location.search);
+    userId = urlParams.get('user_id');
+    
+    if (!userId) {
+        userId = sessionStorage.getItem('pending_user_id');
+    }
+
     const destination = sessionStorage.getItem('verify_destination');
-    if (destination) document.getElementById('destination').innerHTML = destination;
+    if (destination) {
+        document.getElementById('destination').innerHTML = destination;
+    }
+
+    const codeFromUrl = urlParams.get('code');
+    if (codeFromUrl && codeFromUrl.length === 6) {
+        const digits = document.querySelectorAll('.code-digit');
+        for (let i = 0; i < codeFromUrl.length; i++) {
+            if (digits[i]) digits[i].value = codeFromUrl[i];
+        }
+        setTimeout(() => {
+            verifyCode();
+        }, 500);
+    }
 
     const digits = document.querySelectorAll('.code-digit');
     digits.forEach((digit, index) => {
         digit.addEventListener('input', (e) => {
-            if (e.target.value.length === 1 && index < 5) digits[index + 1].focus();
+            if (e.target.value.length === 1 && index < 5) {
+                digits[index + 1].focus();
+            }
         });
         digit.addEventListener('keydown', (e) => {
             if (e.key === 'Backspace' && !e.target.value && index > 0) {
@@ -130,6 +153,14 @@
                 digits[index - 1].value = '';
             }
         });
+        digit.addEventListener('paste', (e) => {
+            e.preventDefault();
+            const pastedData = e.clipboardData.getData('text');
+            if (pastedData.length === 6 && /^\d+$/.test(pastedData)) {
+                digits.forEach((d, i) => { d.value = pastedData[i]; });
+                verifyCode();
+            }
+        });
     });
 
     function startCountdown(seconds = 60) {
@@ -152,6 +183,70 @@
     }
     startCountdown(60);
 
+    async function verifyCode() {
+        let code = '';
+        digits.forEach(digit => { code += digit.value; });
+
+        if (code.length !== 6) {
+            showToast('Masukkan kode 6 digit', 'error');
+            return;
+        }
+
+        const verifyBtn = document.getElementById('verifyBtn');
+        verifyBtn.disabled = true;
+        verifyBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memverifikasi...';
+
+        const result = await apiCall('/api/auth/verify', {
+            method: 'POST',
+            body: JSON.stringify({ user_id: userId, code: code })
+        });
+
+        if (result && result.success) {
+            showToast('✅ Akun berhasil diverifikasi!', 'success');
+            sessionStorage.removeItem('pending_user_id');
+            sessionStorage.removeItem('verify_destination');
+            sessionStorage.removeItem('verification_code');
+            setTimeout(() => {
+                window.location.href = '/login?verified=true';
+            }, 1500);
+        } else if (result && result.error) {
+            showToast(result.error, 'error');
+            verifyBtn.disabled = false;
+            verifyBtn.innerHTML = '<i class="fas fa-check"></i> Verifikasi';
+        } else {
+            verifyBtn.disabled = false;
+            verifyBtn.innerHTML = '<i class="fas fa-check"></i> Verifikasi';
+        }
+    }
+
+    async function resendCode(event) {
+        event.preventDefault();
+        
+        if (resendCount >= 3) {
+            showToast('Anda telah mencoba 3 kali. Hubungi admin.', 'error');
+            return;
+        }
+        
+        const resendBtn = document.getElementById('resendBtn');
+        resendBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Mengirim...';
+        
+        const result = await apiCall('/api/auth/resend-code', {
+            method: 'POST',
+            body: JSON.stringify({ user_id: userId })
+        });
+
+        if (result && result.success) {
+            showToast('Kode baru: ' + result.verification_code, 'success');
+            sessionStorage.setItem('verification_code', result.verification_code);
+            resendCount++;
+            startCountdown(60);
+        } else if (result && result.error) {
+            showToast(result.error, 'error');
+        }
+        
+        resendBtn.innerHTML = '<i class="fas fa-redo-alt"></i> Kirim ulang kode';
+    }
+
     setTimeout(() => { if (digits[0]) digits[0].focus(); }, 100);
 </script>
 <script src="{{ url_for('static', filename='js/auth.js') }}"></script>