@@ -19,7 +19,7 @@ const CATEGORY_ICONS = {
1919/**
2020 * Preference form for creating/editing preference profiles
2121 */
22- const PreferenceForm = ( { t, formData, setFormData, editingProfile, onSubmit, onClose } ) => {
22+ const PreferenceForm = ( { t, formData, setFormData, editingProfile, onSubmit, onClose, showError } ) => {
2323 const toggleCategory = ( category ) => {
2424 setFormData ( prev => {
2525 const categories = prev . categories || [ ] ;
@@ -32,6 +32,24 @@ const PreferenceForm = ({ t, formData, setFormData, editingProfile, onSubmit, on
3232 } ) ;
3333 } ;
3434
35+ const handleSubmit = ( e ) => {
36+ e . preventDefault ( ) ;
37+
38+ // Validate name
39+ if ( ! formData . name || ! formData . name . trim ( ) ) {
40+ showError ( t ( 'profileNameRequired' ) ) ;
41+ return ;
42+ }
43+
44+ // Validate categories
45+ if ( ! formData . categories || formData . categories . length === 0 ) {
46+ showError ( t ( 'categoryMinOne' ) ) ;
47+ return ;
48+ }
49+
50+ onSubmit ( e ) ;
51+ } ;
52+
3553 return (
3654 < div className = "preference-form animate-fadeInUp" >
3755 < div className = "form-header" >
@@ -41,18 +59,16 @@ const PreferenceForm = ({ t, formData, setFormData, editingProfile, onSubmit, on
4159 </ button >
4260 </ div >
4361
44- < form onSubmit = { onSubmit } >
62+ < form onSubmit = { handleSubmit } >
4563 < div className = "form-group" >
4664 < label className = "form-label" > { t ( 'profileName' ) } </ label >
4765 < input
4866 type = "text"
4967 value = { formData . name }
5068 onChange = { ( e ) => setFormData ( { ...formData , name : e . target . value } ) }
5169 className = "form-input"
52- placeholder = "e.g., Weekend Getaway"
70+ placeholder = { t ( 'profileNamePlaceholder' ) }
5371 required
54- pattern = ".*\S+.*"
55- title = "Profile name cannot be empty or contain only whitespace"
5672 />
5773 </ div >
5874
@@ -67,7 +83,7 @@ const PreferenceForm = ({ t, formData, setFormData, editingProfile, onSubmit, on
6783 onClick = { ( ) => toggleCategory ( cat ) }
6884 >
6985 < span className = "category-icon" > { CATEGORY_ICONS [ cat ] } </ span >
70- < span className = "category-name" > { cat } </ span >
86+ < span className = "category-name" > { t ( cat ) } </ span >
7187 </ button >
7288 ) ) }
7389 </ div >
@@ -88,3 +104,4 @@ const PreferenceForm = ({ t, formData, setFormData, editingProfile, onSubmit, on
88104
89105export { PreferenceForm , CATEGORY_ICONS } ;
90106export default PreferenceForm ;
107+
0 commit comments