templates/registration/register.html.twig line 32

Open in your IDE?
  1. {% extends 'base_home.html.twig' %}
  3. {% block title %}Inscription | MaketOu{% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  7.     <link rel="stylesheet" href="{{ asset('css/modern-password-field.css') }}">
  8. {% endblock %}
  10. {% block body %}
  12.     <!-- Start Banner Area -->
  13.     <section class="banner-area organic-breadcrumb">
  14.         <div class="container">
  15.             <div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end">
  16.                 <div class="col-first">
  17.                     <h1>Inscription</h1>
  18.                     <nav class="d-flex align-items-center">
  19.                         <a href="{{ path('ui_home') }}">Accueil<span class="lnr lnr-arrow-right"></span></a>
  20.                         <a href="javascript:void(0)">Inscription</a>
  21.                     </nav>
  22.                 </div>
  23.             </div>
  24.         </div>
  25.     </section>
  26.     <!-- End Banner Area -->
  28.     {% for flash_error in app.flashes('verify_email_error') %}
  29.         <div class="alert alert-danger" role="alert">{{ flash_error }}</div>
  30.     {% endfor %}
  32.     {{ form_errors(registrationForm) }}
  35.     <!--================Login Box Area =================-->
  36.     <section class="login_box_area section_gap">
  37.         <div class="container">
  38.             <div class="row">
  39.                 <div class="col-lg-6">
  40.                     <div class="login_box_img">
  41.                         <img class="img-fluid" src="{{ asset('ui/img/login.jpg') }}" alt="">
  42.                         <div class="hover">
  43.                             <h4>Vous avez un compte?</h4>
  44.                             <p>Connectez-vous à votre compte pour accéder à vos commandes, suivre vos livraisons et gérer vos préférences personnelles.</p>
  45.                             <a class="primary-btn" href="{{ path('ui_app_login') }}">Se connecter</a>
  46.                         </div>
  47.                     </div>
  48.                 </div>
  49.                 <div class="col-lg-6">
  50.                     <div class="login_form_inner">
  51.                         <h3>S'inscrire</h3>
  53.                         {{ form_start(registrationForm, {'attr': {'class': 'needs-validation row login_form'}}) }}
  54.                         {% if app.user %}
  55.                             <div class="mb-3">
  56.                                 Vous êtes connecté comme {{ app.user.userIdentifier }}, <a
  57.                                         href="{{ path('ui_app_logout') }}">Déconnexion</a>
  58.                             </div>
  59.                         {% endif %}
  61.                         <div class="col-md-12 form-group">
  62.                             {{ form_label(registrationForm.email, 'Email', {'label_attr': {'class': 'form-label'}}) }}
  63.                             {{ form_widget(registrationForm.email, {'attr': {'class': 'form-control', 'placeholder': 'email@example.com', 'onfocus':"this.placeholder = ''", 'onblur':"this.placeholder = 'email@example.com'", 'id': 'registration_email'}}) }}
  64.                             {{ form_errors(registrationForm.email) }}
  65.                             <small class="form-text text-muted email-validation-message"></small>
  66.                         </div>
  67.                         <div class="col-md-12 form-group">
  68.                             {{ form_label(registrationForm.plainPassword, 'Mot de passe', {'label_attr': {'class': 'form-label'}}) }}
  69.                             <div class="modern-password-group" style="position: relative;">
  70.                                 {{ form_widget(registrationForm.plainPassword, {'attr': {'class': 'form-control modern-password', 'placeholder': 'Votre mot de passe', 'onfocus':"this.placeholder = ''", 'onblur':"this.placeholder = 'Votre mot de passe'", 'id': 'registration_password', 'autocomplete': 'new-password', 'style': 'padding-right: 55px; background-color: white !important;'}}) }}
  71.                                 <button type="button" class="eye-toggle" title="Afficher le mot de passe" aria-pressed="false" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 0; color: #777;">
  72.                                     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 24px; height: 24px; display: block; color: inherit;">
  73.                                         <defs>
  74.                                             <mask id="eye-open">
  75.                                                 <path d="M1 12 C1 12 5 4 12 4 19 4 23 12 23 12 23 14.66 23 17.32 23 20 19.32 20 15.66 20 12 20 8.33 20 4.66 20 1 20 1 17.32 1 14.66 1 12 z" fill="#D9D9D9" stroke="black" stroke-width="1.5" stroke-linejoin="round"></path>
  76.                                             </mask>
  77.                                             <mask id="eye-closed">
  78.                                                 <path d="M1 12C1 12 5 20 12 20C19 20 23 12 23 12V20H12H1V12Z" fill="#D9D9D9"></path>
  79.                                             </mask>
  80.                                         </defs>
  81.                                         <path class="lid lid--upper" d="M1 12 C1 12 5 4 12 4 19 4 23 12 23 12 " stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
  82.                                         <path class="lid lid--lower" d="M1 12C1 12 5 20 12 20C19 20 23 12 23 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
  83.                                         <g mask="url(#eye-open)">
  84.                                             <g class="eye">
  85.                                                 <circle cy="12" cx="12" r="4" fill="currentColor"></circle>
  86.                                                 <circle cy="11" cx="13" r="1" fill="black"></circle>
  87.                                             </g>
  88.                                         </g>
  89.                                     </svg>
  90.                                     <span class="sr-only">Afficher</span>
  91.                                 </button>
  92.                             </div>
  93.                             {{ form_errors(registrationForm.plainPassword) }}
  94.                             <small class="form-text text-muted password-validation-message"></small>
  95.                             <div class="password-strength mt-2" style="display: none;">
  96.                                 <div class="progress" style="height: 5px;">
  97.                                     <div class="progress-bar" role="progressbar" style="width: 0%"></div>
  98.                                 </div>
  99.                                 <small class="strength-text"></small>
  100.                             </div>
  101.                         </div>
  102.                         <div class="col-md-12 form-group">
  103.                             <div class="creat_account">
  104.                                 {{ form_widget(registrationForm.agreeTerms) }}
  105.                                 {{ form_label(registrationForm.agreeTerms, 'Accepte les conditions') }}
  106.                                 {{ form_errors(registrationForm.agreeTerms) }}
  107.                             </div>
  108.                         </div>
  110.                         <div class="col-md-12 form-group">
  111.                             <button class="primary-btn" type="submit">
  112.                                 S'inscrire
  113.                             </button>
  114.                             <a href="{{ path('ui_app_login') }}">Déjà un compte? <b>Se connecter</b></a>
  115.                         </div>
  117.                         {{ form_end(registrationForm) }}
  118.                     </div>
  119.                 </div>
  120.             </div>
  121.         </div>
  122.     </section>
  123. {% endblock %}
  125. {% block javascripts %}
  126.     {{ parent() }}
  127.     <script>
  128.     // Load GSAP standard (now 100% free with all plugins included as of April 2025)
  129.     (function() {
  130.         const GSAP_TIMEOUT = 5000; // 5 seconds timeout
  131.         let gsapLoaded = false;
  132.         
  133.         // Load GSAP standard package (includes all plugins)
  134.         const gsapScript = document.createElement('script');
  135.         gsapScript.src = 'https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js';
  136.         gsapScript.async = true;
  137.         gsapScript.onload = function() {
  138.             gsapLoaded = true;
  139.             console.log('[GSAP] Standard package loaded successfully');
  140.             // Load password field script after GSAP is loaded
  141.             setTimeout(loadPasswordFieldScript, 100);
  142.         };
  143.         gsapScript.onerror = function() {
  144.             console.warn('[GSAP] Failed to load, using fallback');
  145.             loadPasswordFieldScript();
  146.         };
  147.         
  148.         // Timeout fallback
  149.         setTimeout(function() {
  150.             if (!gsapLoaded) {
  151.                 console.warn('[GSAP] Timeout loading GSAP, using fallback');
  152.                 loadPasswordFieldScript();
  153.             }
  154.         }, GSAP_TIMEOUT);
  155.         
  156.         document.head.appendChild(gsapScript);
  157.         
  158.         function loadPasswordFieldScript() {
  159.             const script = document.createElement('script');
  160.             script.src = '{{ asset('js/modern-password-field.js') }}';
  161.             script.async = true;
  162.             document.head.appendChild(script);
  163.         }
  164.     })();
  165.     </script>
  166. <script>
  167. document.addEventListener('DOMContentLoaded', function() {
  168.     const emailInput = document.getElementById('registration_email');
  169.     const passwordInput = document.getElementById('registration_password');
  170.     const emailMessage = document.querySelector('.email-validation-message');
  171.     const passwordMessage = document.querySelector('.password-validation-message');
  172.     const passwordStrength = document.querySelector('.password-strength');
  173.     const progressBar = passwordStrength.querySelector('.progress-bar');
  174.     const strengthText = passwordStrength.querySelector('.strength-text');
  175.     const registrationForm = document.querySelector('.needs-validation');
  176.     
  177.     // Validation email en temps réel
  178.     if (emailInput) {
  179.         emailInput.addEventListener('blur', function() {
  180.             validateEmail(this.value);
  181.         });
  182.         
  183.         emailInput.addEventListener('input', function() {
  184.             if (this.value.length > 0) {
  185.                 validateEmail(this.value);
  186.             } else {
  187.                 emailMessage.textContent = '';
  188.                 emailMessage.className = 'form-text text-muted email-validation-message';
  189.             }
  190.         });
  191.     }
  192.     
  193.     // Validation mot de passe en temps réel
  194.     if (passwordInput) {
  195.         passwordInput.addEventListener('input', function() {
  196.             validatePassword(this.value);
  197.         });
  198.         
  199.         passwordInput.addEventListener('blur', function() {
  200.             if (this.value.length > 0) {
  201.                 validatePassword(this.value);
  202.             }
  203.         });
  204.     }
  205.     
  206.     function validateEmail(email) {
  207.         const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  208.         
  209.         if (!email) {
  210.             emailMessage.textContent = '';
  211.             emailMessage.className = 'form-text text-muted email-validation-message';
  212.             return false;
  213.         }
  214.         
  215.         if (!emailRegex.test(email)) {
  216.             emailMessage.textContent = 'Format d\'email invalide. Exemple: exemple@domaine.com';
  217.             emailMessage.className = 'form-text text-danger email-validation-message';
  218.             emailInput.classList.add('is-invalid');
  219.             emailInput.classList.remove('is-valid');
  220.             return false;
  221.         }
  222.         
  223.         // Vérifier les domaines invalides communs
  224.         const invalidDomains = ['test.com', 'example.com', 'invalid.com'];
  225.         const domain = email.split('@')[1];
  226.         if (invalidDomains.includes(domain)) {
  227.             emailMessage.textContent = 'Veuillez utiliser une adresse email valide.';
  228.             emailMessage.className = 'form-text text-danger email-validation-message';
  229.             emailInput.classList.add('is-invalid');
  230.             emailInput.classList.remove('is-valid');
  231.             return false;
  232.         }
  233.         
  234.         emailMessage.textContent = '✓ Adresse email valide';
  235.         emailMessage.className = 'form-text text-success email-validation-message';
  236.         emailInput.classList.remove('is-invalid');
  237.         emailInput.classList.add('is-valid');
  238.         return true;
  239.     }
  240.     
  241.     function validatePassword(password) {
  242.         const minLength = 8;
  243.         const hasUpperCase = /[A-Z]/.test(password);
  244.         const hasLowerCase = /[a-z]/.test(password);
  245.         const hasNumber = /\d/.test(password);
  246.         const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
  247.         
  248.         if (!password) {
  249.             passwordMessage.textContent = '';
  250.             passwordMessage.className = 'form-text text-muted password-validation-message';
  251.             passwordStrength.style.display = 'none';
  252.             return false;
  253.         }
  254.         
  255.         let messages = [];
  256.         let strength = 0;
  257.         
  258.         if (password.length >= minLength) {
  259.             strength += 25;
  260.         } else {
  261.             messages.push(`Au moins ${minLength} caractères`);
  262.         }
  263.         
  264.         if (hasUpperCase) {
  265.             strength += 25;
  266.         } else {
  267.             messages.push('Une majuscule');
  268.         }
  269.         
  270.         if (hasLowerCase) {
  271.             strength += 25;
  272.         } else {
  273.             messages.push('Une minuscule');
  274.         }
  275.         
  276.         if (hasNumber) {
  277.             strength += 25;
  278.         } else {
  279.             messages.push('Un chiffre');
  280.         }
  281.         
  282.         // Bonus pour caractère spécial
  283.         if (hasSpecialChar) {
  284.             strength = Math.min(100, strength + 10);
  285.         }
  286.         
  287.         // Mettre à jour la barre de progression
  288.         progressBar.style.width = strength + '%';
  289.         
  290.         if (strength < 50) {
  291.             progressBar.className = 'progress-bar bg-danger';
  292.             strengthText.textContent = 'Faible';
  293.             strengthText.className = 'strength-text text-danger';
  294.         } else if (strength < 75) {
  295.             progressBar.className = 'progress-bar bg-warning';
  296.             strengthText.textContent = 'Moyen';
  297.             strengthText.className = 'strength-text text-warning';
  298.         } else {
  299.             progressBar.className = 'progress-bar bg-success';
  300.             strengthText.textContent = 'Fort';
  301.             strengthText.className = 'strength-text text-success';
  302.         }
  303.         
  304.         passwordStrength.style.display = 'block';
  305.         
  306.         if (messages.length > 0) {
  307.             passwordMessage.textContent = 'Le mot de passe doit contenir: ' + messages.join(', ');
  308.             passwordMessage.className = 'form-text text-danger password-validation-message';
  309.             passwordInput.classList.add('is-invalid');
  310.             passwordInput.classList.remove('is-valid');
  311.             return false;
  312.         } else {
  313.             passwordMessage.textContent = '✓ Mot de passe valide';
  314.             passwordMessage.className = 'form-text text-success password-validation-message';
  315.             passwordInput.classList.remove('is-invalid');
  316.             passwordInput.classList.add('is-valid');
  317.             return true;
  318.         }
  319.     }
  320.     
  321.     // Validation avant soumission
  322.     if (registrationForm) {
  323.         registrationForm.addEventListener('submit', function(e) {
  324.             const emailValid = validateEmail(emailInput.value);
  325.             const passwordValid = validatePassword(passwordInput.value);
  326.             
  327.             if (!emailValid || !passwordValid) {
  328.                 e.preventDefault();
  329.                 e.stopPropagation();
  330.                 
  331.                 if (!emailValid) {
  332.                     emailInput.focus();
  333.                 } else if (!passwordValid) {
  334.                     passwordInput.focus();
  335.                 }
  336.             }
  337.             
  338.             registrationForm.classList.add('was-validated');
  339.         });
  340.     }
  341. });
  342. </script>
  343. {% endblock %}