idrocap/idrocap_wa/templates/Users/add_citizen.php

<?php
/**
 * @var \App\WGS\Utils\Dto\Users\CitizenRegistrationDTO $citizenRegistrationData
 */
?>
<?php echo $this->Html->css('/bower_components/select2/dist/css/select2.min'); ?>
<div class="card card-primary card-outline">
    <div class="card-header d-sm-flex">
        <h2 class="card-title"><?= __('Modulo di registrazione') ?></h2>
    </div>
    <?= $this->Form->create($user, ['role' => 'form', 'type' => 'file', 'id' => 'add-citizen-js']) ?>
    <div class="card-body">
        <div class="row">
            <div class="col-md-12">
                <?= $this->Form->control('username', ['label' => __('Nome utente')]); ?>
            </div>
            <div class="col-md-6">
                <?php if ($citizenRegistrationData?->getName() ?? ''): ?>
                    <?= $this->Form->control('name', ['label' => __('Nome'),
                        'value' => $citizenRegistrationData?->getName() ?? '',
                        'readonly' => $citizenRegistrationData?->getName() ? true : false
                    ]); ?>
                <?php else: ?>
                    <?= $this->Form->control('name', ['label' => __('Nome'), 'required' => true]); ?>
                <?php endif; ?>
            </div>
            <div class="col-md-6">
                <?php if ($citizenRegistrationData?->getSurname() ?? ''): ?>
                    <?= $this->Form->control('surname', ['label' => __('Cognome'),
                        'value' => $citizenRegistrationData?->getSurname() ?? '',
                        'readonly' => $citizenRegistrationData?->getSurname() ? true : false
                    ]); ?>
                <?php else: ?>
                    <?= $this->Form->control('surname', ['label' => __('Cognome'), 'required' => true]); ?>
                <?php endif; ?>
            </div>
            <div class="col-md-6">
                <?php if ($citizenRegistrationData?->getFiscalCode() ?? ''): ?>
                    <?= $this->Form->control('tax_code', ['label' => __('Codice Fiscale'),
                        'value' => $citizenRegistrationData?->getFiscalCode() ?? '',
                        'readonly' => $citizenRegistrationData?->getFiscalCode() ? true : false
                    ]); ?>
                <?php else: ?>
                    <?= $this->Form->control('tax_code', ['label' => __('Codice Fiscale'), 'required' => true]); ?>
                <?php endif; ?>
            </div>

            <div class="col-md-6">
                <?= $this->Form->control('email', ['label' => __('Email'), 'required' => true, 'type' => 'email']); ?>
            </div>

            <div class="col-md-6">
                <?= $this->Form->control('password', ['label' => __('Password')]); ?>
            </div>

            <div class="col-md-6">
                <?= $this->Form->control('confirmPassword', ['label' => __('Conferma password'), 'type' => 'password', 'required' => true]); ?>
            </div>

            <div class="col-md-6">
                <?php if ($citizenRegistrationData?->getBirthdate() ?? ''): ?>
                    <?= $this->Form->control('birthday', ['label' => __('Data di nascita'),
                        'type' => 'date',
                        'value' => $citizenRegistrationData?->getBirthdate() ?? '',
                        'readonly' => $citizenRegistrationData?->getBirthdate() ? true : false
                    ]); ?>
                <?php else: ?>
                    <?= $this->Form->control('birthday', ['type' => 'date', 'label' => __('Data di nascita'), 'max' => $today->format('Y-m-d')]); ?>
                <?php endif; ?>
            </div>
            <div class="col-md-6">
                <?= $this->Form->control('birthplace', ['label' => __('Luogo di nascita')]); ?>
            </div>
            <div class="col-md-6">
                <?php if ($citizenRegistrationData?->getGender() ?? ''): ?>
                    <?= $this->Form->control('gender', ['label' => __('Sesso'),
                        'value' => $citizenRegistrationData?->getGender() ?? '',
                        'readonly' => $citizenRegistrationData?->getGender() ? true : false
                    ]); ?>
                <?php else: ?>
                    <?= $this->Form->control('gender', ['label' => __('Sesso'), 'type' => 'select', 'options' => ['M' => 'M', 'F' => 'F'], 'empty' => false, 'style="width: 100%']); ?>
                <?php endif; ?>

            </div>
            <div class="col-md-6">
                <?= $this->Form->control('address', ['label' => __('Indirizzo')]); ?>
            </div>
            <div class="col-md-6">
                <?= $this->Form->control('city', ['label' => __('Città')]); ?>
            </div>
            <div class="col-md-6">
                <?= $this->Form->control('cap', ['label' => __('CAP')]); ?>
            </div>
            <div class="col-md-12">
                <?= $this->Form->control('language_id', ['label' => __('Lingua preferita'), 'style="width: 100%']); ?>
            </div>
            <div class="col-md-12">
                <?= $this->Form->control('user_photo', ['label' => __('Foto del profilo (solo jpeg di dimensioni 160x160!)'), 'type' => 'file', 'accept' => '.jpeg']); ?>
            </div>
        </div>
    </div>
    <div class="card-footer d-flex">
        <div class="ml-auto">
            <?php echo $this->Form->submit(__('Registrati'), ['class' => 'btn btn-success', 'id' => 'js-submit-btn']); ?>
        </div>
    </div>
    <?php echo $this->Form->end(); ?>
</div>
<!-- jQuery -->
<?= $this->Html->script('/adminlte/plugins/jquery/jquery.min.js') ?>
<!-- SELECT2 -->
<?php echo $this->Html->script('/bower_components/select2/dist/js/select2.min'); ?>

<style>
    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
        background-color: #3c8dbc;
    }

    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove {
        color: white;
    }
</style>
<script>
    window.addEventListener('DOMContentLoaded', function () {
        $('#gender').select2();
        $('#language-id').select2();
        const form = document.querySelector('#add-citizen-js');
        const username = document.querySelector('#username');
        const password = document.querySelector('#password');
        const confirmPassword = document.querySelector('#confirmpassword');
        const email = document.querySelector('#email');
        const name = document.querySelector('#name');
        const surname = document.querySelector('#surname');
        const submit = document.querySelector('#js-submit-btn');

        emptyFieldCheck();
        form.addEventListener('input', function () {
            emptyFieldCheck();
        });

        function emptyFieldCheck() {
            if (submit) {
                submit.disabled = true;
            }
            if (
                username?.value.trim() !== ''
                && password?.value.trim() !== ''
                && email?.value.trim() !== ''
                && name?.value.trim() !== ''
                && surname?.value.trim() !== ''
                && confirmPassword?.value.trim() !== ''
            ) {
                submit.disabled = false;
            }
        }

        function passwordConfirmationChecker() {
            let typingTimer;
            const typingDelay = 500;

            confirmPassword.addEventListener('input', function () {
                clearTimeout(typingTimer);
                typingTimer = setTimeout(validatePasswords, typingDelay);
            });

            function validatePasswords() {
                const passwordValue = password.value;
                const confirmPasswordValue = confirmPassword.value;
                if (passwordValue !== confirmPasswordValue) {
                    let passwordError = document.querySelector('#confirm-password-error');
                    if (!passwordError) {
                        passwordError = document.createElement('div');
                        passwordError.id = 'confirm-password-error';
                        passwordError.classList.add('ms-0', 'invalid-feedback');
                        confirmPassword.parentNode.insertBefore(passwordError, confirmPassword.nextSibling);
                    }
                    passwordError.innerHTML = '<ul><li>Le password non corrispondono.</li></ul>';
                    passwordError.classList.add('d-block');
                    password.classList.add('is-invalid');
                    confirmPassword.classList.add('is-invalid');
                    submit.disabled = true;
                } else {
                    const passwordError = document.querySelector('#confirm-password-error');
                    if (passwordError) {
                        passwordError.innerHTML = '';
                        passwordError.classList.remove('d-block');
                    }
                    if (password.classList.contains('is-invalid')) {
                        password.classList.remove('is-invalid');
                        password.classList.add('is-valid');
                    }
                    if (confirmPassword.classList.contains('is-invalid')) {
                        confirmPassword.classList.remove('is-invalid');
                        confirmPassword.classList.add('is-valid');
                    }
                    submit.disabled = false;
                }
            }
        }

        function passwordRequirementChecker() {
            password.addEventListener('input', function () {
                const passwordValue = password.value;
                let errorMessages = [];

                if (passwordValue.length < 10) {
                    errorMessages.push('La password deve contenere almeno 10 caratteri.');
                }

                const uppercaseMatches = passwordValue.match(/[A-Z]/g) || [];
                if (uppercaseMatches.length < 2) {
                    errorMessages.push('La password deve contenere almeno 2 carattere/i maiuscolo/i.');
                }

                const numberMatches = passwordValue.match(/[0-9]/g) || [];
                if (numberMatches.length < 2) {
                    errorMessages.push('La password deve contenere almeno 2 numero/i.');
                }

                const specialCharacterMatches = passwordValue.match(/[@#$%^&*()]/g) || [];
                if (specialCharacterMatches.length < 2) {
                    errorMessages.push('La password deve contenere almeno 2 carattere/i speciale/i tra "@#$%^&*()".');
                }

                if (errorMessages.length > 0) {
                    let passwordError = document.querySelector('#password-error');
                    if (!passwordError) {
                        passwordError = document.createElement('div');
                        passwordError.id = 'password-error';
                        passwordError.classList.add('ms-0', 'invalid-feedback');
                        password.parentNode.insertBefore(passwordError, password.nextSibling);
                    }
                    passwordError.innerHTML = '<ul><li>' + errorMessages.join('</li><li>') + '</li></ul>';
                    passwordError.classList.add('d-block');
                    submit.disabled = true;
                } else {
                    const passwordError = document.querySelector('#password-error');
                    if (passwordError) {
                        passwordError.innerHTML = '';
                        passwordError.classList.remove('d-block');
                    }
                    submit.disabled = false;
                }
            });
        }

        passwordConfirmationChecker();
        passwordRequirementChecker();
    });

</script>