128 lines
5.0 KiB
PHP
128 lines
5.0 KiB
PHP
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Register - Miralok Africa</title>
|
|
<meta name="robots" content="noindex, nofollow">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
background-color: var(--surface);
|
|
}
|
|
.form-container {
|
|
background: var(--white);
|
|
padding: 3rem;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="form-container">
|
|
<h2 class="text-center mb-4">Create Your Rider Account</h2>
|
|
<div id="alert-container"></div>
|
|
<form id="registerForm" action="handle_register.php" method="POST">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="firstName" class="form-label">First Name</label>
|
|
<input type="text" class="form-control" id="firstName" name="firstName" required>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="lastName" class="form-label">Last Name</label>
|
|
<input type="text" class="form-control" id="lastName" name="lastName" required>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Email Address</label>
|
|
<input type="email" class="form-control" id="email" name="email" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">Password</label>
|
|
<input type="password" class="form-control" id="password" name="password" required minlength="8">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="confirmPassword" class="form-label">Confirm Password</label>
|
|
<input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
|
|
</div>
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg">Register</button>
|
|
</div>
|
|
<p class="text-center mt-3">Already have an account? <a href="login.php">Log in</a></p>
|
|
</form>
|
|
<p class="text-center mt-4"><a href="/">Back to Home</a></p>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
document.getElementById('registerForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const password = form.password.value;
|
|
const confirmPassword = form.confirmPassword.value;
|
|
const alertContainer = document.getElementById('alert-container');
|
|
const submitBtn = form.querySelector('button[type="submit"]');
|
|
|
|
alertContainer.innerHTML = '';
|
|
|
|
if (password !== confirmPassword) {
|
|
showAlert('Passwords do not match.', 'danger');
|
|
return;
|
|
}
|
|
|
|
const originalBtnText = submitBtn.innerHTML;
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Creating Account...`;
|
|
|
|
const formData = new FormData(form);
|
|
|
|
fetch(form.action, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
window.location.href = 'login.php?registered=true';
|
|
} else {
|
|
showAlert(data.error || 'An unknown error occurred.', 'danger');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
showAlert('Could not connect to the server. Please try again later.', 'danger');
|
|
})
|
|
.finally(() => {
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = originalBtnText;
|
|
});
|
|
});
|
|
|
|
function showAlert(message, type) {
|
|
const alertContainer = document.getElementById('alert-container');
|
|
const wrapper = document.createElement('div');
|
|
wrapper.innerHTML = [
|
|
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
|
|
` <div>${message}</div>`,
|
|
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
|
|
'</div>'
|
|
].join('');
|
|
alertContainer.append(wrapper);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|