fix: some tweaks for sign-in and sign-up forms

prowler-cloud · Feb 4, 2025 · e21c973 · e21c973
1 parent eb6c334
commit e21c973
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/ui/components/auth/oss/auth-form.tsx b/ui/components/auth/oss/auth-form.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Checkbox, Link } from "@nextui-org/react";
+import { Checkbox, Link, Spacer } from "@nextui-org/react";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -172,20 +172,25 @@ export const AuthForm = ({
                   />
                 </>
               )}
+
               <CustomInput
                 control={form.control}
                 name="email"
                 type="email"
                 label="Email"
                 placeholder="Enter your email"
                 isInvalid={!!form.formState.errors.email}
+                showFormMessage={type !== "sign-in"}
               />
 
               <CustomInput
                 control={form.control}
                 name="password"
                 password
-                isInvalid={!!form.formState.errors.password}
+                isInvalid={
+                  !!form.formState.errors.password ||
+                  !!form.formState.errors.email
+                }
               />
 
               {/* {type === "sign-in" && (
@@ -259,6 +264,8 @@ export const AuthForm = ({
                 </div>
               )}
 
+              {type === "sign-in" && <Spacer y={2} />}
+
               <CustomButton
                 type="submit"
                 ariaLabel={type === "sign-in" ? "Log In" : "Sign Up"}

diff --git a/ui/components/ui/custom/custom-input.tsx b/ui/components/ui/custom/custom-input.tsx
@@ -23,6 +23,7 @@ interface CustomInputProps<T extends FieldValues> {
   isRequired?: boolean;
   isInvalid?: boolean;
   isDisabled?: boolean;
+  showFormMessage?: boolean;
 }
 
 export const CustomInput = <T extends FieldValues>({
@@ -41,6 +42,7 @@ export const CustomInput = <T extends FieldValues>({
   isRequired = true,
   isInvalid,
   isDisabled = false,
+  showFormMessage = true,
 }: CustomInputProps<T>) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] =
@@ -112,7 +114,9 @@ export const CustomInput = <T extends FieldValues>({
               {...field}
             />
           </FormControl>
-          <FormMessage className="text-system-error dark:text-system-error" />
+          {showFormMessage && (
+            <FormMessage className="text-system-error dark:text-system-error" />
+          )}
         </>
       )}
     />

diff --git a/ui/types/authFormSchema.ts b/ui/types/authFormSchema.ts
@@ -33,9 +33,12 @@ export const authFormSchema = (type: string) =>
 
       // Fields for Sign In and Sign Up
       email: z.string().email(),
-      password: z.string().min(12, {
-        message: "It must contain at least 12 characters.",
-      }),
+      password:
+        type === "sign-in"
+          ? z.string()
+          : z.string().min(12, {
+              message: "It must contain at least 12 characters.",
+            }),
     })
     .refine(
       (data) => type === "sign-in" || data.password === data.confirmPassword,