carteronm/Knots-Front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Debut parametres profil

Browse Source
This commit is contained in:
CARTERON Mathieu
2026-06-10 17:26:46 +02:00
parent cc87ceeacd
commit d7e3a93c04
8 changed files with 253 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/parameters/parameters-coordinates-form/parameters-coordinates-form.component.css
+105
View File
@@ -0,0 +1,105 @@
.modal-layout {
display: flex;
flex-direction: column;
height: 100%;
background: linear-gradient(160deg, #f9e8e8 0%, #f2c4c4 35%, #e89898 70%, #d97070 100%);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 20px 12px;
border-bottom: 1px solid rgba(189, 90, 90, 0.15);
}
.modal-title {
font-size: 1.1rem;
font-weight: 700;
color: #7a2e2e;
margin: 0;
}
.modal-close-btn {
width: 34px;
height: 34px;
border-radius: 10px;
background: white;
border: none;
box-shadow: 0 2px 8px rgba(180, 80, 80, 0.12);
display: flex;
align-items: center;
justify-content: center;
color: #bd5a5a;
cursor: pointer;
font-size: 1.2rem;
transition: transform 0.15s;
&:active { transform: scale(0.92); }
}
.modal-body {
display: flex;
flex-direction: column;
gap: 20px;
padding: 24px 20px;
}
.input-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: 10px;
}
.custom-item {
--background: white;
--border-radius: 12px;
--padding-start: 14px;
--inner-padding-end: 14px;
--color: #7a2e2e;
--highlight-color-focused: #bd5a5a;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(180, 80, 80, 0.1);
&.invalid {
--border-color: #d97070;
box-shadow: 0 2px 10px rgba(180, 80, 80, 0.25);
}
}
.error-msg {
color: #7a2e2e;
font-size: 0.8rem;
padding-left: 4px;
margin: 0;
}
.submit-btn {
width: 100%;
background: white;
color: #bd5a5a;
border: none;
border-radius: 14px;
padding: 14px;
font-size: 0.95rem;
font-weight: 600;
box-shadow: 0 2px 10px rgba(180, 80, 80, 0.15);
cursor: pointer;
transition: transform 0.15s, box-shadow 0.2s;
&:active {
transform: scale(0.97);
box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
:host {
display: block;
height: 100%;
}
src/app/pages/parameters/parameters-coordinates-form/parameters-coordinates-form.component.html
+49 -46
View File
@@ -1,51 +1,54 @@
<ion-header>
<ion-toolbar>
<ion-title>Modifier les coordonnées</ion-title>
<ion-buttons slot="end">
<ion-button (click)="close.emit()">
<ion-icon name="close-outline" />
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<div class="modal-layout">
<ion-content class="ion-padding">
<form [formGroup]="coordinatesForm" (ngSubmit)="submitForm()">
<div class="modal-header">
<h2 class="modal-title">Modifier les coordonnées</h2>
<button class="modal-close-btn" (click)="close.emit()">
<ion-icon name="close-outline" />
</button>
</div>
<ion-item [class.invalid]="email.invalid && email.touched">
<ion-input
label="Email"
labelPlacement="floating"
type="email"
formControlName="email"
placeholder="exemple@email.com"
/>
</ion-item>
<ion-note *ngIf="email.invalid && email.touched" color="danger">
Adresse email invalide
</ion-note>
<div class="modal-body">
<form [formGroup]="coordinatesForm" (ngSubmit)="submitForm()">
<ion-item [class.invalid]="tel.invalid && tel.touched" class="ion-margin-top">
<ion-input
label="Téléphone"
labelPlacement="floating"
type="tel"
formControlName="tel"
placeholder="0612345678"
/>
</ion-item>
<ion-note *ngIf="tel.invalid && tel.touched" color="danger">
Numéro à 10 chiffres requis
</ion-note>
<div class="input-wrapper">
<ion-item class="custom-item" [class.invalid]="email.invalid && email.touched">
<ion-input
label="Email"
labelPlacement="floating"
type="email"
formControlName="email"
placeholder="exemple@email.com"
/>
</ion-item>
@if (email.invalid && email.touched) {
<p class="error-msg">Adresse email invalide</p>
}
</div>
<ion-button
expand="block"
class="ion-margin-top"
type="submit"
[disabled]="coordinatesForm.invalid"
>
Valider
</ion-button>
<div class="input-wrapper">
<ion-item class="custom-item" [class.invalid]="tel.invalid && tel.touched">
<ion-input
label="Téléphone"
labelPlacement="floating"
type="tel"
formControlName="tel"
placeholder="0612345678"
/>
</ion-item>
@if (tel.invalid && tel.touched) {
<p class="error-msg">Numéro à 10 chiffres requis</p>
}
</div>
</form>
</ion-content>
<button
class="submit-btn"
type="submit"
[disabled]="coordinatesForm.invalid || loading()"
>
{{ loading() ? 'Enregistrement...' : 'Valider' }}
</button>
</form>
</div>
</div>
src/app/pages/parameters/parameters-coordinates-form/parameters-coordinates-form.component.ts
+1 -1
View File
@@ -18,7 +18,7 @@ import {AuthService} from "../../../core/auth/auth.service";
@Component({
selector: 'app-parameters-coordinates-form',
imports: [IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon, IonContent, ReactiveFormsModule, IonItem, IonInput, IonNote],
imports: [IonIcon,ReactiveFormsModule, IonItem, IonInput],
templateUrl: './parameters-coordinates-form.component.html',
styleUrl: './parameters-coordinates-form.component.css'
})
src/app/pages/parameters/parameters-coordinates/parameters-coordinates.component.ts
+2 -1
View File
@@ -1,10 +1,11 @@
import {Component} from '@angular/core';
import {Component, ViewEncapsulation} from '@angular/core';
import { IonModal, IonButton } from '@ionic/angular/standalone';
import {FormsModule} from "@angular/forms";
import {ParametersCoordinatesFormComponent} from "../parameters-coordinates-form/parameters-coordinates-form.component";
@Component({
selector: 'app-parameters-coordinates',
encapsulation: ViewEncapsulation.None,
imports: [IonModal, FormsModule, ParametersCoordinatesFormComponent],
templateUrl: './parameters-coordinates.component.html',
styleUrl: './parameters-coordinates.component.css'
src/app/pages/parameters/parameters-profile/parameters-profile.component.html
+10 -11
View File
@@ -34,10 +34,13 @@
/>
</ng-template>
<button class="edit-btn" (click)="toggleEditUsername()" title="Modifier">
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg *ngIf="!editingUsername()" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5 3.5L16.5 6.5L7 16H4V13L13.5 3.5Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
<path d="M11.5 5.5L14.5 8.5" stroke="currentColor" stroke-width="1.6"/>
</svg>
<svg *ngIf="editingUsername()" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 10L8 14L16 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
@@ -50,22 +53,18 @@
<span class="field-value bio-value">{{ bio() }}</span>
</ng-container>
<ng-template #editBioBlock>
<textarea
class="field-input bio-textarea"
[value]="bio()"
(input)="bio.set($any($event.target).value)"
(blur)="toggleEditBio()"
autofocus
></textarea>
</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 viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg *ngIf="!editingBio()" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5 3.5L16.5 6.5L7 16H4V13L13.5 3.5Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
<path d="M11.5 5.5L14.5 8.5" stroke="currentColor" stroke-width="1.6"/>
</svg>
<svg *ngIf="editingBio()" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<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
+20 -6
View File
@@ -1,4 +1,4 @@
import {Component, inject, signal} from '@angular/core';
import {Component, inject, OnInit, signal} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {firstValueFrom} from "rxjs";
@@ -12,7 +12,7 @@ import {AuthService} from "../../../core/auth/auth.service";
templateUrl: './parameters-profile.component.html',
styleUrl: './parameters-profile.component.css'
})
export class ParametersProfileComponent {
export class ParametersProfileComponent implements OnInit {
private usersService = inject(UsersService);
private authService = inject(AuthService);
@@ -33,6 +33,7 @@ export class ParametersProfileComponent {
this.bio.set(user?.description ?? null);
}
// --- Username ---
toggleEditUsername() {
if (this.editingUsername()) {
@@ -57,9 +58,13 @@ export class ParametersProfileComponent {
this.loading.set(true);
const user = this.authService.currentUser();
if (!user) return;
try {
await firstValueFrom(this.usersService.patchUsernameEndpoint(user.id, { username: value }));
await firstValueFrom(this.usersService.patchUsernameEndpoint(
String(user.id), { username: value }
));
this.authService.updateCurrentUser({ username: value }); // 👈 maj locale
this.usernameError.set(null);
this.editingUsername.set(false);
} catch (e: any) {
@@ -73,7 +78,7 @@ export class ParametersProfileComponent {
this.loading.set(false);
}
// --- Bio ---
toggleEditBio() {
if (this.editingBio()) {
@@ -86,9 +91,13 @@ export class ParametersProfileComponent {
async submitBio() {
this.loading.set(true);
const user = this.authService.currentUser();
if (!user) return;
try {
await firstValueFrom(this.usersService.patchUserDescriptionEndpoint(user.id, { description: this.bio() }));
await firstValueFrom(this.usersService.patchUserDescriptionEndpoint(
String(user.id), { description: this.bio() }
));
this.authService.updateCurrentUser({ description: this.bio() }); // 👈 maj locale
this.editingBio.set(false);
} catch (e) {
console.error('Erreur lors de la mise à jour de la bio', e);
@@ -97,6 +106,7 @@ export class ParametersProfileComponent {
this.loading.set(false);
}
// --- Photo ---
triggerFileInput() {
document.getElementById('photoInput')?.click();
@@ -113,9 +123,13 @@ export class ParametersProfileComponent {
this.loading.set(true);
const user = this.authService.currentUser();
if (!user) return;
try {
await firstValueFrom(this.usersService.patchUserProfilePictureEndpoint(user.id, { profilePicture: base64 }));
await firstValueFrom(this.usersService.patchUserProfilePictureEndpoint(
String(user.id), { profilePicture: base64 }
));
this.authService.updateCurrentUser({ profilePicture: base64 }); // 👈 maj locale
} catch (e) {
console.error('Erreur lors de la mise à jour de la photo', e);
}