templates/patient/auth/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Santé+</title>
  12.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,300,700,800,900" rel="stylesheet"
  13.         type="text/css">
  14.     <link href="https://cdn.imperium.plus/assets/css/bootstrap/v4.0/bootstrap.min.css" rel="stylesheet" type="text/css">
  15.     <link href="https://cdn.imperium.plus/assets/fonts/fontawesome/v5.11.2/css/all.css" rel="stylesheet"
  16.         type="text/css">
  17.     <link href="https://cdn.imperium.plus/assets/css/sweetalert/v01/sweetalert.css" rel="stylesheet" type="text/css">
  18.     <link rel="stylesheet" href="/assets/css/main.css">
  19.     <link href="/assets/css/auth/authentification.css" rel="stylesheet" type="text/css">
  20.     <style>
  21.         @keyframes ldio-japzwhp0h9j {
  22.             0% {
  23.                 top: 96px;
  24.                 left: 96px;
  25.                 width: 0;
  26.                 height: 0;
  27.                 opacity: 1;
  28.             }
  30.             100% {
  31.                 top: 18px;
  32.                 left: 18px;
  33.                 width: 156px;
  34.                 height: 156px;
  35.                 opacity: 0;
  36.             }
  37.         }
  39.         .ldio-japzwhp0h9j div {
  40.             position: absolute;
  41.             border-width: 4px;
  42.             border-style: solid;
  43.             opacity: 1;
  44.             border-radius: 50%;
  45.             animation: ldio-japzwhp0h9j 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  46.         }
  48.         .ldio-japzwhp0h9j div:nth-child(1) {
  49.             border-color: #e90c59;
  50.             animation-delay: 0s;
  51.         }
  53.         .ldio-japzwhp0h9j div:nth-child(2) {
  54.             border-color: #46dff0;
  55.             animation-delay: -0.5s;
  56.         }
  58.         .loadingio-spinner-ripple-wsf5cxo48ch {
  59.             width: 200px;
  60.             height: 200px;
  61.             display: inline-block;
  62.             overflow: hidden;
  64.         }
  66.         .ldio-japzwhp0h9j {
  67.             width: 100%;
  68.             height: 100%;
  69.             position: relative;
  70.             transform: translateZ(0) scale(1);
  71.             backface-visibility: hidden;
  72.             transform-origin: 0 0;
  73.             /* see note above */
  74.         }
  76.         .ldio-japzwhp0h9j div {
  77.             box-sizing: content-box;
  78.         }
  80.         [x-cloak] {
  81.             display: none !important;
  82.         }
  83.         .sante-input-validator{
  84.             border-color: #dc3545 !important;
  85.         }
  86.     </style>
  87.     <script src="https://cdn.imperium.plus/assets/js/jquery/v3.1/jquery.min.js"></script>
  88.     {#
  89.     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.1/dist/cdn.min.js"></script> #}
  90. </head>
  92. <body>
  93.     <!-- Section Authentification -->
  94.     <!-- You can use class 'Praticien' for doctor  or  class 'AuthPatient' for patient -->
  95.     <section class="Authentification AuthPatient" id="Authentification" x-data="authentification">
  96.         <div class="AuthentificationContent">
  97.             <!-- Bloc logo & description -->
  98.             <div class="log">
  99.                 <img src="/assets/images/logo.png" alt="" title="">
  100.                 <p class="pHead">
  101.                     Sed a magna semper, porta purus eu, ligula. Nam sit amet
  102.                 </p>
  103.             </div>
  104.             {# #ToDo : Include loading #}
  105.             <div x-show="show_login_bloc" class="loginBloc" login-loading>
  106.                 <div class="loadingio-spinner-ripple-wsf5cxo48ch">
  107.                     <div class="ldio-japzwhp0h9j">
  108.                         <div>
  109.                         </div>
  110.                         <div></div>
  111.                     </div>
  112.                 </div>
  113.             </div>
  114.             <!-- Bloc Login -->
  115.             <div x-cloak x-show="show_se_connecter_email" id="seConnecter" type="text/template">
  116.                 <form class="loginForm" @submit.prevent="onLoginEmail($el,$refs)">
  117.                     <h1>Bienvenue !</h1>
  118.                     <p>Connectez-vous pour continuer vers <b>Santé+</b>.</p>
  119.                     <div class="inputForm" x-ref="identifiant" >
  120.                         <label>Identifiant</label>
  121.                         <input type="text"  x-model="loginFormEmail.identifiant" placeholder="entrez votre email ou ID ou telephone" id="identifiant"
  122.                             name="identifiant">
  123.                         <span class="text-danger text-left err_msg" ></span>
  124.                     </div>
  125.                     <div class="inputForm">
  126.                         <label>Mot de passe <a href="#" class="forgetPassword" @click.prevent="testRedirect($el)" id="forgetPassword">Mot de passe oublié?</a></label>
  127.                     </div>
  128.                     <div class="remembreMe">
  129.                         <input type="checkbox" id="remembre" name="remembre">
  130.                         <span>Remember me</span>
  131.                     </div>
  132.                     <button type="submit">S'identifier</button>
  133.                 </form>
  134.                 <span class="footerLogin">Vous n'avez pas de compte ? <a href="#">S'inscrire</a></span>
  135.             </div>
  136.             <!-- Bloc Login -->
  137.             <div  x-cloak x-show="show_se_connecter_password" id="seConnecter" type="text/template">
  138.                 <form class="loginForm" x-ref="refloginPassword" @submit.prevent="onLoginPassword($el)" >
  139.                     <h1>Bienvenue !</h1>
  140.                     <p>Connectez-vous pour continuer vers <b>Santé+</b>.</p>
  141.                     <div class="inputForm">
  142.                         <label>Mot de passe <a href="#" class="forgetPassword" id="forgetPassword">Mot de passe oublié?</a></label>
  143.                         <div class="passcontent">
  144.                             <input x-model="loginPassword.password" type="password" x-model="loginFormPassword.password" placeholder="entrer le mot de passe" id="password" name="password">
  145.                             <span class="showHidePass" id="showHidePass"><i class="far fa-eye"></i></span>
  146.                         </div>
  147.                         <span class="text-danger text-left err_msg"></span>
  148.                     </div>
  149.                     <div class="remembreMe">
  150.                         <input type="checkbox" id="remembre" name="remembre">
  151.                         <span>Remember me</span>
  152.                     </div>
  153.                     <button type="submit">S'identifier</button>
  154.                 </form>
  155.                 <span class="footerLogin">Vous n'avez pas de compte ? <a href="#">S'inscrire</a></span>
  156.             </div>
  157.             <!-- Bloc Confirm Change Password -->
  158.             <div x-cloak x-show="show_change_password" id="Changepassword" type="text/template">
  159.                 <form class="loginForm" data-new-pass @submit.prevent="onChangePasswordVerify($el)" x-ref="refChangePasswordVerify">
  160.                     <h1>Créer un nouveau mot de passe</h1>
  161.                     <p>Votre nouveau mot de passe doit être différent du mot de passe utilisé précédemment.</p>
  162.                     <div class="inputForm">
  163.                         <label>Mot de passe</label>
  164.                         <div class="passcontent">
  165.                             <input type="password" placeholder="entrer le mot de passe" id="confirmPassword"
  166.                                 name="password" x-model="formChangePasswordVerify.password">
  167.                             <span class="showHidePass" id="showHidePass"><i class="far fa-eye"></i></span>
  168.                         </div>
  169.                         <span class="text-danger text-left err_msg"></span>
  170.                     </div>
  171.                     <div class="inputForm">
  172.                         <label>Confirmez le mot de passe</label>
  173.                         <div class="passcontent">
  174.                             <input type="password" placeholder="entrer le mot de passe" id="confirmPasswordTwo"
  175.                                 name="confirmPassword" x-model="formChangePasswordVerify.confirmPassword">
  176.                             <span class="showHidePass" id="showHidePass"><i class="far fa-eye"></i></span>
  177.                         </div>
  178.                         <span class="text-danger text-left err_msg"></span>
  179.                     </div>
  180.                     <div class="remembreMe">
  181.                         <input type="checkbox" id="remembre" name="remembre">
  182.                         <span>Remember me</span>
  183.                     </div>
  184.                     <button type="submit">S'identifier</button>
  185.                 </form>
  186.                 <span class="footerLogin">Attendez, je me souviens de mon mot de passe... <a href="#"
  187.                         class="goLogin">Cliquez ici</a></span>
  188.             </div>
  189.             <!-- Bloc Choise Type receive OTP vaidation -->
  190.             <div x-cloak x-show="show_reinitialiser_password" id="Reinitialiserpassword" type="text/template">
  191.                 <form  class="loginForm">
  192.                     <h1>Mot de passe oublié ?</h1>
  193.                     <p>Réinitialiser le mot de passe avec <b>Santé+</b>.</p>
  194.                     <img src="/assets/images/auth/verifmail.svg">
  195.                     <div class="Reinitialisationtitle">
  196.                         Choisissez comment les instructions vous seront envoyées !
  197.                     </div>
  198.                     <ul class="Reinitialisationtype">
  199.                         <li class="active" data-type-withMail>
  200.                             <input type="radio" name="typeReinitialisePass" class="typeReinitialisePass" checked>
  201.                             <span>Adresse mail</span>
  202.                         </li>
  203.                         <li data-type-withPhone>
  204.                             <input type="radio" name="typeReinitialisePass" class="typeReinitialisePass">
  205.                             <span>Numéro de téléphone</span>
  206.                         </li>
  207.                     </ul>
  208.                     <button type="submit" id="SendReset">Send reset link</button>
  209.                 </form>
  210.                 <span class="footerLogin">Attendez, je me souviens de mon mot de passe... <a href="#"
  211.                         class="goLogin">Cliquez ici</a></span>
  212.             </div>
  213.             <!-- Bloc Verification Otp By Mail Or Phone -->
  214.             <div x-cloak x-show="show_verif_mail_phone" id="VerifMailPhone" type="text/template">
  215.                 <form class="loginForm" x-ref="VerifMailPhone" @submit.prevent="onVerifyEmailPhone($el,$refs)">
  216.                     <img src="/assets/images/auth/verifmail.svg">
  217.                     <h2>Vérifiez votre e-mail</h2>
  218.                     <p>Veuillez saisir le code à 4 chiffres envoyé à <b>San****@mail.com</b>.</p>
  219.                     <div class="codeVerification">
  220.                         <input x-model="verifyEmailPhone.codeOne" type="number" class="input-verif codemailphone1" name="codemailphone1"
  221.                             oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
  222.                             maxlength="1" >
  223.                         <input x-model="verifyEmailPhone.codeTwo" type="number" class="input-verif codemailphone2" name="codemailphone2"
  224.                             oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
  225.                             maxlength="1" >
  226.                         <input x-model="verifyEmailPhone.codeTree" type="number" class="input-verif codemailphone3" name="codemailphone3"
  227.                             oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
  228.                             maxlength="1" >
  229.                         <input x-model="verifyEmailPhone.codeFour" type="number" class="input-verif codemailphone4" name="codemailphone4"
  230.                             oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
  231.                             maxlength="1" >
  232.                     </div>
  233.                     <span class="text-danger text-left err_msg"></span>
  234.                     <button type="submit" class="confirmeResetType" disabled>Confirme</button>
  235.                 </form>
  236.                 <span class="footerLogin">Vous n'avez pas reçu de code ? <a href="#">Renvoyer</a></span>
  237.             </div>
  238.             <!-- Bloc Verification Otp By Authentification Account -->
  239.             <div x-cloak x-show="show_verif_auth_account" id="VerifAuthAccount" type="text/template">
  240.                 <form class="loginForm" x-ref="refVerifAuthAccount"  @submit.prevent="onVerifAuthAccount($el)" >
  241.                     <img src="/assets/images/auth/verifphone.svg">
  242.                     <h2>Authentifiez votre compte </h2>
  243.                     <!--{{"{{name}}"}}-->
  244.                     <p>La protection de votre santé+ est notre priorité absolue. veuillez confirmer votre compte en
  245.                         saisissant le code d'autorisation envoyé au <b>06***858</b>.</p>
  246.                     <div class="codeVerification">
  247.                         <input x-model="verifAuthAccount.codeOne" type="number" class="input-verif codeAuthAccount1" name="codeAuthAccount1"
  248.                             oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
  249.                             maxlength="1">
  250.                         <input x-model="verifAuthAccount.codeTwo" type="number" class="input-verif codeAuthAccount2" name="codeAuthAccount2"
  251.                             oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
  252.                             maxlength="1">
  253.                         <input x-model="verifAuthAccount.codeTree" type="number" class="input-verif codeAuthAccount3" name="codeAuthAccount3"
  254.                             oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
  255.                             maxlength="1">
  256.                         <input x-model="verifAuthAccount.codeFour" type="number" class="input-verif codeAuthAccount4" name="codeAuthAccount4"
  257.                             oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
  258.                             maxlength="1">
  259.                     </div>
  260.                     <span class="text-danger text-left err_msg"></span>
  261.                     <button type="submit" class="confirmeResetType">Confirme</button>
  262.                 </form>
  263.                 <span class="footerLogin">Vous n'avez pas reçu de code ? <a href="#">Renvoyer</a></span>
  264.             </div>
  265.         </div>
  266.     </section>
  267.     <section class="copyright" id="copyright">
  268.         <div>Copyright © Imperium 2000 - <span id="currentYear"></span></div>
  269.         <div class="copylinks"><a href="#"> Contact</a> - <a href="#"> Help</a> - <a href="#"> Privacy & Terms</a></div>
  270.     </section>
  271. </body>
  273. <script src="https://cdn.imperium.plus/assets/js/popper/v1.16.1/popper.min.js"></script>
  274. <script src="https://cdn.imperium.plus/assets/js/bootstrap/v4.0/bootstrap.min.js"></script>
  275. <script src="https://cdn.imperium.plus/assets/js/sweetalert/v02/sweetalert2.js"></script>
  277. {{ encore_entry_script_tags('index_patient') }}
  279. {#
  280. <script src="/assets/js/auth/patient/index.js"></script> #}
  282. <script>
  283.     /* Function Reset message Error */
  284.     function resetErr() {
  285.         $(".err_msg").html('');
  286.         $("input[type=text]").css('border-color', '#E9EBEC');
  287.         $("input[type=password]").css('border-color', '#E9EBEC');
  288.     }
  290.     /* Initialise Input & err message on keyup */
  291.     $('body').on('keyup', ".loginForm input", function (e) {
  292.         $(this).closest('.inputForm').find(".err_msg").html('');
  293.         $(this).css('border-color', '#E9EBEC');
  294.     });
  296.     /* Function AutoTab OTP inputs */
  297.     function auto_tab_input() {
  298.         $(".codeVerification .input-verif ").keyup(function () {
  299.             if (this.value.length == this.maxLength) {
  300.                 $(this).nextAll(".codeVerification .input-verif:enabled:first").focus();
  301.             }
  302.         });
  303.     }
  305.     /* Function backspace OTP inputs */
  306.     function auto_backspace() {
  307.         $(".codeVerification .input-verif").keyup(function (e) {
  308.             if (e.keyCode == 8) {
  309.                 if ($(this).prev().length > 0) {
  310.                     $(this).prev("input").focus();
  311.                 }
  312.             }
  313.         });
  314.     }
  316.     /* Validation inputs login Connect */
  317.     /*$('body').on('submit',"[data-login]",function(e){
  318.         e.preventDefault();
  319.         const indentif = $(this).find('#identifiant');
  320.         const pass = $(this).find('#password');
  321.         if(indentif.val() == ""){
  322.             indentif.css('border-color','#dc3545');
  323.             indentif.closest('.inputForm').find(".err_msg").html('le champ Identifiant est vide');
  324.         }else{
  325.             indentif.css('border-color','#E9EBEC');
  326.             indentif.closest('.inputForm').find(".err_msg").html('');
  327.             if(pass.val() == ""){
  328.             e.preventDefault();
  329.             pass.css('border-color','#dc2424');
  330.             pass.closest('.inputForm').find(".err_msg").html('le champ mot de  pass est vide');
  331.             }else{
  332.                 pass.css('border-color','#E9EBEC');
  333.                 pass.closest('.inputForm').find(".err_msg").html('');
  334.                 $('.loginBloc').addClass('d-none');
  335.                 $('.VerifAuthAccount').removeClass('d-none');
  336.             }
  337.         }
  338.     });*/
  340.     /* Show/Hide value  Password */
  341.     $('body').on('click', "#showHidePass", function () {
  342.         if ($(this).find('i').hasClass('fa-eye')) {
  343.             $(this).find('i').removeClass('fa-eye').addClass('fa-eye-slash');
  344.             $(this).closest('.passcontent').find('input').attr('type', 'text');
  345.         } else {
  346.             $(this).find('i').removeClass('fa-eye-slash').addClass('fa-eye');
  347.             $(this).closest('.passcontent').find('input').attr('type', 'password');
  348.         }
  349.     });
  351.     /* Go forgot password  */
  352.     $('body').on('click', "#forgetPassword", function () {
  353.         $('.loginBloc').addClass('d-none');
  354.         $('.Reinitialiserpassword').removeClass('d-none');
  355.         resetErr();
  356.     });
  358.     /* I have Account  */
  359.     $('body').on('click', ".goLogin", function () {
  360.         $('.loginBloc').addClass('d-none');
  361.         $('.seConnecter').removeClass('d-none');
  362.     });
  364.     /* forgot password choise Type */
  365.     $('body').on('click', ".Reinitialisationtype li", function () {
  366.         $('.Reinitialisationtype li').removeClass('active');
  367.         $('.typeReinitialisePass').removeAttr("checked");
  368.         $(this).addClass('active');
  369.         $(this).find('.typeReinitialisePass').attr("checked", 'true');
  370.     });
  372.     /* Confirm  Type  OTP Request */
  373.     $('body').on('click', "#SendReset", function (e) {
  374.         e.preventDefault();
  375.         if ($(this).closest('.loginForm').find("[data-type-withMail]").hasClass('active')) {
  376.             $('.loginBloc').addClass('d-none');
  377.             $('.VerifMailPhone form').find('h2').html('Vérifiez votre e-mail');
  378.             $('.VerifMailPhone form').find('p').html('Veuillez saisir le code à 4 chiffres envoyé à <b>San****@mail.com</b>');
  379.             $('.VerifMailPhone').removeClass('d-none');
  380.         } else {
  381.             $('.loginBloc').addClass('d-none');
  382.             $('.VerifMailPhone form').find('h2').html('Vérifiez votre Phone');
  383.             $('.VerifMailPhone form').find('p').html('Veuillez saisir le code à 4 chiffres envoyé à <b>06***858</b>');
  384.             $('.VerifMailPhone').removeClass('d-none');
  385.         }
  386.     });
  389.     /* Confirmation Change Password */
  390.     /*$('body').on('submit', "[data-new-pass]", function (e) {
  391.         const pass1 = $(this).find('#confirmPassword');
  392.         const pass2 = $(this).find('#confirmPasswordTwo');
  393.         if (pass1.val() == "") {
  394.             e.preventDefault();
  395.             pass1.css('border-color', '#dc3545');
  396.             pass1.closest('.inputForm').find(".err_msg").html('le champ mot de  pass est vide');
  397.         } else {
  398.             pass1.css('border-color', '#E9EBEC');
  399.             pass1.closest('.inputForm').find(".err_msg").html('');
  400.             if (pass2.val() == "") {
  401.                 e.preventDefault();
  402.                 pass2.css('border-color', '#dc2424');
  403.                 pass2.closest('.inputForm').find(".err_msg").html('le champ confirmation mot de  pass est vide');
  404.             } else {
  405.                 pass2.css('border-color', '#E9EBEC');
  406.                 pass2.closest('.inputForm').find(".err_msg").html('');
  407.                 if (pass1.val() != pass2.val()) {
  408.                     e.preventDefault();
  409.                     pass1.css('border-color', '#dc3545');
  410.                     pass2.css('border-color', '#dc2424');
  411.                     pass2.closest('.inputForm').find(".err_msg").html('le champ mot de pass et confirmation mot de pass sont pas égaux');
  412.                 } else {
  413.                     pass2.closest('.inputForm').find(".err_msg").html('');
  414.                 }
  415.             }
  416.         }
  420.     });*/
  424.     /* Validation OTP By Mail Or Phone */
  425.     /*let codeConfirmation = 1234;
  426.     $('body').on('submit', ".VerifMailPhone [data-valid-code]", function (e) {
  427.         e.preventDefault();
  428.         const frm = $(this);
  429.         let verifCode = $('.codemailphone1').val() + $('.codemailphone2').val() + $('.codemailphone3').val() + $('.codemailphone4').val();
  430.         if ($('.codemailphone1').val() == "" || $('.codemailphone2').val() == "" || $('.codemailphone3').val() == "" || $('.codemailphone4').val() == "") {
  431.             frm.find('.err_msg').html('merci  de saisi le code confirmation complet');
  432.         } else {
  433.             if (verifCode != codeConfirmation) {
  434.                 frm.find('.err_msg').html('le code de confirmation est incorect');
  435.             } else {
  436.                 $('.loginBloc').addClass('d-none');
  437.                 $('.Changepassword').removeClass('d-none');
  438.                 frm.find(".err_msg").html('');
  439.             }
  440.         }
  441.     });*/
  443.     /* Validation OTP By Account Authentification */
  444.     /*$('body').on('submit', ".VerifAuthAccount [data-valid-code]", function (e) {
  445.         e.preventDefault();
  446.         const frm = $(this);
  447.         let verifCode = $('.codeAuthAccount1').val() + $('.codeAuthAccount2').val() + $('.codeAuthAccount3').val() + $('.codeAuthAccount4').val();
  448.         if ($('.codeAuthAccount1').val() == "" || $('.codeAuthAccount2').val() == "" || $('.codeAuthAccount3').val() == "" || $('.codeAuthAccount4').val() == "") {
  449.             frm.find('.err_msg').html('merci  de saisi le code confirmation complet');
  450.         } else {
  451.             if (verifCode != codeConfirmation) {
  452.                 frm.find('.err_msg').html('le code de confirmation est incorect');
  453.             } else {
  454.                 alert('Authentified');
  455.                 frm.find(".err_msg").html('');
  456.             }
  457.         }
  458.     });*/
  461.     /* Initialisation  functions OTP */
  462.     $(document).ready(function () {
  463.         auto_tab_input();
  464.         auto_backspace();
  465.         /* Current Year to copyright */
  466.         $('#currentYear').html(new Date().getFullYear());
  467.     });
  469. </script>
  471. </html>