Memasang Fitur Login Authentication Firebase di Blogger

<style>
/* CSS LOGIN-LOGOUT FIREBASE AUTHENTICATION BY IGNELIUS.COM */
.overflay-form, #overlay-form, #reset_password_form {
  display: none;
  position: fixed;
}
.overlay-form, #overlay-form {
  background-color:rgba(0,0,0,.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#reset_password_form {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 90%;
}
form#login_form, #reset_password_form {
  width: 100%;
  height: auto;
  margin: 1rem auto;
  border-radius: 7px;
  border: 1px solid #ccc;
  background: #f2f2f2;
  padding: 1rem 1.25rem;
  z-index: 4;
}
form#login_form input, #reset_email {
  width: 100%;
  padding: 1rem 1.25rem;
  margin: 10px auto;
  border-radius: 7px;
  border: 1px solid #ccc;
  background: #f2f2f2;
}
button.center {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
  margin: 10px auto;
}
.round {
  border-radius: 7px;
}
#reset-pw {
  font-size: 12px;
  margin: 10px 0;
}
.igneliusAlert.success {
  background-color: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}
.igneliusAlert.error {
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}
.igneliusAlert {
  display: none;
  position: fixed;
  top: 3.5rem;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  padding: 1rem 1.25rem;
  align-items: center;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 7px;
  background-color: #f2f2f2;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 9;
}
</style>

<script>
/* SCRIPT LOGIN-LOGOUT FIREBASE AUTHENTICATION BY IGNELIUS.COM */
let igneliusLogin = {
  alert: {
    invalidMail: "Masukkan email dan password terlebih dulu!",
    invalidPW: "Harap masukkan password terlebih dulu!",
    errorPW: "Password tidak sesuai!",
    emailNotVerified: "Email belum terverifikasi. Silakan verifikasi email Anda terlebih dahulu.",
    loginSukses: "Berhasil login!",
    loginError: "Login gagal",
    invalidResetEmail: "Harap isi alamat email terlebih dahulu.",
    notRegister: "Alamat email tidak terdaftar. Silakan daftar terlebih dahulu.",
    resetSukses: "Permintaan reset password berhasil dikirim. Silakan cek email kamu."
  }
};

const firebaseConfig = {
  /* GANTI BAGIAN FIREBASE CONFIG INI DENGAN SCRIPT FIREBASE CONFIG KAMU */
};

const app = firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const database = firebase.database();

const loginForm = document.getElementById('login_form');
const exclusiveContent = document.getElementById('exclusive_content');

// Periksa apakah ada user yang tersimpan di localStorage
const savedUser = localStorage.getItem('loggedInUser');
if (savedUser) {
  const user = JSON.parse(savedUser);
  loginForm.style.display = 'none';
  displayExclusiveContent(user.uid);
}

function displayExclusiveContent(uid) {
  const usersRef = firebase.database().ref('users');
  usersRef.child(uid).once('value')
    .then(snapshot => {
      const userData = snapshot.val();
      if (userData) {
        const exclusiveContentHTML = `
          <h2>Selamat Datang, ${userData.name || 'Member'}!</h2>
          <p>Konten eksklusif hanya untuk kamu...</p><button id="logout">Logout</button>`; // Ganti bagian ini dengan konten HTML yang ingin ditampilkan setelah user login
        exclusiveContent.innerHTML = exclusiveContentHTML;
        exclusiveContent.style.display = 'block';
        loginForm.style.display = 'none';
      } else {
        showNotification('Data user tidak ditemukan.', 'error');
      }
    })
    .catch(error => {
      showNotification('Terjadi kesalahan saat memuat data user.', 'error');
    });
}

function showNotification(message, className) {
  const notification = document.querySelector('.igneliusAlert');
  notification.textContent = message;
  notification.className = `igneliusAlert ${className}`;
  notification.style.display = 'block';

  setTimeout(() => {
    notification.style.display = 'none';
  }, 5000);
}

// login button
function loginUser() {
  const email = document.getElementById("login_email").value;
  const password = document.getElementById("login_password").value;
  firebase.auth().signInWithEmailAndPassword(email, password)
    .then((userCredential) => {
      const user = userCredential.user;

      if (user.emailVerified) {
        showNotification("Login berhasil!", 'success');
        localStorage.setItem('loggedInUser', JSON.stringify(user));

        displayExclusiveContent(user.uid);
      } else {
        showNotification("Email belum diverifikasi. Mohon periksa email kamu.", 'error');
      }
    })
    .catch((error) => {
      let errorMessage = "Terjadi kesalahan saat login.";

      switch (error.code) {
        case 'auth/invalid-email':
          errorMessage = "Email tidak valid. Periksa kembali email kamu.";
          break;
        case 'auth/wrong-password':
          errorMessage = "Password salah. Mohon periksa kembali password kamu.";
          break;
        case 'auth/user-not-found':
          errorMessage = "Email tidak terdaftar. Silakan daftar terlebih dahulu.";
          break;
        case 'auth/internal-error':
          errorMessage = "Terjadi kesalahan internal. Periksa kembali data yang dimasukkan.";
          break;
        default:
          errorMessage = error.message;
      }
      showNotification(errorMessage, 'error');
    });
}

document.getElementById("login").addEventListener("click", loginUser);

// logout button
function logoutUser() {
  firebase.auth().signOut()
    .then(() => {
      // Hapus data user dari localStorage
      localStorage.removeItem('loggedInUser');

      // Tampilkan pesan logout berhasil
      showNotification('Logout berhasil. Sampai jumpa!', 'success');

      // Sembunyikan konten eksklusif dan tampilkan form login
      exclusiveContent.style.display = 'none';
      loginForm.style.display = 'block';

      // Opsional: redirect ke halaman login
      // window.location.href = '/p/login.html';
    })
    .catch((error) => {
      showNotification('Terjadi kesalahan saat logout. Coba lagi.', 'error');
    });
}

// Tambahkan event listener pada tombol logout
document.getElementById('logout').addEventListener('click', logoutUser);

// reset password
function resetPassword() {
  var resetEmail = document.getElementById("reset_email").value;

  if (!resetEmail) {
    showNotification(igneliusLogin.alert.invalidResetEmail, 'error');
    return;
  }

  const userRef = firebase.database().ref('users');
  userRef.orderByChild('email').equalTo(resetEmail).once('value')
    .then(snapshot => {
      if (snapshot.exists()) {
        firebase.auth().sendPasswordResetEmail(resetEmail)
          .then(() => {
            showNotification(igneliusLogin.alert.resetSukses, 'success');
            document.getElementById("reset_password_form").style.display = 'none';
            document.getElementById("overlay-form").style.display = 'none';
          })
          .catch((error) => {
            const errorMessage = error.message || "Gagal mengirim permintaan reset password. Silakan coba lagi.";
            igneliusLogin.console.error(errorMessage);
            showNotification(errorMessage, 'error');
          });
      } else {
        showNotification(igneliusLogin.alert.notRegister, 'error');
      }
    })
    .catch((error) => {
      const errorMessage = "Terjadi kesalahan saat memeriksa email: " + error.message;
      igneliusLogin.console.error(errorMessage);
      showNotification(errorMessage, 'error');
    });
}

function showLupaPW() {
  var form = document.getElementById("reset_password_form");
  var overlay = document.getElementById("overlay-form");

  form.style.display = 'block';
  overlay.style.display = 'block';
}

document.getElementById("reset_password").addEventListener("click", resetPassword);
document.getElementById("forgot_password_link").addEventListener("click", showLupaPW);

function showPassword() {
  var e = document.getElementById("login_password");
  "password" === e.type ? e.type = "text" : e.type = "password";
}

function tutupForm() {
  document.getElementById("overlay-form").style.display = "none";
  document.getElementById("reset_password_form").style.display = "none";
}
</script>