Register-Page-Bank-Sampah/assets/js/scripts.js

130 lines
3.6 KiB
JavaScript

// Feature: Toggle NIK
$("#jenis-nasabah").on("change", function () {
const jenisNasabah = parseInt($(this).val());
const nik = $("#nik").parent();
// 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.off("animationend");
});
}
});
// 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");
if (passwordFieldType === "password") {
$passwordField.attr("type", "text");
} else {
$passwordField.attr("type", "password");
}
});
// Feature: Submit Register
function changeSubmitRegister(isBankSampah) {
// Change this string endpoint API
const endpointNasabah = "/api/register/nasabah";
const endpointBankSampah = "/api/register/bank-sampah";
const form = $("#form-register");
isBankSampah
? form.attr("action", endpointBankSampah)
: form.attr("action", endpointNasabah);
}