'Afraid to Ask' implemented

frontend/src/components/DesireForm.tsx

@@ -2,13 +2,14 @@ import React, { useState } from 'react';
 import { TextField, Button, Box, Typography } from '@mui/material';
 
 interface DesireFormProps {
-    onSubmit: (desires: { wants: string[], accepts: string[], noGoes: string[] }) => void;
+    onSubmit: (desires: { wants: string[], accepts: string[], noGoes: string[], afraidToAsk: string }) => void;
 }
 
 const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
     const [wants, setWants] = useState('');
     const [accepts, setAccepts] = useState('');
     const [noGoes, setNoGoes] = useState('');
+    const [afraidToAsk, setAfraidToAsk] = useState('');
 
     const handleSubmit = (event: React.FormEvent) => {
         event.preventDefault();
@@ -17,7 +18,7 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
         const parsedNoGoes = noGoes.split('\n').map(s => s.trim()).filter(s => s);
 
         // FR-020: The system MUST require a user to enter at least one desire in at least one of the three categories
-        if (parsedWants.length === 0 && parsedAccepts.length === 0 && parsedNoGoes.length === 0) {
+        if (parsedWants.length === 0 && parsedAccepts.length === 0 && parsedNoGoes.length === 0 && afraidToAsk.length === 0) {
             alert('Please enter at least one desire in any category.');
             return;
         }
@@ -34,6 +35,7 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
             wants: parsedWants,
             accepts: parsedAccepts,
             noGoes: parsedNoGoes,
+            afraidToAsk: afraidToAsk,
         });
     };
 
@@ -51,6 +53,18 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
                 helperText={`Enter items you want, one per line. Max 500 characters per item. ${wants.length}/500`}
             />
 
+            <Typography variant="h6" gutterBottom sx={{ mt: 4 }}>Afraid to Ask (Private)</Typography>
+            <TextField
+                multiline
+                rows={4}
+                fullWidth
+                value={afraidToAsk}
+                onChange={(e) => setAfraidToAsk(e.target.value)}
+                margin="normal"
+                inputProps={{ maxLength: 500 }}
+                helperText={`Enter sensitive ideas privately. Max 500 characters. ${afraidToAsk.length}/500`}
+            />
+
             <Typography variant="h6" gutterBottom sx={{ mt: 4 }}>What You Accept</Typography>
             <TextField
                 multiline