fix: replace first and last name with single field (#4915)

web/src/lib/components/admin-page/delete-confirm-dialoge.svelte

@@ -27,7 +27,7 @@
   <svelte:fragment slot="prompt">
     <div class="flex flex-col gap-4">
       <p>
-        <b>{user.firstName} {user.lastName}</b>'s account and assets will be permanently deleted after 7 days.
+        <b>{user.name}</b>'s account and assets will be permanently deleted after 7 days.
       </p>
       <p>Are you sure you want to continue?</p>
     </div>

web/src/lib/components/admin-page/restore-dialoge.svelte

@@ -16,6 +16,6 @@
 
 <ConfirmDialogue title="Restore User" confirmText="Continue" confirmColor="green" on:confirm={restoreUser} on:cancel>
   <svelte:fragment slot="prompt">
-    <p><b>{user.firstName} {user.lastName}</b>'s account will be restored.</p>
+    <p><b>{user.name}</b>'s account will be restored.</p>
   </svelte:fragment>
 </ConfirmDialogue>

web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte

@@ -96,7 +96,7 @@
           <tr
             class="flex h-[50px] w-full place-items-center text-center odd:bg-immich-gray even:bg-immich-bg odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50"
           >
-            <td class="w-1/4 text-ellipsis px-2 text-sm">{user.userFirstName} {user.userLastName}</td>
+            <td class="w-1/4 text-ellipsis px-2 text-sm">{user.userName}</td>
             <td class="w-1/4 text-ellipsis px-2 text-sm">{user.photos.toLocaleString($locale)}</td>
             <td class="w-1/4 text-ellipsis px-2 text-sm">{user.videos.toLocaleString($locale)}</td>
             <td class="w-1/4 text-ellipsis px-2 text-sm">{asByteUnitString(user.usage, $locale)}</td>

web/src/lib/components/album-page/album-card.svelte

@@ -123,8 +123,7 @@
             <p>Owned</p>
           {:else}
             <p>
-              Shared by {albumOwner.firstName}
-              {albumOwner.lastName}
+              Shared by {albumOwner.name}
             </p>
           {/if}
         {/await}

web/src/lib/components/album-page/album-options.svelte

@@ -56,7 +56,7 @@
                 <div>
                   <UserAvatar {user} size="md" />
                 </div>
-                <div class="w-full">{`${user.firstName} ${user.lastName}`}</div>
+                <div class="w-full">{user.name}</div>
                 <div>Owner</div>
               </div>
               {#each album.sharedUsers as user (user.id)}
@@ -64,7 +64,7 @@
                   <div>
                     <UserAvatar {user} size="md" />
                   </div>
-                  <div class="w-full">{`${user.firstName} ${user.lastName}`}</div>
+                  <div class="w-full">{user.name}</div>
                 </div>
               {/each}
             </div>

web/src/lib/components/album-page/share-info-modal.svelte

@@ -56,7 +56,7 @@
     try {
       await api.albumApi.removeUserFromAlbum({ id: album.id, userId });
       dispatch('remove', userId);
-      const message = userId === 'me' ? `Left ${album.albumName}` : `Removed ${selectedRemoveUser.firstName}`;
+      const message = userId === 'me' ? `Left ${album.albumName}` : `Removed ${selectedRemoveUser.name}`;
       notificationController.show({ type: NotificationType.Info, message });
     } catch (e) {
       handleError(e, 'Unable to remove user');
@@ -78,7 +78,7 @@
       <div class="flex w-full place-items-center justify-between gap-4 p-5">
         <div class="flex place-items-center gap-4">
           <UserAvatar user={album.owner} size="md" autoColor />
-          <p class="text-sm font-medium">{album.owner.firstName} {album.owner.lastName}</p>
+          <p class="text-sm font-medium">{album.owner.name}</p>
         </div>
 
         <div id="icon-{album.owner.id}" class="flex place-items-center">
@@ -91,7 +91,7 @@
         >
           <div class="flex place-items-center gap-4">
             <UserAvatar {user} size="md" autoColor />
-            <p class="text-sm font-medium">{user.firstName} {user.lastName}</p>
+            <p class="text-sm font-medium">{user.name}</p>
           </div>
 
           <div id="icon-{user.id}" class="flex place-items-center">
@@ -138,7 +138,7 @@
 {#if selectedRemoveUser && selectedRemoveUser?.id !== currentUser?.id}
   <ConfirmDialogue
     title="Remove User?"
-    prompt="Are you sure you want to remove {selectedRemoveUser.firstName} {selectedRemoveUser.lastName}"
+    prompt="Are you sure you want to remove {selectedRemoveUser.name}"
     confirmText="Remove"
     on:confirm={handleRemoveUser}
     on:cancel={() => (selectedRemoveUser = null)}

web/src/lib/components/album-page/user-selection-modal.svelte

@@ -72,7 +72,7 @@
               class="flex place-items-center gap-1 rounded-full border border-gray-400 p-1 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
             >
               <UserAvatar {user} size="sm" autoColor />
-              <p class="text-xs font-medium">{user.firstName} {user.lastName}</p>
+              <p class="text-xs font-medium">{user.name}</p>
             </button>
           {/key}
         {/each}
@@ -99,8 +99,7 @@
 
             <div class="text-left">
               <p class="text-immich-fg dark:text-immich-dark-fg">
-                {user.firstName}
-                {user.lastName}
+                {user.name}
               </p>
               <p class="text-xs">
                 {user.email}

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -221,13 +221,8 @@
               <div class="flex p-3 mx-2 mt-3 rounded-full gap-4 items-center text-sm">
                 <div class="text-red-600"><Icon path={mdiHeart} size={20} /></div>
 
-                <div
-                  class="w-full"
-                  title={`${reaction.user.firstName} ${reaction.user.lastName} (${reaction.user.email})`}
-                >
-                  {`${reaction.user.firstName} ${reaction.user.lastName} liked ${
-                    assetType ? `this ${getAssetType(assetType).toLowerCase()}` : 'it'
-                  }`}
+                <div class="w-full" title={`${reaction.user.name} (${reaction.user.email})`}>
+                  {`${reaction.user.name} liked ${assetType ? `this ${getAssetType(assetType).toLowerCase()}` : 'it'}`}
                 </div>
                 {#if assetId === undefined && reaction.assetId}
                   <div class="aspect-square w-[75px] h-[75px]">

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -315,8 +315,7 @@
 
       <div class="mb-auto mt-auto">
         <p>
-          {asset.owner.firstName}
-          {asset.owner.lastName}
+          {asset.owner.name}
         </p>
       </div>
     </div>

web/src/lib/components/forms/admin-registration-form.svelte

@@ -27,15 +27,13 @@
 
       const email = form.get('email');
       const password = form.get('password');
-      const firstName = form.get('firstName');
-      const lastName = form.get('lastName');
+      const name = form.get('name');
 
       const { status } = await api.authenticationApi.signUpAdmin({
         signUpDto: {
           email: String(email),
           password: String(password),
-          firstName: String(firstName),
-          lastName: String(lastName),
+          name: String(name),
         },
       });
 
@@ -83,13 +81,8 @@
   </div>
 
   <div class="flex flex-col gap-2">
-    <label class="immich-form-label" for="firstName">First Name</label>
-    <input class="immich-form-input" id="firstName" name="firstName" type="text" autocomplete="given-name" required />
-  </div>
-
-  <div class="flex flex-col gap-2">
-    <label class="immich-form-label" for="lastName">Last Name</label>
-    <input class="immich-form-input" id="lastName" name="lastName" type="text" autocomplete="family-name" required />
+    <label class="immich-form-label" for="name">Name</label>
+    <input class="immich-form-input" id="name" name="name" type="text" autocomplete="name" required />
   </div>
 
   {#if error}

web/src/lib/components/forms/create-user-form.svelte

@@ -38,16 +38,14 @@
 
       const email = form.get('email');
       const password = form.get('password');
-      const firstName = form.get('firstName');
-      const lastName = form.get('lastName');
+      const name = form.get('name');
 
       try {
         const { status } = await api.userApi.createUser({
           createUserDto: {
             email: String(email),
             password: String(password),
-            firstName: String(firstName),
-            lastName: String(lastName),
+            name: String(name),
           },
         });
 
@@ -112,13 +110,8 @@
     </div>
 
     <div class="m-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="firstName">First Name</label>
-      <input class="immich-form-input" id="firstName" name="firstName" type="text" required />
-    </div>
-
-    <div class="m-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="lastName">Last Name</label>
-      <input class="immich-form-input" id="lastName" name="lastName" type="text" required />
+      <label class="immich-form-label" for="name">Name</label>
+      <input class="immich-form-input" id="name" name="name" type="text" required />
     </div>
 
     {#if error}

web/src/lib/components/forms/edit-user-form.svelte

@@ -20,13 +20,12 @@
 
   const editUser = async () => {
     try {
-      const { id, email, firstName, lastName, storageLabel, externalPath } = user;
+      const { id, email, name, storageLabel, externalPath } = user;
       const { status } = await api.userApi.updateUser({
         updateUserDto: {
           id,
           email,
-          firstName,
-          lastName,
+          name,
           storageLabel: storageLabel || '',
           externalPath: externalPath || '',
         },
@@ -84,20 +83,8 @@
     </div>
 
     <div class="m-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="firstName">First Name</label>
-      <input
-        class="immich-form-input"
-        id="firstName"
-        name="firstName"
-        type="text"
-        required
-        bind:value={user.firstName}
-      />
-    </div>
-
-    <div class="m-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="lastName">Last Name</label>
-      <input class="immich-form-input" id="lastName" name="lastName" type="text" required bind:value={user.lastName} />
+      <label class="immich-form-label" for="name">Name</label>
+      <input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
     </div>
 
     <div class="m-4 flex flex-col gap-2">
@@ -161,7 +148,7 @@
   >
     <svelte:fragment slot="prompt">
       <p>
-        Are you sure you want to reset <b>{user.firstName} {user.lastName}</b>'s password?
+        Are you sure you want to reset <b>{user.name}</b>'s password?
       </p>
     </svelte:fragment>
   </ConfirmDialogue>

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -26,8 +26,7 @@
 
     <div>
       <p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
-        {user.firstName}
-        {user.lastName}
+        {user.name}
       </p>
       <p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
     </div>

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -133,7 +133,7 @@
               out:fade={{ delay: 200, duration: 150 }}
               class="absolute -bottom-12 right-5 rounded-md border bg-gray-500 p-2 text-[12px] text-gray-100 shadow-md dark:border-immich-dark-gray dark:bg-immich-dark-gray"
             >
-              <p>{user.firstName} {user.lastName}</p>
+              <p>{user.name}</p>
               <p>{user.email}</p>
             </div>
           {/if}

web/src/lib/components/shared-components/user-avatar.svelte

@@ -9,8 +9,7 @@
 
   interface User {
     id: string;
-    firstName: string;
-    lastName: string;
+    name: string;
     email: string;
     profileImagePath: string;
   }
@@ -51,7 +50,7 @@
 
   $: colorClass = colorClasses[autoColor ? getUserColor() : color];
   $: sizeClass = sizeClasses[size];
-  $: title = `${user.firstName} ${user.lastName} (${user.email})`;
+  $: title = `${user.name} (${user.email})`;
   $: interactiveClass = interactive
     ? 'border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-colors'
     : '';
@@ -82,7 +81,7 @@
       class:font-medium={!autoColor}
       class:font-semibold={autoColor}
     >
-      {((user.firstName[0] || '') + (user.lastName[0] || '')).toUpperCase()}
+      {(user.name[0] || '').toUpperCase()}
     </span>
   {/if}
 </figure>

web/src/lib/components/user-settings-page/partner-selection-modal.svelte

@@ -61,8 +61,7 @@
 
           <div class="text-left">
             <p class="text-immich-fg dark:text-immich-dark-fg">
-              {user.firstName}
-              {user.lastName}
+              {user.name}
             </p>
             <p class="text-xs">
               {user.email}

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -116,8 +116,7 @@
             <UserAvatar user={partner.user} size="md" autoColor />
             <div class="text-left">
               <p class="text-immich-fg dark:text-immich-dark-fg">
-                {partner.user.firstName}
-                {partner.user.lastName}
+                {partner.user.name}
               </p>
               <p class="text-xs text-immich-fg/75 dark:text-immich-dark-fg/75">
                 {partner.user.email}
@@ -139,8 +138,8 @@
           <!-- I am sharing my assets with this user -->
           {#if partner.sharedByMe}
             <hr class="my-4 border border-gray-200 dark:border-gray-700" />
-            <p class="text-xs font-medium my-4">SHARED WITH {partner.user.firstName.toUpperCase()}</p>
-            <p class="text-md">{partner.user.firstName} can access</p>
+            <p class="text-xs font-medium my-4">SHARED WITH {partner.user.name.toUpperCase()}</p>
+            <p class="text-md">{partner.user.name} can access</p>
             <ul class="text-sm">
               <li class="flex gap-2 place-items-center py-1 mt-2">
                 <Icon path={mdiCheck} /> All your photos and videos except those in Archived and Deleted
@@ -154,7 +153,7 @@
           <!-- this user is sharing assets with me -->
           {#if partner.sharedWithMe}
             <hr class="my-4 border border-gray-200 dark:border-gray-700" />
-            <p class="text-xs font-medium my-4">PHOTOS FROM {partner.user.firstName.toUpperCase()}</p>
+            <p class="text-xs font-medium my-4">PHOTOS FROM {partner.user.name.toUpperCase()}</p>
             <SettingSwitch
               title="Show in timeline"
               subtitle="Show photos and videos from this user in your timeline"
@@ -183,7 +182,7 @@
 {#if removePartner}
   <ConfirmDialogue
     title="Stop sharing your photos?"
-    prompt="{removePartner.firstName} will no longer be able to access your photos."
+    prompt="{removePartner.name} will no longer be able to access your photos."
     on:cancel={() => (removePartner = null)}
     on:confirm={() => handleRemovePartner()}
   />

web/src/lib/components/user-settings-page/user-profile-settings.svelte

@@ -17,8 +17,7 @@
         updateUserDto: {
           id: user.id,
           email: user.email,
-          firstName: user.firstName,
-          lastName: user.lastName,
+          name: user.name,
         },
       });
 
@@ -47,19 +46,7 @@
 
         <SettingInputField inputType={SettingInputFieldType.EMAIL} label="EMAIL" bind:value={user.email} />
 
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          label="FIRST NAME"
-          bind:value={user.firstName}
-          required={true}
-        />
-
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          label="LAST NAME"
-          bind:value={user.lastName}
-          required={true}
-        />
+        <SettingInputField inputType={SettingInputFieldType.TEXT} label="NAME" bind:value={user.name} required={true} />
 
         <SettingInputField
           inputType={SettingInputFieldType.TEXT}