Как отобразить Firebase Auth / неправильный пароль в качестве предупреждения окна? - PullRequest
Новая
       0

Как отобразить Firebase Auth / неправильный пароль в качестве предупреждения окна?

0 голосов
/ 07 января 2020

Я пытаюсь добавить средство проверки ошибок всякий раз, когда я размещаю неверный адрес электронной почты и / или пароль. Что я хочу сделать, если я укажу неверный адрес электронной почты или пароль, на странице должно появиться окно предупреждения об ошибке.

Мой. js код 

(function(){//initialize the firebase app
    var config = {
                  assume there are credentials here
        }; 

        firebase.initializeApp(config);
        var auth = null;
        var loginBtn= document.getElementById('btnLogin');
        firebase.auth.Auth.Persistence.SESSION;

    //Login
    loginBtn.addEventListener('click', e => {
        e.preventDefault();
        if( $('#email').val() != '' && $('#password').val() != '' ){
        //login the user
        var data = {
            email: $('#email').val(),
            password: $('#password').val()
        };

        firebase.auth().signInWithEmailAndPassword(data.email, data.password)
            .then(function(authData) {
            auth = authData;
            })
            .catch(function(error) {
            console.log("Login Failed!", error);
            window.alert("Login Failed!", error);
            });
        }
    });
})();

Моя проблема в том, что предупреждение окна не выполняется. Я уже попробовал другое утверждение, что оно не сработает.

html код 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Login | DIABEATIS by Team Buendia</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="images/icons/diabeatis.jpg" />
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js" ></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-firestore.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-database.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-storage.js"></script> 
</head>
    <body>
        <div class="limiter">
            <div class="container-login100">
                <div class="wrap-login100 p-t-30 p-b-20">
                    <form id="loginForm" method="POST">
                        <img src="images/icons/diabeatis.jpg" width="70%" style="margin: 0px auto 20px;display: block;" alt="AVATAR">
                        <span class="login100-form-title p-b-40">
                        <font face="Montserrat">By Team Buendia</font>
                        </span>

                        <div class="wrap-input100 validate-input m-t-25 m-b-35" data-validate="Enter username">
                            <font face="Montserrat">Email</font>
                            <input class="input100" type="text" name="loginEmail" style="font-family:Montserrat;" id="email">
                            <span class="focus-input100"></span>
                        </div>

                        <div class="wrap-input100 validate-input m-b-50" data-validate="Enter password" >
                            <font face="Montserrat">Password</font>
                            <input class="input100" type="password" name="loginPassword" id="password">
                            <span class="focus-input100"></span>
                        </div>

                        <button type="submit" class="login100-form-btn" style="background-color:blue; font-family:Montserrat; cursor:pointer; font-weight:bold" id="btnLogin">Login</button>

                        <ul class="login-more p-t-40">
                        <font face="Montserrat">Don't have an account?</font>
                            <li class="m-b-8">
                                <a href="signup.html" class="txt2" style="color:#01703D">
                                    <font face="Montserrat">Create Account</font>
                                </a>
                            </li>
                            <font face="Montserrat">Are you a doctor? Login here</font>
                            <li class="m-b-8">
                                <a href="" class="txt2" style="color:#01703D">
                                    <font face="Montserrat">DIABEATIS for Doctors</font>
                                </a>
                            </li>
                                <font face="Montserrat">By Logging in you agree to our Terms & Conditions, as well as, our privacy and policy</font>
                                <br>
                            <li class="m-b-8">
                                <a href="toc.html" class="txt2" style="color:#01703D">
                                    <font face="Montserrat">Terms & Conditions</font>
                                </a>
                            </li>
                            <li class="m-b-8">
                                <a href="privacypolicy.html" class="txt2" style="color:#01703D">
                                    <font face="Montserrat">Privacy and Policy</font>
                                </a>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    <script src="signin.js"></script>
    <script>
        firebase.auth().onAuthStateChanged(function(user){
            if(user){
                window.location.href = "patientDashboard.html";
                console.log(user);
            }
            else{
                console.log('no user present');
            }
        });
    </script>
    </body>
</html>

1 Ответ

1 голос
/ 07 января 2020

Вероятно, потому, что вы назначаете тип submit для своей кнопки и метод POST для своей формы. Следовательно, ваша форма, вероятно, отправлена ​​до того, как метод signInWithEmailAndPassword() Firebase будет запущен и / или разрешение Promise, которое он возвращает, будет разрешено.

Изменение типа на button, как показано ниже, должно сработать: 

<button type="button" class="login100-form-btn" style="background-color:blue; font-family:Montserrat; cursor:pointer; font-weight:bold" id="btnLogin">Login</button>

Подробнее см. W3 .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...