root
114 lines
4.2 KiB
PHP
114 lines
4.2 KiB
PHP
<?= $this->extend('layout/register_layout') ?>
|
|
<?= $this->section('content') ?>
|
|
|
|
<div class="registration-form container mt-5 mb-5 text-center">
|
|
|
|
<?php if (session()->has('error')): ?>
|
|
<p style="color: red;"><?= session('error') ?></p>
|
|
<?php endif; ?>
|
|
|
|
<form action="<?= site_url('user/processResetPassword'); ?>" method="post" onsubmit="return validatePassword()">
|
|
<?= csrf_field() ?>
|
|
<div class="text-center mb-4">
|
|
<a href="<?= base_url('/') ?>">
|
|
<img src="<?= base_url('assets/images/alrahma_logo.png') ?>" alt="" style="width: 180px; height: 120px;"></a>
|
|
</div>
|
|
<h3 class="text-center text-success" style="font-family: Arial, sans-serif;">Reset Your Password</h3>
|
|
<br>
|
|
<input type="hidden" name="token" value="<?= esc($token); ?>">
|
|
|
|
<!-- Password Field -->
|
|
<div class="form-group position-relative mb-4 text-start">
|
|
<label for="password"></label>
|
|
<input type="password"
|
|
class="form-control item pe-5"
|
|
id="password"
|
|
name="password"
|
|
placeholder="Enter new password"
|
|
maxlength="30"
|
|
required>
|
|
<span class="position-absolute top-50 end-0 translate-middle-y me-3"
|
|
onclick="togglePasswordVisibility('password', this)"
|
|
style="cursor: pointer;">
|
|
<i class="fa-solid fa-eye"></i>
|
|
</span>
|
|
<small id="passwordHelp" class="text-danger d-none">
|
|
Password must be at least 8 characters, include uppercase, lowercase, number, and special character.
|
|
</small>
|
|
</div>
|
|
|
|
<!-- Confirm Password Field -->
|
|
<div class="form-group position-relative mb-4 text-start">
|
|
<label for="password_confirm"></label>
|
|
<input type="password"
|
|
class="form-control item pe-5"
|
|
id="password_confirm"
|
|
name="pass_confirm"
|
|
placeholder="Confirm new password"
|
|
maxlength="30"
|
|
required>
|
|
<span class="position-absolute top-50 end-0 translate-middle-y me-3"
|
|
onclick="togglePasswordVisibility('password_confirm', this)"
|
|
style="cursor: pointer;">
|
|
<i class="fa-solid fa-eye"></i>
|
|
</span>
|
|
<small id="confirmPasswordHelp" class="text-danger d-none">
|
|
Passwords do not match.
|
|
</small>
|
|
</div>
|
|
|
|
<div class="mb-3 d-grid">
|
|
<button type="submit" class="btn btn-success item">Reset Password</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<?= $this->endSection() ?>
|
|
|
|
<?= $this->section('scripts') ?>
|
|
<script>
|
|
function togglePasswordVisibility(inputId, iconElement) {
|
|
const input = document.getElementById(inputId);
|
|
const icon = iconElement.querySelector('i');
|
|
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.classList.remove('fa-eye');
|
|
icon.classList.add('fa-eye-slash');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.remove('fa-eye-slash');
|
|
icon.classList.add('fa-eye');
|
|
}
|
|
}
|
|
|
|
function validatePassword() {
|
|
const password = document.getElementById('password').value;
|
|
const passwordConfirm = document.getElementById('password_confirm').value;
|
|
const passwordHelp = document.getElementById('passwordHelp');
|
|
const confirmPasswordHelp = document.getElementById('confirmPasswordHelp');
|
|
|
|
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@\-=\+*#$%&!?])[A-Za-z\d@\-=\+*#$%&!?]{8,}$/;
|
|
|
|
let valid = true;
|
|
|
|
// Validate password format
|
|
if (!passwordRegex.test(password)) {
|
|
passwordHelp.classList.remove('d-none');
|
|
valid = false;
|
|
} else {
|
|
passwordHelp.classList.add('d-none');
|
|
}
|
|
|
|
// Validate matching confirm password
|
|
if (password !== passwordConfirm) {
|
|
confirmPasswordHelp.classList.remove('d-none');
|
|
valid = false;
|
|
} else {
|
|
confirmPasswordHelp.classList.add('d-none');
|
|
}
|
|
|
|
return valid;
|
|
}
|
|
</script>
|
|
<?= $this->endSection() ?>
|