<!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 >
