Déconnexion

src/app/pages/parameters/disconnect/disconnect.component.css

@@ -0,0 +1,21 @@
+.logout-btn {
+    align-self: flex-start;
+    width: 44px;
+    height: 44px;
+    border-radius: 14px;
+    background: white;
+    border: none;
+    box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rosybrown;
+    cursor: pointer;
+    margin-bottom: 28px;
+    transition: box-shadow 0.2s, transform 0.15s;
+
+    &:active {
+        transform: scale(0.94);
+        box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
+    }
+}

src/app/pages/parameters/disconnect/disconnect.component.html

@@ -0,0 +1,7 @@
+<button class="logout-btn" (click)="logout()">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+        <polyline points="16 17 21 12 16 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+        <line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+    </svg>
+</button>

src/app/pages/parameters/disconnect/disconnect.component.ts

@@ -0,0 +1,16 @@
+import {Component, inject} from '@angular/core';
+import {AuthService} from "../../../core/auth/auth.service";
+
+@Component({
+  selector: 'app-disconnect',
+  imports: [],
+  templateUrl: './disconnect.component.html',
+  styleUrl: './disconnect.component.css'
+})
+export class DisconnectComponent {
+
+  private authService = inject(AuthService);
+  logout() {
+    this.authService.logout();
+  }
+}

src/app/pages/parameters/parameters-main/parameters-main.component.css

@@ -11,4 +11,11 @@
     );
     padding: 16px;
     gap: 12px;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
 }

src/app/pages/parameters/parameters-main/parameters-main.component.html

@@ -1,5 +1,9 @@
 <div class="page-param" >
-    <app-parameters-exit/>
+    <div class="header">
+        <app-parameters-exit/>
+        <app-disconnect/>
+    </div>
+
 
     <div>
         <app-parameters-coordinates/>

src/app/pages/parameters/parameters-main/parameters-main.component.ts

@@ -1,18 +1,21 @@
 import { Component } from '@angular/core';
 import {ParametersExit} from "../parameters-exit/parameters-exit.component";
+import {DisconnectComponent} from "../disconnect/disconnect.component";
 import {ParametersCoordinatesComponent} from "../parameters-coordinates/parameters-coordinates.component";
 import {ParametersProfileComponent} from "../parameters-profile/parameters-profile.component";
 
 @Component({
-  selector: 'app-parameters-main',
+    selector: 'app-parameters-main',
+    templateUrl: './parameters-main.component.html',
     imports: [
         ParametersExit,
+        DisconnectComponent,
         ParametersCoordinatesComponent,
         ParametersProfileComponent
     ],
-  templateUrl: './parameters-main.component.html',
-  styleUrl: './parameters-main.component.css'
+    styleUrl: './parameters-main.component.css'
 })
+
 export class ParametersMain {
 
 }

src/app/pages/parameters/parameters-profile/parameters-profile.component.html

@@ -53,6 +53,16 @@
                 <span class="field-value bio-value">{{ bio() }}</span>
             </ng-container>
             <ng-template #editBioBlock>
+                <input
+                        class="field-input"
+                        [(ngModel)]="bio"
+                        [ngModel]="bio()"
+                        (ngModelChange)="bio.set($event)"
+                        (blur)="toggleEditBio()"
+                        (keydown.enter)="toggleEditBio()"
+                        autofocus
+                />
+            </ng-template>
             <textarea class="field-input bio-textarea" [value]="bio()" (input)="bio.set($any($event.target).value)" (blur)="toggleEditBio()" autofocus></textarea>
             <button class="edit-btn" (click)="toggleEditBio()" title="Modifier">
                 <svg *ngIf="!editingBio()" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -63,7 +73,6 @@
                     <path d="M4 10L8 14L16 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
             </button>
-            </ng-template>
         </div>
     </div>
 </div>

src/app/pages/parameters/parameters-profile/parameters-profile.component.ts

@@ -10,6 +10,7 @@ import {AuthService} from "../../../core/auth/auth.service";
   selector: 'app-parameters-profile',
   imports: [FormsModule, CommonModule],
   templateUrl: './parameters-profile.component.html',
+  standalone: true,
   styleUrl: './parameters-profile.component.css'
 })
 export class ParametersProfileComponent implements OnInit {