Skip to content

J
JavaScript-SkyAnalyst
Commit def57a77 authored by dtati's avatar dtati
Browse files
Options

first commit

parents
Pipeline #530 failed with stages
      Hide whitespace changes
      Inline Side-by-side
      Showing with 884 additions and 0 deletions
      README.md 0 → 100644
      View file @ def57a77
      # sky identification JavaScript demo
      ## Getting started
      To make it easy for you to get started with GitLab, here's a list of recommended next steps.
      assets/style.css 0 → 100644
      View file @ def57a77
      h1 {
      text-align: center;
      }
      h2 {
      margin: 0;
      }
      #multi-step-form-container {
      /* margin-top: 5rem; */
      }
      .text-center {
      text-align: center;
      }
      .mx-auto {
      margin-left: auto;
      margin-right: auto;
      }
      .pl-0 {
      padding-left: 0;
      }
      .button {
      padding: 0.7rem 1.5rem;
      border: 1px solid #4361ee;
      background-color: #4361ee;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
      }
      .submit-btn {
      border: 1px solid #0e9594;
      background-color: #0e9594;
      }
      .mt-3 {
      margin-top: 2rem;
      }
      .d-none {
      display: none;
      }
      .form-step {
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 20px;
      padding: 3rem;
      }
      .font-normal {
      font-weight: normal;
      }
      ul.form-stepper {
      counter-reset: section;
      margin-bottom: 3rem;
      }
      ul.form-stepper .form-stepper-circle {
      position: relative;
      }
      ul.form-stepper .form-stepper-circle span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
      }
      .form-stepper-horizontal {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      }
      ul.form-stepper > li:not(:last-of-type) {
      margin-bottom: 0.625rem;
      -webkit-transition: margin-bottom 0.4s;
      -o-transition: margin-bottom 0.4s;
      transition: margin-bottom 0.4s;
      }
      .form-stepper-horizontal > li:not(:last-of-type) {
      margin-bottom: 0 !important;
      }
      .form-stepper-horizontal li {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: start;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      }
      .form-stepper-horizontal li:not(:last-child):after {
      position: relative;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 1px;
      content: "";
      top: 32%;
      }
      .form-stepper-horizontal li:after {
      background-color: #dee2e6;
      }
      .form-stepper-horizontal li.form-stepper-completed:after {
      background-color: #4da3ff;
      }
      .form-stepper-horizontal li:last-child {
      flex: unset;
      }
      ul.form-stepper li a .form-stepper-circle {
      display: inline-block;
      width: 40px;
      height: 40px;
      margin-right: 0;
      line-height: 1.7rem;
      text-align: center;
      background: rgba(0, 0, 0, 0.38);
      border-radius: 50%;
      }
      .form-stepper .form-stepper-active .form-stepper-circle {
      background-color: #4361ee !important;
      color: #fff;
      }
      .form-stepper .form-stepper-active .label {
      color: #4361ee !important;
      }
      .form-stepper .form-stepper-active .form-stepper-circle:hover {
      background-color: #4361ee !important;
      color: #fff !important;
      }
      .form-stepper .form-stepper-unfinished .form-stepper-circle {
      background-color: #f8f7ff;
      }
      .form-stepper .form-stepper-completed .form-stepper-circle {
      background-color: #0e9594 !important;
      color: #fff;
      }
      .form-stepper .form-stepper-completed .label {
      color: #0e9594 !important;
      }
      .form-stepper .form-stepper-completed .form-stepper-circle:hover {
      background-color: #0e9594 !important;
      color: #fff !important;
      }
      .form-stepper .form-stepper-active span.text-muted {
      color: #fff !important;
      }
      .form-stepper .form-stepper-completed span.text-muted {
      color: #fff !important;
      }
      .form-stepper .label {
      font-size: 1rem;
      margin-top: 0.5rem;
      }
      .form-stepper a {
      cursor: default;
      }
      #smart_ocr_get_info{
      width: 200px;
      background-color: #4361ee;
      border-radius: 50pc;
      color: white;
      /* text-align: center; */
      height: 30px;
      margin: auto;
      cursor: pointer;
      /* justify-content: center; */
      text-align: center;
      display: flex;
      justify-content: center;
      margin-top: 20px;
      align-items: center;
      }
      input[type="file"] {
      position: relative;
      }
      input[type="file"]::file-selector-button {
      width: 136px;
      color: transparent;
      }
      /* Faked label styles and icon */
      input[type="file"]::before {
      position: absolute;
      pointer-events: none;
      top: 10px;
      left: 16px;
      height: 20px;
      width: 20px;
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
      }
      input[type="file"]::after {
      position: absolute;
      pointer-events: none;
      top: 11px;
      left: 40px;
      color: #0964b0;
      content: "Upload File";
      }
      /* ------- From Step 1 ------- */
      /* file upload button */
      input[type="file"]::file-selector-button {
      border-radius: 4px;
      padding: 0 16px;
      height: 40px;
      cursor: pointer;
      background-color: white;
      border: 1px solid rgba(0, 0, 0, 0.16);
      box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
      margin-right: 16px;
      transition: background-color 200ms;
      }
      /* file upload button hover state */
      input[type="file"]::file-selector-button:hover {
      background-color: #f3f4f6;
      }
      /* file upload button active state */
      input[type="file"]::file-selector-button:active {
      background-color: #e5e7eb;
      }
      /* ------------------------ */
      /* default boilerplate to center input */
      body {
      background-color: #E6E6E6;
      /* min-height: 100vh;
      max-width: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5vmax;
      box-sizing: border-box; */
      }
      .IndatacoreIdentity{
      display: flex;
      margin: auto;
      background-color: #263269;
      width: 70px;
      padding: 10px;
      border-radius: 20px;
      }
      /* spiner */
      .loader {
      margin-top: 20px;
      margin-bottom: 20px;
      width: 48px;
      height: 48px;
      margin: auto;
      border: 5px solid #FFF;
      border-bottom-color: #4361ee;
      border-radius: 50%;
      display: inline-block;
      box-sizing: border-box;
      animation: rotation 1s linear infinite;
      }
      @keyframes rotation {
      0% {
      transform: rotate(0deg);
      }
      100% {
      transform: rotate(360deg);
      }
      }
      /* drag and drop style */
      \ No newline at end of file
      index.html 0 → 100644
      View file @ def57a77
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Sky IDentification (Demo)</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>
      <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
      <link rel="stylesheet" href="assets/style.css">
      </head>
      <body>
      <div>
      <img src="assets/IndatacoreIdentity.png" class="IndatacoreIdentity" alt="">
      </div>
      <div>
      <h1>It Only Takes One More Click To Discover Sky Id</h1>
      <div id="multi-step-form-container">
      <!-- Form Steps / Progress Bar -->
      <ul class="form-stepper form-stepper-horizontal text-center mx-auto pl-0">
      <!-- Step 1 -->
      <li class="form-stepper-active text-center form-stepper-list" step="1">
      <a class="mx-2">
      <span class="form-stepper-circle">
      <span>1</span>
      </span>
      <div class="label">Download Picture</div>
      </a>
      </li>
      <!-- Step 2 -->
      <li class="form-stepper-unfinished text-center form-stepper-list" step="2">
      <a class="mx-2">
      <span class="form-stepper-circle text-muted">
      <span>2</span>
      </span>
      <div class="label text-muted">Liveness</div>
      </a>
      </li>
      <!-- Step 3 -->
      <li class="form-stepper-unfinished text-center form-stepper-list" step="3">
      <a class="mx-2">
      <span class="form-stepper-circle text-muted">
      <span>3</span>
      </span>
      <div class="label text-muted">Matching</div>
      </a>
      </li>
      </ul>
      <!-- Step Wise Form Content -->
      <form id="userAccountSetupForm" name="userAccountSetupForm" enctype="multipart/form-data" method="POST">
      <!-- Step 1 Content -->
      <section id="step-1" class="form-step" style="
      background-color: aliceblue;">
      <h2 class="font-normal" style="
      margin-bottom: 50px;
      margin-top: 0px;
      text-align: center;">Download your picture</h2>
      <input type="file" id="ocrimagge" accept="image/*">
      <div>
      </div>
      <div id="imageContainer" style="
      justify-content: center;
      display: flex;">
      <img id="uploadedImageocr" src="assets/CINcrt.jpg" alt="Uploaded Image" style="
      width: 500px;
      height: 300px;
      margin-top: 20px;
      border-radius: 5px;
      ">
      </div>
      <span style="display: none;" id="loaddataocr" class="loader"></span>
      <div class="mt-3">
      <button class="button btn-navigate-form-step" type="button" style="background: darkgray;" disabled step_number="2">Next</button>
      </div>
      </section>
      <!-- Step 2 Content, default hidden on page load. -->
      <section id="step-2" class="form-step d-none" style="
      background-color: aliceblue;">
      <div style="display: flex;justify-content: center;" id="skyid_liveness"></div>
      <div
      style="margin: auto;justify-content: center;align-items: center;text-align: center;margin-top: 50px;"
      >
      <div id="skyid_fa_start_button" class="button ">
      Start Liveness
      </div>
      <div>
      <span style="display: none;" id="loaddatalvnss" class="loader"></span>
      <strong>###### Result ######</strong>
      <h5 id="responseOneDisplayrealtimefacedetct" style="text-align: center;"></h5>
      </div>
      </div>
      <div class="mt-3">
      <button class="button btn-navigate-form-step" type="button" step_number="1">Prev</button>
      <button class="button btn-navigate-form-step" style="background: darkgray;" disabled type="button" step_number="3">Next</button>
      </div>
      </section>
      <!-- Step 3 Content, default hidden on page load. -->
      <section id="step-3" class="form-step d-none" style="
      background-color: aliceblue;
      ">
      <h2 class="font-normal" style="
      margin-bottom: 50px;
      margin-top: 0px; text-align: center;">Results Face matching</h2>
      <!-- Step 3 input fields -->
      <span style="display: none;" id="loaddatafacemtch" class="loader"></span>
      <h5 id="responseOneDisplayrealtimefacedetcttow" style="text-align: center;"></h5>
      <button class="button btn-navigate-form-step" type="button" step_number="1">Repeat the process</button>
      </section>
      </form>
      </div>
      </div>
      <footer>
      <p style="text-align: left; color: black;"
      >Leader de l'industrie numérique basée sur l'intelligence artificielle et les technologies de Deep Learning. Nous nous efforçons d'innover et d'offrir à nos clients des produits qui répondent à leurs besoins.</p>
      </footer>
      <script src="./sdk/skyid_fa_sdk_bundle.js"></script>
      <script src="./sdk/skyid_imp.js" type="module"></script>
      </body>
      </html>
      \ No newline at end of file
      sdk/skyid_fa_sdk_bundle.js 0 → 100644
      View file @ def57a77
      // =====================================================================================
      // | SkyID Web SDK Editable Variable (messages, server, warnings) |
      // =====================================================================================
      // messages
      var skyid_fa_sdk_access_error_message="Votre token n'est pas valide";
      var skyid_fa_sdk_loading_error_message="Error lors de chargement des modules";
      var skyid_fa_sdk_network_error_message="Error de connexion au serveur, merci de verifier votre connexion internet";
      var skyid_fa_sdk_camera_error_message="Impossible de demmarer votre camera, merci de verifier que votre camera et bien actif";
      var skyid_fa_face_start_message="SVP positionner votre visage au centre sans rotation. puis clique sur start.";
      var skyid_fa_face_loading_message="Chargement des modules, Patietez SVP.";
      // warning
      var skyid_fa_mul_face_warning_msg="SVP representer un seul visage devant le camera.";
      \ No newline at end of file
      sdk/skyid_fa_sdkv2.1-min.js 0 → 100644
      View file @ def57a77
      This source diff could not be displayed because it is too large. You can view the blob instead.
      sdk/skyid_imp.js 0 → 100644
      View file @ def57a77
      import * as skyid from './skyid_fa_sdkv2.1-min.js'
      var API_url = "***"
      var LIVENESS_url ="***"
      var FACE_MATCHING_url ="***"
      var skyid_fa_sdk_user = "***";
      var skyid_fa_sdk_password = "***";
      const skyid_fa_sdk_token = "***";
      const skyid_fa_sdk_appId = "***";
      var bearToken ;
      // inject SDK component in HTML code
      let skyid_liveness = document.getElementById('skyid_liveness'); // skyid_liveness a div id in the html code.
      skyid_liveness.innerHTML = skyid.skyid_component;
      async function skyid_fa_get_params_request(skyid_fa_auth)
      {
      // setup request parameters
      let form_data = new FormData();
      form_data.append("token",skyid_fa_sdk_token);
      form_data.append("application_id",skyid_fa_sdk_appId);
      $.ajax({
      url : API_url+"get_parameters_web_sdk",
      type : "POST",
      headers : {"Authorization":"Bearer "+skyid_fa_auth},
      data : form_data,
      cache : false,
      contentType : false,
      processData : false,
      success : function(response) {
      if(response["status_code"]=="000")
      {
      const sdk_data=response["response_data"];
      // skyid sdk methods call
      skyid.skyid_fa_init_sdk(sdk_data);
      }else
      {
      alert(response["status_label"]);
      }
      },
      error: function(xhr, status, error) {
      alert(xhr.status+" : "+xhr.statusText);
      }
      });
      }
      async function skyid_fa_remote_sdk_initialization()
      {
      var form = new FormData();
      form.append("username", skyid_fa_sdk_user);
      form.append("password", skyid_fa_sdk_password);
      $.ajax({
      url : API_url,
      type : "POST",
      data : form,
      cache : false,
      contentType : false,
      processData : false,
      success : function(response) {
      if(response["status_code"]=="000")
      {
      const skyid_fa_setup_data=response["response_data"];
      const temp_token = skyid_fa_setup_data["access_token"]
      // call get parameters api with the obtained token
      skyid_fa_get_params_request(temp_token);
      }else
      {
      alert(skyid_fa_init_error_callback);
      }
      },
      error: function(xhr, status, error) {
      alert(xhr.status+" : "+xhr.statusText);
      }
      });
      }
      // init SDK with the defined method
      await skyid_fa_remote_sdk_initialization()
      document.getElementById('skyid_fa_start_button').addEventListener('click', function () {
      skyid.skyid_fa_start_face_scan(skyid_fa_face_scan_end_callback, process_fa_timeOut);
      });
      function skyid_fa_check_liveness_request(skyid_fa_auth,frame_canvas)
      {
      //create binary image file
      const canvas_bin = skyid_fa_canvas2binary(frame_canvas);
      const face_image= new File([canvas_bin], "skyid_fa_selected_frame.jpg",{type:"application/octet-stream"})
      // setup request parameters
      let form_data = new FormData();
      form_data.append("selfie",face_image);
      bearToken = skyid_fa_auth;
      // send request
      $.ajax({
      url : LIVENESS_url,
      type : "POST",
      headers : {"Authorization":"Bearer "+skyid_fa_auth},
      data : form_data,
      cache : false,
      contentType : false,
      processData : false,
      success : function(response) {
      loaddatalivnssElement.style.display = "none";
      if(response["status_code"]=="000")
      {
      let api_result=response["response_data"]
      if(api_result["face_class"]=="Real")
      {
      skyid.skyid_fa_start_face_scan(skyid_fa_face_scan_end_callbackfacematching, process_fa_timeOut);
      const resultextractdata = document.getElementById('responseOneDisplayrealtimefacedetct');
      // Format and display the JSON data in the element
      resultextractdata.innerHTML = '<pre>' + JSON.stringify(response.response_data, null, 2) + '</pre>';
      const stepNumber = 3; // The desired step_number value
      const button = document.querySelector(`button[step_number="${stepNumber}"]`);
      setTimeout(function() {
      // This code will be executed after the delay 1sec
      button.disabled = false; // Enable the button
      button.style.background = '#4361ee'; // Set its background color
      }, 1000);
      }else{
      alert("echec de verification preuve de vue, SVP reessayer dans un environement limunaux");
      }
      $( "#msg" ).html("Result :"+api_result["face_class"]+" score "+api_result["score"]+"<br/><br/>");
      }
      else{
      alert("echec de verification preuve de vue, SVP reessayer dans un environement limunaux")
      }
      $( "#skyid_fa_start_button" ).html("Redemarrer");
      $( "#skyid_fa_start_button" ).show();
      },
      error: function(xhr, status, error) {
      loaddatalivnssElement.style.display = "none";
      alert(xhr.status+" : "+xhr.statusText);
      }
      });
      }
      function skyid_fa_canvas2binary(req_canvas)
      {
      let skyid_fa_canvas_data = req_canvas.toDataURL('image/jpeg', 1.0);
      skyid_fa_canvas_data = skyid_fa_canvas_data.replace('data:image/jpeg;base64,', '');
      return skyid_fa_base64ToArrayBuffer(skyid_fa_canvas_data)
      }
      function skyid_fa_base64ToArrayBuffer(base64) {
      const binary_string = window.atob(base64);
      const len = binary_string.length;
      var bytes = new Uint8Array( len );
      for (var i = 0; i < len; i++) {
      bytes[i] = binary_string.charCodeAt(i);
      }
      return bytes.buffer;
      }
      function skyid_fa_check_liveness(frame_canvas)
      {
      var form = new FormData();
      form.append("username", skyid_fa_sdk_user);
      form.append("password", skyid_fa_sdk_password);
      loaddatalivnssElement.style.display = "block";
      $.ajax({
      url : API_url,
      type : "POST",
      data : form,
      cache : false,
      contentType : false,
      processData : false,
      success : function(response) {
      if(response["status_code"]=="000")
      {
      const skyid_fa_setup_data=response["response_data"];
      const temp_token = skyid_fa_setup_data["access_token"]
      skyid_fa_check_liveness_request(temp_token,frame_canvas);
      }else
      {
      alert(response["status_label"]);
      }
      },
      error: function(xhr, status, error) {
      alert(xhr.status+" : "+xhr.statusText);
      }
      });
      }
      var my_selfie_canvas = null;
      function skyid_fa_face_scan_end_callback(skyid_fa_detected_face_canvas)
      {
      my_selfie_canvas=skyid_fa_detected_face_canvas
      skyid_fa_check_liveness(skyid_fa_detected_face_canvas);
      }
      function process_fa_timeOut() {
      // process_fa_timeOut function
      }
      function uploadFile()
      {
      const imageInput = document.getElementById("ocrimagge");
      if (!imageInput.files.length) {
      alert("Please select an image.");
      return;
      }else {
      const stepNumber = 2; // The desired step_number value
      const button = document.querySelector(`button[step_number="${stepNumber}"]`);
      button.disabled = false; // To disable the button
      button.style.background = '#4361ee'; // Set its background color
      }
      }
      // loader spinner
      const loaddataocrElement = document.getElementById("loaddataocr");
      const loaddatalivnssElement = document.getElementById("loaddatalvnss");
      const loaddatafacemtchElement = document.getElementById("loaddatafacemtch");
      document.getElementById('ocrimagge').addEventListener('change', function () {
      uploadFile() ;
      });
      const imageContainer = document.getElementById("imageContainer");
      const imageInput = document.getElementById("ocrimagge");
      const uploadedImageocr = document.getElementById("uploadedImageocr");
      imageInput.addEventListener("change", function () {
      const file = imageInput.files[0]; // Get the selected file
      if (file) {
      // Create a URL for the selected image
      const imageURL = URL.createObjectURL(file);
      // Display the image in the div
      uploadedImageocr.src = imageURL;
      imageContainer.style.display = "block"; // Make the container visible
      }
      });
      function skyid_fa_face_scan_end_callbackfacematching(skyid_fa_detected_face_canvas)
      {
      my_selfie_canvas=skyid_fa_detected_face_canvas
      loaddatafacemtchElement.style.display = "block";
      if (!imageInput.files.length) {
      alert("Please select an image.");
      return;
      }
      //Add other form fields as needed
      const canvas_bin = skyid_fa_canvas2binary(my_selfie_canvas);
      const face_image= new File([canvas_bin], "skyid_fa_selected_frame.jpg",{type:"application/octet-stream"})
      const formDatafacemtch = new FormData();
      // Add other form fields as needed
      formDatafacemtch.append("doc_1_1", imageInput.files[0]);
      formDatafacemtch.append("slf_1", face_image);
      formDatafacemtch.append('guid', '12010102002');
      formDatafacemtch.append("token",skyid_fa_sdk_token);
      formDatafacemtch.append("application_id",skyid_fa_sdk_appId);
      $.ajax({
      type: "POST",
      url: FACE_MATCHING_url,
      headers : {"Authorization":"Bearer "+bearToken},
      data: formDatafacemtch,
      processData: false,
      contentType: false,
      success: function (response) {
      loaddatafacemtchElement.style.display = "none";
      if (response.status_code =="000"){
      const resultextractdata = document.getElementById('responseOneDisplayrealtimefacedetcttow');
      // Format and display the JSON data in the element
      resultextractdata.innerHTML = '<pre>' + JSON.stringify(response.multi_response_data.doc_1.response_data, null, 2) + '</pre>';
      }else {
      const resultextractdata = document.getElementById('responseOneDisplayrealtimefacedetcttow');
      // Format and display the JSON data in the element
      resultextractdata.innerHTML = '<pre>' + JSON.stringify(response.status_label, null, 2) + '</pre>';
      }
      },
      error: function (error) {
      alert("failed.");
      loaddatafacemtchElement.style.display = "none";
      }
      });
      }
      // reset navigateToFormStep
      function reloadall(){
      const fileInput = document.getElementById("ocrimagge");
      fileInput.value = null;
      const resultextractdata = document.getElementById('resultextractdata');
      uploadedImageocr.src = "assets/CINcrt.jpg";
      resultextractdata.innerHTML = '<pre> Download your national card (CIN - recto ) </pre>';
      const resultextfacemtchlvnssdata = document.getElementById('responseOneDisplayrealtimefacedetct');
      resultextfacemtchlvnssdata.innerHTML = '<pre></pre>';
      const resultexfacemtchdata = document.getElementById('responseOneDisplayrealtimefacedetcttow');
      resultexfacemtchdata.innerHTML = '<pre></pre>';
      const step2= 2 ;
      const buttonstep2 = document.querySelector(`button[step_number="${step2}"]`);
      buttonstep2.disabled = true; // To disable the button
      buttonstep2.style.background = 'darkgray' ;
      const step3= 3 ;
      const buttonstep3 = document.querySelector(`button[step_number="${step3}"]`);
      buttonstep3.disabled = true; // To disable the button
      buttonstep3.style.background = 'darkgray' ;
      }
      /**
      * Define a function to navigate betweens form steps.
      * It accepts one parameter. That is - step number.
      */
      const navigateToFormStep = (stepNumber) => {
      if (stepNumber == 1){
      reloadall() ;
      }
      if (stepNumber==2){
      skyid.skyid_fa_setup_sdk();
      }else{
      skyid.skyid_fa_stop_webcam() ;
      }
      /**
      * Hide all form steps.
      */
      document.querySelectorAll(".form-step").forEach((formStepElement) => {
      formStepElement.classList.add("d-none");
      });
      /**
      * Mark all form steps as unfinished.
      */
      document.querySelectorAll(".form-stepper-list").forEach((formStepHeader) => {
      formStepHeader.classList.add("form-stepper-unfinished");
      formStepHeader.classList.remove("form-stepper-active", "form-stepper-completed");
      });
      /**
      * Show the current form step (as passed to the function).
      */
      document.querySelector("#step-" + stepNumber).classList.remove("d-none");
      /**
      * Select the form step circle (progress bar).
      */
      const formStepCircle = document.querySelector('li[step="' + stepNumber + '"]');
      /**
      * Mark the current form step as active.
      */
      formStepCircle.classList.remove("form-stepper-unfinished", "form-stepper-completed");
      formStepCircle.classList.add("form-stepper-active");
      /**
      * Loop through each form step circles.
      * This loop will continue up to the current step number.
      * Example: If the current step is 3,
      * then the loop will perform operations for step 1 and 2.
      */
      for (let index = 0; index < stepNumber; index++) {
      /**
      * Select the form step circle (progress bar).
      */
      const formStepCircle = document.querySelector('li[step="' + index + '"]');
      /**
      * Check if the element exist. If yes, then proceed.
      */
      if (formStepCircle) {
      /**
      * Mark the form step as completed.
      */
      formStepCircle.classList.remove("form-stepper-unfinished", "form-stepper-active");
      formStepCircle.classList.add("form-stepper-completed");
      }
      }
      };
      /**
      * Select all form navigation buttons, and loop through them.
      */
      document.querySelectorAll(".btn-navigate-form-step").forEach((formNavigationBtn) => {
      /**
      * Add a click event listener to the button.
      */
      formNavigationBtn.addEventListener("click", () => {
      /**
      * Get the value of the step.
      */
      const stepNumber = parseInt(formNavigationBtn.getAttribute("step_number"));
      /**
      * Call the function to navigate to the target form step.
      */
      navigateToFormStep(stepNumber);
      });
      });
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment