templates/Theme/Users/User/Security/login.html.twig line 1

Open in your IDE?
  1. {% extends "Theme/Users/User/layoutuserlogin.html.twig" %}
  2. {% block meta %}
  3.     {{ parent() }}
  4.     <meta name="keywords" content="{{ site }}, Business, Innovation,Administration"/>
  5.     <meta name="author" content="Noel Kenfack"/>
  6.     <meta name="description" content="{{ site }} | Inscription | Cameroun | {{ metier }}" />
  7. {% endblock %}
  9. {% block title %}
  10.     {{ parent() }} | Connexion
  11. {% endblock %}
  13. {% block stylesheets %}
  15. <meta name="google-signin-client_id" content="808214570153-stbihc7lmtfm86ia20b31pbak1afvam2.apps.googleusercontent.com">
  16. <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
  18. <script>
  19.     //Connexion Using Google.
  20.     function onSuccess(googleUser){
  21.       var profile = googleUser.getBasicProfile();
  22.       var id = profile.getId();
  23.       var email = profile.getEmail();
  24.       var nom = profile.getFamilyName();
  25.       var prenom = profile.getGivenName();
  26.       openModalLoginRS(id,email,nom,prenom,'USG','success','login');
  27.     }
  28.     function onFailure(error){
  29.       openModalLoginRS('','','','','USG','echec','login');
  30.     }
  31.     
  32.     function renderButton(){
  33.       gapi.signin2.render('my-signin2', {
  34.         'scope': 'profile email',
  35.         'width': 264,
  36.         'height': 42,
  37.         'longtitle': true,
  38.         'theme': 'dark'
  39.       });
  40.     }
  41.     
  42.     function loginGlOne(){
  43.         gapi.signin2.render('my-signin2',{
  44.         'scope': 'profile email',
  45.         'width': 260,
  46.         'height': 42,
  47.         'longtitle': true,
  48.         'theme': 'dark',
  49.         'onsuccess': onSuccess,
  50.         'onfailure': onFailure
  51.       });
  52.     }
  53.     
  54.     function openModalLoginRS(id,email,nom,prenom,type,statut,position)
  55.       {
  56.         //content-modal-annimation-blog
  57.         $('#modal-animation-afex-premium').modal('show');
  58.         $('.wait-account-verification-affiliate').show();
  59.         $('.content-modal-annimation-afex-premium').hide();
  60.         
  61.         $.post('{{ path('users_user_validation_social_login', {'agent': agent|default('ordi') }) }}',{'id': id,'email': email,'nom': nom,'prenom': prenom,'type': type,'statut': statut,'position': position}, function(data){
  62.             $('.wait-account-verification-affiliate').hide();
  63.             $('.content-modal-annimation-afex-premium').show();
  64.             
  65.             if(data == 1){
  66.                 $('.content-modal-annimation-afex-premium').html('<div style="display: block; text-align: center;">Connexion effectuée avec succès.</br>Redirection en cours ...</br><img src="{{ asset('template/images/wait-user.gif') }}" alt="image"><div>');
  67.                 document.location.href= '{{ path('users_user_acces_plateforme') }}';
  68.             }else{
  69.                 $('.content-modal-annimation-afex-premium').html(data);
  70.             }
  71.         });
  72.       }
  73.       
  74.       //Connexion Using FaceBook.
  76.       function statusChangeCallback(response){
  77.         console.log('statusChangeCallback');
  78.         console.log(response);
  79.         if (response.status === 'connected') {
  80.           testAPI();
  81.         } else {
  82.           //document.getElementById('status').innerHTML = 'Please log ' +'into this app.';
  83.         }
  84.       }
  87.       function checkLoginState() {
  88.         FB.getLoginStatus(function(response) {
  89.           statusChangeCallback(response);
  90.         });
  91.       }
  93.       window.fbAsyncInit = function() {
  94.         FB.init({
  95.           appId      : '1913794535583232',
  96.           xfbml      : true,
  97.           version    : 'v3.1'
  98.         });
  99.         //FB.getLoginStatus(function(response) {
  100.          // statusChangeCallback(response);
  101.         //});
  102.       };
  104.       // Load the SDK asynchronously
  105.       (function(d, s, id) {
  106.           var js, fjs = d.getElementsByTagName(s)[0];
  107.           if (d.getElementById(id)) return;
  108.           js = d.createElement(s); js.id = id;
  109.           js.src = 'https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v3.1&appId=1913794535583232&autoLogAppEvents=1';
  110.           fjs.parentNode.insertBefore(js, fjs);
  111.         }(document, 'script', 'facebook-jssdk'));
  113.       // Here we run a very simple test of the Graph API after login is
  114.       // successful.  See statusChangeCallback() for when this call is made.
  115.       function testAPI() {
  116.         console.log('Welcome!  Fetching your information.... ');
  117.         FB.api('/me?fields=id,name,email', function(response) {
  118.          // console.log('Successful login for: ' + response.name);
  119.           //document.getElementById('status').innerHTML =
  120.          //   'Thanks for logging in, ' + response.name + ' - ' + JSON.stringify(response)+ '!';
  121.          
  122.          if (!response || response.error){
  123.             openModalLoginRS('','','','','USF','echec','login');
  124.           } else {
  125.             openModalLoginRS(response.id,response.email,response.name,'','USF','success','login');
  126.           }
  127.               
  128.         });
  129.       }
  130. </script>
  131. {{ parent() }}
  132. {% endblock %}
  134. {% block userblog_body %}    
  135.     
  136. <section class="section" style="min-height: calc(100vh - 250px);">
  137.     <h1 style="width: 100%; text-align: center;">
  138.     Connectez-vous à votre compte {{ site }}
  139.     </h1>
  141.     <!-- <div style="text-align: center!important;"> -->
  142.      <!-- <fb:login-button scope="public_profile,email,user_friends" onlogin="checkLoginState();" class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false"> -->
  143.      <!-- </fb:login-button> -->
  144.      <!-- </div> -->
  145.      
  146.      <!-- <div style="text-align: center!important;"> -->
  147.         <!-- <button id="my-signin2" onclick="loginGlOne()" style="border: none; margin: 15px 0px 0px 0px; padding: 0px;"></button> -->
  148.      <!-- </div> -->
  149.          
  150.     <div class="form-progress">
  151.         <div style="color: red;">{{ error_login }}</div>
  152.     </div>
  153.     
  154.     <div class="animation-container">
  155.         <!-- Step one -->
  156.         <div class="form-step js-form-step" data-step="1">
  158.             <!-- <p class="form-instructions"><strong>Pour vous connectez rapidement à votre compte AZ Corporation, cliquez sur l'un des boutons ci-dessus pour continuer</strong></p> -->
  159.             <!-- <p class="form-instructions"> -->
  160.                 <!-- <div style="text-align: center; margin: 25px 0px;"> -->
  161.                 <!-- <div class="or-spacer"> -->
  162.                   <!-- <div class="mask"></div> -->
  163.                   <!-- <span><i>ou</i></span> -->
  164.                 <!-- </div> -->
  165.                 <!-- </div></p> -->
  167.             <form method="post" action="{{ path('users_user_connexion_user') }}" name="form-step-1">
  168.                 <div class="fieldgroup">
  169.                     <input id="username" name="username" type="text" required="" autocomplete="email"/>
  170.                     <label for="username">Téléphone ou Email</label>
  171.                 </div>
  173.                 <div class="fieldgroup">
  174.                     <input type="password" id="password" name="password" type="password" required=""/>
  175.                     <label for="password">Mot de passe</label>
  176.                 </div>
  178.                 <div class="fieldgroup" style="margin-top: 15px;">
  179.                     <label style="display: block; text-align: left; width: 100%;">
  180.                       <a href="#!" class="modal_reset_password" style="float: right; display: inline; color: #CCC;">Mot de pas oublié ?</a>
  181.                        <input type="checkbox" id="remember_me" name="_remember_me" checked style="float: left!important; height: 15px; width: 15px; margin-right: 7px;"/> Se souvenir de moi
  182.                     </label>
  183.                 </div>
  184.                 <div class="clearfix"></div>
  185.                 <div  style="text-align: center;">
  186.                     <button type="submit" class="btn">Continuer</button>
  187.                 </div>
  188.             </form>
  190.             <div class="signup-content" style="text-align: center;">
  191.                 <h3>Vous êtes nouveau sur {{ site }} ?</h3>
  192.                 <p>Un compte {{ site }} vous permettra de passer et de suivre vos commandes via un tableau de bord.</p>
  193.                 <div>
  194.                     <a href="{{ path('users_user_inscription_user') }}">Créer un compte <span class="fa fa-angle-right"></span></a>
  195.                 </div>
  196.             </div>
  197.         </div>
  199.     </div>
  200. </section>
  202. <div class="modal fade" data-backdrop="false"  id="open-modalSelect-reinitialize" style="padding-top: 50px;">
  203. <div class="modal-dialog">
  204.     <div class="modal-content">
  205.         <div class="modal-header color-bottom" style="border-bottom: 4px solid #37c0fb; display: block!important;">
  206.             <button type="button" class="close" data-dismiss="modal" style="float: right!important;">&times;</button>
  207.             <h3 class="modal-title" style="margin: 0px; font-size: 22px;"> Initialisation du mot de passe</h3>
  208.         </div>
  210.         <div class="modal-body">
  211.             <div class="wait-account-verification-affiliate" style="text-align: center; height: 100px; padding-top: 30px; color: #333;">
  212.                 Patientez un moment pendant la vérification de votre session.</br>
  213.                 <img src="{{ asset('template/images/loader1.gif') }}" alt="image" style="height: 40px; width: 40px;">
  214.             </div>
  216.             <div class="form-coustom-reset-password" style="text-align: left; display: none; margin-bottom: 30px;">
  217.                 <div class="col-md-10 col-sm-12 offset-md-1" style="color: #333;">
  218.                  <div style="border-bottom: 1px solid #ddd; margin-bottom: 15px; font-size: 20px;">Identification du compte</div>
  219.                  <form method="post" action="#" class="form-check-identifiant">
  220.                     <div class="form-group form-group-resset">
  221.                         <input type="text" class="form-control" placeholder="Rentrez l'email du compte" required="">
  222.                     </div>
  223.                     
  224.                     <div class="alert alert-resset alert-block alert-danger" style="display:none">
  225.                     <h4>Erreur !</h4>
  226.                     Nous n'avons pu identifier un compte avec cette adresse.
  227.                     </div>
  228.                     
  229.                     <div class="form-group">
  230.                         <button  class="btn btn-primary" style="background: #e34520;">Envoyer</button>
  231.                     </div>
  232.                  </form>
  233.                 </div>
  234.                 <div class="clearfix"></div>
  235.             </div>        
  236.         </div>
  237.         <div class="modal-footer" style="color: #333;">
  238.             {% include 'Theme/General/Template/Menu/social.html.twig' %}
  239.         </div>
  240.     </div>
  241. </div>
  242. </div>
  243.     
  244. {% endblock %}
  246. {% block javascripttemplate %}
  248. $('.modal_reset_password').click(function(){
  249.     $('#open-modalSelect-reinitialize').modal('show');
  250.     setTimeout(function(){ 
  251.             $('.wait-account-verification-affiliate').hide();
  252.             $('.form-coustom-reset-password').show();
  253.     }, 2000);
  254. });
  256. $('form.form-check-identifiant').on('submit', function(){
  257.     var hauteur = $(".form-coustom-reset-password").height() + 20;
  258.     var largeur = $(".form-coustom-reset-password").width() + 5;
  259.     var padding = Math.round(hauteur/2 - 50);
  260.     var username = $(this).find('input').val();
  261.     $(".form-coustom-reset-password").before('<div class="attente-resultat" style="padding-top: '+padding+'px; z-index: 102; height: '+hauteur+'px; text-align: center; vertical-align: center; width: '+largeur+'px; position: absolute; background: #fff; margin-top: -7px;"><span><img src="{{ asset('template/images/loader1.gif') }}" alt="..." style="width: 80px; height: 80px;" /></span></div>');
  262.     $.post('{{ path('users_user_reset_user_password', {'etape': 1}) }}',{ username: username }, function(data){
  263.         $('.attente-resultat').hide();
  264.         if(data != 0)
  265.         {
  266.             $('.form-coustom-reset-password').replaceWith(data);
  267.         }else{
  268.             $("div.form-group-resset").addClass("has-error");
  269.             $("div.alert-resset").show("slow").delay(4000).hide("slow");
  270.         }
  271.     });
  272.     return false;
  273. });
  276. {% endblock %}