Verifikasi Email - VSYS Tools"> <style> * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } body { background: #0d0d0d; color: #fff; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .container { background: linear-gradient( 135deg, rgba(32, 32, 32, 0.85), rgba(12, 12, 12, 0.95) ); border: 1.2px solid rgba(255, 255, 255, 0.15); border-radius: 28px; padding: 35px 25px; width: 100%; max-width: 400px; text-align: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37); backdrop-filter: blur(10px); } .icon-box { font-size: 50px; color: #78b4ff; margin-bottom: 15px; } h2 { font-size: 24px; font-weight: 700; margin-bottom: 10px; } p { color: #cdcdcd; font-size: 14px; line-height: 1.5; margin-bottom: 25px; } .btn { display: block; width: 100%; padding: 15px; border: none; border-radius: 17px; background: linear-gradient(to right, #232323, #4b4b4b); color: #fff; font-weight: bold; font-size: 15px; cursor: pointer; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: 0.3s; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .status-msg { margin-top: 15px; font-size: 13px; display: none; } .status-success { color: #64e68c; } .status-error { color: #ff6b6b; } .spinner { border: 3px solid rgba(255,255,255,0.1); width: 24px; height: 24px; border-radius: 50%; border-left-color: #78b4ff; animation: spin 1s linear infinite; margin: 0 auto 15px; display: none; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <div class="container"> <div class="icon-box" id="icon">✉</div> <h2 id="title"> Verifikasi Email </h2> <p id="desc"> Sedang memproses verifikasi email kamu... </p> <div class="spinner" id="spinner"></div> <button class="btn" id="verifyBtn" style="display:none;"> Selesaikan Verifikasi </button> <div class="status-msg" id="statusMsg"> </div> </div> <script type="module"> import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"; import { getAuth, applyActionCode } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-auth.js"; /* * FIREBASE CONFIG */ const firebaseConfig = { apiKey: "AIzaSyB91n-rZU4iI2Wm0IU2-BOyREozQCn_DUI", authDomain: "vsystools.firebaseapp.com", databaseURL: "https://vsystools-default-rtdb.asia-southeast1.firebasedatabase.app", projectId: "vsystools", storageBucket: "vsystools.firebasestorage.app", messagingSenderId: "533735840941", appId: "1:533735840941:web:835ca671630c6724aaba24", measurementId: "G-Q682EFGEDF" }; /* * INIT FIREBASE */ const app = initializeApp(firebaseConfig); const auth = getAuth(app); /* * ELEMENT */ const icon = document.getElementById("icon"); const title = document.getElementById("title"); const desc = document.getElementById("desc"); const spinner = document.getElementById("spinner"); const verifyBtn = document.getElementById("verifyBtn"); const statusMsg = document.getElementById("statusMsg"); /* * AMBIL PARAMETER FIREBASE */ const params = new URLSearchParams( window.location.search ); const mode = params.get("mode"); const oobCode = params.get("oobCode"); const apiKey = params.get("apiKey"); const continueUrl = params.get("continueUrl"); /* * STATUS */ function showStatus( text, success ) { statusMsg.textContent = text; statusMsg.className = success ? "status-msg status-success" : "status-msg status-error"; statusMsg.style.display = "block"; } /* * LOADING */ function loading() { spinner.style.display = "block"; verifyBtn.style.display = "none"; desc.textContent = "Sedang memproses verifikasi email kamu..."; } /* * SUCCESS */ function success() { spinner.style.display = "none"; icon.textContent = "✓"; icon.style.color = "#64e68c"; title.textContent = "Berhasil Diverifikasi!"; desc.textContent = "Email kamu telah berhasil diverifikasi. Kamu sekarang bisa kembali ke aplikasi."; showStatus( "Verifikasi berhasil!", true ); } /* * ERROR */ function failed(message) { spinner.style.display = "none"; icon.textContent = "✕"; icon.style.color = "#ff6b6b"; title.textContent = "Verifikasi Gagal"; desc.textContent = message; showStatus( message, false ); } /* * PROSES VERIFIKASI */ async function verifyEmail() { /* * Pastikan ini memang * email verification */ if (mode !== "verifyEmail") { failed( "Link ini bukan link verifikasi email." ); return; } /* * Pastikan oobCode ada */ if (!oobCode) { failed( "Kode verifikasi tidak ditemukan." ); return; } loading(); try { /* * INI BAGIAN PALING PENTING * * Firebase menggunakan oobCode * untuk mengubah status email * menjadi verified. */ await applyActionCode( auth, oobCode ); /* * BERHASIL */ success(); /* * Kalau aplikasi lu punya * continueUrl, lu bisa redirect * setelah berhasil. * * Untuk sekarang sengaja * tidak otomatis redirect. */ } catch (error) { console.error( "Firebase verification error:", error ); let message = "Gagal memverifikasi email."; if ( error.code === "auth/invalid-action-code" ) { message = "Link verifikasi sudah tidak berlaku atau sudah pernah digunakan."; } else if ( error.code === "auth/expired-action-code" ) { message = "Link verifikasi sudah kedaluwarsa."; } else if ( error.code === "auth/invalid-api-key" ) { message = "Konfigurasi Firebase tidak valid."; } else if ( error.code === "auth/network-request-failed" ) { message = "Koneksi internet bermasalah. Silakan coba lagi."; } failed(message); } } /* * JALANKAN */ verifyEmail(); </script> </body> </html>