templates/inscription/inscription.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}IMMY BEAUTY - Inscription{% endblock %}
  5. {% block stylesheets %}
  6.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"/>
  7.     <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
  9.     <style>
  10.         .form-group { margin-bottom: 0.8rem !important; }
  11.         .form-label { margin-bottom: 0.2rem; color: #555; font-size: 0.9rem; }
  12.         .form-control { padding: 0.5rem 0.75rem; }
  13.         .registration-form {
  14.             background: white;
  15.             padding: 2rem;
  16.             border-radius: 10px;
  17.             box-shadow: 0 0 20px rgba(0,0,0,0.05);
  18.         }
  19.         .promo-code-section {
  20.             margin: 1.5rem 0;
  21.             padding: 1rem;
  22.             background: #f8f9fa;
  23.             border-radius: 8px;
  24.             border: 1px dashed #dee2e6;
  25.         }
  27.         .promo-code-toggle {
  28.             color: #FF6B6B;
  29.             text-decoration: none;
  30.             cursor: pointer;
  31.             display: inline-flex;
  32.             align-items: center;
  33.             font-size: 0.9rem;
  34.         }
  36.         .promo-code-input {
  37.             background: white;
  38.             border: 2px solid #FF6B6B;
  39.             border-radius: 4px;
  40.             padding: 0.5rem;
  41.             font-size: 1rem;
  42.             text-transform: uppercase;
  43.             letter-spacing: 1px;
  44.             text-align: center;
  45.         }
  47.         .promo-code-info {
  48.             font-size: 0.8rem;
  49.             color: #666;
  50.             margin-top: 0.5rem;
  51.         }
  52.     </style>
  53. {% endblock %}
  55. {% block body %}
  56.     <div class="container mt-4">
  57.         <div class="row justify-content-center">
  58.             <div class="col-md-6">
  59.                 <form method="post" action="{{ path('api_register') }}" class="registration-form">
  60.                     <input type="hidden" name="_csrf_token" value="{{ csrf_token('register') }}">
  61.                     <h2 class="text-center mb-2">Rejoignez IMMY BEAUTY</h2>
  62.                     <p class="text-center text-muted mb-4 small">Créez votre compte et commencez à cumuler des avantages exclusifs</p>
  64.                     <div class="row">
  65.                         <div class="col-md-6">
  66.                             <div class="form-group">
  67.                                 <label class="form-label">Prénom</label>
  68.                                 <input type="text" id="prenom" name="prenom" class="form-control" required autofocus>
  69.                             </div>
  70.                         </div>
  71.                         <div class="col-md-6">
  72.                             <div class="form-group">
  73.                                 <label class="form-label">Nom</label>
  74.                                 <input type="text" id="nom" name="nom" class="form-control" required>
  75.                             </div>
  76.                         </div>
  77.                     </div>
  79.                     <div class="form-group">
  80.                         <label class="form-label">Date de naissance</label>
  81.                         <input type="date" id="birthdate" name="birthdate" class="form-control" required>
  82.                     </div>
  84.                     <div class="row">
  85.                         <div class="col-md-6">
  86.                             <div class="form-group">
  87.                                 <label class="form-label">Email</label>
  88.                                 <input type="email" id="email" name="email" class="form-control" required>
  89.                             </div>
  90.                         </div>
  91.                         <div class="col-md-6">
  92.                             <div class="form-group">
  93.                                 <label class="form-label">Téléphone</label>
  94.                                 <input type="tel" id="telephone" name="telephone" class="form-control" required maxlength="10">
  95.                             </div>
  96.                         </div>
  97.                     </div>
  99.                     <div class="form-group mb-3">
  100.                         <label class="form-label d-flex align-items-center">
  101.                             <span>Code cadeau</span>
  102.                             <span class="ms-2 badge bg-secondary" style="font-size: 0.7em;">Facultatif</span>
  103.                         </label>
  104.                         <div class="input-group">
  105.                             <input type="text"
  106.                                    id="promo_code"
  107.                                    name="promo_code"
  108.                                    class="form-control"
  109.                                    placeholder="Uniquement si vous avez reçu un code par email"
  110.                                    autocomplete="off">
  111.                             <button class="btn btn-outline-secondary verify-code"
  112.                                     type="button"
  113.                                     id="verify-code">
  114.                                 <i class="fas fa-check"></i>
  115.                             </button>
  116.                         </div>
  117.                         <small class="text-muted">Laissez vide si vous n'avez pas de code</small>
  118.                         <div id="promo-status" class="form-text mt-1"></div>
  119.                     </div>
  121.                     <div class="row">
  122.                         <div class="col-md-6">
  123.                             <div class="form-group">
  124.                                 <label class="form-label">Mot de passe</label>
  125.                                 <input type="password" id="password" name="password" class="form-control" required>
  126.                                 <small class="form-text text-muted">8 caractères minimum</small>
  127.                             </div>
  128.                         </div>
  129.                         <div class="col-md-6">
  130.                             <div class="form-group">
  131.                                 <label class="form-label">Confirmer</label>
  132.                                 <input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
  133.                             </div>
  134.                         </div>
  135.                     </div>
  138.                     <div class="form-group mt-4">
  139.                         <button type="submit" class="btn btn-primary w-100">Créer mon compte</button>
  140.                     </div>
  141.                     <div class="text-center mt-3">
  142.                         <span class="small">Déjà membre ? <a href="{{ path('connexion') }}" class="text-decoration-none">Connectez-vous</a></span>
  143.                     </div>
  144.                 </form>
  145.             </div>
  146.         </div>
  147.     </div>
  149.     <section class="ftco-section">
  150.         <div class="container">
  151.             <div class="row">
  152.                 <div class="col-md-4 ftco-animate">
  153.                     <div class="media d-block text-center block-6 services">
  154.                         <div class="icon d-flex mb-3"><span class="fas fa-user-plus"></span></div>
  155.                         <div class="media-body">
  156.                             <h3 class="heading">INSCRIVEZ VOUS</h3>
  157.                             <p>Commencez votre voyage pour gagner des points et profiter d'avantages exclusifs.</p>
  158.                         </div>
  159.                     </div>
  160.                 </div>
  161.                 <div class="col-md-4 ftco-animate">
  162.                     <div class="media d-block text-center block-6 services">
  163.                         <div class="icon d-flex mb-3"><span class="fas fa-trophy"></span></div>
  164.                         <div class="media-body">
  165.                             <h3 class="heading">CUMULEZ DES POINTS</h3>
  166.                             <p>Plus vous collectez de points, plus vous débloquez de récompenses et de privilèges spéciaux.</p>
  167.                         </div>
  168.                     </div>
  169.                 </div>
  170.                 <div class="col-md-4 ftco-animate">
  171.                     <div class="media d-block text-center block-6 services">
  172.                         <div class="icon d-flex mb-3"><span class="fas fa-gift"></span></div>
  173.                         <div class="media-body">
  174.                             <h3 class="heading">PROFITEZ DES AVANTAGES</h3>
  175.                             <p>Échangez vos points contre des réductions, des produits gratuits ou des services spéciaux.</p>
  176.                         </div>
  177.                     </div>
  178.                 </div>
  179.             </div>
  180.         </div>
  181.     </section>
  182. {% endblock %}
  184. {% block btn_reserver %}
  185. {% endblock %}
  187. {% block javascripts %}
  188.     {{ parent() }}
  189. <script>
  190.     $(document).ready(function() {
  191.         const urlParams = new URLSearchParams(window.location.search);
  192.         const codeFromUrl = urlParams.get('code');
  194.         if (codeFromUrl) {
  195.             // Pré-rempli le champ
  196.             $('#promo_code').val(codeFromUrl);
  198.             // Attendre que l'email soit rempli pour vérifier automatiquement
  199.             $('#email').on('change', function() {
  200.                 const email = $(this).val().trim();
  201.                 if (email) {
  202.                     $('#verify-code').click(); // Déclenche la vérification
  203.                 }
  204.             });
  205.         }
  206.         $('form').submit(function(e) {
  207.             e.preventDefault();
  209.             // Récupération et nettoyage des données
  210.             const formData = {
  211.                 prenom: $('#prenom').val().trim(),
  212.                 nom: $('#nom').val().trim(),
  213.                 email: $('#email').val().trim().toLowerCase(),
  214.                 telephone: $('#telephone').val().trim().replace(/\D/g, ''),
  215.                 password: $('#password').val(),
  216.                 confirm_password: $('#confirm_password').val(),
  217.                 birthdate: $('#birthdate').val(),
  218.                 promo_code: $('#promo_code').val().trim(),
  219.                 _csrf_token: $('[name="_csrf_token"]').val()
  220.             };
  222.             if (formData.promo_code) {
  223.                 formData.promo_verified = Boolean($('#promo_code').prop('readonly'));
  224.             }
  226.             // Validation complète
  227.             const errors = [];
  229.             // Validation nom/prénom
  230.             if (!formData.prenom || formData.prenom.length < 2) {
  231.                 errors.push('Le prénom doit contenir au moins 2 caractères');
  232.             }
  233.             if (!formData.nom || formData.nom.length < 2) {
  234.                 errors.push('Le nom doit contenir au moins 2 caractères');
  235.             }
  237.             // Validation email
  238.             const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  239.             if (!emailRegex.test(formData.email)) {
  240.                 errors.push('Adresse email invalide');
  241.             }
  243.             // Validation téléphone
  244.             if (!/^0[1-9][0-9]{8}$/.test(formData.telephone)) {
  245.                 errors.push('Le numéro de téléphone doit commencer par 0 et contenir 10 chiffres');
  246.             }
  248.             // Validation date de naissance
  249.             const birthDate = new Date(formData.birthdate);
  250.             const today = new Date();
  251.             let age = today.getFullYear() - birthDate.getFullYear();
  252.             const m = today.getMonth() - birthDate.getMonth();
  253.             if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
  254.                 age--;
  255.             }
  256.             if (!formData.birthdate) {
  257.                 errors.push('La date de naissance est obligatoire');
  258.             } else if (age < 16) {
  259.                 errors.push('Vous devez avoir au moins 16 ans pour vous inscrire');
  260.             }
  262.             // Validation mot de passe
  263.             const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/;
  264.             if (!passwordRegex.test(formData.password)) {
  265.                 errors.push('Le mot de passe doit contenir au moins 8 caractères, une lettre et un chiffre');
  266.             }
  267.             if (formData.password !== formData.confirm_password) {
  268.                 errors.push('Les mots de passe ne correspondent pas');
  269.             }
  271.             // Affichage des erreurs
  272.             if (errors.length > 0) {
  273.                 errors.forEach(error => toastr.error(error));
  274.                 return;
  275.             }
  277.             // Envoi sécurisé
  278.             $.ajax({
  279.                 type: 'POST',
  280.                 url: '{{ path('api_register') }}',
  281.                 data: formData,
  282.                 dataType: 'json',
  283.                 headers: {
  284.                     'X-CSRF-Token': formData._csrf_token
  285.                 },
  286.                 success: function(response) {
  287.                     if (response.success) {
  288.                         localStorage.setItem('registerSuccess', 'Inscription réussie ! Vous êtes désormais connecté.');
  289.                         window.location.href = '{{ path('app_fidelite') }}';
  290.                     } else {
  291.                         toastr.error(response.message || 'Une erreur est survenue');
  292.                     }
  293.                 },
  294.                 error: function(xhr) {
  295.                     const errorMsg = xhr.responseJSON?.message || "Une erreur est survenue lors de l'inscription.";
  296.                     toastr.error(errorMsg);
  297.                 }
  298.             });
  299.         });
  301.         // Masquer les caractères spéciaux dans les champs texte
  302.         $('input[type="text"]').on('input', function() {
  303.             this.value = this.value.replace(/[<>]/g, '');
  304.         });
  306.         // Formatter le téléphone en temps réel
  307.         $('#telephone').on('input', function() {
  308.             this.value = this.value.replace(/\D/g, '').substring(0, 10);
  309.         });
  310.     });
  312.     $('#verify-code').click(function() {
  313.         const code = $('#promo_code').val().trim();
  314.         const email = $('#email').val().trim();
  316.         if (!code) {
  317.             toastr.error('Veuillez entrer un code');
  318.             return;
  319.         }
  321.         if (!email) {
  322.             toastr.error('Veuillez d\'abord remplir votre email');
  323.             return;
  324.         }
  326.         const $button = $(this);
  327.         const $status = $('#promo-status');
  329.         $button.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
  331.         $.ajax({
  332.             url: '{{ path('verify_promo_code') }}',
  333.             method: 'POST',
  334.             data: {
  335.                 code: code,
  336.                 email: email,
  337.                 _token: '{{ csrf_token('promo_verify') }}'
  338.             },
  339.             success: function(response) {
  340.                 if (response.valid) {
  341.                     $status.html(`<small class="text-success">
  342.                     <i class="fas fa-check-circle"></i> ${response.message}
  343.                 </small>`);
  344.                     $('#promo_code').prop('readonly', true);
  345.                     $button.html('<i class="fas fa-check"></i>').addClass('btn-success');
  346.                 } else {
  347.                     $status.html(`<small class="text-danger">
  348.                     <i class="fas fa-times-circle"></i> ${response.message}
  349.                 </small>`);
  350.                     $button.prop('disabled', false).html('<i class="fas fa-check"></i>');
  351.                 }
  352.             },
  353.             error: function(xhr) {
  354.                 let message = xhr.responseJSON?.message || 'Une erreur est survenue';
  355.                 $status.html(`<small class="text-danger">
  356.                 <i class="fas fa-times-circle"></i> ${message}
  357.             </small>`);
  358.                 $button.prop('disabled', false).html('<i class="fas fa-check"></i>');
  359.             }
  360.         });
  361.     });
  365. </script>
  366. {% endblock %}