<!DOCTYPE html>
<html lang="fr" class="js">
<head>
<base href="../">
<meta charset="utf-8">
<meta name="author" content="DSI">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
content="A powerful and conceptual apps base dashboard template that especially build for developers and programmers.">
<!-- Fav Icon -->
<link rel="shortcut icon" href="{{ asset('frontend/images/favicon.png') }}">
<!-- Page Title -->
<title>{% block title %}DSANTE ✅{% endblock %}</title>
<!-- StyleSheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">
<link rel="stylesheet" href="{{ asset('frontend/assets/css/dashlite.css') }}">
<link id="skin-default" rel="stylesheet" href="{{ asset('frontend/assets/css/theme.css') }}">
<link rel="stylesheet" href="{{ asset('fonts/fontawesome/css/all.css') }}">
<script src="https://unpkg.com/axios/dist/axios.min.js" defer></script>
<style>
.swal2-title {
color: #ffffff !important;
}
.iti {
position: relative;
display: block;
}
.errorNumber {
color: #e85347;
font-size: 12px;
font-style: italic;
}
</style>
</head>
<body class="nk-body bg-white npc-general pg-auth">
<div class="nk-app-root">
<!-- main @s -->
<div class="nk-main ">
<!-- wrap @s -->
<div class="nk-wrap nk-wrap-nosidebar">
<!-- content @s -->
<div class="nk-content ">
<div class="nk-split nk-split-page nk-split-md">
<div class="nk-split-content nk-block-area nk-block-area-column nk-auth-container bg-white">
<div class="absolute-top-right d-lg-none p-3 p-sm-5">
<a href="#" class="toggle btn-white btn btn-icon btn-light" data-target="athPromo"><em
class="icon ni ni-info"></em></a>
</div>
<div class="nk-block nk-block-middle nk-auth-body">
<div class="brand-logo pb-5">
<a href="{{ path('index') }}" class="logo-link">
<img class="logo-light logo-img logo-img-lg" src="{{ asset('logo.png') }}"
srcset="{{ asset('logo.png') }}" alt="logo">
<img class="logo-dark logo-img logo-img-lg" src="{{ asset('logo.png') }}"
srcset="{{ asset('logo.png') }}" alt="logo-dark">
</a>
</div>
<div class="nk-block-head">
<div class="nk-block-head-content">
<div class="spinner-grow" id="spinnerLoading" role="status" style="display: none">
<span class="visually-hidden"></span></div>
<h5 class="nk-block-title">Connexion
{% if app.request.getHttpHost() == 'medecin.'~ app.request.server.get('WEBSITE_URL') %}
Médecin
{% elseif app.request.getHttpHost() == 'patient.'~ app.request.server.get('WEBSITE_URL') %}
Patient
{% endif %}
</h5>
{# <div class="nk-block-des"> #}
{# <p>Accédez au panneau Dsanté à l'aide de votre e-mail et de votre code #}
{# d'accès.</p> #}
{# </div> #}
</div>
{% for message in app.flashes('sendConnect') %}
<div class="alert alert-success">
<strong>{{ message }}</strong>
</div>
{% endfor %}
{% for message in app.flashes('sendEmailConfirmation') %}
<div class="alert alert-warning">
<strong>{{ message }}</strong>
</div>
{% endfor %}
{% for message in app.flashes('sendResetPassword') %}
<div class="alert alert-warning">
<strong>{{ message }}</strong>
</div>
{% endfor %}
{% for message in app.flashes('sendResetSuccess') %}
<div class="alert alert-success text-dark">
<strong>{{ message }}</strong>
</div>
{% endfor %}
{% for message in app.flashes('InvalidToken') %}
<div class="alert alert-danger">
<strong>{{ message }}</strong>
</div>
{% endfor %}
{% for message in app.flashes('PasswordChangeSuccess') %}
<div class="alert alert-success text-dark">
<strong>{{ message }}</strong>
</div>
{% endfor %}
</div><!-- .nk-block-head -->
<form action="{{ path('login') }}" method="post">
{% if error %}
<div class="alert alert-fill alert-danger alert-icon">
<em class="icon ni ni-cross-circle"></em>
<strong>
{{ error.messageKey|trans(error.messageData, 'security') }}
</strong>
</div>
{% endif %}
<div class="form-group">
<div class="form-label-group">
<label class="form-label" for="phone_number">Numéro de téléphone:</label>
{# <a class="link link-primary link-sm" tabindex="-1" href="#">Need Help?</a> #}
</div>
<div class="form-control-wrap">
<input type="text" id="phone_number" name="phone_number"
class="form-control form-control-lg" value="{{ last_username }}"
autocomplete="phone_number" required autofocus/>
<span id="errorNumber" class="errorNumber" style="display: none">Le numéro est invalide. Il doit être de 10 chiffres </span>
{# autocomplete="phone_number" required autofocus/> #}
</div>
</div>
<!-- .form-group -->
<div class="form-group">
<div class="form-label-group">
<label class="form-label" for="inputPassword">Mot de passe:</label>
{# <a class="link link-primary link-sm" tabindex="-1" href="#">Need Help?</a> #}
</div>
<div class="form-control-wrap">
<input type="password" id="inputPassword" name="password"
class="form-control form-control-lg" autocomplete="current-password"
required/>
</div>
<input type="hidden" name="_csrf_token"
value="{{ csrf_token('authenticate') }}"
>
</div>
<!-- .form-group -->
<div class="custom-control custom-checkbox checked col-md-12">
<div class="col-md-8">
<input type="checkbox" class="custom-control-input" id="_remember_me"
name="_remember_me">
<label class="custom-control-label" for="_remember_me">Se souvenir de
moi</label>
</div>
<div class="col-md-4">
<a class="link link-primary" tabindex="-1"
href="{{ path('reset_password_request') }}">Mot de passe oublié?</a>
</div>
</div>
<button type="submit" class="btn btn-lg btn-primary btn-block mt-3" disabled
id="connexionBtn">Se connecter
</button>
</form>
<div class="form-note-s2 pt-4 fw-bold"> Nouveau sur notre plateforme ?
{# <a href="{{ path('app_register_patient') }}">Créer un compte</a> #}
{% if app.request.getHttpHost() == 'clinic.'~ app.request.server.get('WEBSITE_URL') %}
<a href="{{ path('app_register_clinic') }}">Créez votre compte</a>
{% elseif app.request.getHttpHost() == 'medecin.'~ app.request.server.get('WEBSITE_URL') %}
<a href="{{ path('app_register_medical_staff') }}">Créez votre compte</a>
{% elseif app.request.getHttpHost() == 'patient.'~ app.request.server.get('WEBSITE_URL') %}
<a href="{{ path('app_register_patient') }}">Créez votre compte</a>
{# <a href="{{ path('app_register_patient') }}">Créer un compte</a> #}
{% endif %}
</div>
</div><!-- .nk-block -->
</div><!-- .nk-split-content -->
<div class="nk-split-content nk-split-stretch bg-lighter d-flex toggle-break-lg toggle-slide toggle-slide-right"
data-content="athPromo" data-toggle-screen="lg" data-toggle-overlay="true"
style="background-image:url('{{ asset('frontend/images/bg/login.jpg') }}');background-clip: border-box!important;background-size: cover;background-repeat: no-repeat">
<div class="slider-wrap w-100 w-max-550px p-3 p-sm-5 m-auto text-white">
<div class="slider-init" data-slick='{"dots":true, "arrows":false}'>
<div class="slider-item">
<div class="nk-feature nk-feature-center">
<div class="nk-feature-content py-4 p-sm-5">
<h4>Dsanté</h4>
<p>La Santé en toute simplicité.</p>
</div>
</div>
</div><!-- .slider-item -->
<div class="slider-item">
<div class="nk-feature nk-feature-center">
<div class="nk-feature-content py-4 p-sm-5">
<h4>Dsanté</h4>
<p>La Santé en toute simplicité.</p>
</div>
</div>
</div><!-- .slider-item -->
<div class="slider-item">
<div class="nk-feature nk-feature-center">
<div class="nk-feature-content py-4 p-sm-5">
<h4>Dsanté</h4>
<p>La Santé en toute simplicité.</p>
</div>
</div>
</div><!-- .slider-item -->
</div><!-- .slider-init -->
<div class="slider-dots"></div>
<div class="slider-arrows"></div>
</div><!-- .slider-wrap -->
</div><!-- .nk-split-content -->
</div><!-- .nk-split -->
</div>
<!-- wrap @e -->
</div>
<!-- content @e -->
</div>
<!-- main @e -->
</div>
<!-- app-root @e -->
<!-- Modal Form -->
<div class="modal fade" id="resendSMSCode" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="text-align: center">
Activation du numéro de téléphone :
<span id="number_to_validate" style="font-weight: bold"></span>
</h5>
<a href="#" class="close" data-bs-dismiss="modal" aria-label="Close">
<em class="icon ni ni-cross"></em>
</a>
</div>
<div class="modal-body">
<p>
Veuillez saisir le code reçu par SMS. Si vous n'avez pas reçu de code, cliquez sur le bouton
<span style="font-weight: bold;color: #0a654a">Renvoyer le code</span>.
</p>
{# <form action="#" class="form-validate is-alter"> #}
<div class="form-group">
<label class="form-label" for="full-name">Code d'activation</label>
<div class="form-control-wrap">
<input type="number" class="form-control" id="code" required>
</div>
</div>
{# <div class="d-flex justify-content-center" style="padding-top: 10px;padding-bottom: 20px;"> #}
<div id="modalSpinner" class="justify-content-center"
style="display: none;padding-top: 10px;padding-bottom: 20px;">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="form-group">
<button id="submitCode" class="btn btn-lg btn-primary">Valider</button>
<button id="resendCode" class="btn btn-lg btn-secondary">Renvoyer le code</button>
</div>
{# </form> #}
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="{{ asset('frontend/assets/js/bundle.js') }}"></script>
<script src="{{ asset('frontend/assets/js/scripts.js') }}"></script>
<script>
/**
* @author zhixin wen <wenzhixin2010@gmail.com>
* https://github.com/wenzhixin/bootstrap-show-password
* version: 1.0.3
*/
!function (e) {
"use strict";
var t = function (e) {
var t = arguments, s = !0, i = 1;
return e = e.replace(/%s/g, function () {
var e = t[i++];
return "undefined" == typeof e ? (s = !1, "") : e
}), s ? e : ""
}, s = function (t, s) {
this.options = s, this.$element = e(t), this.isShown = !1, this.init()
};
s.DEFAULTS = {
placement: "after",
white: !1,
message: "Cliquez ici pour afficher/masquer le mot de passe",
eyeClass: "fas",
eyeOpenClass: "fa-eye",
eyeCloseClass: "fa-eye-slash"
// eyeClass: "glyphicon",
// eyeOpenClass: "glyphicon-eye-open",
// eyeCloseClass: "glyphicon-eye-close"
}, s.prototype.init = function () {
var s, i;
"before" === this.options.placement ? (s = "insertBefore", i = "input-prepend") : (this.options.placement = "after", s = "insertAfter", i = "input-append"), this.$element.wrap(t('<div class="%s input-group" />', i)), this.$text = e('<input type="text" />')[s](this.$element).attr("class", this.$element.attr("class")).attr("style", this.$element.attr("style")).attr("placeholder", this.$element.attr("placeholder")).css("display", this.$element.css("display")).val(this.$element.val()).hide(), this.$element.prop("readonly") && this.$text.prop("readonly", !0), this.$icon = e(['<span tabindex="100" title="' + this.options.message + '" class="add-on input-group-addon">', '<i class="icon-eye-open' + (this.options.white ? " icon-white" : "") + " " + this.options.eyeClass + " " + this.options.eyeOpenClass + '"></i>', "</span>"].join(""))[s](this.$text).css("cursor", "pointer"), this.$text.off("keyup").on("keyup", e.proxy(function () {
this.isShown && this.$element.val(this.$text.val()).trigger("change")
}, this)), this.$icon.off("click").on("click", e.proxy(function () {
this.$text.val(this.$element.val()).trigger("change"), this.toggle()
}, this))
}, s.prototype.toggle = function (e) {
this[this.isShown ? "hide" : "show"](e)
}, s.prototype.show = function (t) {
var s = e.Event("show.bs.password", {relatedTarget: t});
this.$element.trigger(s), this.isShown = !0, this.$element.hide(), this.$text.show(), this.$icon.find("i").removeClass("icon-eye-open " + this.options.eyeOpenClass).addClass("icon-eye-close " + this.options.eyeCloseClass), this.$text[this.options.placement](this.$element)
}, s.prototype.hide = function (t) {
var s = e.Event("hide.bs.password", {relatedTarget: t});
this.$element.trigger(s), this.isShown = !1, this.$element.show(), this.$text.hide(), this.$icon.find("i").removeClass("icon-eye-close " + this.options.eyeCloseClass).addClass("icon-eye-open " + this.options.eyeOpenClass), this.$element[this.options.placement](this.$text)
}, s.prototype.val = function (e) {
return "undefined" == typeof e ? this.$element.val() : (this.$element.val(e).trigger("change"), this.$text.val(e), void 0)
};
var i = e.fn.password;
e.fn.password = function () {
var t, i = arguments[0], n = arguments, o = ["show", "hide", "toggle", "val"];
return this.each(function () {
var a = e(this), h = a.data("bs.password"),
r = e.extend({}, s.DEFAULTS, a.data(), "object" == typeof i && i);
if ("string" == typeof i) {
if (e.inArray(i, o) < 0) throw "Unknown method: " + i;
t = h[i](n[1])
} else h ? h.init(r) : (h = new s(a, r), a.data("bs.password", h))
}), t ? t : this
}, e.fn.password.Constructor = s, e.fn.password.noConflict = function () {
return e.fn.password = i, this
}, e(function () {
e('[data-toggle="password"]').password()
})
}(window.jQuery);
</script>
<script>
$("#inputPassword").password();
</script>
<script src="{{ asset('bundles/mercuryseriesflashy/js/flashy.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
<script>
const button = document.querySelector("#connexionBtn");
const errorMsg = document.querySelector("#errorNumber");
const input = document.querySelector("#phone_number");
window.number_to_validate = null;
function checkPatientPhoneNumberIfConfirm(phoneNumberFull) {
axios.post('/api/check_patient_phone_number_validate', {
phoneNumberFull: phoneNumberFull
})
.then(function (response) {
if (response.status === 200) {
$("#spinnerLoading").css("display", "none");
$('#resendSMSCode').modal('show');
$("#modalSpinner").css("display", "none");
// Swal.fire({
// title: "Tentative d'inscription",
// text: "Ce numéro a déjà été utilisé, vous allez être redirigé vers le formulaire de connexion.",
// icon: "info",
// timer: 5000,
// timerProgressBar: true,
// onClose: () => {
// window.location.href = "http://patient.localhost:8000/login";
// }
// }).then((result) => {
// if (result.dismiss === Swal.DismissReason.timer) {
// window.location.href = "http://patient.localhost:8000/login";
// }
// });
}
})
.catch(function (error) {
$("#spinnerLoading").css("display", "none");
console.log("error");
console.log(error);
console.log("error");
});
}
function checkPatientPhoneNumberIfExist(phoneNumberFull) {
axios.post('/api/check_patient_phone_number_if_exist', {
phoneNumberFull: phoneNumberFull
})
.then(function (response) {
if (response.status === 200) {
Swal.fire({
title: "Tentative d'inscription",
text: "Ce numéro a déjà été utilisé, vous allez être redirigé vers le formulaire de connexion.",
icon: "info",
timer: 5000,
timerProgressBar: true,
onClose: () => {
window.location.href = "https://patient.dsante.com/login";
}
}).then((result) => {
if (result.dismiss === Swal.DismissReason.timer) {
window.location.href = "https://patient.dsante.com/login";
}
});
}
})
.catch(function (error) {
console.log("error");
console.log(error);
console.log("error");
});
}
function checkPatientPhoneNumberCodeIsExact(phoneNumber, registrationCode) {
axios.post('/api/check_phone_registration_code_exact', {
phoneNumber: phoneNumber,
registrationCode: registrationCode
})
.then(function (response) {
if (response.status === 200) {
Swal.fire({
title: "Validation du numéro",
text: "Votre numéro a été valider avec succès",
icon: "success",
timer: 3000,
});
$('#resendSMSCode').modal('hide');
$("#modalSpinner").css("display", "none");
} else {
Swal.fire({
title: "Validation du numéro",
text: "Le code saisi est incorrect",
icon: "danger",
timer: 5000,
});
}
})
.catch(function (error) {
console.log("error");
console.log(error);
console.log("error");
});
}
// check_patient_phone_number_validate
$("#submitCode").on("click", function () {
$("#modalSpinner").css("display", "flex");
let registrationCode = $('#code').val();
let phoneNumber = window.number_to_validate;
checkPatientPhoneNumberCodeIsExact(phoneNumber, registrationCode);
});
$("#resendCode").on("click", function () {
$("#modalSpinner").css("display", "flex");
// let registrationCode = $('#code').val();
let phoneNumber = window.number_to_validate;
checkPatientPhoneNumberIfConfirm(phoneNumber);
// checkPatientPhoneNumberCodeIsExact(phoneNumber, registrationCode);
});
// initialise plugin
const iti = window.intlTelInput(input, {
onlyCountries: ["ci"],
initialCountry: "ci",
allowDropdown: true,
utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
customPlaceholder: function (selectedCountryPlaceholder, selectedCountryData) {
return selectedCountryPlaceholder;
},
});
input.addEventListener('keyup', (e) => {
if (input.value.trim()) {
if (iti.isValidNumber()) {
$("#spinnerLoading").css("display", "block");
let fullPhoneNumber = iti.getNumber();
window.number_to_validate = fullPhoneNumber;
$("#number_to_validate").html(fullPhoneNumber);
checkPatientPhoneNumberIfConfirm(fullPhoneNumber);
button.disabled = false;
errorMsg.style.display = 'none';
} else {
$("#spinnerLoading").css("display", "none");
errorMsg.style.display = '';
button.disabled = true;
// console.log("invalid")
}
}
});
// window.intlTelInput(input, {
// onlyCountries: ["ci"],
// allowDropdown:true,
// utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
// customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
// return selectedCountryPlaceholder;
// },
// });
</script>
{{ include('layouts/flashy.html.twig') }}
{% for message in app.flashes('email_verify_success') %}
{# <div class="flash-notice"> #}
{# {{ message }} #}
{# </div><script> #}
<script>
document.addEventListener("DOMContentLoaded", function () {
const Toast = Swal.mixin({
toast: true,
position: 'bottom-end',
showConfirmButton: false,
background: '#16a085',
timer: 5000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({
color: '#ecf0f1',
icon: 'success',
title: "{{ message }}",
})
});
</script>
{% endfor %}
<!-- app-root @e -->
<!-- JavaScript -->
</body>
</html>