Show user full name in navbar and homepage after login
All checks were successful
Build frontend / build (push) Successful in 53s
All checks were successful
Build frontend / build (push) Successful in 53s
- AuthService: added cacheUser/getCachedUser methods - AuthService.getUser() prefers cached name over JWT claims - Login page: fetches full profile from API after login and caches it - Fixes navbar dropdown and homepage showing email instead of name
This commit is contained in:
@ -28,6 +28,8 @@ import {
|
||||
verifyPhone,
|
||||
isEmail,
|
||||
isPhoneNumber,
|
||||
getOwnerByUserId,
|
||||
getCustomerByUserId,
|
||||
} from '../utils/api';
|
||||
import AuthService from '../services/AuthService';
|
||||
|
||||
@ -92,7 +94,26 @@ export default function LoginPage() {
|
||||
AuthService.addToken(token);
|
||||
console.log('[Login] Token stored');
|
||||
|
||||
// Fetch user profile to get full name
|
||||
const authUser = AuthService.getUser();
|
||||
if (authUser?.id) {
|
||||
try {
|
||||
const isOwner = AuthService.isOwner();
|
||||
const fetchFn = isOwner ? getOwnerByUserId : getCustomerByUserId;
|
||||
const profile = await fetchFn(authUser.id);
|
||||
if (profile) {
|
||||
AuthService.cacheUser({
|
||||
name: profile.fullName || profile.name || `${profile.firstName || ''} ${profile.lastName || ''}`.trim(),
|
||||
email: profile.email || authUser.email,
|
||||
phone: profile.phone || profile.phoneNumber || authUser.phone,
|
||||
});
|
||||
console.log('[Login] User profile cached');
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('[Login] Failed to fetch profile:', err);
|
||||
}
|
||||
}
|
||||
|
||||
const userRole = AuthService.isAdmin() ? 'admin'
|
||||
: AuthService.isOwner() ? 'owner'
|
||||
: 'customer';
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
*/
|
||||
|
||||
const TOKEN_KEY = 'auth_token';
|
||||
const USER_KEY = 'cached_user';
|
||||
|
||||
const AuthService = Object.freeze({
|
||||
addToken(token) {
|
||||
@ -34,6 +35,28 @@ const AuthService = Object.freeze({
|
||||
|
||||
deleteToken() {
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
localStorage.removeItem(USER_KEY);
|
||||
},
|
||||
|
||||
/**
|
||||
* Cache full user profile (from API)
|
||||
* @param {object} user — { name, email, phone, ... }
|
||||
*/
|
||||
cacheUser(user) {
|
||||
if (!user) return;
|
||||
localStorage.setItem(USER_KEY, JSON.stringify(user));
|
||||
},
|
||||
|
||||
/**
|
||||
* Get cached user profile
|
||||
* @returns {object|null}
|
||||
*/
|
||||
getCachedUser() {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(USER_KEY));
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
@ -59,11 +82,13 @@ const AuthService = Object.freeze({
|
||||
const payload = this.decodeToken();
|
||||
if (!payload) return null;
|
||||
|
||||
const cached = this.getCachedUser();
|
||||
|
||||
return {
|
||||
id: payload['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier'] || payload.sub || null,
|
||||
name: payload['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name'] || null,
|
||||
email: payload['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress'] || null,
|
||||
phone: payload['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/mobilephone'] || null,
|
||||
name: cached?.name || payload['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name'] || null,
|
||||
email: cached?.email || payload['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress'] || null,
|
||||
phone: cached?.phone || payload['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/mobilephone'] || null,
|
||||
roles: this.getRoles(),
|
||||
};
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user