SAE3A_MemoryMap
/
front
5
0
Fork 0
Code Issues 6 Pull Requests Packages Projects 1 Releases Wiki Activity

💄 Modal animations (also fixes lot of UI bugs w/ open/close & auth)

Browse Source
navbar
Alix JEUDI--LEMOINE 5 months ago
parent ad0cdc1d81
commit 8618b50e67
6 changed files with 100 additions and 108 deletions
Show Stats Download Patch File Download Diff File

97
src/app/components/add-pin-popup/add-pin-popup.component.html
Unescape View File

@ -1,66 +1,55 @@
<!-- Modal toggle --> <!-- Modal toggle -->
<button <button
data-modal-target="authentication-modal" (click)="openPinModal()"
data-modal-toggle="authentication-modal"
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300" class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
type="button" type="button"
> >
<p *ngIf="!isHomePage">Ajouter un pin</p> <p *ngIf="!isHomePage">Ajouter un pin</p>
</button> </button>
<!-- Fond assombri -->
<div
class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40"
[ngClass]="{'opacity-0 pointer-events-none': !isPinModalOpen, 'opacity-100': isPinModalOpen}"
(click)="closePinModal()"
></div>
<!-- Main modal --> <!-- Main modal -->
<div <div
id="authentication-modal" id="pin-modal"
tabindex="-1" tabindex="-1"
aria-hidden="true" aria-hidden="true"
class="hidden overflow-auto absolute top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full" [ngClass]="{
'opacity-0 scale-50 pointer-events-none': !isPinModalOpen,
'opacity-100 scale-100': isPinModalOpen
}"
class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-opacity transition-transform duration-300 ease-in-out"
> >
<div class="relative p-4 w-full max-w-xl max-h-full"> <div class="relative p-4 w-full max-w-xl max-h-full">
<!-- Modal content --> <!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700"> <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 transition-transform duration-300 ease-in-out">
<!-- Modal header --> <!-- Modal header -->
<div <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600" <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Créer ton souvenir !</h3>
>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
Créer ton souvenir !
</h3>
<button <button
type="button" type="button"
id="close-modal" (click)="closePinModal()"
class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-hide="authentication-modal"
>
<svg
class="w-3 h-3"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 14"
> >
<path <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
stroke="currentColor" <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
/>
</svg> </svg>
<span class="sr-only">Fermer la modal</span> <span class="sr-only">Fermer la modal</span>
</button> </button>
</div> </div>
<!-- Modal body --> <!-- Modal body -->
<div class="p-4 md:p-5"> <div class="p-4 md:p-5">
<form class="grid gap-6 mb-1 md:grid-cols-2" [formGroup]="form"> <form class="grid gap-6 mb-1 md:grid-cols-2" [formGroup]="form">
<div> <div>
<label <label for="title" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Titre</label>
for="title"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Titre</label
>
<input <input
type="title" type="text"
name="title"
id="title" id="title"
formControlName="title" formControlName="title"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
@ -70,11 +59,7 @@
</div> </div>
<div> <div>
<label <label for="localisation" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Localisation</label>
for="localisation"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Localisation</label
>
<input <input
type="text" type="text"
id="localisation" id="localisation"
@ -84,31 +69,19 @@
(focus)="onFocus()" (focus)="onFocus()"
(blur)="onBlur()" (blur)="onBlur()"
/> />
<ul <ul *ngIf="suggestions.length > 0 && inputFocused" class="bg-white dark:bg-gray-700 border border-gray-300 mt-2 rounded shadow absolute z-10 mr-5 max-h-60 overflow-auto">
*ngIf="suggestions.length > 0 && inputFocused" <li *ngFor="let suggestion of suggestions" (click)="selectSuggestion(suggestion)" class="p-2 block mb-2 text-sm font-medium text-gray-900 dark:text-white hover:bg-gray-500 cursor-pointer">
class="bg-white dark:bg-gray-700 border border-gray-300 mt-2 rounded shadow absolute z-10 mr-5 max-h-60 overflow-auto"
>
<li
*ngFor="let suggestion of suggestions"
(click)="selectSuggestion(suggestion)"
class="p-2 block mb-2 text-sm font-medium text-gray-900 dark:text-white hover:bg-gray-500 cursor-pointer"
>
{{ suggestion.display_name }} {{ suggestion.display_name }}
</li> </li>
</ul> </ul>
</div> </div>
<div> <div>
<app-drag-drop <app-drag-drop (filesSelected)="onFilesReceived($event)"></app-drag-drop>
(filesSelected)="onFilesReceived($event)"
></app-drag-drop>
</div> </div>
<div> <div>
<label <label for="description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label>
for="description"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Description</label
>
<textarea <textarea
id="description" id="description"
rows="4" rows="4"
@ -119,20 +92,12 @@
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<button <button type="reset" (click)="closePinModal()" class="w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
type="reset"
data-modal-hide="authentication-modal"
class="w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
>
Annuler Annuler
</button> </button>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<button <button type="submit" (click)="submitForm()" class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
type="submit"
(click)="submitForm()"
class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Valider Valider
</button> </button>
</div> </div>

12
src/app/components/add-pin-popup/add-pin-popup.component.ts
Unescape View File

@ -29,6 +29,7 @@ export class AddPinPopupComponent implements OnInit {
inputFocused: boolean = false; inputFocused: boolean = false;
@Input() isHomePage: boolean = false; @Input() isHomePage: boolean = false;
files: any[] = []; files: any[] = [];
isPinModalOpen: boolean = false;
constructor( constructor(
private fb: FormBuilder, private fb: FormBuilder,
@ -100,17 +101,18 @@ export class AddPinPopupComponent implements OnInit {
}; };
this.addPinService.addPin(pinData).subscribe(() => { this.addPinService.addPin(pinData).subscribe(() => {
this.closeModal(); this.closePinModal();
}); });
} else { } else {
console.error('Le formulaire est invalide'); console.error('Le formulaire est invalide');
} }
} }
private closeModal() { openPinModal() {
const modal = document.getElementById('close-modal'); this.isPinModalOpen = true;
if (modal) {
modal.click();
} }
closePinModal() {
this.isPinModalOpen = false;
} }
} }

25
src/app/components/login-page/login-page.component.html
Unescape View File

@ -1,23 +1,35 @@
<!-- Modal toggle --> <!-- Modal toggle -->
<button <button
data-modal-target="authentication-modal" (click)="openLoginModal()"
data-modal-toggle="authentication-modal"
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300" class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
type="button" type="button"
> >
Connexion Connexion
</button> </button>
<!-- Fond assombri -->
<div
class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40"
[ngClass]="{'opacity-0 pointer-events-none': !isLoginModalOpen, 'opacity-100': isLoginModalOpen}"
(click)="closeLoginModal()"
></div>
<!-- Main modal --> <!-- Main modal -->
<div <div
id="authentication-modal" id="authentication-modal"
tabindex="-1" tabindex="-1"
aria-hidden="true" aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full transition-opacity duration-300 ease-in-out" [ngClass]="{
'opacity-0 scale-50 pointer-events-none': !isLoginModalOpen,
'opacity-100 scale-100': isLoginModalOpen
}"
class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-opacity transition-transform duration-300 ease-in-out"
> >
<div class="relative p-4 w-full max-w-md max-h-full"> <div class="relative p-4 w-full max-w-md max-h-full">
<!-- Modal content --> <!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700"> <div
class="relative bg-white rounded-lg shadow dark:bg-gray-700 transition-transform duration-300 ease-in-out"
>
<!-- Modal header --> <!-- Modal header -->
<div <div
class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600" class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600"
@ -27,9 +39,8 @@
</h3> </h3>
<button <button
type="button" type="button"
id="close-login-modal" (click)="closeLoginModal()"
class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-hide="authentication-modal"
> >
<svg <svg
class="w-3 h-3" class="w-3 h-3"
@ -60,7 +71,7 @@
> >
<input <input
formControlName="login" formControlName="login"
type="login" type="text"
name="login" name="login"
id="login" id="login"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"

16
src/app/components/login-page/login-page.component.ts
Unescape View File

@ -1,4 +1,4 @@
import { NgIf } from '@angular/common'; import { CommonModule, NgIf } from '@angular/common';
import { Component, Renderer2 } from '@angular/core'; import { Component, Renderer2 } from '@angular/core';
import { import {
FormBuilder, FormBuilder,
@ -14,7 +14,7 @@ import { LoginService } from '../../services/login.service';
@Component({ @Component({
selector: 'app-login-page', selector: 'app-login-page',
imports: [FormsModule, ReactiveFormsModule, NgIf], imports: [FormsModule, ReactiveFormsModule, NgIf, CommonModule],
templateUrl: './login-page.component.html', templateUrl: './login-page.component.html',
styleUrl: './login-page.component.css', styleUrl: './login-page.component.css',
}) })
@ -22,6 +22,7 @@ export class LoginPageComponent {
userForm: FormGroup; userForm: FormGroup;
user: User = { login: '', password: '' }; user: User = { login: '', password: '' };
errorMessage: string = ''; errorMessage: string = '';
isLoginModalOpen: boolean = false;
constructor( constructor(
private loginService: LoginService, private loginService: LoginService,
@ -52,7 +53,7 @@ export class LoginPageComponent {
next: (response) => { next: (response) => {
console.log('Connexion OK: ', response); console.log('Connexion OK: ', response);
this.localStorageService.setToken(response.access_token); this.localStorageService.setToken(response.access_token);
this.closeModal(); this.closeLoginModal();
setTimeout(() => { setTimeout(() => {
this.router.navigate(['/map']); this.router.navigate(['/map']);
}, 1); }, 1);
@ -65,10 +66,11 @@ export class LoginPageComponent {
}); });
} }
private closeModal() { openLoginModal() {
const modal = document.getElementById('close-login-modal'); this.isLoginModalOpen = true;
if (modal) {
modal.click();
} }
closeLoginModal() {
this.isLoginModalOpen = false;
} }
} }

24
src/app/components/register-page/register-page.component.html
Unescape View File

@ -1,7 +1,6 @@
<!-- Modal toggle --> <!-- Modal toggle -->
<button <button
data-modal-target="register-modal" (click)="openRegisterModal()"
data-modal-toggle="register-modal"
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300" class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
type="button" type="button"
> >
@ -9,15 +8,27 @@
</button> </button>
<!-- Main modal --> <!-- Main modal -->
<div
class="fixed inset-0 z-40 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out"
[ngClass]="{'opacity-0 pointer-events-none': !isRegisterModalOpen, 'opacity-100': isRegisterModalOpen}"
(click)="closeRegisterModal()"
></div>
<div <div
id="register-modal" id="register-modal"
tabindex="-1" tabindex="-1"
aria-hidden="true" aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full" [ngClass]="{
'opacity-0 scale-0 pointer-events-none': !isRegisterModalOpen,
'opacity-100 scale-100': isRegisterModalOpen
}"
class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-opacity transition-transform duration-300 ease-in-out"
> >
<div class="relative p-4 w-full max-w-md max-h-full"> <div class="relative p-4 w-full max-w-md max-h-full">
<!-- Modal content --> <!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700"> <div
class="relative bg-white rounded-lg shadow dark:bg-gray-700 transition-transform duration-300 ease-in-out"
>
<!-- Modal header --> <!-- Modal header -->
<div <div
class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600" class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600"
@ -27,9 +38,8 @@
</h3> </h3>
<button <button
type="button" type="button"
id="close-register-modal" (click)="closeRegisterModal()"
class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-hide="register-modal"
> >
<svg <svg
class="w-3 h-3" class="w-3 h-3"
@ -60,7 +70,7 @@
> >
<input <input
formControlName="login" formControlName="login"
type="login" type="text"
name="login" name="login"
id="login" id="login"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"

22
src/app/components/register-page/register-page.component.ts
Unescape View File

@ -6,10 +6,11 @@ import { FormGroup } from '@angular/forms';
import { User } from '../../model/User'; import { User } from '../../model/User';
import { RegisterService } from '../../services/register.service'; import { RegisterService } from '../../services/register.service';
import { LocalStorageService } from '../../services/localstorage.service'; import { LocalStorageService } from '../../services/localstorage.service';
import { CommonModule } from '@angular/common';
@Component({ @Component({
selector: 'app-register-page', selector: 'app-register-page',
imports: [FormsModule, ReactiveFormsModule], imports: [FormsModule, ReactiveFormsModule, CommonModule],
templateUrl: './register-page.component.html', templateUrl: './register-page.component.html',
styleUrl: './register-page.component.css', styleUrl: './register-page.component.css',
}) })
@ -17,6 +18,7 @@ export class RegisterPageComponent {
userForm: FormGroup; userForm: FormGroup;
user: User = { login: '', password: '' }; user: User = { login: '', password: '' };
errorMessage: string = ''; errorMessage: string = '';
isRegisterModalOpen: boolean = false;
constructor( constructor(
private registerService: RegisterService, private registerService: RegisterService,
@ -60,25 +62,25 @@ export class RegisterPageComponent {
.register(this.user.login, this.user.password) .register(this.user.login, this.user.password)
.subscribe({ .subscribe({
next: (response) => { next: (response) => {
console.log('Connexion OK: ', response); console.log('Register OK: ', response);
this.localStorageService.setToken(response.access_token); this.localStorageService.setToken(response.access_token);
this.closeModal(); this.closeRegisterModal();
setTimeout(() => { setTimeout(() => {
this.router.navigate(['/map']); this.router.navigate(['/map']);
window.location.reload(); }, 1);
}, 500);
}, },
error: (response) => { error: (response) => {
console.log('Connexion KO: ', response.error.detail); console.log('Register KO: ', response.error.detail);
this.errorMessage = response.error.detail; this.errorMessage = response.error.detail;
}, },
}); });
} }
private closeModal() { openRegisterModal() {
const modal = document.getElementById('close-register-modal'); this.isRegisterModalOpen = true;
if (modal) {
modal.click();
} }
closeRegisterModal() {
this.isRegisterModalOpen = false;
} }
} }

Write Preview
Loading…
Cancel
Save