diff --git a/apps/web/src/context/AuthContext.tsx b/apps/web/src/context/AuthContext.tsx index c4b950e..91e04c4 100644 --- a/apps/web/src/context/AuthContext.tsx +++ b/apps/web/src/context/AuthContext.tsx @@ -8,7 +8,6 @@ import { loginRequest } from '@web/authConfig'; import { callMsGraph } from '@web/graph'; import { useMutation } from '@tanstack/react-query'; import { RegisterEmployeeDto } from '@web/client'; - // Reference: https://blog.finiam.com/blog/predictable-react-authentication-with-the-context-api export const AuthContext = createContext( @@ -132,19 +131,41 @@ export const AuthProvider = ({ children }: any) => { } }; - // Register the user in the database + // Direct registering a user in the database to either fill positon + department + // fields, or proceed to completeRegistration const register = async (email: string, password: string) => { const userData = await requestProfileData(); - const departmentName = userData.department || 'Default Department'; - const positionName = userData.jobTitle || 'Default Position'; + const departmentName = userData.department; + const positionName = userData.jobTitle; + + if (!departmentName || !positionName) { + router.push('/register'); + } else { + completeRegistration( + userData, + email, + password, + departmentName, + positionName, + ); + } + }; + // Register a user with provided information to the database + const completeRegistration = ( + userData: any, + email: string, + password: string, + department: string, + position: string, + ) => { const employee: RegisterEmployeeDto = { email: email, password: password, firstName: userData.givenName || userData.displayName.split(' ')[0], lastName: userData.surname || userData.displayName.split(' ')[1], - departmentName: departmentName, - positionName: positionName, + departmentName: department, + positionName: position, }; registerEmployeeMutation.mutate(employee, { @@ -180,6 +201,7 @@ export const AuthProvider = ({ children }: any) => { loading, error, login, + completeRegistration, logout, }), // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/apps/web/src/context/types.ts b/apps/web/src/context/types.ts index 27b9172..50567f0 100644 --- a/apps/web/src/context/types.ts +++ b/apps/web/src/context/types.ts @@ -22,5 +22,12 @@ export interface AuthContextType { loading: boolean; error?: any; login: (email: string, password: string) => void; + completeRegistration: ( + userData: any, + email: string, + password: string, + position: string, + department: string, + ) => void; logout: () => void; } diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx index fa0ff40..7786a73 100644 --- a/apps/web/src/pages/_app.tsx +++ b/apps/web/src/pages/_app.tsx @@ -55,7 +55,7 @@ export default function App({ OpenAPI.CREDENTIALS = 'include'; OpenAPI.WITH_CREDENTIALS = true; - const excludeLayoutPaths = ['/signin']; + const excludeLayoutPaths = ['/signin', '/register']; const head = ( diff --git a/apps/web/src/pages/register.tsx b/apps/web/src/pages/register.tsx new file mode 100644 index 0000000..0096e2e --- /dev/null +++ b/apps/web/src/pages/register.tsx @@ -0,0 +1,147 @@ +import { Button, Flex } from '@chakra-ui/react'; +import { Heading } from '@chakra-ui/react'; +import { Select } from '@chakra-ui/react'; +import { DepartmentsService, PositionsService } from '@web/client'; +import { DepartmentEntity } from '@web/client'; +import { PositionEntity } from '@web/client'; +import { useEffect, useState } from 'react'; +import { useRouter } from 'next/router'; +import { useAuth } from '@web/hooks/useAuth'; + +export default function Register( + userData: any, + email: string, + password: string, + departmentName: any, + positionName: any, +) { + const [positions, setPositions] = useState([]); + const [departments, setDepartments] = useState([]); + const [isLoading, setIsLoading] = useState(true); + const [currentDepartment, setCurrentDepartment] = useState(departmentName); + const [currentPosition, setCurrentPosition] = useState(positionName); + const router = useRouter(); + const { completeRegistration } = useAuth(); + + // fetch list of all positions + useEffect(() => { + async function fetchPositions() { + setIsLoading(true); + try { + const request: PositionEntity[] = + await PositionsService.positionsControllerFindAll(1000); + setPositions(request); + } catch (error) { + console.log(error); + } finally { + setIsLoading(false); + } + } + fetchPositions(); + }, []); + + // fetch list of all departments + useEffect(() => { + async function fetchDepartments() { + setIsLoading(true); + try { + const request: DepartmentEntity[] = + await DepartmentsService.departmentsControllerFindAll(1000); + setDepartments(request); + } catch (error) { + console.log(error); + } finally { + setIsLoading(false); + console.log(departments); + } + } + fetchDepartments(); + }, []); + + // If loading, wait to render + if (isLoading) { + return
Loading...
; + } + + // when button is submitted to finalize department and position, + // register employee with current position and department + // and route to home page + const clickResponse = () => { + // complete registration + completeRegistration( + userData, + email, + password, + currentDepartment, + currentPosition, + ); + // redirect to main page + router.push('/'); + }; + + return ( + <> + + Hi there, it looks like you are not registered yet. + + + Please specify your department and position below + + + + Select Department + + + + + + Select Position + + + + + + ); +}