Update assets/js/scripts.js

Fixing NIK and Add Function Change Endppoint Form

assets/js/scripts.js

@@ -1,23 +1,109 @@
-// Toggle NIK
+// Feature: Toggle NIK
 $("#jenis-nasabah").on("change", function () {
-  const jenis = parseInt($(this).val());
+  const jenisNasabah = parseInt($(this).val());
   const nik = $("#nik").parent();
 
-  if (jenis == 0) {
+  // Check value of jenis nasabah
+  if (jenisNasabah == 0) {
     nik.removeClass("d-none").addClass("fade-in");
     $("#nik").attr("disabled", false);
+
+    nik.on("animationend", function () {
+      nik.removeClass("fade-in");
+      nik.off("animationend");
+    });
   } else {
     nik.addClass("fade-out");
+    $("#nik").attr("disabled", true);
 
     nik.on("animationend", function () {
       nik.addClass("d-none").removeClass("fade-out");
-      $("#nik").attr("disabled", true);
       nik.off("animationend");
     });
   }
 });
 
-// Toggle Password
+// Feature: Input NIK hanya nomor dan tidak boleh lebih dari 16 karakter
+$("#nik").on("input", function () {
+  // Menghapus semua karakter yang bukan angka
+  $(this).val($(this).val().replace(/\D/g, ""));
+
+  // Memastikan panjang input tidak melebihi 16 karakter
+  if ($(this).val().length > 16) {
+    $(this).val($(this).val().slice(0, 16));
+  }
+});
+
+// Feature: Toggle jenis Akun
+$("#jenisAkun").on("click", function () {
+  const teksJenis = $("#text-jenis-akun");
+  const deskripsiJenis = $("#deskripsi-jenis-akun");
+  const labelNama = $("#label-nama");
+  const jenisNasabah = $("#jenis-nasabah").parent();
+  const jenisNasabahValue = $("#jenis-nasabah").val();
+  const jenisBankSampah = $("#jenis-bank-sampah").parent();
+  const nik = $("#nik").parent();
+  const isBankSampah = $(this).is(":checked");
+
+  if (isBankSampah) {
+    // Action for Bank Sampah
+    teksJenis.text("Bank Sampah");
+    deskripsiJenis.text(
+      "Daftarkan Bank Sampah anda sekarang untuk lingkungan yang lebih indah 🌳"
+    );
+    labelNama.text("Nama Bank Sampah");
+
+    jenisBankSampah.removeClass("d-none");
+    jenisNasabah.addClass("d-none");
+
+    if (!nik.hasClass("d-none")) {
+      nik.addClass("fade-out");
+      $("#nik").attr("disabled", true);
+
+      nik.on("animationend", function () {
+        nik.addClass("d-none").removeClass("fade-out");
+        nik.off("animationend");
+      });
+    }
+
+    changeSubmitRegister(isBankSampah);
+  } else {
+    // Action for Nasabah
+    teksJenis.text("Nasabah");
+    deskripsiJenis.text(
+      "Buat akun nasabah pertama anda dan mulai menabung di E-Bank Sampah 🗑️"
+    );
+    labelNama.text("Nama Lengkap");
+
+    jenisBankSampah.addClass("d-none");
+    jenisNasabah.removeClass("d-none");
+
+    // Check value of janis nasabah
+    if (jenisNasabahValue == 0) {
+      nik.removeClass("d-none").addClass("fade-in");
+      $("#nik").attr("disabled", false);
+
+      nik.on("animationend", function () {
+        nik.removeClass("fade-in");
+        nik.off("animationend");
+      });
+    } else {
+      if (!nik.hasClass("d-none")) {
+        nik.addClass("fade-out");
+        $("#nik").attr("disabled", true);
+
+        nik.on("animationend", function () {
+          nik.addClass("d-none").removeClass("fade-out");
+          nik.off("animationend");
+        });
+      }
+    }
+
+    changeSubmitRegister(isBankSampah);
+  }
+});
+
+// Feature: Toggle Password
 $("#togglePassword").on("click", function () {
   const $passwordField = $("#password");
   const passwordFieldType = $passwordField.attr("type");
@@ -29,41 +115,15 @@ $("#togglePassword").on("click", function () {
   }
 });
 
-$("#nik").on("input", function () {
-  // Menghapus semua karakter yang bukan angka
-  $(this).val($(this).val().replace(/\D/g, ""));
+// Feature: Submit Register
+function changeSubmitRegister(isBankSampah) {
+  // Change this string endpoint API
+  const endpointNasabah = "/api/register/nasabah";
+  const endpointBankSampah = "/api/register/bank-sampah";
 
-  // Memastikan panjang input tidak melebihi 16 karakter
-  if ($(this).val().length > 16) {
-    $(this).val($(this).val().slice(0, 16));
+  const form = $("#form-register");
+
+  isBankSampah
+    ? form.attr("action", endpointBankSampah)
+    : form.attr("action", endpointNasabah);
 }
-});
-
-// Toggle jenis Akun
-$("#jenisAkun").on("click", function () {
-  const teksJenis = $("#text-jenis-akun");
-  const deskripsiJenis = $("#deskripsi-jenis-akun");
-  const labelNama = $("#label-nama");
-  const jenisNasabah = $("#jenis-nasabah").parent();
-  const jenisBankSampah = $("#jenis-bank-sampah").parent();
-
-  if ($(this).is(":checked")) {
-    // Action buat Bank Sampah
-    teksJenis.text("Bank Sampah");
-    deskripsiJenis.text(
-      "Daftarkan Bank Sampah anda sekarang untuk lingkungan yang lebih indah 🌳"
-    );
-    labelNama.text("Nama Bank Sampah");
-    jenisBankSampah.removeClass("d-none");
-    jenisNasabah.addClass("d-none");
-  } else {
-    // Action buat Nasabah
-    teksJenis.text("Nasabah");
-    deskripsiJenis.text(
-      "Buat akun nasabah pertama anda dan mulai menabung di E-Bank Sampah 🗑️"
-    );
-    labelNama.text("Nama Lengkap");
-    jenisBankSampah.addClass("d-none");
-    jenisNasabah.removeClass("d-none");
-  }
-});