<!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="{{ 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') }}">
<style>
#agreeContent strong {
color: black;
font-weight: 900;
}
#agreeContent h4 {
margin-top: 20px;
text-decoration: underline;
}
#agreeContent ul {
list-style: inside;
}
#agreeContent .modal-content {
height: 95vh !important;
overflow-y: scroll;
}
.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 w-lg-45">
<div class="absolute-top-right d-lg-none p-3 p-sm-5">
<a href="#" class="toggle btn btn-white 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') }}"
alt="logo">
<img class="logo-dark logo-img logo-img-lg" src="{{ asset('logo.png') }}"
alt="logo-esante">
</a>
</div>
<div class="nk-block-head">
<div class="nk-block-head-content">
<h5 class="nk-block-title">Créer son compte Patient</h5>
</div>
</div><!-- .nk-block-head -->
<style>
.col-md-6 {
padding-top: 10px;
}
.iti {
display: block !important;
}
label.required:after {
content: " *";
color: red;
font-weight: bold;
}
</style>
<div style="padding: 1rem 0"><strong style="text-decoration: underline">NB:</strong> les
champs marqués d'un astérisque (<span style="color: red;font-weight: bold">*</span>)
sont obligatoires
</div>
{{ form_start(registrationForm) }}
<fieldset class="border p-2" style="border: .0625rem solid #c9ccd0!important;">
<legend class="fs-20px">Informations personnelles</legend>
<div class="row">
<div class="col-md-6">
{{ form_row(registrationForm.firstName) }}
</div>
<div class="col-md-6">
{{ form_row(registrationForm.lastName) }}
</div>
</div>
<div class="row">
<div class="col-md-6">
{{ form_row(registrationForm.sexe) }}
</div>
<div class="col-md-6">
{{ form_row(registrationForm.dateOfBirth) }}
</div>
</div>
<div class="row">
<div class="col-md-6">
{{ form_row(registrationForm.nativeCountry) }}
</div>
<div class="col-md-6">
{{ form_row(registrationForm.countryOfResidence) }}
</div>
</div>
<div class="row">
{# <div class="col-md-6"> #}
{# {{ form_row(registrationForm.phoneNumber) }} #}
{# </div> #}
<div class="col-md-6">
{{ form_row(registrationForm.photo) }}
<img src="" alt="" style="width: 20%" id="previewImage">
</div>
</div>
</fieldset>
<br>
<fieldset class="border p-2" style="border: .0625rem solid #c9ccd0!important;">
<legend class="fs-20px">Informations de connexion</legend>
<div class="row">
<div class="col-md-6">
{# {{ form_row(registrationForm.email) }} #}
{{ form_row(registrationForm.phoneNumber) }}
<span id="errorNumber" class="errorNumber" style="display: none">Le numéro est invalide. Il doit être de 10 chiffres </span>
</div>
<div class="col-md-6">
{{ form_row(registrationForm.plainPassword, {
label: "Mot de Passe "
}) }}
</div>
</div>
</fieldset>
<div class="row" style="margin-left: 1em!important;margin-top: 0.8em!important;">
<div class="col-md-12">
{{ form_row(registrationForm.agreeTerms) }}
</div>
</div>
<button type="submit" class="btn btn-lg btn-primary btn-block mt-4" id="submit" disabled>
S'inscrire
</button>
{{ form_end(registrationForm) }}
<div class="form-note-s2 pt-4">
Vous avez déjà un compte ?
<a href="{{ path('login') }}">
<strong>Connectez-vous</strong>
</a>
</div>
</div>
</div><!-- nk-split-content -->
<div class="nk-split-content nk-split-stretch d-flex toggle-break-md toggle-slide toggle-slide-right"
data-toggle-screen="lg" data-toggle-overlay="true"
style="background-image:url('{{ asset('frontend/images/bg/register.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>
<div class="modal fade zoom" tabindex="-1" id="procedure">
<div class="modal-dialog modal-lg modal-dialog-bottom" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Les étapes d’inscription du compte patient</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" style="text-align: justify;line-height: 1.8;">
<h6><strong>Étape 1</strong></h6>
<p>
Remplir le formulaire et cliquer sur le bouton <strong> « S’inscrire ».</strong>
</p>
<h6><strong>Étape 2</strong></h6>
<p>
Veuillez entrer le code à 4 chiffres envoyé au numéro de téléphone
{# Ouvrir votre messagerie et cliquez sur le lien de validation d’email. (Ce lien est valable pendant 3 heures) #}
</p>
<h6><strong>Étape 3</strong></h6>
<p>
Vous pouvez maintenant Prendre un RDV.
</p>
</div>
</div>
</div>
</div>
<!-- app-root @e -->
<!-- JavaScript -->
<script src="{{ asset('frontend/assets/js/bundle.js') }}"></script>
<script src="{{ asset('frontend/assets/js/scripts.js') }}"></script>
<!-- app-root @e -->
<!-- JavaScript -->
{% block after_js %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.16/css/intlTelInput.css"
integrity="sha512-gxWow8Mo6q6pLa1XH/CcH8JyiSDEtiwJV78E+D+QP0EVasFs8wKXq16G8CLD4CJ2SnonHr4Lm/yY2fSI2+cbmw=="
crossorigin="anonymous" referrerpolicy="no-referrer"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.16/js/intlTelInput.min.js"
integrity="sha512-Po9nSdYOcWIcoADdRjkAbRYPpR8OHjxzA/3RDUERZcDewTLzRTxbG4bUX7Sr7lVEcO3wTCzphdOBWgNFKVmxaA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" defer></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>
<style>
.swal2-container .swal2-header .swal2-title{
color: black!important;
}
.swal2-container .swal2-html-container{
color: black!important;
font-size: 1rem;
font-family: Roboto, serif!important;
font-weight: 500!important;;
}
.swal2-container .swal2-timer-progress-bar {
background: rgba(44, 62, 80,1.0)!important;
}
</style>
<script>
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 readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#previewImage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#patient_form_photo").change(function () {
readURL(this);
});
// let agreeTerms=document.getElementById('patient_form_agreeTerms');
// let agreeTermsField = $("#patient_form_agreeTerms")
// agreeTermsField.change(function (e) {
// // console.log(e)
// // alert(e.target.checked)
// if (agreeTermsField[0].checked) {
// agreeTermsField.prop('checked', false)
// $('#agreeContent').modal('show')
// }
// });
// $('#agreeTermsValidation').click(function () {
// $('#agreeContent').modal('hide')
// agreeTermsField.prop('checked', true)
// })
const button = document.querySelector("#submit");
const errorMsg = document.querySelector("#errorNumber");
let phoneNumber = document.querySelector("#patient_form_phoneNumber");
// jQuery(window).on("load", function () {
// $("patient_form_phoneNumber").val("dddddd");
// // phoneNumber.val("");
// });
const iti = window.intlTelInput(phoneNumber, {
onlyCountries: ["ci"],
initialCountry: "ci",
hiddenInput: 'full',
allowDropdown: true,
utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
customPlaceholder: function (selectedCountryPlaceholder, selectedCountryData) {
return selectedCountryPlaceholder;
},
});
phoneNumber.addEventListener('keyup', (e) => {
if (phoneNumber.value.trim()) {
if (iti.isValidNumber()) {
let fullPhoneNumber = iti.getNumber();
checkPatientPhoneNumberIfExist(fullPhoneNumber);
button.disabled = false;
errorMsg.style.display = 'none';
} else {
errorMsg.style.display = '';
button.disabled = true;
// console.log("invalid")
}
}
});
// let phone = window.intlTelInput(phoneNumber, {
// // customPlaceholder: function (selectedCountryPlaceholder, selectedCountryData) {
// // return "";
// // },
// initialCountry: "auto",
// hiddenInput: 'full',
// // hiddenInput: 'patient_form_phoneNumber_full',
// geoIpLookup: function (callback) {
// $.get('https://ipinfo.io', function () {
// }, "jsonp").always(function (resp) {
// var countryCode = (resp && resp.country) ? resp.country : "us";
// callback(countryCode);
// });
// },
// // hiddenInput: "full_number",
// allowDropdown: true,
// utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.16/js/utils.min.js"
// });
</script>
<script>
$(document).ready(function () {
$("#procedure").modal('show');
});
$('.js-datepicker').datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
$('.js-select2').select2();
$("#patient_form_plainPassword").password();
</script>
{% endblock %}
</body>
</html>