TwoTalesDev/4WDCSA.co.za
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code restructure push

Browse Source
This commit is contained in:
twotalesanimation
2025-12-04 15:09:44 +02:00
parent 86faad7a78
commit be2b757f4e
111 changed files with 17297 additions and 19420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/pages/auth/register.php Normal file
View File

@@ -0,0 +1,174 @@
<?php
$headerStyle = 'light';
include_once(dirname(dirname(dirname(__DIR__))) . '/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" 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"><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',
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(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>