Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: reroute user to login via a button on the page. #52

Merged
merged 2 commits into from
Sep 13, 2024
Merged

fix: reroute user to login via a button on the page. #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5be891
fix: reroute user to login via a button on the page. This is to preve…
ATNoblis Sep 11, 2024
c67b3b3
Hiding the user icon if a user is not logged in
ATNoblis Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/router/authLoader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const emptyUser: userData = {
role: '',
assignedfismasystems: [],
}
const authLoader = async (): Promise<unknown> => {
const authLoader = async () => {
try {
const axiosUser = await axiosInstance.get('/users/current')
if (axiosUser.status != 200) {
Expand Down
58 changes: 35 additions & 23 deletions src/views/Title/Title.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import logo from '../../assets/icons/logo.svg'
import AccountCircleIcon from '@mui/icons-material/AccountCircle'
import 'core-js/stable/atob'
import { userData } from '@/types'
import { useEffect, useRef } from 'react'
import { Button as CmsButton } from '@cmsgov/design-system'
import { Box } from '@mui/material'
/**
* Component that renders the contents of the Dashboard view.
* @returns {JSX.Element} Component that renders the dashboard contents.
Expand All @@ -25,13 +26,6 @@ type PromiseType = {
}
export default function Title() {
const loaderData = useLoaderData() as PromiseType
const hasRedirected = useRef(false)
useEffect(() => {
if (loaderData.status !== 200 && !hasRedirected.current) {
hasRedirected.current = true
window.location.href = '/login'
}
}, [loaderData])
const userInfo: userData =
loaderData.status != 200 ? emptyUser : loaderData.response
return (
Expand All @@ -54,21 +48,25 @@ export default function Title() {
<div className="ds-l-col--3 ds-u-lg-display--block ds-u-display--none ds-u-padding-left--0 ds-u-margin-top--5 ds-u-font-weight--semibold">
Centers for Medicare &amp; Medicaid Services
</div>
<div className="ds-l-col--4 ds-u-lg-display--block ds-u-display--none ds-u-padding-left--0 ds-u-margin-top--5 ds-u-font-weight--semibold">
<div className="ds-u-float--right">
<AccountCircleIcon fontSize={'large'} />
{userInfo.fullname ? (
<span
style={{ verticalAlign: '13px' }}
className="ds-text-body--md"
>
{userInfo.fullname}
</span>
) : (
''
)}
{loaderData.status == 200 ? (
<div className="ds-l-col--4 ds-u-lg-display--block ds-u-display--none ds-u-padding-left--0 ds-u-margin-top--5 ds-u-font-weight--semibold">
<div className="ds-u-float--right">
<AccountCircleIcon fontSize={'large'} />
{userInfo.fullname ? (
<span
style={{ verticalAlign: '13px' }}
className="ds-text-body--md"
>
{userInfo.fullname}
</span>
) : (
''
)}
</div>
</div>
</div>
) : (
<div></div>
)}
</div>
</div>
</div>
Expand All @@ -78,7 +76,21 @@ export default function Title() {
<Typography variant="h3" align="center">
Zero Trust Maturity Score Dashboard
</Typography>
<Outlet />
{loaderData.status !== 200 ? (
<Box
flex={1}
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '50vh',
}}
>
<CmsButton href="/login">Login</CmsButton>
</Box>
) : (
<Outlet />
)}
</Container>
</>
)
Expand Down