index.tsx60 lines · main

1	import { useIsMFAEnabled } from 'common'
2	import Link from 'next/link'
3	import { Button } from 'ui'
4	import { Admonition } from 'ui-patterns'
5
6	import { ProjectList } from '@/components/interfaces/Home/ProjectList/ProjectList'
7	import { HomePageActions } from '@/components/interfaces/HomePageActions'
8	import DefaultLayout from '@/components/layouts/DefaultLayout'
9	import OrganizationLayout from '@/components/layouts/OrganizationLayout'
10	import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
11	import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
12	import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
13	import type { NextPageWithLayout } from '@/types'
14
15	const ProjectsPage: NextPageWithLayout = () => {
16	const isUserMFAEnabled = useIsMFAEnabled()
17	const { data: org } = useSelectedOrganizationQuery()
18
19	const disableAccessMfa = org?.organization_requires_mfa && !isUserMFAEnabled
20
21	return (
22	<ScaffoldContainer className="grow flex">
23	<ScaffoldSection isFullWidth className="pb-0">
24	{disableAccessMfa ? (
25	<Admonition
26	type="note"
27	layout="horizontal"
28	title={`${org?.name} requires MFA`}
29	description={
30	<>
31	Set up multi-factor authentication (MFA) on your account to access this
32	organization’s projects.
33	</>
34	}
35	actions={
36	<Button asChild type="default">
37	<Link href="/account/security">Set up MFA</Link>
38	</Button>
39	}
40	/>
41	) : (
42	<div className="flex flex-col gap-y-4">
43	<HomePageActions />
44	<ProjectList />
45	</div>
46	)}
47	</ScaffoldSection>
48	</ScaffoldContainer>
49	)
50	}
51
52	ProjectsPage.getLayout = (page) => (
53	<DefaultLayout>
54	<OrganizationLayout title="Projects">
55	<PageLayout title="Projects">{page}</PageLayout>
56	</OrganizationLayout>
57	</DefaultLayout>
58	)
59
60	export default ProjectsPage