How to Make a Simple 2-Step Auth Google Login Form using HTML5 CSS3 and JS – Harshad Chopra

How to Make a Simple 2-Step Auth Google Login Form using HTML5 CSS3 and JS – Harshad Chopra

Hello Friends In this post we will be talking about how to make a simple 2-step Auth Google Login Form using HTML5 CSS3 and JS. All the source code of this application is given below with screenshots. Just understand the full code and also extend it by your own creativity.

 

Source Code

index.html

<div class="container">
  <div class="login-container">
    <div class="login-header">
      <h3>2 Steps Login</h3>
      <h5>Access your account</h5>
    </div>
    <div class="login-body">
      <div class="login-image">
        <img src="http://image.flaticon.com/icons/svg/149/149071.svg">
      </div>
      <div class="login-form">
        <div id="step-user-name">
          <input id="user-name" type="text" placeholder="Enter your email account">
          <div class="error-msg"></div>
          <button id="btn-next">Next</button>
        </div>
        <div id="step-user-password">
          <input id="user-password" type="password" placeholder="Enter your password">
          <div class="error-msg"></div>
          <button id="btn-access">Login</button>
          <a id="a-back">Sign in with another account</a>
        </div>
      </div>
    </div>
  </div>
</div>

style.css

*{
	margin: 0px auto;
	box-sizing: border-box;
  font-family: 'Open Sans', arial;
}
body{
  padding:50px;
}
a{
	cursor: pointer;
}
.login-container{
	text-align: center;
	width: 100%;
	max-width: 400px;
}
.login-container .login-header h3{
  font-size: 38px;
}
.login-container .login-header h5{
  font-size: 18px;
}
.login-container .login-body .login-image{
	overflow: hidden;
	border-radius: 4px 4px 4px 4px;
	width: 100%;
	max-width: 125px; 
}
.login-container .login-body{
	overflow: hidden;
	border-radius: 4px 4px 4px 4px;
	background-color: #F7F7F7;
	padding: 15px;
}
.login-container .login-body .login-form{
	width: 100%;
	max-width: 300px;
	padding: 10px;
}
.login-container .login-body .login-form input,
.login-container .login-body .login-form button{
	border-radius: 4px 4px 4px 4px;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 5px;
	padding-left: 5px;
	border: none;
  margin-bottom: 10px;
}
.login-container .login-body .login-form input{
  
}
.login-container .login-body .login-form button{
	cursor: pointer;
	background-color: #4787EE;
	color: #FFFFFF;
}
.login-container .login-body .login-form .error-msg{
	display: none;
	color: #dd4b39;
}

.login-container .login-body .login-form #step-user-password{
	display: none;
}

script.js

$(document).ready(function(){
	var error="";
	$("#btn-next").click(function(){
		var value = $("#user-name").val();
		if (value=="") {
			error="Enter your email";
			$(".error-msg").css("display", "block");
			$(".error-msg").html(error);
		}else{
			$(".error-msg").html("");
			$(".error-msg").css("display", "none");
			$("#step-user-name").css("display", "none");
			$("#step-user-password").css("display", "block");
		}
	});

	$("#btn-access").click(function(){
		var value = $("#user-password").val();
		if (value=="") {
			error="Enter your email";
			$(".error-msg").css("display", "block");
			$(".error-msg").html(error);
		}else{
			$(".error-msg").html("");
			$(".error-msg").css("display", "none");
		}
	});

	$("#a-back").click(function(){
		$(".error-msg").html("");
		$("#user-name").val("");
		$("#user-password").val("");
		$(".error-msg").css("display", "none");
		$("#step-user-name").css("display", "block");
		$("#step-user-password").css("display", "none");
	});
});

Leave a Reply

Close Menu