Модал закрывает и перезагружает страницу до того, как Firebase завершит вход

Question

Я пытаюсь создать логин с помощью Firebase. Что происходит, когда я отправляю модальную форму с именем пользователя и паролем, моей функции входа в систему asyn c не хватает времени для завершения, и веб-сайт перезагружается до завершения функции. Когда я изменяю onsubmit на «return false», все работает, и пользователь входит в систему, но форма больше не закрывается программно. Я хочу, чтобы он ожидал функцию входа в Firebase, а затем закрыл страницу и перезагрузил ее.

Вот мой код:

<button onclick="document.getElementById('login').style.display='block'" type="button" class="btn btn-outline-success" id="admin-button">Admin</button>
  <div id="login" class = "modal">
    <form name="myForm" class="modal-content animate" method="post">
      <div class="imgcontainer">
        <span onclick="document.getElementById('login').style.display='none'"class="close" title="Close Modal" style="color:#a00000;">&times;</span>
      </div>
      <div class="container">
        <h2 id="admin-title">Admin Login</h2>
        <label for="uname"><b>Username</b></label>
        <input type="text" placeholder="Username" name="uname" required>
        <label for="psw"><b>Password</b></label>
        <input type="password" placeholder="admin-code" name="password" required>
        <button type="submit" id="login-button" onclick="validateForm()">Login</button>
      </div>
      <br/>
      <div class="container" style="background-color:#f1f1f1">
        <button type="button" onclick="document.getElementById('login').style.display='none'" class="cancelbtn" style="margin:10px">Cancel</button>
      </div>
    </form>
  </div>

И это для функции validateForm ():

async function validateForm(){
  console.log("inside validate Form");
  var x = document.forms.myForm.uname.value;
  var y = document.forms.myForm.password.value;

  alert(x);
  alert(y);
  signInWithFirebase(x,y);

  CheckIfSignedIn();
}

Большое спасибо!

Answer 1

Я предполагаю, что функция CheckIfSignedIn закрывает модальный режим, так как из предоставленного кода неясно, где именно это делается.

Если signInWithFirebase выполняет асинхронный c вызов вашего Firebase тогда validateForm нужно await это. Вот некоторый псевдокод, показывающий, как вы можете это сделать.

async function validateForm(){
  ...
  await signInWithFirebase(x,y);

  CheckIfSignedIn();
}

async function signInWithFirebase(x, y){
    try {
        const user = await firedb.auth().signInWithUsernameAndPassword(x, y);
        return user;
    } catch(error) {
        return error.message;
    }
}

Я не знаком с самой Firebase, но принцип одинаков для всех асин * c код.