update keycloak signup / login

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -79,15 +79,9 @@ export function PersonalAccountDropdown({
 }) {
   const { data: personalAccountData } = usePersonalAccountData(user.id);
 
-  const signedInAsLabel = useMemo(() => {
-    const email = user?.email ?? undefined;
-    const phone = user?.phone ?? undefined;
-
-    return email ?? phone;
-  }, [user]);
-
-  const displayName =
-    personalAccountData?.name ?? account?.name ?? user?.email ?? '';
+  const { name, last_name } = personalAccountData ?? {};
+  const firstNameLabel = toTitleCase(name) ?? '-';
+  const fullNameLabel = name && last_name ? toTitleCase(`${name} ${last_name}`) : '-';
 
   const hasTotpFactor = useMemo(() => {
     const factors = user?.factors ?? [];
@@ -128,7 +122,7 @@ export function PersonalAccountDropdown({
         <ProfileAvatar
           className={'rounded-md'}
           fallbackClassName={'rounded-md border'}
-          displayName={displayName ?? user?.email ?? ''}
+          displayName={firstNameLabel}
           pictureUrl={personalAccountData?.picture_url}
         />
 
@@ -142,7 +136,7 @@ export function PersonalAccountDropdown({
               data-test={'account-dropdown-display-name'}
               className={'truncate text-sm'}
             >
-              {toTitleCase(displayName)}
+              {firstNameLabel}
             </span>
           </div>
 
@@ -164,7 +158,7 @@ export function PersonalAccountDropdown({
             </div>
 
             <div>
-              <span className={'block truncate'}>{signedInAsLabel}</span>
+              <span className={'block truncate'}>{fullNameLabel}</span>
             </div>
           </div>
         </DropdownMenuItem>