#JP105 Memberi Form Login Pada Spreadsheet/Google Sheet Menggunakan Web Apps Script V2

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini

1. Persiapkan Spreadsheet yang ingin di beri form login.

2. Buatlah Lembar Kerja Apps Script.

3. Pada lembar kerja Apps Script terdapat file default yaitu Code.gs

4. Copy dan pastekan script di bawah ini ke Code.gs

Masukkan Password Untuk Melihat Script (Password ada di dalam video)

//Source Code by javabitpro.com

function doGet() {
  return HtmlService.createHtmlOutputFromFile('javabitpro')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function login(user, pass) {
  if (user === "admin" && pass === "123") { //Silahkan Ganti User dan Passwordnya
    return {status:true, message:"Login berhasil"};
  }
  return {status:false, message:"Username atau password salah"};
}

5. Silahkan sesuaikan/ganti User dan Password sesuai keinginan.

6. Buatlah file .html baru bernama javabitpro. Klik tanda Plus (+) lalu pilih HTML.

7. Copy dan pastekan script di bawah ini ke javabitpro.html

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  
  <!-- Bootstrap 5 CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <style>
    html, body {
      margin: 0;
      height: 100%;
      overflow: hidden;
    }

    iframe {
      width: 100%;
      height: 100vh;
      border: none;
    }

    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(6px);
      background: rgba(0,0,0,0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.3s ease;
    }

    .login-card {
      width: 350px;
    }
  </style>
</head>
<body>

<!-- Spreadsheet -->
<iframe src="https://docs.google.com/spreadsheets/d/ID_SPREADSHEET/edit"></iframe>

<!-- Overlay Login -->
<div id="overlay">
  <div class="card shadow login-card">
    <div class="card-body">
      <h4 class="text-center mb-3">Login</h4>

      <div id="alertBox"></div>

      <div class="mb-3">
        <input type="text" class="form-control" id="user" placeholder="Username">
      </div>

      <div class="mb-3">
        <input type="password" class="form-control" id="pass" placeholder="Password">
      </div>

      <button class="btn btn-primary w-100" onclick="doLogin()" id="loginBtn">
        <span id="btnText">Login</span>
        <span id="loadingSpinner" class="spinner-border spinner-border-sm d-none"></span>
      </button>

    </div>
  </div>
</div>

<script>

function showAlert(message, type){
  document.getElementById("alertBox").innerHTML =
    `<div class="alert alert-${type} py-2">${message}</div>`;
}

function doLogin() {

  const user = document.getElementById("user").value;
  const pass = document.getElementById("pass").value;

  if(!user || !pass){
    showAlert("Username dan password wajib diisi", "warning");
    return;
  }

  // Aktifkan loading
  document.getElementById("btnText").innerText = "Memproses...";
  document.getElementById("loadingSpinner").classList.remove("d-none");
  document.getElementById("loginBtn").disabled = true;

  google.script.run.withSuccessHandler(function(res){

    // Matikan loading
    document.getElementById("btnText").innerText = "Login";
    document.getElementById("loadingSpinner").classList.add("d-none");
    document.getElementById("loginBtn").disabled = false;

    if(res.status){
      showAlert(res.message, "success");

      setTimeout(()=>{
        document.getElementById("overlay").style.opacity = "0";
        setTimeout(()=>{
          document.getElementById("overlay").style.display = "none";
        },300);
      },800);

    }else{
      showAlert(res.message, "danger");
    }

  }).login(user, pass);
}

</script>

</body>
</html>