Fixed a bug where users inputed 000 during signup would not be able t…

src/app/(frontend)/signup/_components/SignupForm.tsx

@@ -132,11 +132,14 @@ export default function SignupForm({ email, token }: SignupFormProps) {
                                     placeholder="Enter Here"
                                     {...register('email')}
                                     error={errors.email}
-                                    className={"w-full placeholder:text-gray " + (!!email ? 'bg-primary-grey-light' : '')}
+                                    className={
+                                        'w-full placeholder:text-gray ' +
+                                        (!!email ? 'bg-primary-grey-light' : '')
+                                    }
                                     required={true}
                                     readOnly={!!email}
                                 />
-                                <div className="md:flex md:justify-between">
+                                <div className="md:flex md:justify-between gap-x-15">
                                     <FormSelect
                                         label="Year of Study"
                                         placeholder="Choose Dropdown"
@@ -152,13 +155,13 @@ export default function SignupForm({ email, token }: SignupFormProps) {
                                         required={true}
                                     />
                                     <FormInput
-                                        label="UPI"
-                                        placeholder="Enter your UPI"
+                                        label="UoA UPI or AUT Login"
+                                        placeholder="UPI/Login"
                                         {...register('upi')}
                                         error={errors.upi}
                                         className="w-full placeholder:text-gray"
                                         showTooltip={true}
-                                        tooltip='The characters before the @ in your UoA email address or "000" if you are from AUT'
+                                        tooltip="For example, erat123(UoA) and erat1234(AUT) otherwise leave blank"
                                     />
                                 </div>
 

src/components/ui/FormInput.tsx

@@ -15,7 +15,10 @@ interface FormInputProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 const FormInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, FormInputProps>(
-    ({ label, placeholder, error, className, tooltip, showTooltip, required, textarea, ...rest }, ref) => {
+    (
+        { label, placeholder, error, className, tooltip, showTooltip, required, textarea, ...rest },
+        ref,
+    ) => {
         const [isHovered, setIsHovered] = useState(false);
         return (
             <div className="mb-2">
@@ -77,8 +80,8 @@ const FormInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, FormInputPr
 
                 <p
                     className={cn(
-                        'px-3 transition-all duration-200 h-5',
-                        error ? 'text-red-500 visible' : 'invisible',
+                        'px-3 mt-1 text-xs leading-4 break-words min-h-4',
+                        error ? 'text-red-500' : 'invisible',
                     )}
                 >
                     {error?.message}

src/components/ui/FormSelect.tsx

@@ -79,8 +79,8 @@ const FormSelect = forwardRef<HTMLSelectElement, FormSelectProps>(
                 </select>
                 <p
                     className={cn(
-                        'px-3 transition-all duration-200 h-5',
-                        error ? 'text-red-500 visible' : 'invisible',
+                        'px-3 mt-1 text-xs leading-4 break-words min-h-4',
+                        error ? 'text-red-500' : 'invisible',
                     )}
                 >
                     {error?.message}

src/lib/zod/schema/signupInput.ts

@@ -1,30 +1,47 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const signupSchema = z.object({
     timestamp: z.date(),
-    firstName: z.string().min(1, "First name is required").max(50, "First name must be less than 50 characters"),
-    lastName: z.string().min(1, "Last name is required").max(50, "Last name must be less than 50 characters"),
-    gender: z.enum(["male", "female", "other", "prefer not to say"], {
+    firstName: z
+        .string()
+        .min(1, 'First name is required')
+        .max(50, 'First name must be less than 50 characters'),
+    lastName: z
+        .string()
+        .min(1, 'Last name is required')
+        .max(50, 'Last name must be less than 50 characters'),
+    gender: z.enum(['male', 'female', 'other', 'prefer not to say'], {
         // This is done so that the error message shown when an option is not selected is more user-friendly
         // instead of the default "Invalid enum value". This is because the placeholder option is not a valid enum value,
         // but i still want to show it as an option in the select dropdown to explain what the field is for.
         // If a label is added above the select dropdown, then this can be removed.
-        errorMap: () => ({ message: "Please select a valid gender option" }),
+        errorMap: () => ({ message: 'Please select a valid gender option' }),
     }),
-    email: z.string().email("Invalid email address"),
-    studentID: z.string().regex(/^\d{9}$/, "Student ID must be a 9-digit number").optional().or(z.literal("")),
-    upi: z.string().regex(/^[a-z]{3,4}\d{3}$/, "UPI must be 3 or 4 lowercase letters followed by 3 digits").optional().or(z.literal("")),
-    yearOfStudy: z.enum(["1st Year", "2nd Year", "3rd Year", "4th Year+"], {
-        errorMap: () => ({ message: "Please select a valid year of study" }),
+    email: z.string().email('Invalid email address'),
+    studentID: z
+        .string()
+        .regex(/^\d{9}$/, 'Student ID must be a 9-digit number')
+        .optional()
+        .or(z.literal('')),
+    upi: z
+        .string()
+        .regex(/^([A-Za-z]{3,4}\d{3,4})?$/, 'UPI/AUT Network must be 3-4 letters + 3-4 digits')
+        .optional(),
+    yearOfStudy: z.enum(['1st Year', '2nd Year', '3rd Year', '4th Year+'], {
+        errorMap: () => ({ message: 'Please select year of study' }),
     }),
-    ethnicity: z.string().min(1, "Ethnicity is required"),
+    ethnicity: z.string().min(1, 'Ethnicity is required'),
     convincedByCommitteeMember: z.string().optional(),
-    membershipCardNumber: z.string().regex(/^\d+$/, "Membership card number must be an integer").optional().or(z.literal("")),
+    membershipCardNumber: z
+        .string()
+        .regex(/^\d+$/, 'Membership card number must be an integer')
+        .optional()
+        .or(z.literal('')),
     membershipPayment: z.string().optional(),
     paymentScreenshotLink: z.string().optional(),
     referrerName: z.string().optional(),
     notes: z.string().optional(),
     token: z.string().optional(),
 });
 
-export type SignupInput = z.infer<typeof signupSchema>;
+export type SignupInput = z.infer<typeof signupSchema>;