chore(forms): improvements to the sign-in and sign-up forms (#6813)

ui/components/auth/oss/auth-form.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { 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";
@@ -11,7 +11,12 @@ import { NotificationIcon, ProwlerExtended } from "@/components/icons";
 import { ThemeSwitch } from "@/components/ThemeSwitch";
 import { useToast } from "@/components/ui";
 import { CustomButton, CustomInput } from "@/components/ui/custom";
-import { Form } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormMessage,
+} from "@/components/ui/form";
 import { ApiError, authFormSchema } from "@/types";
 
 export const AuthForm = ({
@@ -167,6 +172,7 @@ export const AuthForm = ({
                   />
                 </>
               )}
+
               <CustomInput
                 control={form.control}
                 name="email"
@@ -174,13 +180,17 @@ export const AuthForm = ({
                 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" && (
@@ -213,16 +223,49 @@ export const AuthForm = ({
                       isDisabled={invitationToken !== null && true}
                     />
                   )}
+
+                  {process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true" && (
+                    <FormField
+                      control={form.control}
+                      name="termsAndConditions"
+                      render={({ field }) => (
+                        <>
+                          <FormControl>
+                            <Checkbox
+                              isRequired
+                              className="py-4"
+                              size="sm"
+                              checked={field.value}
+                              onChange={(e) => field.onChange(e.target.checked)}
+                            >
+                              I agree with the&nbsp;
+                              <Link
+                                href="https://prowler.com/terms-of-service/"
+                                size="sm"
+                                target="_blank"
+                              >
+                                Terms of Service
+                              </Link>
+                              &nbsp;of Prowler
+                            </Checkbox>
+                          </FormControl>
+                          <FormMessage className="text-system-error dark:text-system-error" />
+                        </>
+                      )}
+                    />
+                  )}
                 </>
               )}
 
-              {form.formState.errors?.email && (
+              {type === "sign-in" && form.formState.errors?.email && (
                 <div className="flex flex-row items-center gap-2 text-system-error">
                   <NotificationIcon size={16} />
-                  <p className="text-s">No user found</p>
+                  <p className="text-small">Invalid email or password</p>
                 </div>
               )}
 
+              {type === "sign-in" && <Spacer y={2} />}
+
               <CustomButton
                 type="submit"
                 ariaLabel={type === "sign-in" ? "Log In" : "Sign Up"}

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" />
+          )}
         </>
       )}
     />

ui/types/authFormSchema.ts

@@ -24,11 +24,21 @@ export const authFormSchema = (type: string) =>
       invitationToken:
         type === "sign-in" ? z.string().optional() : z.string().optional(),
 
+      termsAndConditions:
+        type === "sign-in" || process.env.NEXT_PUBLIC_IS_CLOUD_ENV !== "true"
+          ? z.boolean().optional()
+          : z.boolean().refine((value) => value === true, {
+              message: "You must accept the terms and conditions.",
+            }),
+
       // 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,