hotfix: validation messaging when update user profile details

Author: Logannford

src/app/(app)/settings/profile/page.tsx

@@ -7,7 +7,13 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { Button } from '@/components/ui/button';
-import { Form, FormControl, FormField, FormItem } from '@/components/ui/form';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form';
 import { InputWithLabel } from '@/components/ui/input-label';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
@@ -207,6 +213,7 @@ export default function SettingsProfilePage() {
                     </p>
                   </div>
                 </div>
+                <FormMessage />
               </FormItem>
             )}
           />
@@ -226,6 +233,7 @@ export default function SettingsProfilePage() {
                     value={field.value || ''}
                   />
                 </FormControl>
+                <FormMessage />
               </FormItem>
             )}
           />
@@ -246,6 +254,7 @@ export default function SettingsProfilePage() {
                     value={field.value || ''}
                   />
                 </FormControl>
+                <FormMessage />
               </FormItem>
             )}
           />
@@ -266,6 +275,7 @@ export default function SettingsProfilePage() {
                     value={field.value || ''}
                   />
                 </FormControl>
+                <FormMessage />
               </FormItem>
             )}
           />
@@ -297,6 +307,7 @@ export default function SettingsProfilePage() {
                     </Tooltip>
                   </TooltipProvider>
                 </FormControl>
+                <FormMessage />
               </FormItem>
             )}
           />
@@ -329,6 +340,7 @@ export default function SettingsProfilePage() {
                     </Tooltip>
                   </TooltipProvider>
                 </FormControl>
+                <FormMessage />
               </FormItem>
             )}
           />
@@ -363,6 +375,7 @@ export default function SettingsProfilePage() {
                     />
                   </div>
                 </FormControl>
+                <FormMessage />
               </FormItem>
             )}
           />

src/components/app/onboarding/onboarding-step-one.tsx

@@ -13,7 +13,13 @@ import {
 } from '@/components/ui/tooltip';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
-import { Form, FormField, FormItem, FormControl } from '@/components/ui/form';
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormControl,
+  FormMessage,
+} from '@/components/ui/form';
 import { useOnboardingContext } from './onboarding-context';
 import { onboardingStepOneSchema } from '@/lib/zod/schemas/onboarding/step-one';
 import type { UpdatableUserFields } from '@/types/User';
@@ -95,6 +101,9 @@ export default function OnboardingStepOne() {
                         value={field.value ?? ''}
                       />
                     </FormControl>
+                    <FormMessage className="mt-0.5 text-start">
+                      {form.formState?.errors?.username?.message}
+                    </FormMessage>
                   </FormItem>
                 )}
               />
@@ -127,6 +136,9 @@ export default function OnboardingStepOne() {
                               className="bg-black-50"
                             />
                           </FormControl>
+                          <FormMessage className="mt-0.5 text-start">
+                            {form.formState?.errors?.showTimeTaken?.message}
+                          </FormMessage>
                         </FormItem>
                       )}
                     />
@@ -167,6 +179,12 @@ export default function OnboardingStepOne() {
                               disabled
                             />
                           </FormControl>
+                          <FormMessage className="mt-0.5 text-start">
+                            {
+                              form.formState?.errors?.sendPushNotifications
+                                ?.message
+                            }
+                          </FormMessage>
                         </FormItem>
                       )}
                     />

src/lib/zod/schemas/onboarding/step-one.ts

@@ -2,7 +2,7 @@ import { z } from 'zod';
 
 // step one of the onboarding only requires a username.
 export const onboardingStepOneSchema = z.object({
-  username: z.string().min(3).max(20),
+  username: z.string().min(2).max(20),
   showTimeTaken: z.boolean().default(false),
-  sendPushNotifications: z.boolean().default(false)
+  sendPushNotifications: z.boolean().default(false),
 });

src/lib/zod/schemas/user-details-schema.ts

@@ -3,7 +3,7 @@ import { z } from 'zod';
 // Updated schema to properly handle optional fields
 export const userDetailsSchema = z
   .object({
-    username: z.string().min(3),
+    username: z.string().min(2),
     firstName: z.string().optional(),
     lastName: z.string().optional(),
     showTimeTaken: z.boolean().optional(),