emerg: fix the profile creation flow

Author: devksingh4

src/api/functions/entraId.ts

@@ -9,6 +9,7 @@ import {
   EntraFetchError,
   EntraGroupError,
   EntraInvitationError,
+  EntraPatchError,
   InternalServerError,
 } from "../../common/errors/index.js";
 import { getSecretValue } from "../plugins/auth.js";
@@ -17,6 +18,7 @@ import { getItemFromCache, insertItemIntoCache } from "./cache.js";
 import {
   EntraGroupActions,
   EntraInvitationResponse,
+  ProfilePatchRequest,
 } from "../../common/types/iam.js";
 import { UserProfileDataBase } from "common/types/msGraphApi.js";
 import { SecretsManagerClient } from "@aws-sdk/client-secrets-manager";
@@ -395,3 +397,49 @@ export async function getUserProfile(
     });
   }
 }
+
+/**
+ * Patches the profile of a user from Entra ID.
+ * @param token - Entra ID token authorized to perform this action.
+ * @param userId - The user ID to patch the profile for.
+ * @throws {EntraUserError} If setting the user profile fails.
+ * @returns {Promise<void>} nothing
+ */
+export async function patchUserProfile(
+  token: string,
+  email: string,
+  userId: string,
+  data: ProfilePatchRequest,
+): Promise<void> {
+  try {
+    const url = `https://graph.microsoft.com/v1.0/users/${userId}`;
+    const response = await fetch(url, {
+      method: "PATCH",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+
+    if (!response.ok) {
+      const errorData = (await response.json()) as {
+        error?: { message?: string };
+      };
+      throw new EntraPatchError({
+        message: errorData?.error?.message ?? response.statusText,
+        email,
+      });
+    }
+    return;
+  } catch (error) {
+    if (error instanceof EntraPatchError) {
+      throw error;
+    }
+
+    throw new EntraPatchError({
+      message: error instanceof Error ? error.message : String(error),
+      email,
+    });
+  }
+}

src/api/routes/iam.ts

@@ -1,11 +1,12 @@
 import { FastifyPluginAsync } from "fastify";
-import { AppRoles } from "../../common/roles.js";
+import { allAppRoles, AppRoles } from "../../common/roles.js";
 import { zodToJsonSchema } from "zod-to-json-schema";
 import {
   addToTenant,
   getEntraIdToken,
   listGroupMembers,
   modifyGroup,
+  patchUserProfile,
 } from "../functions/entraId.js";
 import {
   BaseError,
@@ -15,6 +16,7 @@ import {
   EntraInvitationError,
   InternalServerError,
   NotFoundError,
+  UnauthorizedError,
 } from "../../common/errors/index.js";
 import { PutItemCommand } from "@aws-sdk/client-dynamodb";
 import { genericConfig } from "../../common/config.js";
@@ -29,13 +31,48 @@ import {
   GroupModificationPatchRequest,
   EntraGroupActions,
   entraGroupMembershipListResponse,
+  ProfilePatchRequest,
+  entraProfilePatchRequest,
 } from "../../common/types/iam.js";
 import {
   AUTH_DECISION_CACHE_SECONDS,
   getGroupRoles,
 } from "../functions/authorization.js";
 
 const iamRoutes: FastifyPluginAsync = async (fastify, _options) => {
+  fastify.patch<{ Body: ProfilePatchRequest }>(
+    "/profile",
+    {
+      preValidation: async (request, reply) => {
+        await fastify.zodValidateBody(request, reply, entraProfilePatchRequest);
+      },
+      onRequest: async (request, reply) => {
+        await fastify.authorize(request, reply, allAppRoles);
+      },
+    },
+    async (request, reply) => {
+      if (!request.tokenPayload || !request.username) {
+        throw new UnauthorizedError({
+          message: "User does not have the privileges for this task.",
+        });
+      }
+      const userOid = request.tokenPayload["oid"];
+      const entraIdToken = await getEntraIdToken(
+        {
+          smClient: fastify.secretsManagerClient,
+          dynamoClient: fastify.dynamoClient,
+        },
+        fastify.environmentConfig.AadValidClientId,
+      );
+      await patchUserProfile(
+        entraIdToken,
+        request.username,
+        userOid,
+        request.body,
+      );
+      reply.send(201);
+    },
+  );
   fastify.get<{
     Body: undefined;
     Querystring: { groupId: string };

src/common/errors/index.ts

@@ -214,3 +214,17 @@ export class EntraFetchError extends BaseError<"EntraFetchError"> {
     this.email = email;
   }
 }
+
+
+export class EntraPatchError extends BaseError<"EntraPatchError"> {
+  email: string;
+  constructor({ message, email }: { message?: string; email: string }) {
+    super({
+      name: "EntraPatchError",
+      id: 510,
+      message: message || "Could not set data at Entra ID.",
+      httpStatusCode: 500,
+    });
+    this.email = email;
+  }
+}

src/common/types/iam.ts

@@ -23,7 +23,8 @@ export type InviteUserPostRequest = z.infer<typeof invitePostRequestSchema>;
 
 export const groupMappingCreatePostSchema = z.object({
   roles: z.union([
-    z.array(z.nativeEnum(AppRoles))
+    z
+      .array(z.nativeEnum(AppRoles))
       .min(1)
       .refine((items) => new Set(items).size === items.length, {
         message: "All roles must be unique, no duplicate values allowed",
@@ -32,7 +33,6 @@ export const groupMappingCreatePostSchema = z.object({
   ]),
 });
 
-
 export type GroupMappingCreatePostRequest = z.infer<
   typeof groupMappingCreatePostSchema
 >;
@@ -65,3 +65,13 @@ export const entraGroupMembershipListResponse = z.array(
 export type GroupMemberGetResponse = z.infer<
   typeof entraGroupMembershipListResponse
 >;
+
+export const entraProfilePatchRequest = z.object({
+  displayName: z.string().min(1),
+  givenName: z.string().min(1),
+  surname: z.string().min(1),
+  mail: z.string().email(),
+  otherMails: z.array(z.string()).min(1),
+});
+
+export type ProfilePatchRequest = z.infer<typeof entraProfilePatchRequest>;

src/common/types/msGraphApi.ts

@@ -4,7 +4,7 @@ export interface UserProfileDataBase {
   givenName?: string;
   surname?: string;
   mail?: string;
-  otherMails?: string[]
+  otherMails?: string[];
 }
 
 export interface UserProfileData extends UserProfileDataBase {

src/ui/pages/Login.page.tsx

@@ -23,8 +23,7 @@ export function LoginPage() {
           givenName?: string;
           surname?: string;
         };
-        // if (!me.givenName || !me.surname) {
-        if (false) {
+        if (!me.givenName || !me.surname) {
           setLoginStatus(null);
           navigate(`/profile?firstTime=true${returnTo ? `&returnTo=${returnTo}` : ''}`);
         } else {

src/ui/pages/events/ViewEvents.page.tsx

@@ -55,7 +55,10 @@ export const ViewEventsPage: React.FC = () => {
     return (
       <Transition mounted={shouldShow} transition="fade" duration={400} timingFunction="ease">
         {(styles) => (
-          <tr style={{ ...styles, display: shouldShow ? 'table-row' : 'none' }}>
+          <tr
+            style={{ ...styles, display: shouldShow ? 'table-row' : 'none' }}
+            key={`${event.id}-tr`}
+          >
             <Table.Td>{event.title}</Table.Td>
             <Table.Td>{dayjs(event.start).format('MMM D YYYY hh:mm')}</Table.Td>
             <Table.Td>{event.end ? dayjs(event.end).format('MMM D YYYY hh:mm') : 'N/A'}</Table.Td>

src/ui/pages/profile/ManageProfile.page.tsx

@@ -8,15 +8,16 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useAuth } from '@ui/components/AuthContext';
 
 export const ManageProfilePage: React.FC = () => {
-  const api = useApi('msGraphApi');
+  const graphApi = useApi('msGraphApi');
+  const api = useApi('core');
   const { setLoginStatus } = useAuth();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const returnTo = searchParams.get('returnTo') || undefined;
   const firstTime = searchParams.get('firstTime') === 'true' || false;
   const getProfile = async () => {
     const raw = (
-      await api.get(
+      await graphApi.get(
         '/v1.0/me?$select=userPrincipalName,givenName,surname,displayName,otherMails,mail'
       )
     ).data as UserProfileDataBase;
@@ -36,7 +37,7 @@ export const ManageProfilePage: React.FC = () => {
     }
     data.otherMails = newOtherEmails;
     delete data.discordUsername;
-    const response = await api.patch('/v1.0/me', data);
+    const response = await api.patch('/api/v1/iam/profile', data);
     if (response.status < 299 && firstTime) {
       setLoginStatus(true);
     }

src/ui/pages/profile/ManageProfileComponent.tsx

@@ -49,7 +49,6 @@ export const ManageProfileComponent: React.FC<ManageProfileComponentProps> = ({
         title: 'Profile updated successfully',
         message: 'Changes may take some time to reflect.',
       });
-      await fetchProfile();
     } catch (e) {
       console.error(e);
       notifications.show({
@@ -62,15 +61,15 @@ export const ManageProfileComponent: React.FC<ManageProfileComponentProps> = ({
   };
 
   if (userProfile === undefined) {
-    return <LoadingOverlay visible={true} data-testId="profile-loading" />;
+    return <LoadingOverlay visible={true} data-testid="profile-loading" />;
   }
 
   return (
     <>
       {firstTime && (
         <Alert
           icon={<IconMoodSmileBeam />}
-          title="Welcome to ACM @ UIUC Management Portal"
+          title="Welcome to the ACM @ UIUC Management Portal"
           color="yellow"
         >
           Your profile is incomplete. Please provide us with the information below and click Save.
@@ -91,7 +90,7 @@ export const ManageProfileComponent: React.FC<ManageProfileComponentProps> = ({
             }
             placeholder={userProfile?.displayName}
             required
-            data-testId="edit-displayName"
+            data-testid="edit-displayName"
           />
           <TextInput
             label="First Name"
@@ -101,15 +100,15 @@ export const ManageProfileComponent: React.FC<ManageProfileComponentProps> = ({
             }
             placeholder={userProfile?.givenName}
             required
-            data-testId="edit-firstName"
+            data-testid="edit-firstName"
           />
           <TextInput
             label="Last Name"
             value={userProfile?.surname || ''}
             onChange={(e) => setUserProfile((prev) => prev && { ...prev, surname: e.target.value })}
             placeholder={userProfile?.surname}
             required
-            data-testId="edit-lastName"
+            data-testid="edit-lastName"
           />
           <TextInput
             label="Email"
@@ -118,7 +117,7 @@ export const ManageProfileComponent: React.FC<ManageProfileComponentProps> = ({
             placeholder={userProfile?.mail}
             required
             disabled
-            data-testId="edit-email"
+            data-testid="edit-email"
           />
 
           <TextInput
@@ -127,7 +126,7 @@ export const ManageProfileComponent: React.FC<ManageProfileComponentProps> = ({
             onChange={(e) =>
               setUserProfile((prev) => prev && { ...prev, discordUsername: e.target.value })
             }
-            data-testId="edit-discordUsername"
+            data-testid="edit-discordUsername"
           />
 
           <Group mt="md">