Changed touchStart by click

src/app/components/challenge-card/challenge-card.component.html

@@ -23,7 +23,7 @@
                     fill="clear"
                     class="m-0 p-0 min-h-0 text-[11px] font-black bg-black text-white rounded-3xl"
                     style="--padding-top: 4px; --padding-bottom: 4px;"
-                    (touchstart)="setOpen(true)">
+                    (click)="setOpen(true)">
                 {{ action() }}
             </ion-button>
         </div>
@@ -36,7 +36,7 @@
             <ion-toolbar>
                 <ion-title>Défi Quotidien</ion-title>
                 <ion-buttons slot="start" style="--ion-color-primary: #0054E9;">
-                    <ion-back-button default-href="" (touchstart)="setOpen(false)"></ion-back-button>
+                    <ion-back-button default-href="" (click)="setOpen(false)"></ion-back-button>
                 </ion-buttons>
             </ion-toolbar>
         </ion-header>
@@ -62,7 +62,7 @@
                 <app-proof-form #proofForm></app-proof-form>
             </div>
 
-            <ion-button expand="block" (touchstart)="sendProof(data().id)">Soumettre ma preuve</ion-button>
+            <ion-button expand="block" (click)="sendProof(data().id)">Soumettre ma preuve</ion-button>
 
         </ion-content>
     </ng-template>

src/app/components/friend-request/friend-request.component.html

@@ -9,11 +9,11 @@
                                  src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
                         </ion-avatar>
                         <ion-label class="text-xs font-mono">{{ request.username }}</ion-label>
-                        <ion-button fill="clear" (touchstart)="acceptRequest(request)">
+                        <ion-button fill="clear" (click)="acceptRequest(request)">
                             <ion-icon slot="icon-only" name="check" class="text-green-600 m-0"></ion-icon>
                         </ion-button>
                         <app-pipe></app-pipe>
-                        <ion-button fill="clear" (touchstart)="rejectRequest(request.userId)">
+                        <ion-button fill="clear" (click)="rejectRequest(request.userId)">
                             <ion-icon slot="icon-only" name="close" class="text-red-600 m-0"></ion-icon>
                         </ion-button>
                     </ion-item>
@@ -24,11 +24,11 @@
                                  src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
                         </ion-avatar>
                         <ion-label class="text-xs font-mono">{{ request.username }}</ion-label>
-                        <ion-button fill="clear" (touchstart)="acceptRequest(request)">
+                        <ion-button fill="clear" (click)="acceptRequest(request)">
                             <ion-icon slot="icon-only" name="check" class="text-green-600 m-0"></ion-icon>
                         </ion-button>
                         <app-pipe></app-pipe>
-                        <ion-button fill="clear" (touchstart)="rejectRequest(request.userId)">
+                        <ion-button fill="clear" (click)="rejectRequest(request.userId)">
                             <ion-icon slot="icon-only" name="close" class="text-red-600 m-0"></ion-icon>
                         </ion-button>
                     </ion-item>

src/app/components/friends/friends-list.component.html

@@ -9,10 +9,10 @@
                                  src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
                         </ion-avatar>
                         <ion-label class="text-xs font-mono font-bold"
-                                   (touchstart)="setOpen(true, friend.friendId)">{{ friend.username }}
+                                   (click)="setOpen(true, friend.friendId)">{{ friend.username }}
                         </ion-label>
                         <ion-label class="text-xs font-mono text-gray-400">{{ friend.score }} <em>pts</em></ion-label>
-                        <ion-button fill="clear" (touchstart)="deleteFriend(friend.friendId)">
+                        <ion-button fill="clear" (click)="deleteFriend(friend.friendId)">
                             <ion-icon slot="icon-only" name="close" class="text-red-600"></ion-icon>
                         </ion-button>
                     </ion-item>
@@ -23,10 +23,10 @@
                                  src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
                         </ion-avatar>
                         <ion-label class="text-xs font-mono font-bold"
-                                   (touchstart)="setOpen(true, friend.friendId)">{{ friend.username }}
+                                   (click)="setOpen(true, friend.friendId)">{{ friend.username }}
                         </ion-label>
                         <ion-label class="text-xs font-mono text-gray-400">{{ friend.score }} <em>pts</em></ion-label>
-                        <ion-button fill="clear" (touchstart)="deleteFriend(friend.friendId)">
+                        <ion-button fill="clear" (click)="deleteFriend(friend.friendId)">
                             <ion-icon slot="icon-only" name="close" class="text-red-600"></ion-icon>
                         </ion-button>
                     </ion-item>
@@ -48,7 +48,7 @@
             <ion-toolbar>
                 <ion-title>Profil</ion-title>
                 <ion-buttons slot="start" style="--ion-color-primary: #0054E9;">
-                    <ion-back-button default-href="" (touchstart)="setOpen(false, null)"></ion-back-button>
+                    <ion-back-button default-href="" (click)="setOpen(false, null)"></ion-back-button>
                 </ion-buttons>
             </ion-toolbar>
         </ion-header>

src/app/components/search-friend/search-friend.component.html

@@ -23,7 +23,7 @@
                             <ion-label class="text-xs font-mono text-gray-400">{{ result.getUserStatsDto.score }}
                                 <em>pts</em>
                             </ion-label>
-                            <ion-button fill="clear" (touchstart)="addFriend(result.id)">
+                            <ion-button fill="clear" (click)="addFriend(result.id)">
                                 <ion-icon slot="icon-only" name="send" class="text-green-700 text-2xl"></ion-icon>
                             </ion-button>
                         </ion-item>
@@ -37,7 +37,7 @@
                             <ion-label class="text-xs font-mono text-gray-400">{{ result.getUserStatsDto.score }}
                                 <em>pts</em>
                             </ion-label>
-                            <ion-button fill="clear" (touchstart)="addFriend(result.id)">
+                            <ion-button fill="clear" (click)="addFriend(result.id)">
                                 <ion-icon slot="icon-only" name="send" class="text-green-700 text-2xl"></ion-icon>
                             </ion-button>
                         </ion-item>

src/app/components/settings-options/settings-options.component.html

@@ -2,36 +2,38 @@
     <ion-list>
         @for (n of options; track n) {
             @if (n == options.length) {
-                <ion-item lines="none">
+                <ion-item lines="none" class="transition-all duration-200 active:[--background:#DBD8D7]" (click)="logOut()">
                     <p class="text-sm text-red-800">Se déconnecter</p>
                     <ion-icon slot="end" class="text-xl text-red-800" name="logout"></ion-icon>
                 </ion-item>
             } @else {
-                <ion-item lines="full">
                 @switch (n) {
                     @case (1) {
+                        <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]">
                             <p class="text-sm text-gray-600">Ma galerie</p>
                             <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
+                        </ion-item>
                     }
                     @case (2) {
-                            <p class="text-sm text-gray-600">Modifier le pseudo</p>
+                        <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]">
+                            <p class="text-sm text-gray-600">Modifier mes informations</p>
                             <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
+                        </ion-item>
                     }
                     @case (3) {
-                            <p class="text-sm text-gray-600">Modifier l'email</p>
+                        <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]">
+                            <p class="text-sm text-gray-600">Modifier mon mot de passe</p>
                             <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
+                        </ion-item>
                     }
                     @case (4) {
-                            <p class="text-sm text-gray-600">Modifier le mot de passe</p>
+                        <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]">
-                            <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
-                        }
-                        @case (5) {
                             <p class="text-sm text-gray-600">Changer de désignation</p>
                             <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
-                        }
-                    }
                         </ion-item>
                     }
                 }
+            }
+        }
     </ion-list>
 </div>

src/app/components/settings-options/settings-options.component.ts

@@ -1,7 +1,8 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
-import {IonicModule} from "@ionic/angular";
+import {IonicModule, LoadingController, NavController} from "@ionic/angular";
 import {logOutOutline, chevronForwardOutline} from "ionicons/icons";
 import {addIcons} from "ionicons";
+import {AuthManageService} from "../../services/auth-manage";
 
 addIcons({
     'logout': logOutOutline,
@@ -17,6 +18,22 @@ addIcons({
     ]
 })
 export class SettingsOptionsComponent {
+    private authManageService = inject(AuthManageService);
+    private loadCtrl = inject(LoadingController);
+    private navCtrl = inject(NavController);
 
-    options = [1, 2, 3, 4, 5, 6];
+    options = [1, 2, 3, 4, 5];
+
+    async logOut(){
+        const loading = await this.loadCtrl.create({
+            message: 'Déconnexion en cours...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        this.authManageService.logout();
+        await this.navCtrl.navigateRoot('/');
+
+        await loading.dismiss();
+    }
 }

src/app/pages/home/home.component.html

@@ -3,7 +3,7 @@
         <ion-buttons slot="secondary">
             <ion-button fill="solid" style="--background: #F0EFE9;"
                         class="border border-gray-300 rounded-lg overflow-hidden"
-                        (touchstart)="setOpen(true)">
+                        (click)="setOpen(true)">
                 <ion-icon slot="icon-only" class="text-xl text-gray-500" name="profile"></ion-icon>
             </ion-button>
         </ion-buttons>
@@ -39,7 +39,7 @@
         <ion-header>
             <ion-toolbar>
                 <ion-buttons slot="start" style="--ion-color-primary: #0054E9;">
-                    <ion-back-button default-href="" (touchstart)="setOpen(false)"></ion-back-button>
+                    <ion-back-button default-href="" (click)="setOpen(false)"></ion-back-button>
                 </ion-buttons>
                 <ion-title>Profil</ion-title>
             </ion-toolbar>

src/app/pages/login/login.component.html

@@ -9,7 +9,7 @@
     @if (authState()) {
         <app-sign-in-form class="mb-9" #loginForm></app-sign-in-form>
 
-        <ion-button class="w-10/12 mt-0 border-0" color="primary" (touchstart)="connectUser()">
+        <ion-button class="w-10/12 mt-0 border-0" color="primary" (click)="connectUser()">
             <p class="text-white font-bold m-0">Se connecter</p>
         </ion-button>
 
@@ -22,7 +22,7 @@
         <app-sign-on-form #userForm></app-sign-on-form>
     }
 
-    <ion-button class="w-10/12 mt-0" color="secondary" (touchstart)="createAccount()">
+    <ion-button class="w-10/12 mt-0" color="secondary" (click)="createAccount()">
         <p class="text-black font-bold m-0">Créer un compte</p>
     </ion-button>
 </div>