Add age validation and error messages to optional profile form

web/components/optional-profile-form.tsx

@@ -64,6 +64,7 @@ export const OptionalProfileUserForm = (props: {
 
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [lookingRelationship, setLookingRelationship] = useState((profile.pref_relation_styles || []).includes('relationship'))
+  const [ageError, setAgeError] = useState<string | null>(null)
   const router = useRouter()
   const t = useT()
   const [heightFeet, setHeightFeet] = useState<number | undefined>(
@@ -108,7 +109,39 @@ export const OptionalProfileUserForm = (props: {
     fetchChoices('work', locale).then(setWorkChoices)
   }, [db])
 
+  const errorToast = () => {
+    toast.error(
+      t(
+        'profile.optional.error.invalid_fields',
+        'Some fields are incorrect...'
+      )
+    )
+  }
+
   const handleSubmit = async () => {
+    // Validate age before submitting
+    if (profile['age'] !== null && profile['age'] !== undefined) {
+      if (profile['age'] < 18) {
+        setAgeError(
+          t(
+            'profile.optional.age.error_min',
+            'You must be at least 18 years old'
+          )
+        )
+        setIsSubmitting(false)
+        errorToast()
+        return
+      }
+      if (profile['age'] > 100) {
+        setAgeError(
+          t('profile.optional.age.error_max', 'Please enter a valid age')
+        )
+        setIsSubmitting(false)
+        errorToast()
+        return
+      }
+    }
+
     setIsSubmitting(true)
     const {
       // bio: _bio,
@@ -301,8 +334,27 @@ export const OptionalProfileUserForm = (props: {
             value={profile['age'] ?? undefined}
             min={18}
             max={100}
-            onChange={(e) => setProfile('age', e.target.value ? Number(e.target.value) : null)}
+            error={!!ageError}
+            onChange={(e) => {
+              const value = e.target.value ? Number(e.target.value) : null
+              if (value !== null && value < 18) {
+                setAgeError(
+                  t(
+                    'profile.optional.age.error_min',
+                    'You must be at least 18 years old'
+                  )
+                )
+              } else if (value !== null && value > 100) {
+                setAgeError(
+                  t('profile.optional.age.error_max', 'Please enter a valid age')
+                )
+              } else {
+                setAgeError(null)
+              }
+              setProfile('age', value)
+            }}
           />
+          {ageError && <p className="text-error text-sm mt-1">{ageError}</p>}
         </Col>
 
         <Col className={clsx(colClassName)}>

web/messages/de.json

@@ -404,6 +404,9 @@
   "profile.age_exact": "genau {min} Jahre",
   "profile.age_older_than": "älter als {min} Jahre",
   "profile.age_younger_than": "jünger als {max} Jahre",
+  "profile.optional.error.invalid_fields": "Einige Felder sind nicht korrekt...",
+  "profile.optional.age.error_min": "Du musst mindestens 18 Jahre alt sein",
+  "profile.optional.age.error_max": "Bitte gib ein gültiges Alter ein",
   "profile.at": "in",
   "profile.basics.bio": "Biografie",
   "profile.basics.display_name": "Anzeigename",

web/messages/fr.json

@@ -404,6 +404,9 @@
   "profile.age_exact": "exactement {min} ans",
   "profile.age_older_than": "plus de {min} ans",
   "profile.age_younger_than": "moins de {max} ans",
+  "profile.optional.error.invalid_fields": "Certains champs sont incorrects...",
+  "profile.optional.age.error_min": "Vous devez avoir au moins 18 ans",
+  "profile.optional.age.error_max": "Veuillez entrer un âge valide",
   "profile.at": "à",
   "profile.basics.bio": "Biographie",
   "profile.basics.display_name": "Nom d'affichage",

web/pages/signup.tsx

@@ -14,6 +14,7 @@ import {removeNullOrUndefinedProps} from 'common/util/object'
 import {useProfileByUserId} from 'web/hooks/use-profile'
 import {ProfileWithoutUser} from 'common/profiles/profile'
 import {useLocale} from 'web/lib/locale'
+import {Toaster} from "react-hot-toast";
 
 export default function SignupPage() {
   const [step, setStep] = useState(0)
@@ -99,6 +100,10 @@ export default function SignupPage() {
 
   return (
     <Col className="items-center">
+      <Toaster
+        position={'top-center'}
+        containerClassName="!bottom-[70px]"
+      />
       {!user ? (
         <CompassLoadingIndicator/>
       ) : (