recreate project

app/Views/user/set_password.php

@@ -0,0 +1,151 @@
+<?= $this->extend('layout/register_layout') ?>
+<?= $this->section('content') ?>
+
+<div class="registration-form container mt-5 mb-5">
+
+
+    <form method="post" action="<?= base_url('/user/save_password') ?>" onsubmit="return validatePassword()" autocomplete="off">
+        <?= 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;">Create Your Password</h3>
+        <br>
+        <input type="hidden" name="user_id" value="<?= esc($userId); ?>" required>
+        <input type="hidden" name="token" value="<?= esc($token); ?>" required>
+
+        <!-- New Password -->
+        <div class="mb-3">
+            <div class="input-with-icon">
+                <input type="password"
+                    class="form-control item"
+                    id="password"
+                    name="password"
+                    placeholder="Enter new password"
+                    maxlength="40"
+                    required
+                    autocomplete="new-password"
+                    oncopy="return false"
+                    oncut="return false"
+                    onpaste="return false">
+                <span class="toggle-password" onclick="togglePassword('password', this)">
+                    <i class="fa-solid fa-eye"></i>
+                </span>
+            </div>
+            <small id="passwordHelp" class="text-danger d-none">
+                Password must be at least 8 characters long, contain a number, an uppercase letter, a lowercase letter, and one special character: @, -, =, +, *, #, $, %, &, !
+            </small>
+            <small id="passwordCopyWarning" class="text-muted d-none">
+                Copy and paste are disabled for security reasons.
+            </small>
+        </div>
+
+        <!-- Confirm Password -->
+        <div class="mb-3">
+            <div class="input-with-icon">
+                <input type="password"
+                    class="form-control item"
+                    id="password_confirm"
+                    name="password_confirm"
+                    placeholder="Confirm new password"
+                    maxlength="40"
+                    required
+                    autocomplete="new-password"
+                    oncopy="return false"
+                    oncut="return false"
+                    onpaste="return false">
+                <span class="toggle-password" onclick="togglePassword('password_confirm', this)">
+                    <i class="fa-solid fa-eye"></i>
+                </span>
+            </div>
+            <small id="confirmPasswordHelp" class="text-danger d-none">
+                Passwords do not match.
+            </small>
+            <small id="confirmCopyWarning" class="text-muted d-none">
+                Copy and paste are disabled for security reasons.
+            </small>
+        </div>
+        <!-- Submit -->
+        <div class="mb-3 d-grid">
+            <button type="submit" class="btn btn-success item">Save Password</button>
+        </div>
+    </form>
+
+</div>
+
+<?= $this->endSection() ?>
+
+<?= $this->section('scripts') ?>
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const showWarning = (inputId, warningId) => {
+            const input = document.getElementById(inputId);
+            const warning = document.getElementById(warningId);
+
+            ['copy', 'paste', 'cut'].forEach(eventName => {
+                input.addEventListener(eventName, (e) => {
+                    e.preventDefault();
+                    warning.classList.remove('d-none');
+
+                    // Clear existing timeout if still active
+                    if (warning.timeout) clearTimeout(warning.timeout);
+
+                    // Hide again after 4 seconds
+                    warning.timeout = setTimeout(() => {
+                        warning.classList.add('d-none');
+                    }, 4000);
+                });
+            });
+        };
+
+        showWarning('password', 'passwordCopyWarning');
+        showWarning('password_confirm', 'confirmCopyWarning');
+    });
+
+    function togglePassword(fieldId, iconContainer) {
+        const input = document.getElementById(fieldId);
+        const icon = iconContainer.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;
+
+        if (!passwordRegex.test(password)) {
+            passwordHelp.classList.remove('d-none');
+            valid = false;
+        } else {
+            passwordHelp.classList.add('d-none');
+        }
+
+        if (password !== passwordConfirm) {
+            confirmPasswordHelp.classList.remove('d-none');
+            valid = false;
+        } else {
+            confirmPasswordHelp.classList.add('d-none');
+        }
+
+        return valid;
+    }
+</script>
+
+<?= $this->endSection() ?>