implement user information in user name

This commit is contained in:
root
2025-12-22 19:08:05 -05:00
parent 116f664e7e
commit d8fa85a4a8
3 changed files with 27 additions and 15 deletions

View File

@@ -27,7 +27,8 @@ class UserProfileController extends ControllerAbstract
{ {
$userId = $this->userIdentity->identifier(); $userId = $this->userIdentity->identifier();
$profile = $this->userService->fetchProfile($userId); // Get profile with editability metadata
$profile = $this->userService->getEditableFields($userId);
return new JsonResponse($profile, JsonResponse::HTTP_OK); return new JsonResponse($profile, JsonResponse::HTTP_OK);
} }
@@ -57,8 +58,8 @@ class UserProfileController extends ControllerAbstract
// storeProfile automatically filters out provider-managed fields // storeProfile automatically filters out provider-managed fields
$this->userService->storeProfile($userId, $data); $this->userService->storeProfile($userId, $data);
// Return updated profile // Return updated profile with metadata
$updatedProfile = $this->userService->fetchProfile($userId); $updatedProfile = $this->userService->getEditableFields($userId);
return new JsonResponse($updatedProfile, JsonResponse::HTTP_OK); return new JsonResponse($updatedProfile, JsonResponse::HTTP_OK);
} }

View File

@@ -5,10 +5,12 @@ import { useLayoutStore } from '@KTXC/stores/layoutStore';
import LayoutUserMenu from '@KTXC/layouts/menus/LayoutUserMenu.vue'; import LayoutUserMenu from '@KTXC/layouts/menus/LayoutUserMenu.vue';
import NotificationDD from './NotificationDD.vue'; import NotificationDD from './NotificationDD.vue';
import Searchbar from './SearchBarPanel.vue'; import Searchbar from './SearchBarPanel.vue';
import defaultAvatar from '@KTXC/assets/images/users/avatar-1.png';
const layoutStore = useLayoutStore(); const layoutStore = useLayoutStore();
const userStore = useUserStore(); const userStore = useUserStore();
const identityData = computed(() => userStore.user); const userAuth = computed(() => userStore.auth);
const userAvatar = computed(() => userStore.getProfileField('avatar') || defaultAvatar);
</script> </script>
<template> <template>
@@ -86,11 +88,11 @@ const identityData = computed(() => userStore.user);
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-btn class="profileBtn" variant="text" rounded="sm" v-bind="props"> <v-btn class="profileBtn" variant="text" rounded="sm" v-bind="props">
<div class="d-flex align-center"> <div class="d-flex align-center">
<v-avatar class="mr-sm-2 mr-0 py-2"> <v-avatar class="mr-sm-2 mr-0" size="32">
<img src="@KTXC/assets/images/users/avatar-1.png" alt="Julia" /> <v-img :src="userAvatar" :alt="userAuth?.label || 'User'" cover />
</v-avatar> </v-avatar>
<h6 class="text-subtitle-1 mb-0 d-sm-block d-none"> <h6 class="text-subtitle-1 mb-0 d-sm-block d-none">
{{ identityData?.label }} {{ userAuth?.label }}
</h6> </h6>
</div> </div>
</v-btn> </v-btn>

View File

@@ -5,6 +5,7 @@ import { useUserStore } from '@KTXC/stores/userStore';
import { useIntegrationStore } from '@KTXC/stores/integrationStore'; import { useIntegrationStore } from '@KTXC/stores/integrationStore';
import { useLayoutStore } from '@KTXC/stores/layoutStore'; import { useLayoutStore } from '@KTXC/stores/layoutStore';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import defaultAvatar from '@KTXC/assets/images/users/avatar-1.png';
const theme = useTheme(); const theme = useTheme();
const router = useRouter(); const router = useRouter();
@@ -12,8 +13,16 @@ const userStore = useUserStore();
const integrationStore = useIntegrationStore(); const integrationStore = useIntegrationStore();
const layoutStore = useLayoutStore(); const layoutStore = useLayoutStore();
const identityData = computed(() => userStore.auth); const userAuth = computed(() => userStore.auth);
const profileMenuItems = computed(() => integrationStore.getItems('profile_menu')); const profileMenuItems = computed(() => integrationStore.getItems('profile_menu'));
const userAvatar = computed(() => userStore.getProfileField('avatar') || defaultAvatar);
const userName = computed(() => {
const given = userStore.getProfileField('name_given');
const family = userStore.getProfileField('name_family');
if (given && family) return `${given} ${family}`;
return userAuth.value?.label || 'User';
});
const userEmail = computed(() => userStore.getProfileField('email') || '');
// Theme toggle // Theme toggle
const isDarkMode = computed(() => theme.global.name.value === 'dark'); const isDarkMode = computed(() => theme.global.name.value === 'dark');
@@ -37,15 +46,15 @@ const goToSettings = () => {
<!-- ---------------------------------------------- --> <!-- ---------------------------------------------- -->
<div> <div>
<!-- User Info Header --> <!-- User Info Header -->
<div class="d-flex align-center pa-5"> <div class="d-flex align-center pa-5 pb-4">
<v-avatar size="32" class="mr-2"> <v-avatar size="40" class="mr-3">
<img src="@KTXC/assets/images/users/avatar-1.png" width="32" /> <v-img :src="userAvatar" :alt="userName" cover />
</v-avatar> </v-avatar>
<div> <div class="flex-grow-1">
<h6 class="text-h6 mb-0"> <h6 class="text-h6 mb-0 font-weight-medium">
{{ identityData?.label || 'User Name' }} {{ userName }}
</h6> </h6>
<p class="text-caption mb-0">{{ userStore.getProfileField('email') || '' }}</p> <p class="text-caption mb-0 text-medium-emphasis">{{ userEmail }}</p>
</div> </div>
</div> </div>
<v-divider /> <v-divider />