Login UI using ajax

This commit is contained in:
2024-04-14 12:06:40 +02:00
parent 5b1fc2d50b
commit 81af439f50
3 changed files with 105 additions and 4 deletions

View File

@@ -55,8 +55,39 @@ test = "coucou"
POST http://serveur-projet-s4.felix/src/API/requests.php/api/login/patient
Content-Type: application/x-www-form-urlencoded
mail = "nicolasgrenier@example.com" &
password = "a"
mail = nicolasgrenier@example.com &
password = a
###
POST http://serveur-projet-s4.felix/src/API/requests.php/api/login/medecin
Content-Type: application/x-www-form-urlencoded
mail = cberger@example.org &
password = a
###
PUT http://serveur-projet-s4.felix/src/API/requests.php/api/signup/patient
Content-Type: application/x-www-form-urlencoded
mail = felix.marquet@isen-ouest.yncrea.fr &
password = a &
name = Marquet &
surname = Félix &
phone = 0645383602
###
PUT http://serveur-projet-s4.felix/src/API/requests.php/api/signup/medecin
Content-Type: application/x-www-form-urlencoded
mail = felix.marquet@isen-ouest.yncrea.fr &
password = a &
name = Marquet &
surname = Félix &
phone = 0645383602 &
specialite = Test &
postal = 44470
###

View File

@@ -82,5 +82,7 @@
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/md5.js"></script>
</body>
</html>

View File

@@ -204,13 +204,81 @@ function clearAlert() {
alert.innerHTML = "";
}
function displayHomeTopBar() {
let topbar = document.getElementById("topbar");
topbar.innerHTML = "";
if(sessionStorage.getItem("token") === null) {
topbar.innerHTML = `
<div id="topInfo">
<a href="index.php">
<p id="DoctISEN" class="top-0 position-fixed">
Doct'ISEN
</p>
</a>
<div class="d-flex position-fixed end-0 flex-row align-items-center gap-3 mt-2 top-0">
<button type="button" class="btn btn-danger" style="top: 0.4375em;" id="login-praticien">Vous êtes praticien ?</button> <button type="button" class="btn btn-danger" style="top: 0.4375em;" id="login-user">Se connecter</button><p> </p>
</div>
</div>
`;
attachLoginUserDisplayEventListener();
attachLoginPraticienDisplayEventListener();
}
else {
let token = sessionStorage.getItem("token");
let user = TokenDecode(token);
const mailMD5 = CryptoJS.MD5(user.mail);
if(user.type === "patient") {
topbar.innerHTML = `
<div id="topInfo">
<a href="index.php">
<p id="DoctISEN" class="top-0 position-fixed">
Doct'ISEN
</p>
</a>
<div class="d-flex position-fixed end-0 flex-row align-items-center gap-3 mt-2 top-0">
<img src="https://www.gravatar.com/avatar/${mailMD5}?s=64" alt="avatar" id="avatar" style="width: 14.3%; height: auto; border-radius: 50%">
<div>
<p class="text-white" id="user-name-disconect">${user.name} ${user.surname}</p>
</div>
<p class="text-white fw-bold link-underline-opacity-75-hover link-underline link-underline-opacity-0 link-offset-3-hover link-underline-light" id="my-rdv">Mes rendez-vous</p>
</div>
</div>`;
}
else if (user.type === "medecin") {
topbar.innerHTML = `
<div id="topInfo">
<a href="index.php">
<p id="DoctISEN" class="top-0 position-fixed">
Doct'ISEN
</p>
</a>
<div class="d-flex position-fixed end-0 flex-row align-items-center gap-3 mt-2 top-0">
<img src="https://www.gravatar.com/avatar/${mailMD5}?s=64" alt="avatar" id="avatar" style="width: 14.3%; height: auto; border-radius: 50%">
<div>
<p class="text-white" id="user-name-disconect">${user.name} ${user.surname}</p>
</div>
<p class="text-white fw-bold link-underline-opacity-75-hover link-underline link-underline-opacity-0 link-offset-3-hover link-underline-light" id="my-rdv-medecin">Mes rendez-vous practicien</p>
</div>
</div>`;
}
else {
topbar.innerHTML = `
<div id="topInfo">
<p class="alert-danger">Erreur</p>
</div>`;
}
}
}
function displayHome() {
removeSearchTopBar();
displayHomeTopBar();
let container = document.getElementById("content");
container.classList = "";
container.innerHTML = "";
container.innerHTML = `
<div style="background-color: red; height: 50vh;">
<div class="d-flex justify-content-center align-items-center" id="Alert"></div>
<div class="d-flex justify-content-center align-items-center" style="background-color: red;" id="Alert"></div>
<img src="src/img/img_index.png" alt="img_index" id="img_index">
<div id="rdv">
<p class="text-white fw-bold fs-3">Trouvez un rendez vous avec un medecin</p>
@@ -593,7 +661,7 @@ function attachPrendreRDVEventListener() {
buttons.forEach(function (button) {
button.addEventListener("click", function (event) {
let RDVid = event.target.id.split("-")[2];
data = "rdv_id=" + RDVid + "&patient_id=" + 1;
let data = "rdv_id=" + RDVid + "&patient_id=" + 1;
ajaxRequest('PUT', "src/API/requests.php/api/rdv", function (returnData){
if (returnData.success) {
displayHome();