Inner Contradictions error display as snackbar

frontend/src/components/DesireForm.tsx

@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { TextField, Button, Box, Typography, Snackbar, Alert } from '@mui/material';
 
 interface DesireFormProps {
     onSubmit: (desires: { wants: string[], accepts: string[], noGoes: string[], afraidToAsk: string }) => void;
+    externalError?: string | null;
 }
 
-const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
+const DesireForm: React.FC<DesireFormProps> = ({ onSubmit, externalError }) => {
     const [wants, setWants] = useState('');
     const [accepts, setAccepts] = useState('');
     const [noGoes, setNoGoes] = useState('');
@@ -14,6 +15,15 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
     const [alertMessage, setAlertMessage] = useState('');
     const [alertSeverity, setAlertSeverity] = useState<'error' | 'warning' | 'info' | 'success'>('error');
 
+    // Effect to handle external errors
+    useEffect(() => {
+        if (externalError) {
+            setAlertMessage(externalError);
+            setAlertSeverity('error');
+            setAlertOpen(true);
+        }
+    }, [externalError]);
+
     const handleCloseAlert = (event?: React.SyntheticEvent | Event, reason?: string) => {
         if (reason === 'clickaway') {
             return;

frontend/src/components/PassphraseInput.tsx

@@ -17,7 +17,7 @@ const PassphraseInput: React.FC<PassphraseInputProps> = ({ onSubmit, isLoading,
   };
 
   return (
-    <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
+    <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1, display: 'flex', flexDirection: 'column' }}>
       <TextField
         margin="normal"
         required
@@ -34,9 +34,8 @@ const PassphraseInput: React.FC<PassphraseInputProps> = ({ onSubmit, isLoading,
       />
       <Button
         type="submit"
-        fullWidth
         variant="contained"
-        sx={{ mt: 3, mb: 2 }}
+        sx={{ mt: 3, mb: 2, textTransform: 'none', alignSelf: 'flex-start' }}
         disabled={isLoading}
       >
         {isLoading ? 'Submitting...' : 'Enter'}

frontend/src/pages/LoginPage.tsx

@@ -33,10 +33,10 @@ const LoginPage: React.FC = () => {
           marginTop: 8,
           display: 'flex',
           flexDirection: 'column',
-          alignItems: 'center',
+          alignItems: 'flex-start',
         }}
       >
-        <Typography component="h1" variant="h5">
+        <Typography component="h1" variant="h5" sx={{ textAlign: 'left', width: '100%' }}>
           Enter Passphrase
         </Typography>
         {error && (

frontend/src/pages/SessionPage.tsx

@@ -8,7 +8,7 @@ import CopyLinkButton from '../components/CopyLinkButton'; // Import CopyLinkBut
 
 const SessionPage = () => {
     const { sessionId } = useParams<{ sessionId: string }>();
-    const [session, , sendMessage, clientId, ] = useSession(sessionId || '');
+    const [session, , sendMessage, clientId, wsError] = useSession(sessionId || '');
     const [expectedResponses, setExpectedResponses] = useState(2);
     const [expectedResponsesError, setExpectedResponsesError] = useState(false);
     const [topic, setTopic] = useState('');
@@ -140,7 +140,7 @@ const SessionPage = () => {
                 )}
 
                 {session.state === SessionState.GATHERING && !hasSubmittedCurrentParticipant && (
-                    <DesireForm onSubmit={handleSubmitDesires} />
+                    <DesireForm onSubmit={handleSubmitDesires} externalError={wsError} />
                 )}
 
                 {session.state === SessionState.GATHERING && hasSubmittedCurrentParticipant && (