templates/front/pages/authentication/visitor_registration_page.html.twig line 1

Open in your IDE?
  1. {% extends 'front/layouts/authentication_layout.html.twig' %}
  3. {% block title %}Cofina Academy | Visiteur{% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  7.     <style>
  8.         .btn-sign-in{
  9.             padding-top: 10px;
  10.             padding-bottom: 10px;
  11.         }
  12.     </style>
  13. {% endblock %}
  15. {% block body %}
  16.     <main>
  17.         <section class="container-fluid overflow-hidden" style="padding:0">
  18.             <div class="row justify-content-around align-items-center vh-100">
  19.                 <div class="col-lg-6 scroll-this">
  20.                     <div class="d-flex justify-content-center my-2">
  21.                         <form class="con_form my-2" id="loginForm">
  22.                             <div class="d-flex">
  23.                                 <img src="{{ asset('assets/front/img/LOGO COFINA ACADEMY 1.png') }}" class="img-fluid con-logo" alt="Logo Cofina Academy">
  24.                             </div>
  25.                             <div class="d-block mt-5 mb-4">
  26.                                 <p style="font-size: 1.1rem">Merci d'entrer votre adresse email avant de continuer</p>
  27.                             </div>
  28.                             <div class="form-group">
  29.                                 <label for="inputEmail" class="h5 fw-bold opificio mb-2">Email</label>
  30.                                 <div class="position-relative">
  31.                                     <input type="email" placeholder="Entrez votre adresse email" class="form-control con_input height-50 mt-1 mb-2" name="email" id="inputEmail" autocomplete="email" required autofocus>
  32.                                     <i class="bi bi-envelope position-absolute con-form-icon"></i>
  33.                                 </div>
  34.                             </div>
  35.                             <div class="d-flex justify-content-center mb-3 mt-3 mt-md-4">
  36.                                 <button type="submit" class="btn btn-danger con_btn con-btn-size-1 btn-sign-in" id="visitorSubmitEmail">
  37.                                     valider
  38.                                 </button>
  39.                             </div>
  40.                             <div class="d-flex justify-content-center">
  41.                                 <a href="{{ path('app_login') }}" type="submit" class="btn btn-outline-danger con_btn con-btn-size-1 py-2" id="authSubmit">
  42.                                     Retour
  43.                                 </a>
  44.                             </div>
  45.                         </form>
  46.                     </div>
  47.                 </div>
  48.                 <div class="d-none col-lg-6 d-lg-block con-bg align-items-center align-content-center border-5 m-0 p-0 h-100">
  49.                     <div class="d-flex justify-content-center">
  50.                         <img src="{{ asset('assets/front/img/connexion/girl_connexion.png') }}" class="con-girl" alt="Girl Cofina Academy" />
  51.                     </div>
  52.                 </div>
  53.             </div>
  54.         </section>
  55.         <div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  56.             <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
  57.                 <div class="modal-content">
  58.                     <div class="modal-body remove-padding">
  59.                         <section class="container-fluid remove-padding">
  60.                             <div class="d-flex justify-content-center" style="margin-left: 0; padding-left: 0">
  61.                                 <div class="remove-padding mb-4">
  62.                                     <img src="{{ asset('assets/front/img/connexion/bg_visiteur.png') }}" class="visitor-image d-none d-lg-block align-items-center align-content-center border-5" alt="Girl Cofina Academy" />
  63.                                 </div>
  64.                                 <div class="py-3">
  65.                                     <div class="pe-lg-5">
  66.                                         <div class="d-flex justify-content-between border-bottom border-danger">
  67.                                             <p class="h1 display-4 text-danger fw-bold me-5">Bienvenue</p>
  68.                                             <img src="{{ asset('assets/front/img/connexion/start-2.svg') }}" class="ms-5 start-cn-page con-logo" alt="Stars Cofina Academy">
  69.                                         </div>
  71.                                         <div class="d-flex justify-content-center my-2">
  72.                                             {# <form action="{{ path('app_front_welcome_page') }}" class="my-2" style="width: 100%"> #}
  73.                                             {{ form_start(form, {"attr": {'class': 'my-2', 'style': 'width: 100%', 'id': 'registrationForm'}}) }}
  74.                                                 <div class="form-group my-2">
  75.                                                     {# <label for="name" class="h4 fw-bold opificio">Nom</label>
  76.                                                     <input type="text" placeholder="EX:YAO" class="form-control con_input" name="name" id="name"> #}
  77.                                                     {{ form_label(form.lastname) }}
  78.                                                     {{ form_widget(form.lastname) }}
  79.                                                 </div>
  80.                                                 <div class="form-group my-3">
  81.                                                     {# <label for="lastname" class="h4 fw-bold opificio">Prénom</label>
  82.                                                     <input type="email" placeholder="EX:YANIEL" class="form-control con_input" name="lastname" id="lastname"> #}
  83.                                                     {{ form_label(form.firstname) }}
  84.                                                     {{ form_widget(form.firstname) }}
  85.                                                 </div>
  86.                                                 <div class="form-group my-2">
  87.                                                     {# <label for="country" class="h4 fw-bold opificio">Pays</label>
  88.                                                     <select name="country" id="country" class="form-control con_input text-center">
  89.                                                         <option value="">Choisissez votre pays. </option>
  90.                                                     </select> #}
  91.                                                     {{ form_label(form.country) }}
  92.                                                     {{ form_widget(form.country) }}
  93.                                                 </div>
  94.                                                  {{ form_widget(form.email) }}
  95.                                                 <div class="d-flex justify-content-center mt-5">
  96.                                                     <button type="button" class="btn btn-default con_btn" data-bs-dismiss="modal" aria-label="Fermer">Annuler</button>
  97.                                                     <button type="submit" class="btn btn-danger con_btn me-2" id="visitorSubmitModal">valider</button>
  98.                                                 </div>
  99.                                             {{ form_end(form) }}
  100.                                             {# </form> #}
  101.                                         </div>
  102.                                     </div>
  103.                                 </div>
  104.                             </div>
  105.                         </section>
  106.                     </div>
  107.                 </div>
  108.             </div>
  109.         </div>
  111.         <div class="modal fade" id="exampleModalToggle2" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  112.             <div class="modal-dialog modal-dialog-centered">
  113.                 <div class="modal-content">
  114.                 <div class="modal-header">
  115.                     <h5 class="modal-title h4 fw-bold" id="exampleModalToggleLabel2">Lien de connexion visiteur</h5>
  116.                     <button type="button" class="btn-close bg-danger rounded-circle text-danger modal-close-btn" data-bs-dismiss="modal" aria-label="Fermer"></button>
  117.                 </div>
  118.                 <div class="modal-body h5">
  119.                     Un lien de connexion vous a été envoyé à votre adresse
  120.                 </div>
  121.                 </div>
  122.             </div>
  123.         </div>
  124.     </main>
  125. {% endblock %}
  127. {% block javascripts %}
  128.     {{ parent() }}
  129.     <script>
  130.         $(document).ready(function() {
  131.             var formModalEl = document.getElementById('exampleModal');
  132.             var formModal = new bootstrap.Modal(formModalEl);
  133.             
  134.             $('#loginForm').on('submit', function(e) {
  135.                 e.preventDefault();
  136.                 let btnSubmit  = $("#visitorSubmitEmail")
  137.                 btnSubmit.prop("disabled",true);
  138.                 btnSubmit.html(
  139.                     '<div class="spinner-border text-danger" role="status">'+
  140.                     '<span class="visually-hidden">Loading...</span>'+
  141.                     '</div>'
  142.                 )
  143.                 const url = "{{ path('app_front_check_visitor') }}";
  144.                 $.post(url, {'email': $('#email').val() }, function (data, status) {
  145.                     if (status === 'success') {
  146.                         if(data.message) {
  147.                             $.toaster({
  148.                                 message: data.message,
  149.                                 priority: 'warning',
  150.                                 settings: {
  151.                                     toast: {
  152.                                         template: '<div class="alert alert-%priority% alert-dismissible" role="alert">' + '<i class="fa fa-warning"></i> <span class="message"></span>' + '</div>'
  153.                                     },
  154.                                     timeout: 10000,
  155.                                 }
  156.                             });
  157.                             btnSubmit.prop("disabled",false);
  158.                             btnSubmit.html('valider');
  159.                         } else {
  160.                             window.location.href = data.login_url;
  161.                         }
  162.                     } else {
  163.                         formModal.show();
  164.                         btnSubmit.prop("disabled",false);
  165.                         btnSubmit.html('valider');
  166.                     }
  167.                 });
  168.             });
  170.             var sendMailConfirmationModalEl = document.getElementById('exampleModalToggle2');
  171.             var sendMailConfirmationModal = new bootstrap.Modal(sendMailConfirmationModalEl);
  173.             $('#registrationForm').on('submit', function(e) {
  174.                 e.preventDefault();
  175.                 let btnSubmit  = $("#visitorSubmitModal")
  176.                 btnSubmit.prop("disabled",true);
  177.                 btnSubmit.html(
  178.                     '<div class="spinner-border text-danger" role="status">'+
  179.                     '<span class="visually-hidden">Loading...</span>'+
  180.                     '</div>'
  181.                 )
  183.                 var formData = $(this).serialize();
  185.                 var url = "{{ path('app_front_visitor_registration_page') }}";
  186.                 $.post(url, formData, function (data, status) {
  187.                     btnSubmit.prop("disabled",false)
  188.                     btnSubmit.html('valider')
  189.                 });
  191.                 formModal.hide();
  192.                 sendMailConfirmationModal.show();
  193.             });
  195.             formModalEl.addEventListener('show.bs.modal', function (event) {
  196.                 $('#visitor_registration_email').val($('#email').val());
  197.             });
  199.             sendMailConfirmationModalEl.addEventListener('show.bs.modal', function (event) {
  200.                 $('#email').val('');
  201.             });
  202.         })
  203.     </script>
  204. {% endblock %}