#2709 set up new guest home page

src/backend/src/prisma/seed-data/users.seed.ts

@@ -875,6 +875,13 @@ const trang: Prisma.UserCreateInput = {
  email: 'trangPAK@hotmail.com'
 };
 
+const spongebob: Prisma.UserCreateInput = {
+ firstName: 'Spongebob',
+ lastName: 'Squarepants',
+ googleAuthId: 'spongebob',
+ email: 'goofygooober@gmail.com'
+};
+
 export const dbSeedAllUsers = {
  thomasEmrax,
  joeShmoe,
@@ -988,7 +995,8 @@ export const dbSeedAllUsers = {
  kevin,
  norbury,
  carr,
- trang
+ trang,
+ spongebob
 };
 
 export const createUser = async (user: Prisma.UserCreateInput, role: RoleEnum, organizationId: string) => {

src/backend/src/prisma/seed.ts

@@ -178,6 +178,7 @@ const performSeed: () => Promise<void> = async () => {
  const carr = await createUser(dbSeedAllUsers.carr, RoleEnum.LEADERSHIP, organizationId);
  const trang = await createUser(dbSeedAllUsers.trang, RoleEnum.LEADERSHIP, organizationId);
  const regina = await createUser(dbSeedAllUsers.regina, RoleEnum.LEADERSHIP, organizationId);
+ await createUser(dbSeedAllUsers.spongebob, RoleEnum.GUEST, organizationId);
 
  await UsersService.updateUserRole(cyborg.userId, thomasEmrax, 'APP_ADMIN', organizationId);
 

src/frontend/src/app/AppAuthenticated.tsx

@@ -19,7 +19,7 @@ import AppContextUser from './AppContextUser';
 import { useSingleUserSettings } from '../hooks/users.hooks';
 import LoadingIndicator from '../components/LoadingIndicator';
 import SessionTimeoutAlert from './SessionTimeoutAlert';
-import SetUserPreferences from '../pages/HomePage/SetUserPreferences';
+import SetUserPreferences from '../pages/HomePage/components/SetUserPreferences';
 import Finance from '../pages/FinancePage/Finance';
 import Sidebar from '../layouts/Sidebar/Sidebar';
 import { Box } from '@mui/system';
@@ -42,6 +42,7 @@ const AppAuthenticated: React.FC<AppAuthenticatedProps> = ({ userId, userRole })
  const theme = useTheme();
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [moveContent, setMoveContent] = useState(false);
+ const [onMemberHomepage, setOnMemberHomePage] = useState(false);
 
  if (isLoading || !userSettingsData) return <LoadingIndicator />;
 
@@ -62,32 +63,36 @@ const AppAuthenticated: React.FC<AppAuthenticatedProps> = ({ userId, userRole })
  height: '100vh',
  position: 'fixed',
  width: 15,
- borderRight: 2,
+ borderRight: onMemberHomepage ? 2 : 0,
  borderRightColor: theme.palette.background.paper
  }}
  />
- <IconButton
- onClick={() => {
- setDrawerOpen(true);
- setMoveContent(true);
- }}
- sx={{ position: 'fixed', left: -8, top: '3%' }}
- >
- <ArrowCircleRightTwoToneIcon
- sx={{
- fontSize: '30px',
- zIndex: 1,
- '& path:first-of-type': { color: '#000000' },
- '& path:last-of-type': { color: '#ef4345' }
- }}
- />
- </IconButton>
- <Sidebar
- drawerOpen={drawerOpen}
- setDrawerOpen={setDrawerOpen}
- moveContent={moveContent}
- setMoveContent={setMoveContent}
- />
+ {onMemberHomepage && (
+ <>
+ <IconButton
+ onClick={() => {
+ setDrawerOpen(true);
+ setMoveContent(true);
+ }}
+ sx={{ position: 'fixed', left: -8, top: '3%' }}
+ >
+ <ArrowCircleRightTwoToneIcon
+ sx={{
+ fontSize: '30px',
+ zIndex: 1,
+ '& path:first-of-type': { color: '#000000' },
+ '& path:last-of-type': { color: '#ef4345' }
+ }}
+ />
+ </IconButton>
+ <Sidebar
+ drawerOpen={drawerOpen}
+ setDrawerOpen={setDrawerOpen}
+ moveContent={moveContent}
+ setMoveContent={setMoveContent}
+ />
+ </>
+ )}
  <Box display={'flex'}>
  <HiddenContentMargin open={moveContent} variant="permanent" />
  <Container maxWidth={false} sx={{ width: moveContent ? 'calc(100vw - 220px)' : `calc(100vw - 30px)` }}>
@@ -103,7 +108,11 @@ const AppAuthenticated: React.FC<AppAuthenticatedProps> = ({ userId, userRole })
  <Route path={routes.CREDITS} component={Credits} />
  <Route path={routes.FINANCE} component={Finance} />
  <Route path={routes.CALENDAR} component={Calendar} />
- <Route exact path={routes.HOME} component={Home} />
+ <Route
+ exact
+ path={routes.HOME}
+ render={() => <Home onMemberHomePage={onMemberHomepage} setOnMemberHomePage={setOnMemberHomePage} />}
+ />
  <Route path="*" component={PageNotFound} />
  </Switch>
  </Container>

src/frontend/src/pages/HomePage/GuestHomePage.tsx

@@ -0,0 +1,39 @@
+import { Typography, Box } from '@mui/material';
+import PageLayout from '../../components/PageLayout';
+import { AuthenticatedUser } from 'shared';
+import ImageWithButton from './components/ImageWithButton';
+import React from 'react';
+
+interface GuestHomePageProps {
+ user: AuthenticatedUser;
+ setOnMemberHomePage: (e: boolean) => void;
+}
+
+const GuestHomePage = ({ user, setOnMemberHomePage }: GuestHomePageProps) => {
+ return (
+ <PageLayout title="Home" hidePageTitle>
+ <Typography variant="h3" textAlign="center" sx={{ mt: 2, pt: 3 }}>
+ {user ? `Welcome, ${user.firstName}!` : 'Welcome, Guest!'}
+ </Typography>
+ <Box sx={{ display: 'flex', mt: 4 }}>
+ <Box sx={{ display: 'flex', padding: '50px', gap: 5 }}>
+ <ImageWithButton
+ title="Interested in applying"
+ imageSrc={`/Apply.png`}
+ buttonText="Learn More"
+ onClick={() => {}}
+ />
+ <ImageWithButton
+ title="Explore Our Work as a Guest"
+ imageSrc={`/Guest.png`}
+ buttonText="FinishLine"
+ onClick={() => {
+ setOnMemberHomePage(true);
+ }}
+ />
+ </Box>
+ </Box>
+ </PageLayout>
+ );
+};
+export default GuestHomePage;

src/frontend/src/pages/HomePage/Home.tsx

@@ -3,33 +3,23 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
-import { Typography } from '@mui/material';
-import OverdueWorkPackageAlerts from './OverdueWorkPackageAlerts';
-import UsefulLinks from './UsefulLinks';
-import WorkPackagesByTimelineStatus from './WorkPackagesByTimelineStatus';
-import UpcomingDeadlines from './UpcomingDeadlines';
-import { useCurrentUser, useSingleUserSettings } from '../../hooks/users.hooks';
-import LoadingIndicator from '../../components/LoadingIndicator';
-import ErrorPage from '../ErrorPage';
-import PageLayout from '../../components/PageLayout';
+import { useCurrentUser } from '../../hooks/users.hooks';
+import { isGuest } from 'shared';
+import GuestHomePage from './GuestHomePage';
+import MemberHomePage from './MemberHomePage';
 
-const Home = () => {
- const user = useCurrentUser();
- const { isLoading, isError, error, data: userSettingsData } = useSingleUserSettings(user.userId);
+interface HomeProps {
+ onMemberHomePage: boolean;
+ setOnMemberHomePage: (value: boolean) => void;
+}
 
- if (isLoading || !userSettingsData) return <LoadingIndicator />;
- if (isError) return <ErrorPage error={error} message={error.message} />;
+const Home = ({ onMemberHomePage, setOnMemberHomePage }: HomeProps) => {
+ const user = useCurrentUser();
 
- return (
- <PageLayout title="Home" hidePageTitle>
- <Typography variant="h3" marginLeft="auto" sx={{ marginTop: 2, textAlign: 'center', pt: 3, padding: 0 }}>
- Welcome, {user.firstName}!
- </Typography>
- <OverdueWorkPackageAlerts />
- <UsefulLinks />
- <UpcomingDeadlines />
- <WorkPackagesByTimelineStatus />
- </PageLayout>
+ return isGuest(user.role) && !onMemberHomePage ? (
+ <GuestHomePage user={user} setOnMemberHomePage={setOnMemberHomePage} />
+ ) : (
+ <MemberHomePage user={user} />
  );
 };
 

src/frontend/src/pages/HomePage/MemberHomePage.tsx

@@ -0,0 +1,40 @@
+/*
+ * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
+ * See the LICENSE file in the repository root folder for details.
+ */
+
+import { Typography } from '@mui/material';
+import OverdueWorkPackageAlerts from './components/OverdueWorkPackageAlerts';
+import UsefulLinks from './components/UsefulLinks';
+import WorkPackagesByTimelineStatus from './components/WorkPackagesByTimelineStatus';
+import UpcomingDeadlines from './components/UpcomingDeadlines';
+import { useSingleUserSettings } from '../../hooks/users.hooks';
+import LoadingIndicator from '../../components/LoadingIndicator';
+import ErrorPage from '../ErrorPage';
+import PageLayout from '../../components/PageLayout';
+import { AuthenticatedUser } from 'shared';
+
+interface MemberHomePageProps {
+ user: AuthenticatedUser;
+}
+
+const MemberHomePage = ({ user }: MemberHomePageProps) => {
+ const { isLoading, isError, error, data: userSettingsData } = useSingleUserSettings(user.userId);
+
+ if (isLoading || !userSettingsData) return <LoadingIndicator />;
+ if (isError) return <ErrorPage error={error} message={error.message} />;
+
+ return (
+ <PageLayout title="Home" hidePageTitle>
+ <Typography variant="h3" marginLeft="auto" sx={{ marginTop: 2, textAlign: 'center', pt: 3, padding: 0 }}>
+ Welcome, {user.firstName}!
+ </Typography>
+ <OverdueWorkPackageAlerts />
+ <UsefulLinks />
+ <UpcomingDeadlines />
+ <WorkPackagesByTimelineStatus />
+ </PageLayout>
+ );
+};
+
+export default MemberHomePage;

src/frontend/src/pages/HomePage/components/ImageWithButton.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Typography, Box } from '@mui/material';
+import { NERButton } from '../../../components/NERButton';
+
+interface ImageWithButtonProps {
+ title: string;
+ imageSrc: string;
+ buttonText: string;
+ onClick: () => void;
+}
+
+const ImageWithButton: React.FC<ImageWithButtonProps> = ({ title, imageSrc, buttonText, onClick }) => {
+ return (
+ <Box sx={{ position: 'relative', display: 'inline-block', width: '100%', textAlign: 'center' }}>
+ <Box component="img" src={imageSrc} alt={buttonText} sx={{ width: '100%', height: 'auto', opacity: 0.5 }} />
+ <Box
+ sx={{
+ position: 'absolute',
+ top: 70,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ textAlign: 'center'
+ }}
+ >
+ <Typography variant="h3" sx={{ mb: 2, fontFamily: 'oswald', fontWeight: 1 }}>
+ {title}
+ </Typography>
+ <NERButton variant="contained" onClick={onClick} sx={{ mt: 1, width: 'auto', color: 'white' }}>
+ {buttonText}
+ </NERButton>
+ </Box>
+ </Box>
+ );
+};
+
+export default ImageWithButton;

src/frontend/src/pages/HomePage/OverdueWorkPackageAlerts.tsx → src/frontend/src/pages/HomePage/components/OverdueWorkPackageAlerts.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { useAllWorkPackages } from '../../hooks/work-packages.hooks';
+import { useAllWorkPackages } from '../../../hooks/work-packages.hooks';
 import { WbsElementStatus } from 'shared';
-import { useCurrentUser } from '../../hooks/users.hooks';
+import { useCurrentUser } from '../../../hooks/users.hooks';
 import { wbsPipe } from 'shared';
 import { Box, Alert, Typography, AlertTitle, Grid } from '@mui/material';
-import { routes } from '../../utils/routes';
-import { datePipe } from '../../utils/pipes';
-import { NERButton } from '../../components/NERButton';
+import { routes } from '../../../utils/routes';
+import { datePipe } from '../../../utils/pipes';
+import { NERButton } from '../../../components/NERButton';
 import { useHistory } from 'react-router-dom';
 
 const OverdueWorkPackageAlerts: React.FC = () => {

src/frontend/src/pages/HomePage/SetUserPreferences.tsx → src/frontend/src/pages/HomePage/components/SetUserPreferences.tsx

@@ -10,13 +10,13 @@ import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 import { useForm } from 'react-hook-form';
 import { UserSettings } from 'shared';
-import ExternalLink from '../../components/ExternalLink';
-import LoadingIndicator from '../../components/LoadingIndicator';
-import NERSuccessButton from '../../components/NERSuccessButton';
-import ReactHookTextField from '../../components/ReactHookTextField';
-import { useToast } from '../../hooks/toasts.hooks';
-import { useUpdateUserSettings } from '../../hooks/users.hooks';
-import ErrorPage from '../ErrorPage';
+import ExternalLink from '../../../components/ExternalLink';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import NERSuccessButton from '../../../components/NERSuccessButton';
+import ReactHookTextField from '../../../components/ReactHookTextField';
+import { useToast } from '../../../hooks/toasts.hooks';
+import { useUpdateUserSettings } from '../../../hooks/users.hooks';
+import ErrorPage from '../../ErrorPage';
 
 interface SetUserPreferencesProps {
  userSettings: UserSettings;

src/frontend/src/pages/HomePage/UpcomingDeadlines.tsx → src/frontend/src/pages/HomePage/components/UpcomingDeadlines.tsx

@@ -10,10 +10,10 @@ import MenuItem from '@mui/material/MenuItem';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import { WbsElementStatus, wbsPipe } from 'shared';
-import { useAllWorkPackages } from '../../hooks/work-packages.hooks';
-import LoadingIndicator from '../../components/LoadingIndicator';
-import PageBlock from '../../layouts/PageBlock';
-import ErrorPage from '../ErrorPage';
+import { useAllWorkPackages } from '../../../hooks/work-packages.hooks';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import PageBlock from '../../../layouts/PageBlock';
+import ErrorPage from '../../ErrorPage';
 import { Typography, useTheme } from '@mui/material';
 import WorkPackageCard from './WorkPackageCard';
 

src/frontend/src/pages/HomePage/UsefulLinks.tsx → src/frontend/src/pages/HomePage/components/UsefulLinks.tsx

@@ -8,11 +8,11 @@ import { Icon, useTheme } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
 import { Grid } from '@mui/material';
-import PageBlock from '../../layouts/PageBlock';
+import PageBlock from '../../../layouts/PageBlock';
 import React from 'react';
-import { useAllUsefulLinks } from '../../hooks/projects.hooks';
-import LoadingIndicator from '../../components/LoadingIndicator';
-import ErrorPage from '../ErrorPage';
+import { useAllUsefulLinks } from '../../../hooks/projects.hooks';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import ErrorPage from '../../ErrorPage';
 
 const UsefulLinks: React.FC = () => {
  const theme = useTheme();

src/frontend/src/pages/HomePage/WorkPackageCard.tsx → src/frontend/src/pages/HomePage/components/WorkPackageCard.tsx

@@ -12,8 +12,8 @@ import {
  useTheme
 } from '@mui/material';
 import { wbsPipe, WorkPackage } from 'shared';
-import { datePipe, fullNamePipe, projectWbsPipe } from '../../utils/pipes';
-import { routes } from '../../utils/routes';
+import { datePipe, fullNamePipe, projectWbsPipe } from '../../../utils/pipes';
+import { routes } from '../../../utils/routes';
 import { Link as RouterLink } from 'react-router-dom';
 
 export const CircularProgressWithLabel = (props: CircularProgressProps & { value: number }) => {

src/frontend/src/pages/HomePage/WorkPackagesByTimelineStatus.tsx → src/frontend/src/pages/HomePage/components/WorkPackagesByTimelineStatus.tsx

@@ -6,11 +6,11 @@
 import { useState, useEffect } from 'react';
 import Box from '@mui/material/Box';
 import { TimelineStatus, WbsElementStatus, wbsPipe } from 'shared';
-import { useAllWorkPackages } from '../../hooks/work-packages.hooks';
-import { timelinePipe } from '../../utils/pipes';
-import LoadingIndicator from '../../components/LoadingIndicator';
-import PageBlock from '../../layouts/PageBlock';
-import ErrorPage from '../ErrorPage';
+import { useAllWorkPackages } from '../../../hooks/work-packages.hooks';
+import { timelinePipe } from '../../../utils/pipes';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import PageBlock from '../../../layouts/PageBlock';
+import ErrorPage from '../../ErrorPage';
 import { FormControl, InputLabel, MenuItem, Select, useTheme } from '@mui/material';
 import WorkPackageCard from './WorkPackageCard';