templates/user_log/user_log.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ companyName }}| Login{% endblock %}
  5. {% block body %}
  8.     <div class="row white" style="margin-top: -20px">
  12.         <div class="col s12">
  14.             <div class="col s12 l10 offset-l1" data-aos="zoom-out-down" style="margin-bottom: 40px" data-aos-duration="3000">
  17.                 <h3 class="center-align  " style=" font-size: 28px; color: #047ffc; font-family:'Reem Kufi', sans-serif">
  19.                     BIENVENUE SUR <a href="{{ path('app_home') }}"> <img src="{{ asset('img/logo-logercm.png') }}" class="  " style="max-height: 60px" alt=""></a>
  21.                 </h3>
  23.                 <div class="divider col s4 offset-s4 black"></div>
  25.             </div>
  26.         </div>
  28.         <p class="center-align center" style=" font-size: 24px; color: black; font-family:'Reem Kufi', sans-serif">le meilleur site d'achat de ticket de voyage et de réservation des véhicules en ligne.</p>
  31.         <div class="col s12 m10 offset-m1 l11 push-l1">
  32.             <div class="col s12 hide" id="preloadStep2">
  33.                 <div class="progress">
  34.                     <div class="indeterminate pink"></div>
  35.                 </div>
  36.                 <h5 class="center-align center" id="connexionStep" style="margin-top: -10px"><b>connexion...</b></h5>
  37.             </div>
  39.             <div class="col s12  m10 offset-m1  l5   card hoverable z-depth-4 animated zoomIn" style=" box-shadow: 0px 0px 8px 0px #047ffc; border-radius: 20px">
  40.                 <h5 class="center center-align" style="  margin-top: 30px">
  43.                     <span style="font-size: 30px; "> Connectez vous à votre compte. </span>
  44.                 </h5>
  46.                 <div class="divider col s4 offset-s4 black"></div>
  47.                 <br>
  49.                 <form data-aos="zoom-out-down" data-aos-duration="2000" onsubmit="return false;" class="col l12 m12 s12 xl12  " id="login_form_customer" style="margin-top: 2%;">
  51.                     <div class="col   s12      input-field center center-block center-align">
  52.                         <i class="fas fa-user-circle prefix active" style="color:#047ffc;font-size: 24px  ">  </i>
  53.                         <input required="required" type="email" id="username_log" name="username_log" class="validate">
  55.                         <label for="username_log" data-error="wrong" data-success="ok" class="active">Nom d'utilisateur </label>
  56.                         <span id="username_log_check" class="helper-text" data-error="wrong" data-success="ok"></span>
  58.                     </div>
  59.                     
  60.                     <div class="col   s12      input-field center center-block center-align" style="margin-top: -5px">
  61.                         <i class="fas fa-key prefix active" style="color:#047ffc;font-size: 24px  ">  </i>
  62.                         <input required="required" type="password" id="password_log" name="usermane_log" class="validate">
  64.                         <label for="password_log" data-error="wrong" data-success="ok" class="active">Mot de Passe </label>
  65.                         <span id="password_log_check" class="helper-text" data-error="wrong" data-success="ok"></span>
  66.                     </div>
  69.                     <div class="col   s12 hide" id="idShowField" style="margin-bottom: 20px">
  71.                     </div>
  72.                     <div class="col s12" style="margin-top: 2px; margin-bottom: 20px">
  73.                           <span style="margin-top: 10px">En continuant, vous nous autorisez à utiliser vos informations conformément à
  74.                               <a href="index.php?page=term">nos conditions d'utilisation </a> et à notre <a href="index.php?page=term">politique de confidentialité</a>.</span>
  76.                     </div>
  77.                     <button  id="btnCustomerLogin" class="btn waves-effect   waves-light col s10 offset-s1" style=" height: 45px ;background: #047ffc;
  78.     outline: none;
  79.     color: #fff;
  80.     font-weight: 600;
  81.     border: none;
  82.     letter-spacing: 1px;
  83.     text-transform: uppercase;
  84.     cursor: pointer;
  86.     border-radius: 10px;
  87.     transition: 0.5s all;
  88.     -webkit-transition: 0.5s all;
  89.     -o-transition: 0.5s all;
  90.     -moz-transition: 0.5s all;
  91.     -ms-transition: 0.5s all;
  92.     box-shadow: 0px 0px 8px 0px #047ffc;; margin-top: 2% ; border-radius:5px " type="submit"><span>Connexion</span>
  93.                         <i class="fas fa-power-off right active"> </i>
  94.                     </button>
  97.                     <div class="col s12" style="margin-top: 20px">
  98.                         <div class="col s6 left left-align">
  101.                             <p>
  102.                                 <label class="active">
  103.                                     <input type="checkbox">
  104.                                     <span>Maintenir ma session</span>
  105.                                 </label>
  106.                             </p>
  107.                         </div>
  108.                         <div class="col s6 right right-align">
  109.                             <a href="#" class="for">Mot de passe oublié...?</a>
  110.                         </div>
  111.                     </div>
  112.                     <div class="col s12 " style="margin-top: 10px;">
  113.                         <div class="col s5 divider grey accent-2">
  115.                         </div>
  116.                         <div class="col s2">
  117.                             <a href="#!" style="margin-left: 10px; margin-top: -20px" class="btn-floating  grey accent-2"><span style="font-size: 20px; margin-left: 2px" class="center center-align"><b>OU</b></span></a>
  118.                         </div>
  119.                         <div class="col s5   divider grey accent-2"></div>
  122.                     </div>
  124.                     <div class="col s12  m10 offset-m1 center center-align" style="margin-top: 15px">
  125.                         <div style="max-width: 300px; min-width: 200px;" scope="public_profile,email" onlogin="checkLoginState()" class="fb-login-button z-depth-2 hoverable fb_iframe_widget" data-width="200" data-max-rows="1" data-size="large" data-button-type="continue_with" data-use-continue-as="true" login_text="
  127.                     " fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=203015117013939&amp;button_type=continue_with&amp;container_width=300&amp;locale=en_US&amp;login_text=%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&amp;max_rows=1&amp;scope=public_profile%2Cemail&amp;sdk=joey&amp;size=large&amp;use_continue_as=true&amp;width=200"><span style="vertical-align: bottom; width: 240px; height: 40px;"><iframe name="f228fd2b68b20d4" width="200px" height="1000px" data-testid="fb:login_button Facebook Social Plugin" title="fb:login_button Facebook Social Plugin" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" src="https://web.facebook.com/v3.2/plugins/login_button.php?app_id=203015117013939&amp;button_type=continue_with&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df1dba3ecd5c8e5c%26domain%3Detravel.cm%26is_canvas%3Dfalse%26origin%3Dhttps%253A%252F%252Fetravel.cm%252Ff1666880857ee0c%26relation%3Dparent.parent&amp;container_width=300&amp;locale=en_US&amp;login_text=%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&amp;max_rows=1&amp;scope=public_profile%2Cemail&amp;sdk=joey&amp;size=large&amp;use_continue_as=true&amp;width=200" style="border: none; visibility: visible; width: 240px; height: 40px;" class=""></iframe></span></div>
  129.                     </div>
  131.                     <div class="col s12 m10 offset-m1 center center-align" style="margin-top: 15px; margin-bottom: 10px">
  134.                         <div id="signin-button" style="max-width: 300px; min-width: 250px" class="g-signin2 center center-block  z-depth-3 hoverable waves-effect waves-ripple waves-red  " data-onsuccess="onSignIn" data-width="200" data-longtitle="true" data-gapiscan="true" data-onload="true"><div style="height:36px;width:200px;" class="abcRioButton abcRioButtonLightBlue"><div class="abcRioButtonContentWrapper"><div class="abcRioButtonIcon" style="padding:8px"><div style="width:18px;height:18px;" class="abcRioButtonSvgImageWithFallback abcRioButtonIconImage abcRioButtonIconImage18"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg></div></div><span style="font-size:13px;line-height:34px;" class="abcRioButtonContents"><span id="not_signed_inc21qjy1f865t">Se connecter avec Google</span><span id="connectedc21qjy1f865t" style="display:none">Connecté avec Google</span></span></div></div></div>
  136.                     </div>
  139.                     <div class="col s12 center center-align" style="margin-top: 10px; margin-bottom: 20px">
  140.                     <span style="font-size: 20px">Vous êtes nouveau?
  141.                         <a href="{{ path('app_register',
  143.                             {'destination': path('app_user_log') })
  144.                         }}">Créez votre compte ici!
  145.                         </a>
  146.                     </span>
  147.                     </div>
  148.                 </form>
  151.             </div>
  152.             <div class="col s12 m10 offset-m1 l6 push-l1 hide-on-med-and-down hide-on-med-only">
  154.                 <img src="{{ asset('img/bannerpng.png') }}" class="  " style="margin-top: 30px; max-height: 450px; max-width: 450px; min-width: 250px; min-height: 250px " alt="">
  155.                 <p style=" font-size: 24px; color: black; font-family:'Reem Kufi', sans-serif">
  156.                     Avec une assistance client 24h/24h, 7j/7j.</p>
  159.                 <a style="background: #047ffc; margin-bottom: 20px;
  160.     outline: none;
  161.     color: #fff;
  162.     font-weight: 600;
  163.     border: none;
  164.     letter-spacing: 1px;
  165.     text-transform: uppercase;
  166.     cursor: pointer;
  168.     border-radius: 10px;
  169.     transition: 0.5s all;
  170.     -webkit-transition: 0.5s all;
  171.     -o-transition: 0.5s all;
  172.     -moz-transition: 0.5s all;
  173.     -ms-transition: 0.5s all;
  174.     box-shadow: 0px 0px 8px 0px #047ffc;; margin-top: 2% " href="{{ path('app_home') }}"   class=" waves-purple waves-effect btn col s10    btn-large  ">
  175.                     <span>Retour à l'accueil</span>
  176.                     <i class="fas fa-home right active"> </i>
  177.                 </a>
  178.             </div>
  180.         </div>
  182.     </div>
  184.     
  185.     
  186.     
  187. {% endblock %}
  190.   {% block javascripts %}
  192.       {{ parent() }}
  193.       
  194.       <script type="text/javascript">
  196.           var Toast = Swal.mixin({
  197.               toast: true,
  198.               position: 'top-end',
  199.               showConfirmButton: false,
  200.               timer: 14000,
  201.               timerProgressBar: true,
  202.               didOpen: (toast) => {
  203.                   toast.addEventListener('mouseenter', Swal.stopTimer)
  204.                   toast.addEventListener('mouseleave', Swal.resumeTimer)
  205.               }
  206.           });
  209.           var apiBaseUrl="{{ host }}"
  210.           var loginUrl="{{ path('authentication_token') }}";
  211.           $('#login_form_customer').submit(function(){
  212.               submitLoginForm()
  213.           });
  214.           
  215.          
  216.           function submitLoginForm() {
  218.               var password_log= $("#password_log").val();
  219.               var username_log= $("#username_log").val();
  221.               $.ajax({
  222.                   method: "POST",
  223.                   tryCount  : 0,
  224.                   retryLimit  : 4,
  225.                   url: loginUrl,
  226.                   "headers": {
  227.                       "Content-Type": "application/json"
  228.                   },
  229.                   data: JSON.stringify({
  231.                       "email": username_log,
  232.                       "password": password_log
  234.                   }),
  235.                   beforeSend:function () {
  237.                       $("#preloadStep2").removeClass("hide");
  238.                       $("#btnSubmitLog").addClass("disabled").html("login in progress...");
  239.                   },
  240.                   success: function(data){
  241.                       $("#preloadStep2").addClass("hide");
  243.                       $("#btnSubmitLog").removeClass("disabled").html("Connexion")
  244.                       setCookie("{{ companyName }}_user_token",data.token,1);
  245.                       setCookie("{{ companyName }}_user_userpass",password_log,1);
  246.                       setCookie("{{ companyName }}_user_username",username_log,1);
  250.                       Toast.fire({
  251.                           icon: 'success',
  252.                           title: "Welcome Back"
  253.                       });
  255.                       document.getElementById("login_form_customer").reset();
  257.                   },
  258.                   error:function (xhr, textStatus, errorThrown) {
  259.                       $("#btnSubmitLog").removeClass("disabled").html("Try Again")
  262.                       $("#preloadStep2").addClass("hide");
  264.                       Toast.fire({
  265.                           icon: 'warning',
  266.                           title: "Invalid Username or Password"
  267.                       });
  269.                       $("#password_log").addClass('invalid');
  270.                       $("#username_log").addClass('invalid');
  272.                   }
  274.               });
  277.           }
  278.           
  279.       </script>
  280.   {% endblock %}