force reroute to profile if we dont know their first and last name

devksingh4 · devksingh4 · commit 4ed132145f41 · 2025-01-27T23:01:01.000Z
diff --git a/src/common/types/msGraphApi.ts b/src/common/types/msGraphApi.ts
@@ -1,13 +1,12 @@
-export interface UserProfileData {
-  id?: string;
+export interface UserProfileDataBase {
   userPrincipalName: string;
   displayName?: string;
   givenName?: string;
   surname?: string;
   mail?: string;
-  jobTitle?: string;
-  mobilePhone?: string;
-  officeLocation?: string;
-  preferredLanguage?: string;
-  businessPhones?: string[];
+  otherMails?: string[]
+}
+
+export interface UserProfileData extends UserProfileDataBase {
+  discordUsername?: string;
 }
diff --git a/src/ui/Router.tsx b/src/ui/Router.tsx
@@ -19,6 +19,28 @@ import { ViewTicketsPage } from './pages/tickets/ViewTickets.page';
 import { ManageIamPage } from './pages/iam/ManageIam.page';
 import { ManageProfilePage } from './pages/profile/ManageProfile.page';
 
+const ProfileRediect: React.FC = () => {
+  const location = useLocation();
+
+  // Don't store login-related paths and ALLOW the callback path
+  const excludedPaths = [
+    '/login',
+    '/logout',
+    '/force_login',
+    '/a',
+    '/auth/callback', // Add this to excluded paths
+  ];
+
+  if (excludedPaths.includes(location.pathname)) {
+    return <Navigate to="/login" replace />;
+  }
+
+  // Include search params and hash in the return URL if they exist
+  const returnPath = location.pathname + location.search + location.hash;
+  const loginUrl = `/profile?returnTo=${encodeURIComponent(returnPath)}&firstTime=true`;
+  return <Navigate to={loginUrl} replace />;
+};
+
 // Component to handle redirects to login with return path
 const LoginRedirect: React.FC = () => {
   const location = useLocation();
@@ -57,6 +79,18 @@ const commonRoutes = [
   },
 ];
 
+const profileRouter = createBrowserRouter([
+  ...commonRoutes,
+  {
+    path: '/profile',
+    element: <ManageProfilePage />,
+  },
+  {
+    path: '*',
+    element: <ProfileRediect />,
+  },
+]);
+
 const unauthenticatedRouter = createBrowserRouter([
   ...commonRoutes,
   {
@@ -67,7 +101,6 @@ const unauthenticatedRouter = createBrowserRouter([
     path: '/login',
     element: <LoginPage />,
   },
-  // Catch-all route that preserves the attempted path
   {
     path: '*',
     element: <LoginRedirect />,
@@ -168,7 +201,12 @@ const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ children }) => {
 
 export const Router: React.FC = () => {
   const { isLoggedIn } = useAuth();
-  const router = isLoggedIn ? authenticatedRouter : unauthenticatedRouter;
+  console.log(isLoggedIn);
+  const router = isLoggedIn
+    ? authenticatedRouter
+    : isLoggedIn === null
+      ? profileRouter
+      : unauthenticatedRouter;
 
   return (
     <ErrorBoundary>
diff --git a/src/ui/components/AuthContext/index.tsx b/src/ui/components/AuthContext/index.tsx
@@ -19,6 +19,8 @@ import { CACHE_KEY_PREFIX } from '../AuthGuard/index.js';
 import FullScreenLoader from './LoadingScreen.js';
 
 import { getRunEnvironmentConfig, ValidServices } from '@ui/config.js';
+import { transformCommaSeperatedName } from '@common/utils.js';
+import { useApi } from '@ui/util/api.js';
 
 interface AuthContextDataWrapper {
   isLoggedIn: boolean;
@@ -28,6 +30,7 @@ interface AuthContextDataWrapper {
   getToken: CallableFunction;
   logoutCallback: CallableFunction;
   getApiToken: CallableFunction;
+  setLoginStatus: CallableFunction;
 }
 
 export type AuthContextData = {
@@ -53,7 +56,6 @@ export const clearAuthCache = () => {
 
 export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const { instance, inProgress, accounts } = useMsal();
-
   const [userData, setUserData] = useState<AuthContextData | null>(null);
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
 
@@ -67,11 +69,9 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       if (response) {
         handleMsalResponse(response);
       } else if (accounts.length > 0) {
-        // User is already logged in, set the state
-        const [lastName, firstName] = accounts[0].name?.split(',') || [];
         setUserData({
           email: accounts[0].username,
-          name: `${firstName} ${lastName}`,
+          name: transformCommaSeperatedName(accounts[0].name || ''),
         });
         setIsLoggedIn(true);
       }
@@ -94,29 +94,26 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
             })
             .then((silentResponse) => {
               if (silentResponse?.account?.name) {
-                const [lastName, firstName] = silentResponse.account.name.split(',');
                 setUserData({
-                  email: silentResponse.account.username,
-                  name: `${firstName} ${lastName}`,
+                  email: accounts[0].username,
+                  name: transformCommaSeperatedName(accounts[0].name || ''),
                 });
                 setIsLoggedIn(true);
               }
             })
             .catch(console.error);
           return;
         }
-
-        // Use response.account instead of accounts[0]
-        const [lastName, firstName] = response.account.name?.split(',') || [];
         setUserData({
-          email: response.account.username,
-          name: `${firstName} ${lastName}`,
+          email: accounts[0].username,
+          name: transformCommaSeperatedName(accounts[0].name || ''),
         });
         setIsLoggedIn(true);
       }
     },
     [accounts, instance]
   );
+
   const getApiToken = useCallback(
     async (service: ValidServices) => {
       if (!userData) {
@@ -194,6 +191,9 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     },
     [instance]
   );
+  const setLoginStatus = useCallback((val: boolean) => {
+    setIsLoggedIn(val);
+  }, []);
 
   const logout = useCallback(async () => {
     try {
@@ -209,7 +209,16 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   };
   return (
     <AuthContext.Provider
-      value={{ isLoggedIn, userData, loginMsal, logout, getToken, logoutCallback, getApiToken }}
+      value={{
+        isLoggedIn,
+        userData,
+        setLoginStatus,
+        loginMsal,
+        logout,
+        getToken,
+        logoutCallback,
+        getApiToken,
+      }}
     >
       {inProgress !== InteractionStatus.None ? (
         <MantineProvider>
diff --git a/src/ui/components/AuthGuard/index.tsx b/src/ui/components/AuthGuard/index.tsx
@@ -82,6 +82,10 @@ export const AuthGuard: React.FC<
           setIsAuthenticated(true);
           return;
         }
+        if (validRoles.length === 0) {
+          setIsAuthenticated(true);
+          return;
+        }
 
         // Check for cached response first
         const cachedData = getCachedResponse(service, authCheckRoute);
diff --git a/src/ui/pages/Login.page.tsx b/src/ui/pages/Login.page.tsx
@@ -5,19 +5,33 @@ import { Center, Alert } from '@mantine/core';
 import { IconAlertCircle, IconAlertTriangle } from '@tabler/icons-react';
 import { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useApi } from '@ui/util/api';
 
 export function LoginPage() {
   const navigate = useNavigate();
-  const { isLoggedIn } = useAuth();
+  const graphApi = useApi('msGraphApi');
+  const { isLoggedIn, setLoginStatus } = useAuth();
   const [searchParams] = useSearchParams();
   const showLogoutMessage = searchParams.get('lc') === 'true';
   const showLoginMessage = !showLogoutMessage && searchParams.get('li') === 'true';
 
   useEffect(() => {
-    if (isLoggedIn) {
-      const returnTo = searchParams.get('returnTo');
-      navigate(returnTo || '/home');
-    }
+    const evalState = async () => {
+      if (isLoggedIn) {
+        const returnTo = searchParams.get('returnTo');
+        const me = (await graphApi.get('/v1.0/me?$select=givenName,surname')).data as {
+          givenName?: string;
+          surname?: string;
+        };
+        if (!me.givenName || !me.surname) {
+          setLoginStatus(null);
+          navigate(`/profile?firstTime=true${returnTo ? `&returnTo=${returnTo}` : ''}`);
+        } else {
+          navigate(returnTo || '/home');
+        }
+      }
+    };
+    evalState();
   }, [navigate, isLoggedIn, searchParams]);
 
   return (
diff --git a/src/ui/pages/profile/ManageProfile.page.tsx b/src/ui/pages/profile/ManageProfile.page.tsx
@@ -1,25 +1,52 @@
 import React from 'react';
-import { Title } from '@mantine/core';
+import { Container, Title } from '@mantine/core';
 import { AuthGuard } from '@ui/components/AuthGuard';
 import { useApi } from '@ui/util/api';
-import { UserProfileData } from '@common/types/msGraphApi';
+import { UserProfileData, UserProfileDataBase } from '@common/types/msGraphApi';
 import { ManageProfileComponent } from './ManageProfileComponent';
+import { useSearchParams } from 'react-router-dom';
 
 export const ManageProfilePage: React.FC = () => {
   const api = useApi('msGraphApi');
-
+  const [searchParams] = useSearchParams();
+  const returnTo = searchParams.get('returnTo') || undefined;
+  const firstTime = searchParams.get('firstTime') === 'true' || false;
   const getProfile = async () => {
-    return (await api.get('/v1.0/me')).data as UserProfileData;
+    const raw = (
+      await api.get(
+        '/v1.0/me?$select=userPrincipalName,givenName,surname,displayName,otherMails,mail'
+      )
+    ).data as UserProfileDataBase;
+    const discordUsername = raw.otherMails?.filter((x) => x.endsWith('@discord'));
+    const enhanced = raw as UserProfileData;
+    if (discordUsername?.length === 1) {
+      enhanced.discordUsername = discordUsername[0].replace('@discord', '');
+      enhanced.otherMails = enhanced.otherMails?.filter((x) => !x.endsWith('@discord'));
+    }
+    return enhanced;
   };
 
   const setProfile = async (data: UserProfileData) => {
+    const newOtherEmails = [data.mail || data.userPrincipalName];
+    if (data.discordUsername && data.discordUsername !== '') {
+      newOtherEmails.push(`${data.discordUsername}@discord`);
+    }
+    data.otherMails = newOtherEmails;
+    delete data.discordUsername;
     return (await api.patch('/v1.0/me', data)).data;
   };
 
   return (
-    <AuthGuard resourceDef={{ service: 'msGraphApi', validRoles: [] }} showSidebar={true}>
-      <Title>Edit Profile</Title>
-      <ManageProfileComponent getProfile={getProfile} setProfile={setProfile} />
+    <AuthGuard resourceDef={{ service: 'core', validRoles: [] }} showSidebar={true}>
+      <Container fluid>
+        <Title>Edit Profile</Title>
+        <ManageProfileComponent
+          getProfile={getProfile}
+          setProfile={setProfile}
+          firstTime={firstTime}
+          returnTo={returnTo}
+        />
+      </Container>
     </AuthGuard>
   );
 };
diff --git a/src/ui/pages/profile/ManageProfileComponent.tsx b/src/ui/pages/profile/ManageProfileComponent.tsx
