You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
YOLO/createAccount.php

121 lines
5.8 KiB

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Account - Temphire</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/2.6.0/full.css" rel="stylesheet">
<script>
function validateForm() {
const password = document.getElementById('password').value;
const contact = document.getElementById('contact').value;
const passwordError = document.getElementById('password-error');
const contactError = document.getElementById('contact-error');
let isValid = true;
// Password validation
const passwordCriteria = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
if (!passwordCriteria.test(password)) {
passwordError.textContent = "Password must be at least 8 characters long, include at least one uppercase letter, one lowercase letter, one number, and one special character.";
isValid = false;
} else {
passwordError.textContent = "";
}
// Contact validation
const contactCriteria = /^\d{10}$/;
if (!contactCriteria.test(contact)) {
contactError.textContent = "Contact number must be exactly 10 digits.";
isValid = false;
} else {
contactError.textContent = "";
}
return isValid;
}
</script>
</head>
<body class="min-h-screen bg-base-200">
<?php include 'navbar.php'; ?>
<div class="hero min-h-screen bg-base-200">
<div class="hero-content flex-col lg:flex-row-reverse">
<div class="card flex-shrink-0 w-full max-w-lg shadow-2xl bg-base-100">
<div class="card-body">
<h2 class="card-title text-2xl font-bold text-center mb-6">Create Account</h2>
<form method="post" action="register.php" class="space-y-4" onsubmit="return validateForm();">
<!-- Name Fields -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text">First name</span>
</label>
<input type="text" id="fname" name="fname" class="input input-bordered w-full" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Last name</span>
</label>
<input type="text" id="lname" name="lname" class="input input-bordered w-full" required />
</div>
</div>
<!-- User Type -->
<div class="form-control">
<label class="label">
<span class="label-text">User Type</span>
</label>
<select name="user_type" id="user_type" class="select select-bordered w-full" required>
<option value="Job seeker">Job seeker</option>
<option value="Employer">Employer</option>
</select>
</div>
<!-- Contact -->
<div class="form-control">
<label class="label">
<span class="label-text">Contact</span>
</label>
<input type="text" name="contact" id="contact" class="input input-bordered w-full" inputmode="numeric" pattern="\d*" required />
<small id="contact-error" class="text-error"></small>
</div>
<!-- Email -->
<div class="form-control">
<label class="label">
<span class="label-text">Email address</span>
</label>
<input type="email" id="email" name="email" class="input input-bordered w-full" required />
</div>
<!-- Username -->
<div class="form-control">
<label class="label">
<span class="label-text">Username</span>
</label>
<input type="text" name="username" id="username" class="input input-bordered w-full" />
</div>
<!-- Password -->
<div class="form-control">
<label class="label">
<span class="label-text">Password</span>
</label>
<input type="password" name="password" id="password" class="input input-bordered w-full" required />
<small id="password-error" class="text-error"></small>
</div>
<!-- Submit Button -->
<button type="submit" name="signup" class="btn btn-primary btn-sm w-full">Sign up</button>
</form>
</div>
</div>
</div>
</div>
<?php include 'footer.php'; ?>
</body>
</html>