How to create a remember me function in login without using form in javascript or jquery

Question

I'm almost done with my project, but the specifications for my login is not yet 100% done. Remember me function is not yet working.

HTML

<input type="text" id="signinId" class="email-input" placeholder="Email">
<input type="password" id="signinPwd" class="password-input" placeholder="Password">


<input id="rememberChkBox" type="checkbox">
<button id="Sign" class="button">Login</button>

Jquery Script

$(document).ready(function(){
    $("#Sign").click(function(){

         //Script for login is here...

    });
});

I am not using form in this login page. The specs is that when the checkbox is checked upon login, the user must be remebered. Once he logout, the textbox should be empty and when clicked on the #signinId input his username must be displayed.

It should look like this, if it is possible:

Sceenshot 1: When email input is clicked

Screenshot 2: Autofill

Any help is very much appreciated. Thank you in advance.

Answer 1

Auto Login system.

'Remember me' is not actually used to display user name and password on the login form because this feature is already provided by any browser. But it is intended for automatic login when users revisit the web.

To make auto login system without storing login credential on cookie is by adding database table that store userid and login_string.

Insert/Update the login_string every user login.

And when user login using remember me (press the radio button), then store the login_string on the cookie.

-------------------------------------------------------------------
id (ai)  | userid   | login_string (128 chars) 
--------------------------------------------------------------------
1        |  1       | 86faabe4142269e2274df911a....
--------------------------------------------------------------------
2        |  2       | 013835e194d75c183dc914c9e....

Login_string must be a unique string and can be created by this way :

$login_string = hash('sha512', $userid . $_SERVER['HTTP_USER_AGENT'] . time());

The result is a unique 128 string length.

To store login_string on the cookie :

if(isset(post('remember_me')) {

     $cookie_name  = 'user_str_session';  
     $cookie_value = $login_string;
     setcookie($cookie_name, $cookie_value, time() + (86400 * 1), "/"); // one day example

}

Next time the user close the browser and revisit the web ( where normally login session has expired ), then at the first page load, system will find the login_string and return the userid. By using this userid, system will create login session for automatic login.

Example script :

if(!isset($_SESSION['id'])) {

        if(isset($_COOKIE['user_str_session'])) {
            $user_string = $_COOKIE['user_str_session'] ;

            $sql   = "SELECT `userid` FROM `users_log` WHERE `string` =? ";
            $query = $this->db->query($sql, $user_string);

            $userid = $query->row()->userid;

            if($userid) {                                                 
               $_SESSION['id'] = $userid;                     
            }   
           }
     }

To prevent the login_string on a public computer, apply user logout by deleting the login_string on cookie.

function logout()
   {            
      // remove cookie
      setcookie("user_str_session", "", time() - 3600);

      session_destroy(); 
      redirect('/');    
   }

This is only a brief description to create an automatic login system. Practically you can play with your own style and needs.

Answer 2

Its working perfectly for me..

You need Jquery.cookie.min.js..

    $(function () {

    if (localStorage.chkbox && localStorage.chkbox != '') {
        $('#rememberChkBox').attr('checked', 'checked');
        $('#signinId').val(localStorage.username);
        $('#signinPwd').val(localStorage.pass);
    } else {
        $('#rememberChkBox').removeAttr('checked');
        $('#signinId').val('');
        $('#signinPwd').val('');
    }

    $('#rememberChkBox').click(function () {

        if ($('#rememberChkBox').is(':checked')) {
            // save username and password
            localStorage.username = $('#signinId').val();
            localStorage.pass = $('#signinPwd').val();
            localStorage.chkbox = $('#rememberChkBox').val();
        } else {
            localStorage.username = '';
            localStorage.pass = '';
            localStorage.chkbox = '';
        }
    });
});