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

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