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,
|
verifyPhone,
|
||||||
isEmail,
|
isEmail,
|
||||||
isPhoneNumber,
|
isPhoneNumber,
|
||||||
|
getOwnerByUserId,
|
||||||
|
getCustomerByUserId,
|
||||||
} from '../utils/api';
|
} from '../utils/api';
|
||||||
import AuthService from '../services/AuthService';
|
import AuthService from '../services/AuthService';
|
||||||
|
|
||||||
@ -92,7 +94,26 @@ export default function LoginPage() {
|
|||||||
AuthService.addToken(token);
|
AuthService.addToken(token);
|
||||||
console.log('[Login] Token stored');
|
console.log('[Login] Token stored');
|
||||||
|
|
||||||
|
// Fetch user profile to get full name
|
||||||
const authUser = AuthService.getUser();
|
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'
|
const userRole = AuthService.isAdmin() ? 'admin'
|
||||||
: AuthService.isOwner() ? 'owner'
|
: AuthService.isOwner() ? 'owner'
|
||||||
: 'customer';
|
: 'customer';
|
||||||
|
|||||||
@ -21,6 +21,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
const TOKEN_KEY = 'auth_token';
|
const TOKEN_KEY = 'auth_token';
|
||||||
|
const USER_KEY = 'cached_user';
|
||||||
|
|
||||||
const AuthService = Object.freeze({
|
const AuthService = Object.freeze({
|
||||||
addToken(token) {
|
addToken(token) {
|
||||||
@ -34,6 +35,28 @@ const AuthService = Object.freeze({
|
|||||||
|
|
||||||
deleteToken() {
|
deleteToken() {
|
||||||
localStorage.removeItem(TOKEN_KEY);
|
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();
|
const payload = this.decodeToken();
|
||||||
if (!payload) return null;
|
if (!payload) return null;
|
||||||
|
|
||||||
|
const cached = this.getCachedUser();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
id: payload['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier'] || payload.sub || null,
|
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,
|
name: cached?.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,
|
email: cached?.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,
|
phone: cached?.phone || payload['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/mobilephone'] || null,
|
||||||
roles: this.getRoles(),
|
roles: this.getRoles(),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user