login signup or forgot password in one page using boostrap4 u can use any were like jsp, asp, php, html, any were in web, if u ar geting any problem then write in comment box , am try to solv your problem , below give script it will definatilly help u
index.jsp / index.php
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>login signup or forgot password in one page using boostrap4</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</head>
<body style="">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="index.jsp">OnlineExam</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Hi, Gust</a>
</li>
<li class="nav-item">
<a class="nav-link loginaccounts" href="#"><i class="fa fa-sign-in" aria-hidden="true"></i> Login</a>
</li>
</ul>
</div>
</nav>
<br>
<div class="container fulllogin" style="display: none;">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form">
<p class="text-danger text-right"></p>
<form action="LoginConnection" class="login-card login-out navlogin" method="POST" >
<div class="card ">
<div class="">
<input type="email" name="email" value="" class="form-control" placeholder="Email"/>
</div>
</div><br>
<input type="password" name="pass" value="" class="form-control" placeholder="Password"/>
<br>
<button type="button" name="login" class="btn btn-outline-success float-right"><i class="fa fa-sign-in" aria-hidden="true"></i> Login</button>
<p><br></p>
<p class="text-center"><a href="#" class="forgetpass">Forgot Password ? </a> <a href="#" class="account-margin anaccocunt"><i class="fa fa-user-plus" aria-hidden="true"></i> Creat an account </a></p>
</form>
<!--forgot password bellow-->
<form action="LoginConnection" class="login-card forgetpassview" method="POST" style="display: none;">
<div class="card ">
<div class="">
<input type="email" name="email" value="" class="form-control" placeholder="Email"/>
</div>
</div><br>
<%
//set code for generate new pass if uer exis or not then give to permition to change pass
%>
<input type="password" name="pass" value="" class="form-control" placeholder="New Password"/><br>
<input type="password" name="passcnf" value="" class="form-control" placeholder="Confirm"/>
<br>
<button type="button" name="login" class="btn btn-outline-success float-right">Change password</button>
<p><br></p>
<p class="text-center"><a href="#" class="gotologin"><i class="fa fa-sign-in" aria-hidden="true"></i> Login </a> <a href="#" class="account-margin anaccocunt"><i class="fa fa-user-plus" aria-hidden="true"></i> Creat an account </a></p>
</form>
</div>
</div>
<div class="col-sm-3"></div>
</div>
</div>
<!--creat account -->
<div class="container fullsignup">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="creataccount-form">
<p class="text-danger text-right"></p>
<form action="LoginConnection" class="login-card " method="POST" >
<div class="card ">
<div class="">
<input type="text" name="fname" value="" class="form-control" placeholder="First Name"/>
</div>
</div><br>
<input type="text" name="lname" value="" class="form-control" placeholder="Last Name"/>
<br>
<input type="email" name="email" value="" class="form-control" placeholder="Email"/>
<br>
<input type="password" name="pass" value="" class="form-control" placeholder="Password"/>
<br>
<input type="password" name="cnfpass" value="" class="form-control" placeholder="Confirm password"/>
<br>
<div class="row">
<div class="col-sm-4">
<select class="form-control" id="subject" name="subject">
<option>Subject</option>
<option value="Science">Science</option>
<option value="Math">Math</option>
<option value="Coumputer">Computer</option>
<option value="Coding">Coding</option>
<option value="Other">Other</option>
</select>
<input type="text" name="subname" class="form-control" style="display: none;">
</div>
<div class="col-sm-4">
<select class="form-control" id="language" name="lang">
<option>Language</option>
<option value="Science">English</option>
<option value="Math">Math</option>
<option>More coming..</option>
</select>
</div>
<div class="col-sm-4">
<select class="form-control" id="class" name="class">
<option>Class</option>
<option value="1st">1st</option>
<option value="2nd">2nd</option>
<option value="3rd">3rd</option>
<option value="4th">4th</option>
<option value="5th">5th</option>
<option value="6th">6th</option>
<option value="7th">7th</option>
<option value="8th">8th</option>
<option value="9th">9th</option>
<option value="10th">10th</option>
<option value="11th">11th</option>
<option value="12th">12th</option>
<option value="Graduation">Graduation</option>
<option value="B-tech">B-tech</option>
</select>
</div>
</div>
<br>
<button type="button" name="login" class="btn btn-outline-success float-right"><i class="fa fa-user-plus" aria-hidden="true"></i> Create Account</button>
<p><br></p>
<p class="text-center"><a href="#" class="forgetpass" style="color:white; text-decoration: none;"> Already have an Account ? </a> <a href="#" style="text-decoration: none; color: gray;" class="account-margin loginaccount"><i class="fa fa-sign-in" aria-hidden="true"></i> Login </a></p>
</form>
</div>
</div>
<div class="col-sm-3"></div>
</div>
</div>
</body>
</html>
css/style.css
<script>
body{
background-image: url("../img/exam-background-7.jpg");
}
.form{
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.2);
height: 300px;
width: 100%;
}
.card-body{
background: none;
}
.login-card{
padding: 35px;
}
.form p a{
color: white;
text-decoration: none;
border-bottom: 1px solid gray;
}
.form p .account-margin{
margin-left: 25px;
}
.creataccount-form{
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.2);
width: 100%;
height: 530px;
}
</script>
js/script.js
$(document).ready(function(){
$(".forgetpass").click(function (){
$(".login-out").hide();
$(".forgetpassview").show();
});
$(".gotologin").click(function (){
$(".login-out").show();
$(".forgetpassview").hide();
});
$(".loginaccount").click(function () {
$(".fullsignup").hide();
$(".fulllogin").show();
})
$(".anaccocunt").click(function () {
$(".fullsignup").show();
$(".fulllogin").hide();
})
$(".loginaccounts").click(function () {
$(".fulllogin").show();
$(".fullsignup").hide();
})
$(".loginaccounts").click(function () {
$(".navlogin").show();
$(".forgetpassview").hide();
})
});
0 Comments