alrahma_sunday_school/app/Views/user/set_password.php

<?= $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() ?>