93 lines
3.5 KiB
PHP
93 lines
3.5 KiB
PHP
|
<div class="container mt-5">
|
||
|
|
<h2 class="text-center">Profile</h2>
|
||
|
|
<?php if (isset($error) && $error): ?>
|
||
|
|
<div class="alert alert-danger" role="alert">
|
||
|
|
Please fill in all required fields!
|
||
|
|
</div>
|
||
|
|
<?php endif; ?>
|
||
|
|
<form action="/client/profile/edit/<?php echo $data['model']->id?>" method="POST" class="mt-4" id="profileForm">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="email">Email</label>
|
||
|
|
<input type="email" name="email" id="email" class="form-control" required
|
||
|
|
value="<?php echo isset($data['model']) ? $data['model']->email : ''?>"
|
||
|
|
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
|
||
|
|
<div class="invalid-feedback">Please enter a valid email address</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="password">Password</label>
|
||
|
|
<input type="password" name="password" id="password" class="form-control" />
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="confirm_password">Confirm Password</label>
|
||
|
|
<input type="password" name="confirm_password" id="confirm_password" class="form-control" />
|
||
|
|
<div class="invalid-feedback">Passwords do not match!</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- <div class="form-group">
|
||
|
|
<label for="status">Status</label>
|
||
|
|
<select name="status" class="form-control">
|
||
|
|
<option value="active" <?php echo $data['model']['status'] == 'active' ? 'selected' : ''?>>Active</option>
|
||
|
|
<option value="inactive" <?php echo $data['model']['status'] == 'inactive' ? 'selected' : ''?>>Inactive</option>
|
||
|
|
</select>
|
||
|
|
</div> -->
|
||
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Email validation function
|
||
|
|
function isValidEmail(email) {
|
||
|
|
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||
|
|
return emailRegex.test(email);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Form submission validation
|
||
|
|
document.getElementById('profileForm').addEventListener('submit', function(e) {
|
||
|
|
const password = document.getElementById('password').value;
|
||
|
|
const confirmPassword = document.getElementById('confirm_password').value;
|
||
|
|
const confirmPasswordInput = document.getElementById('confirm_password');
|
||
|
|
const emailInput = document.getElementById('email');
|
||
|
|
let isValid = true;
|
||
|
|
|
||
|
|
// Password validation
|
||
|
|
if (password && (password !== confirmPassword)) {
|
||
|
|
confirmPasswordInput.classList.add('is-invalid');
|
||
|
|
isValid = false;
|
||
|
|
} else {
|
||
|
|
confirmPasswordInput.classList.remove('is-invalid');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Email validation
|
||
|
|
if (!isValidEmail(emailInput.value)) {
|
||
|
|
emailInput.classList.add('is-invalid');
|
||
|
|
isValid = false;
|
||
|
|
} else {
|
||
|
|
emailInput.classList.remove('is-invalid');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!isValid) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Real-time password validation
|
||
|
|
document.getElementById('confirm_password').addEventListener('input', function() {
|
||
|
|
const password = document.getElementById('password').value;
|
||
|
|
const confirmPassword = this.value;
|
||
|
|
|
||
|
|
if (password && (password !== confirmPassword)) {
|
||
|
|
this.classList.add('is-invalid');
|
||
|
|
} else {
|
||
|
|
this.classList.remove('is-invalid');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Real-time email validation
|
||
|
|
document.getElementById('email').addEventListener('input', function() {
|
||
|
|
if (!isValidEmail(this.value)) {
|
||
|
|
this.classList.add('is-invalid');
|
||
|
|
} else {
|
||
|
|
this.classList.remove('is-invalid');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|