<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Santé+</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,300,700,800,900" rel="stylesheet"
type="text/css">
<link href="https://cdn.imperium.plus/assets/css/bootstrap/v4.0/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.imperium.plus/assets/fonts/fontawesome/v5.11.2/css/all.css" rel="stylesheet"
type="text/css">
<link href="https://cdn.imperium.plus/assets/css/sweetalert/v01/sweetalert.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/assets/css/main.css">
<link href="/assets/css/auth/authentification.css" rel="stylesheet" type="text/css">
<style>
@keyframes ldio-japzwhp0h9j {
0% {
top: 96px;
left: 96px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 18px;
left: 18px;
width: 156px;
height: 156px;
opacity: 0;
}
}
.ldio-japzwhp0h9j div {
position: absolute;
border-width: 4px;
border-style: solid;
opacity: 1;
border-radius: 50%;
animation: ldio-japzwhp0h9j 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.ldio-japzwhp0h9j div:nth-child(1) {
border-color: #e90c59;
animation-delay: 0s;
}
.ldio-japzwhp0h9j div:nth-child(2) {
border-color: #46dff0;
animation-delay: -0.5s;
}
.loadingio-spinner-ripple-wsf5cxo48ch {
width: 200px;
height: 200px;
display: inline-block;
overflow: hidden;
}
.ldio-japzwhp0h9j {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0;
/* see note above */
}
.ldio-japzwhp0h9j div {
box-sizing: content-box;
}
[x-cloak] {
display: none !important;
}
.sante-input-validator{
border-color: #dc3545 !important;
}
</style>
<script src="https://cdn.imperium.plus/assets/js/jquery/v3.1/jquery.min.js"></script>
{#
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.1/dist/cdn.min.js"></script> #}
</head>
<body>
<!-- Section Authentification -->
<!-- You can use class 'Praticien' for doctor or class 'AuthPatient' for patient -->
<section class="Authentification AuthPraticien" id="Authentification" x-data="authentification">
<div class="AuthentificationContent">
<!-- Bloc logo & description -->
<div class="log">
<img src="/assets/images/logo.png" alt="" title="">
<p class="pHead">
Sed a magna semper, porta purus eu, ligula. Nam sit amet
</p>
</div>
{# #ToDo : Include loading #}
<div x-show="show_login_bloc" class="loginBloc" login-loading>
<div class="loadingio-spinner-ripple-wsf5cxo48ch">
<div class="ldio-japzwhp0h9j">
<div>
</div>
<div></div>
</div>
</div>
</div>
<!-- Bloc Login -->
<div x-cloak x-show="show_se_connecter_email" id="seConnecter" type="text/template">
<form class="loginForm" @submit.prevent="onLoginEmail($el,$refs)">
<h1>Bienvenue !</h1>
<p>Connectez-vous pour continuer vers <b>Santé+</b>.</p>
<div class="inputForm" x-ref="identifiant" >
<label>Identifiant</label>
<input type="text" x-model="loginFormEmail.identifiant" placeholder="entrez votre email ou ID ou telephone" id="identifiant"
name="identifiant">
<span class="text-danger text-left err_msg" ></span>
</div>
<div class="inputForm">
<label>Mot de passe <a href="#" class="forgetPassword" id="forgetPassword">Mot de passe oublié?</a></label>
</div>
<div class="remembreMe">
<input type="checkbox" id="remembre" name="remembre">
<span>Remember me</span>
</div>
<button type="submit">S'identifier</button>
</form>
<span class="footerLogin">Vous n'avez pas de compte ? <a href="#">S'inscrire</a></span>
</div>
<!-- Bloc Login -->
<div x-cloak x-show="show_se_connecter_password" id="seConnecter" type="text/template">
<form class="loginForm" x-ref="refloginPassword" @submit.prevent="onLoginPassword($el)" >
<h1>Bienvenue !</h1>
<p>Connectez-vous pour continuer vers <b>Santé+</b>.</p>
<div class="inputForm">
<label>Mot de passe <a href="#" class="forgetPassword" id="forgetPassword">Mot de passe oublié?</a></label>
<div class="passcontent">
<input x-model="loginPassword.password" type="password" x-model="loginFormPassword.password" placeholder="entrer le mot de passe" id="password" name="password">
<span class="showHidePass" id="showHidePass"><i class="far fa-eye"></i></span>
</div>
<span class="text-danger text-left err_msg"></span>
</div>
<div class="remembreMe">
<input type="checkbox" id="remembre" name="remembre">
<span>Remember me</span>
</div>
<button type="submit">S'identifier</button>
</form>
<span class="footerLogin">Vous n'avez pas de compte ? <a href="#">S'inscrire</a></span>
</div>
<!-- Bloc Confirm Change Password -->
<div x-cloak x-show="show_change_password" id="Changepassword" type="text/template">
<form class="loginForm" data-new-pass @submit.prevent="onChangePasswordVerify($el)" x-ref="refChangePasswordVerify">
<h1>Créer un nouveau mot de passe</h1>
<p>Votre nouveau mot de passe doit être différent du mot de passe utilisé précédemment.</p>
<div class="inputForm">
<label>Mot de passe</label>
<div class="passcontent">
<input type="password" placeholder="entrer le mot de passe" id="confirmPassword"
name="password" x-model="formChangePasswordVerify.password">
<span class="showHidePass" id="showHidePass"><i class="far fa-eye"></i></span>
</div>
<span class="text-danger text-left err_msg"></span>
</div>
<div class="inputForm">
<label>Confirmez le mot de passe</label>
<div class="passcontent">
<input type="password" placeholder="entrer le mot de passe" id="confirmPasswordTwo"
name="confirmPassword" x-model="formChangePasswordVerify.confirmPassword">
<span class="showHidePass" id="showHidePass"><i class="far fa-eye"></i></span>
</div>
<span class="text-danger text-left err_msg"></span>
</div>
<div class="remembreMe">
<input type="checkbox" id="remembre" name="remembre">
<span>Remember me</span>
</div>
<button type="submit">S'identifier</button>
</form>
<span class="footerLogin">Attendez, je me souviens de mon mot de passe... <a href="#"
class="goLogin">Cliquez ici</a></span>
</div>
<!-- Bloc Choise Type receive OTP vaidation -->
<div x-cloak x-show="show_reinitialiser_password" id="Reinitialiserpassword" type="text/template">
<form class="loginForm">
<h1>Mot de passe oublié ?</h1>
<p>Réinitialiser le mot de passe avec <b>Santé+</b>.</p>
<img src="/assets/images/auth/verifmail.svg">
<div class="Reinitialisationtitle">
Choisissez comment les instructions vous seront envoyées !
</div>
<ul class="Reinitialisationtype">
<li class="active" data-type-withMail>
<input type="radio" name="typeReinitialisePass" class="typeReinitialisePass" checked>
<span>Adresse mail</span>
</li>
<li data-type-withPhone>
<input type="radio" name="typeReinitialisePass" class="typeReinitialisePass">
<span>Numéro de téléphone</span>
</li>
</ul>
<button type="submit" id="SendReset">Send reset link</button>
</form>
<span class="footerLogin">Attendez, je me souviens de mon mot de passe... <a href="#"
class="goLogin">Cliquez ici</a></span>
</div>
<!-- Bloc Verification Otp By Mail Or Phone -->
<div x-cloak x-show="show_verif_mail_phone" id="VerifMailPhone" type="text/template">
<form class="loginForm" x-ref="VerifMailPhone" @submit.prevent="onVerifyEmailPhone($el,$refs)">
<img src="/assets/images/auth/verifmail.svg">
<h2>Vérifiez votre e-mail</h2>
<p>Veuillez saisir le code à 4 chiffres envoyé à <b>San****@mail.com</b>.</p>
<div class="codeVerification">
<input x-model="verifyEmailPhone.codeOne" type="number" class="input-verif codemailphone1" name="codemailphone1"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
maxlength="1" >
<input x-model="verifyEmailPhone.codeTwo" type="number" class="input-verif codemailphone2" name="codemailphone2"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
maxlength="1" >
<input x-model="verifyEmailPhone.codeTree" type="number" class="input-verif codemailphone3" name="codemailphone3"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
maxlength="1" >
<input x-model="verifyEmailPhone.codeFour" type="number" class="input-verif codemailphone4" name="codemailphone4"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
maxlength="1" >
</div>
<span class="text-danger text-left err_msg"></span>
<button type="submit" class="confirmeResetType" disabled>Confirme</button>
</form>
<span class="footerLogin">Vous n'avez pas reçu de code ? <a href="#">Renvoyer</a></span>
</div>
<!-- Bloc Verification Otp By Authentification Account -->
<div x-cloak x-show="show_verif_auth_account" id="VerifAuthAccount" type="text/template">
<form class="loginForm" x-ref="refVerifAuthAccount" @submit.prevent="onVerifAuthAccount($el)" >
<img src="/assets/images/auth/verifphone.svg">
<h2>Authentifiez votre compte </h2>
<!--{{"{{name}}"}}-->
<p>La protection de votre santé+ est notre priorité absolue. veuillez confirmer votre compte en
saisissant le code d'autorisation envoyé au <b>06***858</b>.</p>
<div class="codeVerification">
<input x-model="verifAuthAccount.codeOne" type="number" class="input-verif codeAuthAccount1" name="codeAuthAccount1"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
maxlength="1">
<input x-model="verifAuthAccount.codeTwo" type="number" class="input-verif codeAuthAccount2" name="codeAuthAccount2"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
maxlength="1">
<input x-model="verifAuthAccount.codeTree" type="number" class="input-verif codeAuthAccount3" name="codeAuthAccount3"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
maxlength="1">
<input x-model="verifAuthAccount.codeFour" type="number" class="input-verif codeAuthAccount4" name="codeAuthAccount4"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
maxlength="1">
</div>
<span class="text-danger text-left err_msg"></span>
<button type="submit" class="confirmeResetType">Confirme</button>
</form>
<span class="footerLogin">Vous n'avez pas reçu de code ? <a href="#">Renvoyer</a></span>
</div>
</div>
</section>
<section class="copyright" id="copyright">
<div>Copyright © Imperium 2000 - <span id="currentYear"></span></div>
<div class="copylinks"><a href="#"> Contact</a> - <a href="#"> Help</a> - <a href="#"> Privacy & Terms</a></div>
</section>
</body>
<script src="https://cdn.imperium.plus/assets/js/popper/v1.16.1/popper.min.js"></script>
<script src="https://cdn.imperium.plus/assets/js/bootstrap/v4.0/bootstrap.min.js"></script>
<script src="https://cdn.imperium.plus/assets/js/sweetalert/v02/sweetalert2.js"></script>
{{ encore_entry_script_tags('index_doctor') }}
{#
<script src="/assets/js/auth/patient/index.js"></script> #}
<script>
/* Function Reset message Error */
function resetErr() {
$(".err_msg").html('');
$("input[type=text]").css('border-color', '#E9EBEC');
$("input[type=password]").css('border-color', '#E9EBEC');
}
/* Initialise Input & err message on keyup */
$('body').on('keyup', ".loginForm input", function (e) {
$(this).closest('.inputForm').find(".err_msg").html('');
$(this).css('border-color', '#E9EBEC');
});
/* Function AutoTab OTP inputs */
function auto_tab_input() {
$(".codeVerification .input-verif ").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).nextAll(".codeVerification .input-verif:enabled:first").focus();
}
});
}
/* Function backspace OTP inputs */
function auto_backspace() {
$(".codeVerification .input-verif").keyup(function (e) {
if (e.keyCode == 8) {
if ($(this).prev().length > 0) {
$(this).prev("input").focus();
}
}
});
}
/* Validation inputs login Connect */
/*$('body').on('submit',"[data-login]",function(e){
e.preventDefault();
const indentif = $(this).find('#identifiant');
const pass = $(this).find('#password');
if(indentif.val() == ""){
indentif.css('border-color','#dc3545');
indentif.closest('.inputForm').find(".err_msg").html('le champ Identifiant est vide');
}else{
indentif.css('border-color','#E9EBEC');
indentif.closest('.inputForm').find(".err_msg").html('');
if(pass.val() == ""){
e.preventDefault();
pass.css('border-color','#dc2424');
pass.closest('.inputForm').find(".err_msg").html('le champ mot de pass est vide');
}else{
pass.css('border-color','#E9EBEC');
pass.closest('.inputForm').find(".err_msg").html('');
$('.loginBloc').addClass('d-none');
$('.VerifAuthAccount').removeClass('d-none');
}
}
});*/
/* Show/Hide value Password */
$('body').on('click', "#showHidePass", function () {
if ($(this).find('i').hasClass('fa-eye')) {
$(this).find('i').removeClass('fa-eye').addClass('fa-eye-slash');
$(this).closest('.passcontent').find('input').attr('type', 'text');
} else {
$(this).find('i').removeClass('fa-eye-slash').addClass('fa-eye');
$(this).closest('.passcontent').find('input').attr('type', 'password');
}
});
/* Go forgot password */
$('body').on('click', "#forgetPassword", function () {
$('.loginBloc').addClass('d-none');
$('.Reinitialiserpassword').removeClass('d-none');
resetErr();
});
/* I have Account */
$('body').on('click', ".goLogin", function () {
$('.loginBloc').addClass('d-none');
$('.seConnecter').removeClass('d-none');
});
/* forgot password choise Type */
$('body').on('click', ".Reinitialisationtype li", function () {
$('.Reinitialisationtype li').removeClass('active');
$('.typeReinitialisePass').removeAttr("checked");
$(this).addClass('active');
$(this).find('.typeReinitialisePass').attr("checked", 'true');
});
/* Confirm Type OTP Request */
$('body').on('click', "#SendReset", function (e) {
e.preventDefault();
if ($(this).closest('.loginForm').find("[data-type-withMail]").hasClass('active')) {
$('.loginBloc').addClass('d-none');
$('.VerifMailPhone form').find('h2').html('Vérifiez votre e-mail');
$('.VerifMailPhone form').find('p').html('Veuillez saisir le code à 4 chiffres envoyé à <b>San****@mail.com</b>');
$('.VerifMailPhone').removeClass('d-none');
} else {
$('.loginBloc').addClass('d-none');
$('.VerifMailPhone form').find('h2').html('Vérifiez votre Phone');
$('.VerifMailPhone form').find('p').html('Veuillez saisir le code à 4 chiffres envoyé à <b>06***858</b>');
$('.VerifMailPhone').removeClass('d-none');
}
});
/* Confirmation Change Password */
/*$('body').on('submit', "[data-new-pass]", function (e) {
const pass1 = $(this).find('#confirmPassword');
const pass2 = $(this).find('#confirmPasswordTwo');
if (pass1.val() == "") {
e.preventDefault();
pass1.css('border-color', '#dc3545');
pass1.closest('.inputForm').find(".err_msg").html('le champ mot de pass est vide');
} else {
pass1.css('border-color', '#E9EBEC');
pass1.closest('.inputForm').find(".err_msg").html('');
if (pass2.val() == "") {
e.preventDefault();
pass2.css('border-color', '#dc2424');
pass2.closest('.inputForm').find(".err_msg").html('le champ confirmation mot de pass est vide');
} else {
pass2.css('border-color', '#E9EBEC');
pass2.closest('.inputForm').find(".err_msg").html('');
if (pass1.val() != pass2.val()) {
e.preventDefault();
pass1.css('border-color', '#dc3545');
pass2.css('border-color', '#dc2424');
pass2.closest('.inputForm').find(".err_msg").html('le champ mot de pass et confirmation mot de pass sont pas égaux');
} else {
pass2.closest('.inputForm').find(".err_msg").html('');
}
}
}
});*/
/* Validation OTP By Mail Or Phone */
/*let codeConfirmation = 1234;
$('body').on('submit', ".VerifMailPhone [data-valid-code]", function (e) {
e.preventDefault();
const frm = $(this);
let verifCode = $('.codemailphone1').val() + $('.codemailphone2').val() + $('.codemailphone3').val() + $('.codemailphone4').val();
if ($('.codemailphone1').val() == "" || $('.codemailphone2').val() == "" || $('.codemailphone3').val() == "" || $('.codemailphone4').val() == "") {
frm.find('.err_msg').html('merci de saisi le code confirmation complet');
} else {
if (verifCode != codeConfirmation) {
frm.find('.err_msg').html('le code de confirmation est incorect');
} else {
$('.loginBloc').addClass('d-none');
$('.Changepassword').removeClass('d-none');
frm.find(".err_msg").html('');
}
}
});*/
/* Validation OTP By Account Authentification */
/*$('body').on('submit', ".VerifAuthAccount [data-valid-code]", function (e) {
e.preventDefault();
const frm = $(this);
let verifCode = $('.codeAuthAccount1').val() + $('.codeAuthAccount2').val() + $('.codeAuthAccount3').val() + $('.codeAuthAccount4').val();
if ($('.codeAuthAccount1').val() == "" || $('.codeAuthAccount2').val() == "" || $('.codeAuthAccount3').val() == "" || $('.codeAuthAccount4').val() == "") {
frm.find('.err_msg').html('merci de saisi le code confirmation complet');
} else {
if (verifCode != codeConfirmation) {
frm.find('.err_msg').html('le code de confirmation est incorect');
} else {
alert('Authentified');
frm.find(".err_msg").html('');
}
}
});*/
/* Initialisation functions OTP */
$(document).ready(function () {
auto_tab_input();
auto_backspace();
/* Current Year to copyright */
$('#currentYear').html(new Date().getFullYear());
});
</script>
</html>