110c853945
- Updated 39 pages from old header01.php and header02.php includes - All pages now use single configurable header.php with $headerStyle variable - Light style (default): Most pages (login, register, trips, courses, etc.) - Dark style: Coming from header01 original usage Pages updated: - Admin pages: admin_*.php (10 files) - Booking pages: bookings.php, campsite_booking.php, etc. - Content pages: blog.php, blog_details.php, contact.php, events.php, etc. - User pages: account_settings.php, membership*.php, register.php, etc. - Utility pages: 404.php, payment_confirmation.php, reset_password.php, etc. All pages now maintain single header template source - easier to update navigation, styles, and functionality across the entire site.
174 lines
9.2 KiB
PHP
174 lines
9.2 KiB
PHP
<?php
|
|
$headerStyle = 'light';
|
|
include_once('header.php') ?>
|
|
<style>
|
|
@media (min-width: 991px) {
|
|
.container {
|
|
max-width: 720px;
|
|
padding: 0 15px;
|
|
}
|
|
}
|
|
|
|
#passwordRequirements li {
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.text-success {
|
|
color: green !important;
|
|
}
|
|
|
|
.text-danger {
|
|
color: red !important;
|
|
}
|
|
</style>
|
|
<!-- Contact Form Area start -->
|
|
<section class="contact-form-area py-70 rel z-1">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="">
|
|
<div class="comment-form bgc-lighter z-1 rel mb-30 rmb-55">
|
|
<form id="registerForm" name="registerForm" action="register_user.php" method="post" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">
|
|
<div class="section-title">
|
|
<h2>Register</h2>
|
|
|
|
</div>
|
|
<p>Register to create your 4WDCSA.co.za user profile.</p>
|
|
<div class="row mt-35">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="first_name">First Name</label>
|
|
<input type="text" id="first_name" name="first_name" class="form-control" placeholder="John" value="" required data-error="Please enter your Name">
|
|
<div class="help-block with-errors"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="last_name">Last Name</label>
|
|
<input type="text" id="last_name" name="last_name" class="form-control" placeholder="Smith" value="" required data-error="Please enter your Last Name">
|
|
<div class="help-block with-errors"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="phone_number">Phone Number</label>
|
|
<input type="text" id="phone_number" name="phone_number" class="form-control" placeholder="Phone" value="" required data-error="Please enter your Phone">
|
|
<div class="help-block with-errors"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input type="email" id="email" name="email" class="form-control" placeholder="Enter email" value="" required data-error="Please enter your Email">
|
|
<div class="help-block with-errors"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" name="password" class="form-control" placeholder="Enter password" value="" required data-error="Please enter your password">
|
|
<ul id="passwordRequirements" class="small mt-2" style="list-style: none; padding-left: 0;">
|
|
<li id="length" class="text-danger">✗ At least 8 characters</li>
|
|
<li id="uppercase" class="text-danger">✗ At least one uppercase letter</li>
|
|
<li id="lowercase" class="text-danger">✗ At least one lowercase letter</li>
|
|
<li id="number" class="text-danger">✗ At least one number</li>
|
|
<li id="special" class="text-danger">✗ At least one special character</li>
|
|
</ul>
|
|
<div class="help-block with-errors"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="password_confirm">Confirm Password</label>
|
|
<input type="password" id="password_confirm" name="password_confirm" class="form-control" placeholder="Enter password" value="" required data-error="Please enter your password">
|
|
<div class="help-block with-errors"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-group mb-0">
|
|
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
|
|
<button type="submit" class="theme-btn style-two" style="width:100%;">Register</button>
|
|
<div id="msgSubmit" class="hidden"></div>
|
|
</div>
|
|
<div id="responseMessage"></div> <!-- Message display area -->
|
|
</div>
|
|
<div class="pt-20">Already have an account? <a href="login.php"><b>Log in here.</b></a></div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Contact Form Area end -->
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<script>
|
|
function updatePasswordFeedback(password) {
|
|
const length = password.length >= 8;
|
|
const uppercase = /[A-Z]/.test(password);
|
|
const lowercase = /[a-z]/.test(password);
|
|
const number = /[0-9]/.test(password);
|
|
const special = /[\W_]/.test(password);
|
|
|
|
$('#length').toggleClass('text-success', length).toggleClass('text-danger', !length).html(`${length ? '✓' : '✗'} At least 8 characters`);
|
|
$('#uppercase').toggleClass('text-success', uppercase).toggleClass('text-danger', !uppercase).html(`${uppercase ? '✓' : '✗'} At least one uppercase letter`);
|
|
$('#lowercase').toggleClass('text-success', lowercase).toggleClass('text-danger', !lowercase).html(`${lowercase ? '✓' : '✗'} At least one lowercase letter`);
|
|
$('#number').toggleClass('text-success', number).toggleClass('text-danger', !number).html(`${number ? '✓' : '✗'} At least one number`);
|
|
$('#special').toggleClass('text-success', special).toggleClass('text-danger', !special).html(`${special ? '✓' : '✗'} At least one special character`);
|
|
}
|
|
|
|
$('#password').on('input', function() {
|
|
const password = $(this).val();
|
|
updatePasswordFeedback(password);
|
|
});
|
|
|
|
$(document).ready(function() {
|
|
$('#registerForm').on('submit', function(event) {
|
|
event.preventDefault(); // Prevent default form submission
|
|
|
|
const password = $('#password').val();
|
|
const confirmPassword = $('#password_confirm').val();
|
|
const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;
|
|
|
|
if (!passwordPattern.test(password)) {
|
|
$('#responseMessage').html(`
|
|
<div class="alert alert-danger">
|
|
Password must be at least 8 characters long, include uppercase and lowercase letters, a number, and a special character.
|
|
</div>
|
|
`);
|
|
return;
|
|
}
|
|
|
|
if (password !== confirmPassword) {
|
|
$('#responseMessage').html(`
|
|
<div class="alert alert-danger">Passwords do not match.</div>
|
|
`);
|
|
return;
|
|
}
|
|
|
|
// If validation passes, proceed with AJAX
|
|
$.ajax({
|
|
url: 'register_user.php',
|
|
type: 'POST',
|
|
data: $(this).serialize(),
|
|
dataType: 'json',
|
|
success: function(response) {
|
|
if (response.status === 'success') {
|
|
$('#responseMessage').html('<div class="alert alert-success">' + response.message + '</div>');
|
|
$('#registerForm')[0].reset(); // Optionally reset the form
|
|
} else {
|
|
$('#responseMessage').html('<div class="alert alert-danger">' + response.message + '</div>');
|
|
}
|
|
},
|
|
error: function() {
|
|
$('#responseMessage').html('<div class="alert alert-danger">An error occurred while processing your request.</div>');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<?php include_once("insta_footer.php"); ?>
|