Added ComingSoon. Fixes #9

frontend/src/components/layout/Header.tsx

@@ -29,10 +29,11 @@ import {
 } from '@mui/icons-material';
 
 import { NavigationLinkType } from 'components/layout/BackstoryLayout';
-import { Beta } from 'components/Beta';
+import { Beta } from 'components/ui/Beta';
 import { Candidate, Employer } from 'types/types';
 import { SetSnackType } from 'components/Snack';
 import { CopyBubble } from 'components/CopyBubble';
+import { BackstoryLogo } from 'components/ui/BackstoryLogo';
 
 import 'components/layout/Header.css';
 import { useAuth } from 'hooks/AuthContext';
@@ -189,32 +190,6 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
 
   const name = (user?.firstName || user?.email || '');
 
-  const BackstoryLogo = () => {
-    return <Typography
-      variant="h6"
-      className="BackstoryLogo"
-      noWrap
-      sx={{
-        cursor: "pointer",
-        fontWeight: 700,
-        letterSpacing: '.2rem',
-        color: theme.palette.primary.contrastText,
-        textDecoration: 'none',
-        display: "flex", 
-        flexDirection: "row", 
-        alignItems: "center", 
-        gap: 1, 
-        textTransform: "uppercase",
-      }}
-    >
-      <Avatar sx={{ width: 24, height: 24 }}
-        variant="rounded"
-        alt="Backstory logo"
-        src="/logo192.png" />
-      Backstory
-    </Typography>
-  };
-
   const navLinks : NavigationLinkType[] = [
     {name: "Home", path: "/", label: <BackstoryLogo/>},
     ...navigationLinks

frontend/src/components/ui/BackstoryLogo.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  Typography,
+  Avatar,
+} from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+
+import 'components/layout/Header.css';
+
+const BackstoryLogo = () => {
+  const theme = useTheme();
+  return <Typography
+    variant="h6"
+    className="BackstoryLogo"
+    noWrap
+    sx={{
+      cursor: "pointer",
+      fontWeight: 700,
+      letterSpacing: '.2rem',
+      color: theme.palette.primary.contrastText,
+      textDecoration: 'none',
+      display: "flex", 
+      flexDirection: "row", 
+      alignItems: "center", 
+      gap: 1, 
+      textTransform: "uppercase",
+    }}
+  >
+    <Avatar sx={{ width: 24, height: 24 }}
+      variant="rounded"
+      alt="Backstory logo"
+      src="/logo192.png" />
+    Backstory
+  </Typography>
+};
+
+
+export { BackstoryLogo };

frontend/src/components/ui/ComingSoon.css

@@ -0,0 +1,30 @@
+.ComingSoon {
+  display: flex;
+  position: relative;
+  flex: 1;
+  pointer-events: none;
+  z-index: 1101;
+  cursor: pointer;
+  font-family: 'Roboto';
+  line-height: 40px;
+  overflow: hidden;
+  padding: 8px;
+}
+
+.ComingSoon-label {
+  display: flex;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  font-size: 28px;
+  text-align: center;
+  font-weight: bold;
+  color: #d8d8d8;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 11;
+  pointer-events: none;
+}

frontend/src/components/ui/ComingSoon.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { SxProps, useTheme } from '@mui/material/styles';
+
+import './ComingSoon.css';
+
+type ComingSoonProps = {
+  children?: React.ReactNode;
+}
+
+const ComingSoon: React.FC<ComingSoonProps> = (props : ComingSoonProps) => {
+    const { children } = props;
+    const theme = useTheme();
+    return (
+        <Box className="ComingSoon">
+            <Box className="ComingSoon-label">Coming Soon</Box>
+            {children}
+        </Box>
+    );
+};
+
+export {
+    ComingSoon
+};

frontend/src/pages/BetaPage.tsx

@@ -13,7 +13,7 @@ import {
 import { useTheme } from '@mui/material/styles';
 import ConstructionIcon from '@mui/icons-material/Construction';
 import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
-import { Beta } from '../components/Beta';
+import { Beta } from '../components/ui/Beta';
 
 interface BetaPageProps {
   children?: React.ReactNode;

frontend/src/pages/HomePage.tsx

@@ -19,6 +19,7 @@ import WorkHistoryIcon from '@mui/icons-material/WorkHistory';
 import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer';
 import DescriptionIcon from '@mui/icons-material/Description';
 import professionalConversationPng from './Conversation.png';
+import { ComingSoon } from 'components/ui/ComingSoon';
 
 // Placeholder for Testimonials component
 const Testimonials = () => {
@@ -300,8 +301,9 @@ const HomePage = () => {
             >
               Create Your Profile
           </ActionButton>
-          </Box>
+        </Box>
 
+        <ComingSoon>
           <Box sx={{ flex: 1 }}>
             <Typography variant="h4" component="h3" gutterBottom sx={{ color: 'primary.main' }}>
               For Employers
@@ -380,15 +382,16 @@ const HomePage = () => {
               </Box>
             </Stack>
 
-          <ActionButton
+            <ActionButton
               variant="contained"
               color="secondary"
               sx={{ mt: 4 }}
               endIcon={<ArrowForwardIcon />}
             >
               Start Recruiting
-          </ActionButton>
+            </ActionButton>
           </Box>
+        </ComingSoon>
         </Box>
       </Container>
 

frontend/src/pages/LoginPage.tsx

@@ -11,8 +11,6 @@ import {
   CircularProgress,
   Tabs,
   Tab,
-  AppBar,
-  Toolbar,
   Card,
   CardContent,
   Divider,
@@ -35,15 +33,12 @@ import {
   Person,
   PersonAdd,
   AccountCircle,
-  ExitToApp,
   Visibility,
   VisibilityOff,
   CheckCircle,
   Cancel,
   ExpandLess,
   ExpandMore,
-  Visibility as ViewIcon,
-  Work,
   Business
 } from '@mui/icons-material';
 import 'react-phone-number-input/style.css';
@@ -55,10 +50,10 @@ import { ApiClient } from 'services/api-client';
 import { useAuth } from 'hooks/AuthContext';
 import { LocationInput } from 'components/LocationInput';
 import { Location } from 'types/types';
+import { BackstoryLogo } from 'components/ui/BackstoryLogo';
 
-import { Candidate } from 'types/types'
-import { useNavigate } from 'react-router-dom';
 import { BackstoryPageProps } from 'components/BackstoryTab';
+import { Navigate, useNavigate } from 'react-router-dom';
 
 type UserRegistrationType = 'candidate' | 'employer';
 
@@ -90,6 +85,7 @@ interface PasswordRequirement {
 const apiClient = new ApiClient();
 
 const LoginPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
+  const navigate = useNavigate();
   const { setSnack } = props;
   const [tabValue, setTabValue] = useState(0);
   const [loading, setLoading] = useState(false);
@@ -101,6 +97,8 @@ const LoginPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
   const [location, setLocation] = useState<Partial<Location>>({});
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
+  const showGuest: boolean = false;
+
   // Password visibility states
   const [showLoginPassword, setShowLoginPassword] = useState(false);
   const [showRegisterPassword, setShowRegisterPassword] = useState(false);
@@ -196,6 +194,7 @@ const LoginPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
     if (success) {
       setSuccess('Login successful!');
       setLoading(false);
+      navigate('/chat');
     }
   };
 
@@ -375,11 +374,9 @@ const LoginPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
   return (
     <Container maxWidth="sm" sx={{ mt: 4 }}>
       <Paper elevation={3} sx={{ p: 4 }}>
-        <Typography variant="h4" component="h1" gutterBottom align="center" color="primary">
+        <BackstoryLogo />
-          Backstory
-        </Typography>
         
-        {guest && (
+        {showGuest && guest && (
           <Card sx={{ mb: 3, bgcolor: 'grey.50' }} elevation={1}>
             <CardContent>
               <Typography variant="h6" gutterBottom color="primary">