fix : #27 gestion des typo

src/app/routes/profile/profile-detail/profile-detail.component.html

@@ -65,7 +65,7 @@
                 <div class="w-full h-full rounded-full overflow-hidden bg-white">
                   @if (user().avatar) {
                     <img
-                      alt="{{ user().username }}"
+                      alt="{{ user().name }}"
                       class="object-cover w-full h-full"
                       src="{{ environment.baseUrl }}/api/files/users/{{ user().id }}/{{
                         user().avatar
@@ -74,7 +74,7 @@
                     />
                   } @else {
                     <img
-                      alt="{{ user().username }}"
+                      alt="{{ user().name }}"
                       class="object-cover w-full h-full"
                       src="https://api.dicebear.com/9.x/initials/svg?seed={{ user().name }}"
                       loading="lazy"
@@ -96,10 +96,6 @@
                 <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
                   {{ user().name }}
                 </h1>
-              } @else if (user().username) {
-                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
-                  {{ user().username }}
-                </h1>
               } @else {
                 <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
                   {{ user().email }}

src/app/shared/components/my-profile-update-form/my-profile-update-form.component.html

@@ -134,7 +134,7 @@
             for="profession"
             class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
           >
-            Profession
+            Profession<small class="text-sm font-medium text-red-500"> * </small>
           </label>
           <div class="relative">
             <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@@ -170,7 +170,7 @@
             for="secteur"
             class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
           >
-            Secteur d'activité
+            Secteur d'activité<small class="text-sm font-medium text-red-500"> * </small>
           </label>
           <div class="relative">
             <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">

src/app/shared/components/user-form/user-form.component.html

@@ -34,7 +34,7 @@
     <!-- Champ Nom -->
     <div class="space-y-2">
       <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
-        Nom
+        Nom(s)<small class="text-sm font-medium text-red-500"> * </small>
       </label>
       <div class="relative">
         <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@@ -64,7 +64,7 @@
     <!-- Champ Prénom -->
     <div class="space-y-2">
       <label for="firstname" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
-        Prénom
+        Prénom(s)<small class="text-sm font-medium text-red-500"> * </small>
       </label>
       <div class="relative">
         <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@@ -108,7 +108,11 @@
             d="M7.707 10.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V6h5a2 2 0 012 2v7a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h5v5.586l-1.293-1.293zM9 4a1 1 0 012 0v2H9V4z"
           />
         </svg>
+        @if (userForm.valid) {
+          Sauvegarder les modifications
+        } @else {
           Modifier mon identité
+        }
       </span>
     </button>
   </form>

src/app/shared/components/vertical-profile-item/vertical-profile-item.component.html

@@ -1,9 +1,5 @@
 @if (user() !== undefined) {
-  <a
+  <a [routerLink]="[user().slug]" [state]="{ user: user(), profile }" class="block group">
-    [routerLink]="[user().username ? user().username : user().id]"
-    [state]="{ user: user(), profile }"
-    class="block group"
-  >
     <!-- Card du profil -->
     <div
       class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2"
@@ -56,7 +52,7 @@
           <h3
             class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"
           >
-            {{ user().name }}
+            {{ user().firstName }} {{ user().lastName }}
           </h3>
         } @else if (user().username) {
           <h3

src/app/shared/components/vertical-profile-item/vertical-profile-item.component.ts

@@ -18,7 +18,6 @@ export class VerticalProfileItemComponent implements OnInit {
   @Input({ required: true }) profile: ProfileViewModel = {} as ProfileViewModel;
   protected router = inject(Router);
   private readonly facade = inject(UserFacade);
-  protected defaultImg = Math.floor(Math.random() * 10) + 1;
 
   protected user = this.facade.user;
   protected readonly loading = this.facade.loading;

src/app/ui/users/user.presenter.model.ts

@@ -6,4 +6,7 @@ export interface UserViewModel {
   email: string;
   name: string;
   avatar: string;
+  firstName?: string;
+  lastName?: string;
+  slug?: string;
 }

src/app/ui/users/user.presenter.ts

@@ -3,7 +3,11 @@ import { User } from '@app/domain/users/user.model';
 
 export class UserPresenter {
   toViewModel(user: User): UserViewModel {
-    return {
+    const slug = user.name
+      ? user.name.toLowerCase().replace(/\s/g, '-')
+      : user.email.split('@')[0].toLowerCase().trim();
+
+    let userViewModel: UserViewModel = {
       id: user.id,
       username: user.username,
       verified: user.verified,
@@ -11,7 +15,16 @@ export class UserPresenter {
       email: user.email,
       name: user.name,
       avatar: user.avatar,
+      slug,
     };
+
+    if (user.name) {
+      const firstName = user.name.split(' ').slice(0, -1).join(' ').toLowerCase().trim() ?? '';
+      const lastName = user.name.split(' ').slice(-1)[0].toUpperCase().trim() ?? '';
+      userViewModel = { ...userViewModel, firstName, lastName };
+    }
+
+    return userViewModel;
   }
 
   toViewModels(users: User[]): UserViewModel[] {