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 savedUser = localStorage.getItem('loggedInUser');
const loginForm = document.getElementById('login_form');
const exclusiveContent = document.getElementById('exclusive_content');

if (savedUser) {
  const user = JSON.parse(savedUser);
  loginForm.style.display = 'none';
  exclusiveContent.style.display = 'block';

  displayExclusiveContent(user.uid);
}

function displayExclusiveContent(uid) {
  const usersRef = database.ref('users');
  usersRef.child(uid).once('value')
    .then(snapshot => {
      const userData = snapshot.val();
      const exclusiveContentHTML = `<p>Konten khusus member setelah login...</p>`;
      exclusiveContent.innerHTML = exclusiveContentHTML;
      exclusiveContent.style.display = 'block';
      loginForm.style.display = 'none';
    })
    .catch(error => {
      console.error('Error fetching user data:', 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);
}

function loginUser() {
  var email = document.getElementById("login_email").value;
  var password = document.getElementById("login_password").value;

  firebase.auth().signInWithEmailAndPassword(email, password)
    .then((userCredential) => {
      const user = userCredential.user;

      if (user.emailVerified) {
        igneliusLogin.console.log(user);
        showNotification(igneliusLogin.alert.loginSukses, 'success');
        localStorage.setItem('loggedInUser', JSON.stringify(user));

        displayExclusiveContent(user.uid);
      } else {
        showNotification(igneliusLogin.alert.emailNotVerified, 'error');
      }
    })
    .catch((error) => {
      let errorMessage = error.message;

      if (error.code === 'auth/invalid-email') {
        errorMessage = igneliusLogin.alert.invalidMail || "Email tidak valid.";
      } else if (error.code === 'auth/wrong-password') {
        errorMessage = "Password salah. Mohon periksa kembali password kamu.";
      } else if (error.code === 'auth/user-not-found') {
        errorMessage = "Email tidak terdaftar. Silakan daftar terlebih dahulu.";
      } else if (error.code === 'auth/internal-error') {
        if (errorMessage && errorMessage.includes('password is required')) {
          errorMessage = igneliusLogin.alert.invalidPW || "Mohon masukkan password yang sesuai.";
        } else {
          errorMessage = igneliusLogin.alert.errorPw || "Password yang kamu masukkan tidak sesuai. Periksa kembali password.";
        }
      } else {
        errorMessage = igneliusLogin.alert.loginError || "Terjadi kesalahan saat login.";
      }
      showNotification(igneliusLogin.alert.loginError, 'error');
    });
}

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

// 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>