<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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>
<div class="form-group">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
</div>
<div class="form-group" style="position: relative;">
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required autofocus>
<span class="icon-key"></span>
</div>
<div class="form-group row form-help">
<div class="col-xs-6">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" value="remember-me">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Remember</span>
</label>
</div>
<div class="col-xs-6 text-xs-right">
<a href="#" class="forgot-password">
Forgot password?
</a>
</div>
</div>
<div class="form-group text-xs-center">
<button class="btn btn-primary btn-block" type="submit">Sign in</button>
</div>
</form><!-- /form -->
</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));
}
small {
font-size: 75%;
}
.form-help,
.form-help .form-check-label {
font-size: 12px;
line-height: 1.1;
}
.card-container.card {
max-width: 330px;
padding: 30px 40px;
}
/*
.btn {
font-weight: 700;
height: 36px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
*/
.icon-key:before {
content: '';
display: inline-block;
height: 14px;
width: 14px;
position: absolute;
top: 50%;
right: 15px;
margin-top: -7px;
z-index: 10;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='#999' d='M5.5 0c-1.38 0-2.5 1.12-2.5 2.5 0 .16 0 .32.03.47l-3.03 3.03v2h3v-2h2v-1l.03-.03c.15.03.31.03.47.03 1.38 0 2.5-1.12 2.5-2.5s-1.12-2.5-2.5-2.5zm.5 1c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1z' /%3E%3C/svg%3E");
background-size: 100% 100%;
background-repeat:no-repeat;
background-position: center center;
}
/*
* 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: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.35);
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.35);
}
.profile-img-card {
width: 120px;
height: 120px;
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;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
*/
.form-signin .form-control:focus {
border-color: rgba(90, 90, 80, 0.6);
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/*
.btn.btn-signin {
background-color: rgb(104, 145, 162);
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");
}
