user

Author: SejoB

src/components/templates/Header/Header.tsx

@@ -72,22 +72,6 @@ const Header: React.FC<IProps> = observer(({ title }) => {
 						<div className='d-flex align-items-center ms-auto'>
 							{isFeatureEnabled(FeatureFlags.AUTH) && (
 								<div className='me-3'>
-									{isAuthenticated && (
-										<Link
-											to='/profile'
-											className='text-white text-decoration-none small d-none d-md-inline hover-opacity me-3'
-											style={{ fontWeight: 500 }}
-										>
-											{t('Welcome')}, {user?.name || t('User')}
-										</Link>
-									)}
-									{isAuthenticated && (
-										<div
-											className='vr d-none d-md-block text-white opacity-50 me-3'
-											style={{ height: '20px', display: 'inline-block' }}
-										></div>
-									)}
-
 									<Button
 										variant='outline-light'
 										size='sm'
@@ -96,7 +80,11 @@ const Header: React.FC<IProps> = observer(({ title }) => {
 										style={{ borderRadius: '20px', fontWeight: 500 }}
 									>
 										{loginText}
-										<UserIcon />
+										{isAuthenticated && user?.oauth_provider_user_picture_url ? (
+											<img src={user?.oauth_provider_user_picture_url || ''} alt='user' />
+										) : (
+											<UserIcon />
+										)}
 									</Button>
 								</div>
 							)}

src/services/AuthService.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosResponse } from 'axios';
 import { API_ANYWAY_URL } from '../utils/globalEnvs';
-import { IUserLoggedIn } from '../types/User';
+import { IUserLoggedIn, IUser } from '../types/User';
 
 class AuthService {
 	apiUrl = API_ANYWAY_URL;
@@ -10,12 +10,12 @@ class AuthService {
 		return axios.get(`${this.apiUrl}/sd-user/is_user_logged_in`, { withCredentials: true });
 	};
 
-	getUserInfo = async () => {
+	getUserInfo = async (): Promise<AxiosResponse<IUser>> => {
 		return axios.get(`${this.apiUrl}/sd-user/info`, { withCredentials: true });
 	};
 
 	logout = async () => {
-		return axios.get(`${this.apiUrl}/logout`, { withCredentials: true });
+		return axios.get(`${this.apiUrl}/sd-user/logout`, { withCredentials: true });
 	};
 
 	/**

src/stores/user/UserStore.ts

@@ -2,16 +2,7 @@ import { makeAutoObservable, runInAction } from 'mobx';
 import RootStore from '../RootStore';
 import AuthService from '../../services/AuthService';
 import { isFeatureEnabled, FeatureFlags } from '../../utils/featureFlags';
-
-export interface IUser {
-	id: string;
-	email: string;
-	first_name?: string;
-	last_name?: string;
-	name?: string;
-	role: string;
-	roles?: string[];
-}
+import { IUser } from '../../types/User';
 
 export default class UserStore {
 	user: IUser | null = null;
@@ -55,13 +46,26 @@ export default class UserStore {
 			runInAction(() => {
 				const data = response.data;
 				this.user = {
+					app: data.app,
 					id: data.id,
 					email: data.email,
 					first_name: data.first_name,
 					last_name: data.last_name,
-					name: data.first_name ? `${data.first_name} ${data.last_name || ''}`.trim() : data.email,
+					full_name: data.first_name ? `${data.first_name} ${data.last_name || ''}`.trim() : data.email,
 					role: data.roles?.[0] || 'authenticated',
 					roles: data.roles,
+					oauth_provider: data.oauth_provider,
+					oauth_provider_user_name: data.oauth_provider_user_name,
+					oauth_provider_user_picture_url: data.oauth_provider_user_picture_url,
+					phone: data.phone,
+					user_desc: data.user_desc,
+					user_register_date: data.user_register_date,
+					user_type: data.user_type,
+					user_url: data.user_url,
+					is_active: data.is_active,
+					is_user_completed_registration: data.is_user_completed_registration,
+					organizations: data.organizations,
+					grants: data.grants,
 				};
 			});
 		} catch (err) {

src/types/User.ts

@@ -1,3 +1,26 @@
 export interface IUserLoggedIn {
 	is_user_logged_in: boolean;
 }
+
+export interface IUser {
+	app: number;
+	email: string;
+	first_name: string | null;
+	grants: string[];
+	id: number;
+	is_active: boolean;
+	is_user_completed_registration: null;
+	last_name: string | null;
+	oauth_provider: 'google';
+	oauth_provider_user_name: string | null;
+	oauth_provider_user_picture_url: string | null;
+	organizations: [];
+	phone: string | null;
+	roles: string[];
+	user_desc: string | null;
+	user_register_date: string;
+	user_type: string | null;
+	user_url: string | null;
+	full_name: string | null;
+	role: string | null;
+}

src/utils/featureFlags.ts

@@ -22,7 +22,7 @@ export const FEATURE_FLAGS = {
 	 * New Redirect-based Authentication flow
 	 * Disabled in production for now.
 	 */
-	AUTH: true,
+	AUTH: !isProd,
 };
 
 /**