templates/registration/register.html.twig line 27

Open in your IDE?
  1. {% extends 'base_home.html.twig' %}
  3. {% block title %}Inscription | MaketOu{% endblock %}
  5. {% block body %}
  7.     <!-- Start Banner Area -->
  8.     <section class="banner-area organic-breadcrumb">
  9.         <div class="container">
  10.             <div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end">
  11.                 <div class="col-first">
  12.                     <h1>Inscription</h1>
  13.                     <nav class="d-flex align-items-center">
  14.                         <a href="{{ path('ui_home') }}">Accueil<span class="lnr lnr-arrow-right"></span></a>
  15.                         <a href="javascript:void(0)">Inscription</a>
  16.                     </nav>
  17.                 </div>
  18.             </div>
  19.         </div>
  20.     </section>
  21.     <!-- End Banner Area -->
  23.     {% for flash_error in app.flashes('verify_email_error') %}
  24.         <div class="alert alert-danger" role="alert">{{ flash_error }}</div>
  25.     {% endfor %}
  27.     {{ form_errors(registrationForm) }}
  30.     <!--================Login Box Area =================-->
  31.     <section class="login_box_area section_gap">
  32.         <div class="container">
  33.             <div class="row">
  34.                 <div class="col-lg-6">
  35.                     <div class="login_box_img">
  36.                         <img class="img-fluid" src="{{ asset('ui/img/login.jpg') }}" alt="">
  37.                         <div class="hover">
  38.                             <h4>Vous avez un compte?</h4>
  39.                             <p>Connectez-vous à votre compte pour accéder à vos commandes, suivre vos livraisons et gérer vos préférences personnelles.</p>
  40.                             <a class="primary-btn" href="{{ path('ui_app_login') }}">Se connecter</a>
  41.                         </div>
  42.                     </div>
  43.                 </div>
  44.                 <div class="col-lg-6">
  45.                     <div class="login_form_inner">
  46.                         <h3>S'inscrire</h3>
  48.                         {{ form_start(registrationForm, {'attr': {'class': 'needs-validation row login_form'}}) }}
  49.                         {% if app.user %}
  50.                             <div class="mb-3">
  51.                                 Vous êtes connecté comme {{ app.user.userIdentifier }}, <a
  52.                                         href="{{ path('ui_app_logout') }}">Déconnexion</a>
  53.                             </div>
  54.                         {% endif %}
  56.                         <div class="col-md-12 form-group">
  57.                             {{ form_label(registrationForm.email, 'Email', {'label_attr': {'class': 'form-label'}}) }}
  58.                             {{ form_widget(registrationForm.email, {'attr': {'class': 'form-control', 'placeholder': 'email@example.com', 'onfocus':"this.placeholder = ''", 'onblur':"this.placeholder = 'email@example.com'", 'id': 'registration_email'}}) }}
  59.                             {{ form_errors(registrationForm.email) }}
  60.                             <small class="form-text text-muted email-validation-message"></small>
  61.                         </div>
  62.                         <div class="col-md-12 form-group">
  63.                             {{ form_label(registrationForm.plainPassword, 'Mot de passe', {'label_attr': {'class': 'form-label'}}) }}
  64.                             {{ form_widget(registrationForm.plainPassword, {'attr': {'class': 'form-control', 'placeholder': 'Votre mot de passe', 'onfocus':"this.placeholder = ''", 'onblur':"this.placeholder = 'Votre mot de passe'", 'id': 'registration_password'}}) }}
  65.                             {{ form_errors(registrationForm.plainPassword) }}
  66.                             <small class="form-text text-muted password-validation-message"></small>
  67.                             <div class="password-strength mt-2" style="display: none;">
  68.                                 <div class="progress" style="height: 5px;">
  69.                                     <div class="progress-bar" role="progressbar" style="width: 0%"></div>
  70.                                 </div>
  71.                                 <small class="strength-text"></small>
  72.                             </div>
  73.                         </div>
  74.                         <div class="col-md-12 form-group">
  75.                             <div class="creat_account">
  76.                                 {{ form_widget(registrationForm.agreeTerms) }}
  77.                                 {{ form_label(registrationForm.agreeTerms, 'Accepte les conditions') }}
  78.                                 {{ form_errors(registrationForm.agreeTerms) }}
  79.                             </div>
  80.                         </div>
  82.                         <div class="col-md-12 form-group">
  83.                             <button class="primary-btn" type="submit">
  84.                                 S'inscrire
  85.                             </button>
  86.                             <a href="{{ path('ui_app_login') }}">Déjà un compte? <b>Se connecter</b></a>
  87.                         </div>
  89.                         {{ form_end(registrationForm) }}
  90.                     </div>
  91.                 </div>
  92.             </div>
  93.         </div>
  94.     </section>
  95. {% endblock %}
  97. {% block javascripts %}
  98. <script>
  99. document.addEventListener('DOMContentLoaded', function() {
  100.     const emailInput = document.getElementById('registration_email');
  101.     const passwordInput = document.getElementById('registration_password');
  102.     const emailMessage = document.querySelector('.email-validation-message');
  103.     const passwordMessage = document.querySelector('.password-validation-message');
  104.     const passwordStrength = document.querySelector('.password-strength');
  105.     const progressBar = passwordStrength.querySelector('.progress-bar');
  106.     const strengthText = passwordStrength.querySelector('.strength-text');
  107.     const registrationForm = document.querySelector('.needs-validation');
  108.     
  109.     // Validation email en temps réel
  110.     if (emailInput) {
  111.         emailInput.addEventListener('blur', function() {
  112.             validateEmail(this.value);
  113.         });
  114.         
  115.         emailInput.addEventListener('input', function() {
  116.             if (this.value.length > 0) {
  117.                 validateEmail(this.value);
  118.             } else {
  119.                 emailMessage.textContent = '';
  120.                 emailMessage.className = 'form-text text-muted email-validation-message';
  121.             }
  122.         });
  123.     }
  124.     
  125.     // Validation mot de passe en temps réel
  126.     if (passwordInput) {
  127.         passwordInput.addEventListener('input', function() {
  128.             validatePassword(this.value);
  129.         });
  130.         
  131.         passwordInput.addEventListener('blur', function() {
  132.             if (this.value.length > 0) {
  133.                 validatePassword(this.value);
  134.             }
  135.         });
  136.     }
  137.     
  138.     function validateEmail(email) {
  139.         const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  140.         
  141.         if (!email) {
  142.             emailMessage.textContent = '';
  143.             emailMessage.className = 'form-text text-muted email-validation-message';
  144.             return false;
  145.         }
  146.         
  147.         if (!emailRegex.test(email)) {
  148.             emailMessage.textContent = 'Format d\'email invalide. Exemple: exemple@domaine.com';
  149.             emailMessage.className = 'form-text text-danger email-validation-message';
  150.             emailInput.classList.add('is-invalid');
  151.             emailInput.classList.remove('is-valid');
  152.             return false;
  153.         }
  154.         
  155.         // Vérifier les domaines invalides communs
  156.         const invalidDomains = ['test.com', 'example.com', 'invalid.com'];
  157.         const domain = email.split('@')[1];
  158.         if (invalidDomains.includes(domain)) {
  159.             emailMessage.textContent = 'Veuillez utiliser une adresse email valide.';
  160.             emailMessage.className = 'form-text text-danger email-validation-message';
  161.             emailInput.classList.add('is-invalid');
  162.             emailInput.classList.remove('is-valid');
  163.             return false;
  164.         }
  165.         
  166.         emailMessage.textContent = '✓ Adresse email valide';
  167.         emailMessage.className = 'form-text text-success email-validation-message';
  168.         emailInput.classList.remove('is-invalid');
  169.         emailInput.classList.add('is-valid');
  170.         return true;
  171.     }
  172.     
  173.     function validatePassword(password) {
  174.         const minLength = 8;
  175.         const hasUpperCase = /[A-Z]/.test(password);
  176.         const hasLowerCase = /[a-z]/.test(password);
  177.         const hasNumber = /\d/.test(password);
  178.         const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
  179.         
  180.         if (!password) {
  181.             passwordMessage.textContent = '';
  182.             passwordMessage.className = 'form-text text-muted password-validation-message';
  183.             passwordStrength.style.display = 'none';
  184.             return false;
  185.         }
  186.         
  187.         let messages = [];
  188.         let strength = 0;
  189.         
  190.         if (password.length >= minLength) {
  191.             strength += 25;
  192.         } else {
  193.             messages.push(`Au moins ${minLength} caractères`);
  194.         }
  195.         
  196.         if (hasUpperCase) {
  197.             strength += 25;
  198.         } else {
  199.             messages.push('Une majuscule');
  200.         }
  201.         
  202.         if (hasLowerCase) {
  203.             strength += 25;
  204.         } else {
  205.             messages.push('Une minuscule');
  206.         }
  207.         
  208.         if (hasNumber) {
  209.             strength += 25;
  210.         } else {
  211.             messages.push('Un chiffre');
  212.         }
  213.         
  214.         // Bonus pour caractère spécial
  215.         if (hasSpecialChar) {
  216.             strength = Math.min(100, strength + 10);
  217.         }
  218.         
  219.         // Mettre à jour la barre de progression
  220.         progressBar.style.width = strength + '%';
  221.         
  222.         if (strength < 50) {
  223.             progressBar.className = 'progress-bar bg-danger';
  224.             strengthText.textContent = 'Faible';
  225.             strengthText.className = 'strength-text text-danger';
  226.         } else if (strength < 75) {
  227.             progressBar.className = 'progress-bar bg-warning';
  228.             strengthText.textContent = 'Moyen';
  229.             strengthText.className = 'strength-text text-warning';
  230.         } else {
  231.             progressBar.className = 'progress-bar bg-success';
  232.             strengthText.textContent = 'Fort';
  233.             strengthText.className = 'strength-text text-success';
  234.         }
  235.         
  236.         passwordStrength.style.display = 'block';
  237.         
  238.         if (messages.length > 0) {
  239.             passwordMessage.textContent = 'Le mot de passe doit contenir: ' + messages.join(', ');
  240.             passwordMessage.className = 'form-text text-danger password-validation-message';
  241.             passwordInput.classList.add('is-invalid');
  242.             passwordInput.classList.remove('is-valid');
  243.             return false;
  244.         } else {
  245.             passwordMessage.textContent = '✓ Mot de passe valide';
  246.             passwordMessage.className = 'form-text text-success password-validation-message';
  247.             passwordInput.classList.remove('is-invalid');
  248.             passwordInput.classList.add('is-valid');
  249.             return true;
  250.         }
  251.     }
  252.     
  253.     // Validation avant soumission
  254.     if (registrationForm) {
  255.         registrationForm.addEventListener('submit', function(e) {
  256.             const emailValid = validateEmail(emailInput.value);
  257.             const passwordValid = validatePassword(passwordInput.value);
  258.             
  259.             if (!emailValid || !passwordValid) {
  260.                 e.preventDefault();
  261.                 e.stopPropagation();
  262.                 
  263.                 if (!emailValid) {
  264.                     emailInput.focus();
  265.                 } else if (!passwordValid) {
  266.                     passwordInput.focus();
  267.                 }
  268.             }
  269.             
  270.             registrationForm.classList.add('was-validated');
  271.         });
  272.     }
  273. });
  274. </script>
  275. {% endblock %}