Locked job creation behind access restriction

frontend/src/components/JobCreator.tsx

@@ -545,6 +545,8 @@ const JobCreator = (props: JobCreator) => {
         sx={{
           background: "white",
           p: 0,
+          width: "100%",
+          display: "flex", flexDirection: "column"
       }}>
         {selectedJob === null && renderJobCreation()}
       </Box>

frontend/src/components/JobMatchAnalysis.tsx

@@ -128,8 +128,7 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
 
   const skillMatchHandlers = {
     onStatus: (status: Types.ChatMessageStatus) => {
-      console.log('status:', status.content);
-      setMatchStatus(status.content);
+      setMatchStatus(status.content.toLowerCase());
     },
   };
 

frontend/src/components/ui/LoginRestricted.css

@@ -0,0 +1,30 @@
+.LoginRestricted {
+  display: flex;
+  position: relative;
+  flex: 1;
+  pointer-events: none;
+  z-index: 1101;
+  cursor: pointer;
+  font-family: 'Roboto';
+  line-height: 40px;
+  overflow: hidden;
+  padding: 8px;
+}
+
+.LoginRestricted-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/LoginRestricted.tsx

@@ -0,0 +1,22 @@
+import Box from '@mui/material/Box';
+import './LoginRestricted.css';
+
+interface LoginRestrictedProps {
+  children?: React.ReactNode
+}
+
+const LoginRestricted = (props: LoginRestrictedProps) => {
+  const { children } = props;
+  return (
+    <Box className="LoginRestricted">
+        <Box className="LoginRestricted-label">
+          You must login to access this feature
+        </Box>
+        {children}
+    </Box>
+  );
+};
+
+export {
+  LoginRestricted
+};

frontend/src/pages/JobAnalysisPage.tsx

@@ -34,6 +34,7 @@ import { Scrollable } from 'components/Scrollable';
 import { CandidatePicker } from 'components/ui/CandidatePicker';
 import { JobPicker } from 'components/ui/JobPicker';
 import { JobCreator } from 'components/JobCreator';
+import { LoginRestricted } from 'components/ui/LoginRestricted';
 
 function WorkAddIcon() {
   return (
@@ -63,7 +64,7 @@ function WorkAddIcon() {
 // Main component
 const JobAnalysisPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
   const theme = useTheme();
-  const { user, apiClient } = useAuth();
+  const { user, guest } = useAuth();
   const navigate = useNavigate();
   const { selectedCandidate, setSelectedCandidate } = useSelectedCandidate()
   const { selectedJob, setSelectedJob } = useSelectedJob();
@@ -185,10 +186,14 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps
       {jobTab === 'load' &&
         <JobPicker onSelect={onJobSelect} />
       }
-      {jobTab === 'create' &&
+      {jobTab === 'create' && user &&
         <JobCreator
           onSave={onJobSelect}
         />}
+      {jobTab === 'create' && guest &&
+        <LoginRestricted><JobCreator
+          onSave={onJobSelect}
+        /></LoginRestricted>}
     </Box>
     );
   }

frontend/src/pages/LoginRequired.tsx

@@ -1,24 +0,0 @@
-import Box from '@mui/material/Box';
-import { BackstoryPageProps } from '../components/BackstoryTab';
-import { Message } from '../components/Message';
-import { ChatMessage } from 'types/types';
-
-const LoginRequired = (props: BackstoryPageProps) => {
-    const preamble: ChatMessage = {
-        role: 'assistant',
-        type: 'text',
-        status: 'done',
-        sessionId: '',
-        content: 'You must be logged to view this feature.',
-        timestamp: new Date(),
-        metadata: null as any        
-    }
-
-    return <Box sx={{display: "flex", flexGrow: 1, maxWidth: "1024px", margin: "0 auto"}}>
-        <Message message={preamble} {...props} />
-    </Box>
-};
-
-export {
-  LoginRequired
-};

frontend/src/pages/candidate/Dashboard.tsx

@@ -17,7 +17,7 @@ import {
   TipsAndUpdates as TipsIcon,
 } from '@mui/icons-material';
 import { useAuth } from 'hooks/AuthContext';
-import { LoginRequired } from 'pages/LoginRequired';
+import { LoginRequired } from 'components/ui/LoginRequired';
 import { BackstoryElementProps } from 'components/BackstoryTab';
 import { useNavigate } from 'react-router-dom';
 import { ComingSoon } from 'components/ui/ComingSoon';
@@ -33,7 +33,7 @@ const CandidateDashboard = (props: CandidateDashboardProps) => {
   const profileCompletion = 75;
 
   if (!user) {
-    return <LoginRequired />;
+    return <LoginRequired asset="candidate dashboard"/>;
   }
 
   if (user?.userType !== 'candidate') {