App script form submits to an unknown address after submit

Question

I wanted to created a simple login form. But whenever the form is submitted, it goes to an address of https://n-hb3iawsdao7vaebunzezdpvnz2lfhrti7vfmd3a-0lu-script.googleusercontent.com/userCodeAppPanel? with an error of

Uncaught NetworkError: Connection failure due to HTTP 0

Everything works if I don't enclose it in a form tag but I need to because of the required attribute for the input tags.

Code.GS:

function checkLogin(username, password) {
var url = '';

var ss= SpreadsheetApp.openByUrl(url);
var webAppSheet = ss.getSheetByName("users");
var getLastRow =  webAppSheet.getLastRow();
var found_record = '';
for(var i = 1; i <= getLastRow; i++)
{
  if(webAppSheet.getRange(i, 2).getValue() == username && 
  webAppSheet.getRange(i, 4).getValue() == password)
{
  found_record = 'TRUE';
}    
}
if(found_record == '')
{
found_record = 'FALSE'; 
}

return found_record;

}

JavaScript:

     function loginUser() {

   var username = document.getElementById("username").value;
   var password = document.getElementById("password").value;
   
   google.script.run.withSuccessHandler(function(output) 
     {
      if(output == 'TRUE')
      {
       // console.log("Success");
      }
      else if(output == 'FALSE')
      {
       // console.log("Denied");
      }).checkLogin(username, password);
     }

HTML:

    <div class="limiter">
     <div class="container-login100" style="background-color: slategrey;">
       <div class="wrap-login100">
         <form onsubmit="loginUser()">

                <span class="login100-form-logo">
                    <img src="sample.png" border="0">
                </span>

                <span class="login100-form-title p-b-34 p-t-27">
                    Intranet
                </span>

                <div class="wrap-input100 validate-input" data-validate = "Enter username">
                    <!-- <input class="input100" type="text" name="username" placeholder="Username"> -->
        <input class="input100" type="text" id="username" placeholder="Username" required>
                    <span class="focus-input100" data-placeholder="&#xf207;"></span>
                </div>

                <div class="wrap-input100 validate-input" data-validate="Enter password">
                    <!-- <input class="input100" type="password" name="pass" placeholder="Password"> -->
        <input class="input100" type="password" id="password" placeholder="Password" required>
                    <span class="focus-input100" data-placeholder="&#xf191;"></span>
                </div>

                <div class="container-login100-form-btn">
                    <button type="submit" class="login100-form-btn">
                        Login
                    </button>
                </div>

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

Answer 1

Modification points:

• When I saw your script, loginUser() is required to be modified. Because, } is required to be added. So, when your script is run by clicking the button of "Login", an error occurs beccause loginUser() has an issue. So, I'm worried that your showing script might be different from your tested script that occurred the error of Uncaught NetworkError: Connection failure due to HTTP 0.

• In this modification, in order to correctly run the script of withSuccessHandler, <form onsubmit="loginUser()"> is modified to <form onsubmit="loginUser(); return false;">.

• In your script, I thought that the process cost of checkLogin might be able to be reduced.

When these points are reflected in your showing script, how about the following modification?

Modified script:

Google Apps Script side:

function checkLogin(username, password) {
  var url = '';
  var ss = SpreadsheetApp.openByUrl(url);
  var webAppSheet = ss.getSheetByName("users");
  var find = webAppSheet.getDataRange().getDisplayValues().find(([, b, , d]) => b == username && d == password);
  return find ? 'TRUE' : 'FALSE';
}

Javascript side:

function loginUser() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  google.script.run.withSuccessHandler(function (output) {
    if (output == 'TRUE') {
      console.log("Success");
    } else if (output == 'FALSE') {
      console.log("Denied");
    }
  }).checkLogin(username, password);
}

HTML side:

<div class="limiter">
  <div class="container-login100" style="background-color: slategrey;">
    <div class="wrap-login100">
      <form onsubmit="loginUser(); return false;"> <!-- Modified -->

        <span class="login100-form-logo">
          <img src="sample.png" border="0">
        </span>

        <span class="login100-form-title p-b-34 p-t-27">
          Intranet
        </span>

        <div class="wrap-input100 validate-input" data-validate="Enter username">
          <!-- <input class="input100" type="text" name="username" placeholder="Username"> -->
          <input class="input100" type="text" id="username" placeholder="Username" required>
          <span class="focus-input100" data-placeholder="&#xf207;"></span>
        </div>

        <div class="wrap-input100 validate-input" data-validate="Enter password">
          <!-- <input class="input100" type="password" name="pass" placeholder="Password"> -->
          <input class="input100" type="password" id="password" placeholder="Password" required>
          <span class="focus-input100" data-placeholder="&#xf191;"></span>
        </div>

        <div class="container-login100-form-btn">
          <button type="submit" class="login100-form-btn">
            Login
          </button>
        </div>

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

Note:

• In this modification, it supposes that the files of Javascript, HTML and Google Apps Script are put in the same Google Apps Script project. Please be careful about this.

• If you are using Web Apps, when you modified the script, please reflect the latest script to the Web Apps. Please be careful about this.