templates/user/register.html.twig line 398

Open in your IDE?
  1. {% extends "base_security.html.twig" %}
  3. {% block fos_user_title %}
  4.   <h4 class="auth-header text-center" style="font-weight: 600; color: #2c3e50; margin-bottom: 0;">{{ 'title.new_user_account' | trans }}</h4>
  5. {% endblock fos_user_title %}
  7. {% block fos_user_content %}
  8.     <style>
  9.         .auth-box-w {
  10.             background: white;
  11.             border-radius: 16px;
  12.             padding: 25px;
  13.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  14.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  15.         }
  16.         
  17.         .auth-box-w:hover {
  18.             box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  19.         }
  20.         
  21.         .form-container {
  22.             max-width: 380px;
  23.             margin: 0 auto;
  24.         }
  26.         img {
  27.             width: 35px;
  28.             transition: transform 0.3s ease;
  29.         }
  30.         
  31.         img:hover {
  32.             transform: scale(1.05);
  33.         }
  34.         
  35.         /* Header avec Langue */
  36.         .header-separator {
  37.             display: flex;
  38.             justify-content: space-between;
  39.             align-items: center;
  40.             margin-bottom: 20px;
  41.             padding-bottom: 12px;
  42.             border-bottom: 2px solid #e8ecf1;
  43.         }
  44.         
  45.         .header-separator h4 {
  46.             background: linear-gradient(135deg, #1976d2, #0d47a1);
  47.             -webkit-background-clip: text;
  48.             background-clip: text;
  49.             color: transparent;
  50.         }
  51.         
  52.         .language-selector {
  53.             display: flex;
  54.             align-items: center;
  55.             gap: 8px;
  56.         }
  57.         
  58.         .language-selector label {
  59.             margin: 0;
  60.             color: #666;
  61.             font-size: 12px;
  62.             font-weight: 500;
  63.         }
  64.         
  65.         .language-selector select {
  66.             padding: 4px 8px;
  67.             border: 1px solid #e0e4e8;
  68.             border-radius: 6px;
  69.             background: #fafbfc;
  70.             font-size: 12px;
  71.             cursor: pointer;
  72.             transition: all 0.2s ease;
  73.         }
  74.         
  75.         .language-selector select:hover {
  76.             border-color: #1976d2;
  77.             background: white;
  78.         }
  79.         
  80.         .form-group {
  81.             margin-bottom: 14px;
  82.         }
  83.         
  84.         .form-group label {
  85.             display: block;
  86.             margin-bottom: 5px;
  87.             font-weight: 600;
  88.             color: #2c3e50;
  89.             font-size: 12px;
  90.             letter-spacing: 0.3px;
  91.         }
  92.         
  93.         .form-control, .custom-select {
  94.             width: 100%;
  95.             padding: 8px 12px;
  96.             border: 1.5px solid #e8ecf1;
  97.             border-radius: 8px;
  98.             font-size: 13px;
  99.             transition: all 0.3s ease;
  100.             background: #fafbfc;
  101.             font-family: inherit;
  102.         }
  103.         
  104.         .form-control:hover, .custom-select:hover {
  105.             border-color: #bdc3c7;
  106.             background: white;
  107.         }
  108.         
  109.         .form-control:focus, .custom-select:focus {
  110.             outline: none;
  111.             border-color: #1976d2;
  112.             background: white;
  113.             box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
  114.         }
  115.         
  116.         select.form-control, select.custom-select {
  117.             appearance: none;
  118.             background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  119.             background-repeat: no-repeat;
  120.             background-position: right 10px center;
  121.             background-size: 10px;
  122.         }
  123.         
  124.         /* Groupe téléphone */
  125.         .phone-group {
  126.             display: flex;
  127.             gap: 8px;
  128.             align-items: center;
  129.         }
  130.         
  131.         .phone-prefix {
  132.             width: 70px;
  133.             flex-shrink: 0;
  134.         }
  135.         
  136.         .phone-prefix input {
  137.             text-align: center;
  138.             background: #f0f2f5;
  139.             border: 1.5px solid #e8ecf1;
  140.             font-weight: 600;
  141.             color: #1976d2;
  142.         }
  143.         
  144.         .phone-number {
  145.             flex: 1;
  146.         }
  147.         
  148.         .phone-hint {
  149.             font-size: 10px;
  150.             color: #95a5a6;
  151.             margin-top: 4px;
  152.             display: flex;
  153.             align-items: center;
  154.             gap: 4px;
  155.         }
  156.         
  157.         .phone-hint::before {
  158.             content: "💡";
  159.             font-size: 10px;
  160.         }
  161.         
  162.         /* Ligne de séparation */
  163.         .separator {
  164.             height: 1px;
  165.             background: linear-gradient(90deg, transparent, #e0e4e8, transparent);
  166.             margin: 18px 0;
  167.         }
  168.         
  169.         /* Boutons */
  170.         .buttons-group {
  171.             display: flex;
  172.             gap: 12px;
  173.             margin-top: 18px;
  174.         }
  175.         
  176.         .btn {
  177.             flex: 1;
  178.             padding: 9px;
  179.             border: none;
  180.             border-radius: 8px;
  181.             font-size: 13px;
  182.             font-weight: 600;
  183.             cursor: pointer;
  184.             transition: all 0.3s ease;
  185.             text-align: center;
  186.             text-decoration: none;
  187.             display: inline-block;
  188.             letter-spacing: 0.5px;
  189.         }
  190.         
  191.         .btn-primary {
  192.             background: linear-gradient(135deg, #1976d2, #0d47a1);
  193.             color: white;
  194.             box-shadow: 0 2px 4px rgba(25, 118, 210, 0.2);
  195.         }
  196.         
  197.         .btn-primary:hover {
  198.             transform: translateY(-2px);
  199.             box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
  200.             background: linear-gradient(135deg, #1e88e5, #1565c0);
  201.         }
  202.         
  203.         .btn-primary:active {
  204.             transform: translateY(0);
  205.         }
  206.         
  207.         .btn-secondary {
  208.             background: white;
  209.             color: #666;
  210.             border: 1.5px solid #e0e4e8;
  211.         }
  212.         
  213.         .btn-secondary:hover {
  214.             background: #f8f9fa;
  215.             border-color: #1976d2;
  216.             color: #1976d2;
  217.             transform: translateY(-2px);
  218.         }
  219.         
  220.         /* Alertes */
  221.         .alert {
  222.             border-radius: 8px;
  223.             padding: 10px 12px;
  224.             margin-bottom: 15px;
  225.             border: none;
  226.             font-size: 12px;
  227.             display: flex;
  228.             align-items: center;
  229.             gap: 8px;
  230.         }
  231.         
  232.         .alert-danger {
  233.             background: linear-gradient(135deg, #fee, #fdd);
  234.             color: #c33;
  235.             border-left: 4px solid #c33;
  236.         }
  237.         
  238.         .text-danger {
  239.             color: #e74c3c;
  240.         }
  241.         
  242.         .help-block {
  243.             font-size: 10px;
  244.             margin-top: 3px;
  245.             display: flex;
  246.             align-items: center;
  247.             gap: 4px;
  248.         }
  249.         
  250.         .help-block::before {
  251.             
  252.             font-size: 9px;
  253.         }
  254.         
  255.         /* Footer logos */
  256.         .footer-logos {
  257.             margin-top: 18px;
  258.             padding-top: 15px;
  259.             border-top: 1px solid #e8ecf1;
  260.             text-align: center;
  261.         }
  262.         
  263.         .footer-logos span {
  264.             display: block;
  265.             color: #95a5a6;
  266.             font-size: 10px;
  267.             margin-bottom: 10px;
  268.             font-weight: 500;
  269.         }
  270.         
  271.         .logos-container {
  272.             display: flex;
  273.             justify-content: center;
  274.             gap: 20px;
  275.             flex-wrap: wrap;
  276.             align-items: center;
  277.         }
  278.         
  279.         .logos-container a {
  280.             display: inline-block;
  281.             line-height: 0;
  282.             transition: transform 0.3s ease;
  283.         }
  284.         
  285.         .logos-container a:hover {
  286.             transform: translateY(-2px);
  287.         }
  288.         
  289.         .logos-container img {
  290.             width: 32px !important;
  291.             height: auto !important;
  292.             max-width: 32px;
  293.             opacity: 0.6;
  294.             transition: all 0.3s ease;
  295.             border-radius: 6px;
  296.             filter: grayscale(0.2);
  297.         }
  298.         
  299.         .logos-container img:hover {
  300.             opacity: 1;
  301.             filter: grayscale(0);
  302.         }
  303.         
  304.         /* Diaspora container */
  305.         .diaspora-container {
  306.             background: linear-gradient(135deg, #f8f9fa, #f1f3f5);
  307.             border-radius: 8px;
  308.             padding: 10px 12px;
  309.             margin-top: 5px;
  310.             border: 1px solid #e8ecf1;
  311.         }
  312.         
  313.         .diaspora-container label {
  314.             margin-bottom: 6px;
  315.             font-size: 11px;
  316.             color: #2c3e50;
  317.         }
  318.         
  319.         /* Ligne pour mot de passe */
  320.         .password-row {
  321.             display: flex;
  322.             gap: 12px;
  323.             margin-bottom: 14px;
  324.         }
  325.         
  326.         .password-col {
  327.             flex: 1;
  328.         }
  329.         
  330.         .password-col .form-group {
  331.             margin-bottom: 0;
  332.         }
  333.         
  334.         /* Champ avec icône */
  335.         .input-icon {
  336.             position: relative;
  337.         }
  338.         
  339.         /* Checkbox personnalisée */
  340.         .custom-checkbox {
  341.             display: flex;
  342.             align-items: center;
  343.             gap: 8px;
  344.             cursor: pointer;
  345.         }
  346.         
  347.         /* Responsive */
  348.         @media (max-width: 576px) {
  349.             .form-container {
  350.                 max-width: 100%;
  351.                 padding: 0 10px;
  352.             }
  353.             
  354.             .auth-box-w {
  355.                 padding: 20px;
  356.             }
  357.             
  358.             .buttons-group {
  359.                 flex-direction: column;
  360.                 gap: 10px;
  361.             }
  362.             
  363.             .phone-group {
  364.                 flex-direction: column;
  365.                 gap: 8px;
  366.             }
  367.             
  368.             .phone-prefix {
  369.                 width: 100%;
  370.             }
  371.             
  372.             .header-separator {
  373.                 flex-direction: column;
  374.                 gap: 10px;
  375.                 align-items: flex-start;
  376.             }
  377.             
  378.             .password-row {
  379.                 flex-direction: column;
  380.                 gap: 14px;
  381.             }
  382.         }
  383.     </style>
  385.     <div class="form-container">
  386.         {% if app.session.flashBag.has('danger') == true %}
  387.             <div class="alert alert-danger alert-dismissible fade show" role="alert">
  388.                 <span>⚠️</span>
  389.                 {% for message in app.session.flashbag.get('danger') %}
  390.                     <p class="text-center w-100 mb-0">{{ message }}</p>
  391.                 {% endfor %}
  392.                 <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="margin-left: auto;">
  393.                     <span aria-hidden="true">&times;</span>
  394.                 </button>
  395.             </div>
  396.         {% endif %}
  398.         <div class="help-block form-text with-errors text-danger" style="margin-bottom: 10px;">{{ form_errors(form) | raw }}</div>
  399.         
  400.         <form id="form-register" action="{{ path('register_create_account') }}" method="post" novalidate>
  401.             {{ form_widget(form._token) }}
  402.             
  403.             <!-- Header avec Langue -->
  404.             <div class="header-separator">
  405.                 <h4 style="margin: 0; font-size: 16px; font-weight: 700;">📝 {{ 'title.new_user_account' | trans }}</h4>
  406.                 <div class="language-selector">
  407.                     <label>🌐 {{ 'Langue' | trans }}</label>
  408.                     <select id="language-select">
  409.                         <option value="fr">Français</option>
  410.                         <option value="en">English</option>
  411.                         <option value="es">Español</option>
  412.                     </select>
  413.                 </div>
  414.             </div>
  415.             
  416.             <!-- Type d'utilisateur -->
  417.             <div class="form-group">
  418.                 <label>👤 {{ "menu.user_type" | trans }} <span class="text-danger">*</span></label>
  419.                 {{ form_widget(form.typePerson, { 'attr': {'class': 'form-control', 'required': 'required'} }) }}
  420.                 <div class="help-block text-danger">{{ form_errors(form.typePerson) }}</div>
  421.             </div>
  422.             
  423.             <!-- Diaspora -->
  424.             <div id="diaspora" class="form-group" style="display: none;">
  425.                 <div class="diaspora-container">
  426.                     <label>🌍 {{ 'menu.diaspora' | trans }}</label>
  427.                     <div class="d-flex align-items-center">
  428.                         {{ form_widget(form.diaspora, { 'attr': {'class': 'form-check-input', 'style': 'margin-right: 8px; width: 16px; height: 16px; cursor: pointer;'} }) }}
  429.                         <span style="font-size: 12px;">{{ 'menu.diaspora_help' | trans | default('Êtes-vous membre de la diaspora ?') }}</span>
  430.                     </div>
  431.                     <div class="help-block text-danger">{{ form_errors(form.diaspora) }}</div>
  432.                 </div>
  433.             </div>
  434.             
  435.             <!-- Région / Pays -->
  436.             <div class="form-group">
  437.                 <label>📍 
  438.                     {% if struct_province_country_city == "true" %}
  439.                         {{ 'menu.region' | trans }}
  440.                     {% else %}
  441.                         {{ 'menu.country' | trans }}
  442.                     {% endif %}
  443.                     <span class="text-danger">*</span>
  444.                 </label>
  445.                 {% if struct_province_country_city == "true" %}
  446.                     {{ create_translated_select(form.region, { 'attr': {'class': 'form-control custom-select', 'id': 'userbundle_user_region'} }) }}
  447.                     <div class="help-block text-danger">{{ form_errors(form.region) }}</div>
  448.                 {% else %}
  449.                     {{ create_translated_select(form.country, { 'attr': {'class': 'form-control custom-select', 'id': 'userbundle_user_country'} }) }}
  450.                     <div class="help-block text-danger">{{ form_errors(form.country) }}</div>
  451.                 {% endif %}
  452.             </div>
  453.             
  454.             <!-- Pays de résidence -->
  455.             <div id="residenceCountry" class="form-group" style="display: none">
  456.                 <label>🏠 {{ 'menu.residence_country' | trans }} <span class="text-danger">*</span></label>
  457.                 {% if struct_province_country_city == "true" %}
  458.                     {{ create_translated_select(form.residenceRegion, { 'attr': {'class': 'form-control custom-select', 'id': 'residence-select'} }) }}
  459.                     <div class="help-block text-danger">{{ form_errors(form.residenceRegion) }}</div>
  460.                 {% else %}
  461.                     {{ create_translated_select(form.residenceCountry, { 'attr': {'class': 'form-control custom-select', 'id': 'residence-select'} }) }}
  462.                     <div class="help-block text-danger">{{ form_errors(form.residenceCountry) }}</div>
  463.                 {% endif %}
  464.             </div>
  465.             
  466.             <!-- Téléphone -->
  467.             <div class="form-group">
  468.                 <label>📞 {{ 'menu.phone' | trans }} : {{ 'menu.phone_indicator' | trans }} (<span id="phone_code">+XX</span>) + N° <span class="text-danger">*</span></label>
  469.                 <div class="phone-group">
  470.                     <div class="phone-prefix">
  471.                         <input type="text" id="phone_prefix_display" class="form-control" value="+XX" readonly>
  472.                     </div>
  473.                     <div class="phone-number">
  474.                         {{ form_widget(form.phone, { 'attr': {'class': 'form-control', 'type': 'tel', 'required': 'required', 'placeholder': 'Numéro de téléphone'} }) }}
  475.                     </div>
  476.                 </div>
  477.                 <div class="phone-hint">{{ 'menu.phone_format_hint' | trans | default('Exemple: 612345678') }}</div>
  478.                 <div class="help-block text-danger">{{ form_errors(form.phone) }}</div>
  479.             </div>
  480.             
  481.             <!-- Champs optionnels cachés -->
  482.             <div class="form-group" style="display: none">
  483.                 <label>👤 Pseudo (Optionnel)</label>
  484.                 {{ form_widget(form.username, { 'attr': {'class': 'form-control'} }) }}
  485.             </div>
  486.             
  487.             <div class="form-group" style="display: none">
  488.                 <label>📧 Email (Optionnel)</label>
  489.                 {{ form_widget(form.email, { 'attr': {'class': 'form-control', 'type': 'email'} }) }}
  490.             </div>
  491.             
  492.             <!-- Mot de passe et Confirmation -->
  493.             <div class="password-row">
  494.                 <div class="password-col">
  495.                     <div class="form-group">
  496.                         <label>🔒 {{ "menu.password" | trans }} <span class="text-danger">*</span></label>
  497.                         {{ form_widget(form.plainPassword.first, { 'attr': {'class': 'form-control', 'type': 'password', 'required': 'required', 'minlength': '6', 'placeholder': '••••••'} }) }}
  498.                         <small class="phone-hint">Minimum 6 caractères</small>
  499.                         <div class="help-block text-danger">{{ form_errors(form.plainPassword.first) }}</div>
  500.                     </div>
  501.                 </div>
  502.                 <div class="password-col">
  503.                     <div class="form-group">
  504.                         <label>✓ {{ "menu.confirm" | trans }} <span class="text-danger">*</span></label>
  505.                         {{ form_widget(form.plainPassword.second, { 'attr': {'class': 'form-control', 'type': 'password', 'required': 'required', 'placeholder': '••••••'} }) }}
  506.                         <div class="help-block text-danger">{{ form_errors(form.plainPassword.second) }}</div>
  507.                     </div>
  508.                 </div>
  509.             </div>
  510.             
  511.             <!-- Ligne de séparation élégante -->
  512.             <div class="separator"></div>
  513.             
  514.             <!-- Boutons -->
  515.             <div class="buttons-group">
  516.                 <button type="submit" class="btn btn-primary" id="submitRegister">
  517.                     ✓ {{ 'menu.validate' | trans }}
  518.                 </button>
  519.                 <a href="{{ path('logout') }}" class="btn btn-secondary">
  520.                     ✗ {{ 'menu.cancel' | trans }}
  521.                 </a>
  522.             </div>
  523.             
  524.             <!-- Footer logos -->
  525.             <div class="footer-logos">
  526.                 <span>{{ "footer.dev_by" | trans }}</span>
  527.                 <div class="logos-container">
  528.                     <a target="_blank" href="https://ifef.francophonie.org/" rel="noopener noreferrer">
  529.                         <img src="{{ asset('build/images/pinsuprem/logo_ifef.jpg') }}" alt="IFEF" onerror="this.style.display='none'">
  530.                     </a>
  531.                     <a target="_blank" href="https://www.francophonie.org/" rel="noopener noreferrer">
  532.                         <img src="{{ asset('build/images/pinsuprem/logo_oif.jpg') }}" alt="OIF" onerror="this.style.display='none'">
  533.                     </a>
  534.                 </div>
  535.             </div>
  536.         </form>
  537.     </div>
  538.     
  539.     <select hidden id="indTel">
  540.         {% for country in allCountries %}
  541.             <option value="{{ country.id }}" data-code="{{ country.phoneCode }}">{{ country.phoneCode }}</option>
  542.         {% endfor %}
  543.     </select>
  544. {% endblock %}
  546. {% block fos_user_script %}
  547. <script>
  548. $(document).ready(function() {
  549.     $('#diaspora').hide();
  550.     $('#residenceCountry').hide();
  551.     
  552.     if ($('#userbundle_user_typePerson option:selected').val() == 'ROLE_DIPLOME') {
  553.         $('#diaspora').show();
  554.     }
  555.     
  556.     updatePhonePrefix();
  557.     
  558.     $('#userbundle_user_typePerson').on('change', function() {
  559.         if ($(this).val() == 'ROLE_DIPLOME') {
  560.             $('#diaspora').slideDown(200);
  561.         } else {
  562.             $('#userbundle_user_diaspora').prop('checked', false);
  563.             $('#diaspora').slideUp(200);
  564.             $('#residenceCountry').slideUp(200);
  565.             updatePhonePrefix();
  566.         }
  567.     });
  568.     
  569.     $('#userbundle_user_diaspora').on('change', function() {
  570.         if ($(this).is(':checked')) {
  571.             $('#residenceCountry').slideDown(200);
  572.             $('#residence-select').prop('required', true);
  573.         } else {
  574.             $('#residenceCountry').slideUp(200);
  575.             $('#residence-select').prop('required', false);
  576.             updatePhonePrefix();
  577.         }
  578.     });
  579.     
  580.     if ($('#userbundle_user_region').length) {
  581.         $('#userbundle_user_region').on('change', function() {
  582.             if(!$('#userbundle_user_diaspora').is(':checked')) {
  583.                 updatePhonePrefix();
  584.             }
  585.         });
  586.     }
  587.     
  588.     if ($('#userbundle_user_country').length) {
  589.         $('#userbundle_user_country').on('change', function() {
  590.             if(!$('#userbundle_user_diaspora').is(':checked')) {
  591.                 updatePhonePrefix();
  592.             }
  593.         });
  594.     }
  595.     
  596.     $('#residence-select').on('change', function() {
  597.         if($('#userbundle_user_diaspora').is(':checked')) {
  598.             updatePhonePrefix();
  599.         }
  600.     });
  601.     
  602.     function updatePhonePrefix() {
  603.         let selectedCountryId = null;
  604.         
  605.         if ($('#residenceCountry').is(':visible') && $('#residence-select').val()) {
  606.             selectedCountryId = $('#residence-select').val();
  607.         } else if ($('#userbundle_user_region').length && $('#userbundle_user_region').val()) {
  608.             selectedCountryId = $('#userbundle_user_region').val();
  609.         } else if ($('#userbundle_user_country').length && $('#userbundle_user_country').val()) {
  610.             selectedCountryId = $('#userbundle_user_country').val();
  611.         }
  612.         
  613.         if (selectedCountryId) {
  614.             let phoneCode = $('#indTel option[value="' + selectedCountryId + '"]').data('code');
  615.             if (phoneCode) {
  616.                 phoneCode = '+' + phoneCode;
  617.                 $('#phone_code').text(phoneCode);
  618.                 $('#phone_prefix_display').val(phoneCode);
  619.             } else {
  620.                 resetPhonePrefix();
  621.             }
  622.         } else {
  623.             resetPhonePrefix();
  624.         }
  625.     }
  626.     
  627.     function resetPhonePrefix() {
  628.         $('#phone_code').text('+XX');
  629.         $('#phone_prefix_display').val('+XX');
  630.     }
  631.     
  632.     $('#language-select').on('change', function() {
  633.         var lang = $(this).val();
  634.         console.log('Langue changée vers: ' + lang);
  635.     });
  636. });
  637. </script>
  638. {% endblock %}