<!DOCTYPE html>
<?php require_once("configure2.php"); ?>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login and Register form</title>
<link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="User/style.css">
<script src="https://kit.fontawesome.com/f63bb9f33d.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
<script src="scripts/jquery-3.7.1.slim.min"></script>
<script src="bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<?php
if(isset($_POST['signup']))
{
$username=$_POST['username'];
$gmail=$_POST['gmail'];
$password=$_POST['password'];
if(strlen($username)<3)
{
$error[]='Please enter username using 3 characters atleast.';
}
if(!preg_match("/^^[^0-9][a-z0-9]+([_-]?[a-z0-9])*$/",$username))
{
$error[]='Invalid entry.Enter lowercase letters without any space and no number at the start';
}
if(strlen($password)<6)
{
$error[]='Password is not 6 characters long.';
}
$sql="select * from signup where (User_name='$username' or Gmail='$gmail');";
$res=mysqli_query($con,$sql);
if(mysqli_num_rows($res)>0)
{
$row=mysqli_fetch_assoc($res);
if($username==$row['User_name'])
{
$error[]='Username already exists.';
}
if($gmail==$row['Gmail'])
{
$error[]='Gmail already exists';
}
}
if(!isset($error))
{
$options=array("cost"=>4);
$password = password_hash($password, PASSWORD_BCRYPT,$options);
$result=mysqli_query($con,"insert into signup(User_name,Gmail,Psswd) values('$username','$gmail','$password')");
if($result)
{
$done=3;
}
else
{
$error[]='Failed:Something went wrong';
}
}
}
?>
</div>
<div class="col-12">
<?php
if(isset($error))
{
foreach($error as $error)
{
echo '<div class="alert alert-danger justify-content-center">';
echo '<p class="errmsg">⚠'.$error.'</p>';
echo'</div>';
}
}
?>
</div>
<?php if(isset($done))
{?>
<div class="successmsg"><span style="font-size:100px;">✅</span><br>You have registered successfully.<br><a href="User/signin.php" style="color:#fff;">Login here...</a></div>
<?php } else {?>
<div class="form-box">
<h1 id="title">Register</h1>
<form method="POST">
<div class="input-group">
<div class="input-field">
<i class="fa-solid fa-user"></i>
<input type="text" placeholder="User Name" id="uname" name="username" value="<?php if(isset($error)){ echo $_POST['username'];}?>" required>
</div>
<div class="input-field">
<i class="fa-solid fa-envelope"></i>
<input type="email" placeholder="Gmail" id="umail" name="gmail" value="<?php if(isset($error)){ echo $_POST['gmail'];}?>" required>
</div>
<div class="input-field">
<i class="fa-solid fa-lock"></i>
<input type="password" placeholder="Password" id="upsswd" name="password" value="<?php if(isset($error)){ echo $_POST['password'];}?>">
</div>
<div class="input-field">
<i class="fa-solid fa-lock"></i>
<input type="text" placeholder="House No" id="hsno" name="house" value="<?php if(isset($error)){ echo $_POST['house'];}?>">
</div>
<div class="input-field">
<i class="fa-solid fa-lock"></i>
<input type="text" placeholder="Locality" id="loc" name="localp" value="<?php if(isset($error)){ echo $_POST['localp'];}?>">
</div>
<div class="input-field">
<i class="fa-solid fa-lock"></i>
<input type="text" placeholder="Street" id="stret" name="street" value="<?php if(isset($error)){ echo $_POST['street'];}?>">
</div>
<div class="input-field">
<i class="fa-solid fa-lock"></i>
<input type="text" placeholder="Village" id="vllag" name="village" value="<?php if(isset($error)){ echo $_POST['village'];}?>">
</div>
<div class="btn-field">
<a href="User/signin.php">Already a user?</a>
<button type="submit" id="signupbtn" name="signup">Sign Up</button>
</div>
</div>
</form>
<?php }?>
</div>
</div>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
font-family:'Poppins',sans-serif;
box-sizing:border-box;
}
.container{
width:100%;
height:100vh;
background-image: url('background.jpg');
background-position:center;
background-size:cover;
position:relative;
max-height:400px;
overflow-y: auto;