recreate project

app/Views/user/reset_password.php

@@ -0,0 +1,114 @@
+<?= $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() ?>