"Google style login extended (with HTML5 LocalStorage)"
Bootstrap 3.3.0 Snippet by cesiztel

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- you can substitue the span of reauth email for a input with the email and include the remember me checkbox --> <div class="container"> <div class="card card-container"> <!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> --> <img id="profile-img" class="profile-img-card" src="//ssl.gstatic.com/accounts/ui/avatar_2x.png" /> <p id="profile-name" class="profile-name-card"></p> <form class="form-signin"> <span id="reauth-email" class="reauth-email"></span> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> <div id="remember" class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Sign in</button> </form><!-- /form --> <a href="#" class="forgot-password"> Forgot the password? </a> </div><!-- /card-container --> </div><!-- /container -->
/* * Specific styles of signin component */ /* * General styles */ body, html { height: 100%; background-repeat: no-repeat; background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)); } .card-container.card { max-width: 350px; padding: 40px 40px; } .btn { font-weight: 700; height: 36px; -moz-user-select: none; -webkit-user-select: none; user-select: none; cursor: default; } /* * Card component */ .card { background-color: #F7F7F7; /* just in case there no content*/ padding: 20px 25px 30px; margin: 0 auto 25px; margin-top: 50px; /* shadows and rounded borders */ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .profile-img-card { width: 96px; height: 96px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } /* * Form styles */ .profile-name-card { font-size: 16px; font-weight: bold; text-align: center; margin: 10px 0 0; min-height: 1em; } .reauth-email { display: block; color: #404040; line-height: 2; margin-bottom: 10px; font-size: 14px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .form-signin #inputEmail, .form-signin #inputPassword { direction: ltr; height: 44px; font-size: 16px; } .form-signin input[type=email], .form-signin input[type=password], .form-signin input[type=text], .form-signin button { width: 100%; display: block; margin-bottom: 10px; z-index: 1; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { border-color: rgb(104, 145, 162); outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162); } .btn.btn-signin { /*background-color: #4d90fe; */ background-color: rgb(104, 145, 162); /* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/ padding: 0px; font-weight: 700; font-size: 14px; height: 36px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: none; -o-transition: all 0.218s; -moz-transition: all 0.218s; -webkit-transition: all 0.218s; transition: all 0.218s; } .btn.btn-signin:hover, .btn.btn-signin:active, .btn.btn-signin:focus { background-color: rgb(12, 97, 33); } .forgot-password { color: rgb(104, 145, 162); } .forgot-password:hover, .forgot-password:active, .forgot-password:focus{ color: rgb(12, 97, 33); }
$( document ).ready(function() { // DOM ready // Test data /* * To test the script you should discomment the function * testLocalStorageData and refresh the page. The function * will load some test data and the loadProfile * will do the changes in the UI */ // testLocalStorageData(); // Load profile if it exits loadProfile(); }); /** * Function that gets the data of the profile in case * thar it has already saved in localstorage. Only the * UI will be update in case that all data is available * * A not existing key in localstorage return null * */ function getLocalProfile(callback){ var profileImgSrc = localStorage.getItem("PROFILE_IMG_SRC"); var profileName = localStorage.getItem("PROFILE_NAME"); var profileReAuthEmail = localStorage.getItem("PROFILE_REAUTH_EMAIL"); if(profileName !== null && profileReAuthEmail !== null && profileImgSrc !== null) { callback(profileImgSrc, profileName, profileReAuthEmail); } } /** * Main function that load the profile if exists * in localstorage */ function loadProfile() { if(!supportsHTML5Storage()) { return false; } // we have to provide to the callback the basic // information to set the profile getLocalProfile(function(profileImgSrc, profileName, profileReAuthEmail) { //changes in the UI $("#profile-img").attr("src",profileImgSrc); $("#profile-name").html(profileName); $("#reauth-email").html(profileReAuthEmail); $("#inputEmail").hide(); $("#remember").hide(); }); } /** * function that checks if the browser supports HTML5 * local storage * * @returns {boolean} */ function supportsHTML5Storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } } /** * Test data. This data will be safe by the web app * in the first successful login of a auth user. * To Test the scripts, delete the localstorage data * and comment this call. * * @returns {boolean} */ function testLocalStorageData() { if(!supportsHTML5Storage()) { return false; } localStorage.setItem("PROFILE_IMG_SRC", "//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" ); localStorage.setItem("PROFILE_NAME", "César Izquierdo Tello"); localStorage.setItem("PROFILE_REAUTH_EMAIL", "oneaccount@gmail.com"); }

Related: See More


Questions / Comments:

super..

Sethu Srinivas () - 2 years ago - Reply 0


how to download?

Yayat Ply () - 2 years ago - Reply 0


Click the button before 'Fork me', "Download snippet" is there.

greatghoul () - 2 years ago - Reply 0


awesome man, thank you very much.

Hudson Pereira () - 2 years ago - Reply 0


Muy bien Snipp César!!!, Muchas gracias!!, Saludos!!

Daniel E Delgado D () - 3 years ago - Reply 0


Please can some one help on how i can downlod this login page and how it can be introduce in my boostrap websites since am still new thanks for your understanding..

Douglas Nieman () - 3 years ago - Reply 0


your awesome ! :) btw , can you tell me the basic html of these ? including what bootstap css or js did you used ? please ? thank you so much

ZIAL () - 3 years ago - Reply 0


Image Descriptions Is More Important Here, Thanks

Dilip Agrawal () - 3 years ago - Reply 0


Hi,
I am trying to change the error message for empty field . . .
but not able to find the code.
Need your help.

Its nice and simple, like it.

Ajeet Sankhwal () - 4 years ago - Reply 0


You can´t find the code because the form validation code is not included in the snippet. Anyway, the empty field message error is the standard of HTML5. If you want to modify, you have to do a workaround with Javascript and CSS. Some links that can help you: http://www.broken-links.com... , http://www.the-art-of-web.c... , http://www.girliemac.com/bl... , http://stackoverflow.com/qu... , http://stackoverflow.com/qu...

César Izquierdo () - 4 years ago - Reply 0


Hey César Izquierdo my name is Douglas am really very happy for having the chance to see your login page please can u tell me were i can download it and also how i can modified it in order to suit my boostrap website and be responsive. Am really new in code. Thanks for your understanding. :douglasnieman5@gmail.com

Douglas Nieman () - 3 years ago - Reply 0


Is not really responsive... with ihpone 5 and iPhone 4 is not working perfectly. Somone knows how to solve it ? Thanks

oscar () - 4 years ago - Reply 0


Hi, I have modified the css of the card container and now it should be more reponsive design. Anyway, this snippet could be not very usable for mobile devices, there are better layout options if you want to achieve a login layout for mobile and web.

César Izquierdo () - 4 years ago - Reply 0


This is perfect! You just have to narrow your class selectors down for your button, because bootstrap is overriding it: button.btn.btn-signin{}

ILoveIrony () - 4 years ago - Reply 0


Yes, it´s true. I forgot it. Thanks. I have just changed it.

César Izquierdo () - 4 years ago - Reply 0


what does one name the *.js file?

Troy Johnson () - 4 years ago - Reply 0


In the *js I´ve used the HTML5 localstorage API to save/get the basic account data of the user. In a real app, the logic of your app could save this data after a successful attempt of login (It´s included a method that simulates it). If the user wants to login again in the app, the *js code get the data from the localstorage of your browser and it sets some fields of the layout with the retrieved data. Your users will save some typing time and it could improve the user experience. But it´s pretty basic sample.

César Izquierdo () - 4 years ago - Reply 0


NOICE!

Alex Evoxin () - 4 years ago - Reply 0


simple and nice.

greatghoul () - 4 years ago - Reply 0


Very nice!

Martin () - 4 years ago - Reply 0


nice!

jiyu () - 4 years ago - Reply 0