Login page is not redirecting to another page

Question

I'm trying to create a login page for the web using HTML and javascript with firestore as the DB.

The problem is whenever I complete the login form, the page just refreshes. The console does not return any errors. (note that upon executing the page, the console does not return any errors as well.)

"loginPage.html"

<head>
    <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>
</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="loginEmail" required>
                            <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="loginPassword" required>
                            <span class="focus-input100"></span>
                        </div>

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

                        <ul class="login-more p-t-40">
                            <li class="m-b-8">
                                <a href="signup.html" class="txt2" style="color:#01703D">
                                    <font face="Montserrat">Create Account</font>
                                </a>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </body>
    <script src="signin.js">
        firebase.auth().onAuthStateChanged(function(user){
            if(user){
                window.location.href = "patientDashboard.html";
            }
        });
        </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> 
</html>

signin.js

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

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

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

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

Then it should be redirected to this page named patientDashboard.html Assume that all js imports are already present. I already added this code to the aforementioned html file

        <script src="signin.js">
        firebase.auth().onAuthStateChanged(function(){
            if(user){
                window.location.href = "loginPage.html";
            }
        });
        </script>

Answer 1

there are multiple problems in your code, first: 1. the script signin.js is currently not executed since you wrap it in a function but not called

(function () {
    ...do something here then don't forget to call the function by `()`
})();  // <--- this will execute whatever code within the function scope

your script that handled redirect is located at the wrong block your

<script src="signin.js">
   // any code here will only execute whenever the `signin.js` failed to load for any reason
</script>

so for your redirect to work you need to store it in another script block or maybe put it somewhere you like

I tried to recreate your code with the fixes mentioned above the the redirect works fine.

sidenote : if you are working on vanillaJS then be consistent, you are also using jQuery, $ .

Login page is not redirecting to another page

Question

1 answers

solution1
1 ACCPTED 2020-01-06 08:59:53

Login page is not redirecting to another page

Question

1 answers

solution1 1 ACCPTED 2020-01-06 08:59:53

solution1
1 ACCPTED 2020-01-06 08:59:53