Login Page like Google with working back button

Question

I have an login page and if the user enteres its username a post request to the server validates the username and provides an appropriate response. If the username was valid a new input field for the password appears. I want the user to be able to go back to the input for the username but because I'm using ajax and javascript to display the new input field for the password after the username was validated, the back button just skips the username input.

The behavior of Googles login page when one presses the back button after entering the email and is "redirected" to the password input is exactly what I want.

How can I achieve the same behavior?

Thanks.

Answer 1

When you enter email id the gmail url is like:

https://accounts.google.com/ServiceLogin?sacu=1&scc=1&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&osid=1&service=mail&ss=1&ltmpl=default&rm=false#identifier

And when password:

https://accounts.google.com/ServiceLogin?sacu=1&scc=1&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&osid=1&service=mail&ss=1&ltmpl=default&rm=false#password

Look the change is only the hash tag at the very end of the url. Now how 'll you implement this?

There is a event in javascript called "hashchange".

Take a look at this:

<html>
<head>
    <title>Text</title>
</head>

<body>

    <div id="uname">
        //username related code


        <a href="#password"><div id="hello">Next</div></a>
    </div>


    <div id="password" style="display:none">
        //username related code


        <div id="final">Submit</div>
    </div>

    <script>

        window.onload=function(){

                window.addEventListener("hashchange", function(){                                               //this is the trick
                        console.log("Hash changed to", window.location.hash);

                        if(window.location.hash=="password")
                            //show password related div
                        else
                            //show username related div
                    });
            }

    </script>
</body>

Answer 2

You could create two containers like this

<div class="username-input">
    <input type="text" name="username" value="">
    <button>Next</button>
</div>

<div class="password-input"></div>

Initial the .password-input should be hidden. And after the validation of the username, you can slideToggle() to the next required validation being the password. If your ajax response is true , you can append <input type="password" name="password"> along with the back button to .password-input .

When pressing on the back button, after the .password-input has showed up, you could just remove the appended <input type="password" name="password"> , hide the .password-input and slideToggle() back the first validation form being .username-input .

This is just a thought, and can easily be accomplished with javascript.

Login Page like Google with working back button

Question

2 answers

solution1
1 ACCPTED 2016-11-09 13:06:19

solution2
0 2016-11-09 12:59:58

Login Page like Google with working back button

Question

2 answers

solution1 1 ACCPTED 2016-11-09 13:06:19

solution2 0 2016-11-09 12:59:58

solution1
1 ACCPTED 2016-11-09 13:06:19

solution2
0 2016-11-09 12:59:58