80 lines
3.9 KiB
HTML
80 lines
3.9 KiB
HTML
<div class="card-wrapper">
|
|
<div class="card">
|
|
|
|
<!-- Avatar + Photo button -->
|
|
<div class="avatar-row">
|
|
<div class="avatar">
|
|
<img *ngIf="profileImage()" [src]="profileImage()" alt="Photo de profil" />
|
|
<svg *ngIf="!profileImage()" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="40" cy="30" r="16" fill="rgba(255,255,255,0.55)" />
|
|
<ellipse cx="40" cy="68" rx="26" ry="18" fill="rgba(255,255,255,0.55)" />
|
|
</svg>
|
|
</div>
|
|
|
|
<button class="photo-btn" (click)="triggerFileInput()">
|
|
Modifier la photo de profil
|
|
</button>
|
|
<input id="photoInput" type="file" accept="image/*" hidden (change)="onPhotoChange($event)" />
|
|
</div>
|
|
|
|
<!-- Username field -->
|
|
<div class="field">
|
|
<ng-container *ngIf="!editingUsername(); else editUsernameBlock">
|
|
<span class="field-value">{{ username() }}</span>
|
|
</ng-container>
|
|
<ng-template #editUsernameBlock>
|
|
<input
|
|
class="field-input"
|
|
[(ngModel)]="username"
|
|
[ngModel]="username()"
|
|
(ngModelChange)="username.set($event)"
|
|
(blur)="toggleEditUsername()"
|
|
(keydown.enter)="toggleEditUsername()"
|
|
autofocus
|
|
/>
|
|
</ng-template>
|
|
<button class="edit-btn" (click)="toggleEditUsername()" title="Modifier">
|
|
<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>
|
|
|
|
<!-- Sous la div.field du username -->
|
|
<span class="field-error" *ngIf="usernameError()">{{ usernameError() }}</span>
|
|
|
|
<!-- Bio field -->
|
|
<div class="field bio-field">
|
|
<ng-container *ngIf="!editingBio(); else editBioBlock">
|
|
<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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|