diff --git a/components/auth/AuthForm.tsx b/components/auth/AuthForm.tsx index f87458b2c9..599a2a280c 100644 --- a/components/auth/AuthForm.tsx +++ b/components/auth/AuthForm.tsx @@ -2,7 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { Icon } from "@iconify/react"; -import { Button, Checkbox, Divider, Input, Link } from "@nextui-org/react"; +import { Button, Checkbox, Divider, Link } from "@nextui-org/react"; import { useState } from "react"; import { useFormState } from "react-dom"; import { useForm } from "react-hook-form"; @@ -25,24 +25,23 @@ import { AuthButton } from "./AuthButton"; export const AuthForm = ({ type }: { type: string }) => { const [user, setUser] = useState(null); - const [state, dispath] = useFormState(authenticate, undefined); + const formSchema = authFormSchema(type); + // const [state, dispath] = useFormState(authenticate, undefined); - const form = useForm>({ - resolver: zodResolver(authFormSchema), + const form = useForm>({ + resolver: zodResolver(formSchema), defaultValues: { - username: "", + email: "", password: "", }, }); - const onSubmit = (values: z.infer) => { + const onSubmit = (values: z.infer) => { // Do something with the form values // this will be type-safe and validated console.log(values); }; - console.log(state); - return (
{

{type === "sign-in" ? "Sign In" : "Sign Up"}

- {/* Sign UP Form */} - {type === "sign-up" && ( -
- - - - - {/* + + {type === "sign-up" && ( + <> + + + + )} + + + + {type === "sign-in" && ( +
+ + Remember me + + + Forgot password? + +
+ )} + {/* @@ -119,42 +139,40 @@ export const AuthForm = ({ type }: { type: string }) => { type={isConfirmVisible ? "text" : "password"} variant="bordered" /> */} - - I agree with the  - - Terms - -   and  - - Privacy Policy - - - - - - )} - {/* Sign IN Form */} + {type === "sign-up" && ( + ( + <> + + + I agree with the  + + Terms + +   and  + + Privacy Policy + + + + + + )} + /> + )} + + + + {type === "sign-in" && ( <> -
- - -
- - Remember me - - - Forgot password? - -
- -

OR

@@ -184,7 +202,6 @@ export const AuthForm = ({ type }: { type: string }) => {
)} - {type === "sign-in" ? (

Need to create an account?  diff --git a/components/ui/custom/CustomInput.tsx b/components/ui/custom/CustomInput.tsx index 07ea994a46..b1d57a5a29 100644 --- a/components/ui/custom/CustomInput.tsx +++ b/components/ui/custom/CustomInput.tsx @@ -9,18 +9,20 @@ import { z } from "zod"; import { FormControl, FormField, FormMessage } from "@/components/ui/form"; import { authFormSchema } from "@/types"; +const formSchema = authFormSchema("sign-up"); + type CustomInputProps = | { - control: Control>; - name: FieldPath>; - password?: false; + control: Control>; + name: FieldPath>; label: string; type: "text" | "email"; placeholder: string; isRequired?: boolean; + password?: false; } | { - control: Control>; + control: Control>; password: true; name?: never; label?: never; @@ -42,32 +44,28 @@ export const CustomInput = ({ const toggleVisibility = () => setIsVisible(!isVisible); - const inputProps = password - ? { - name: "password", - label: "Password", - type: isVisible ? "text" : "password", - placeholder: "Enter your password", - isRequired: true, - } - : { name, label, type, placeholder, isRequired }; + const inputName = password ? "password" : name!; + const inputLabel = password ? "Password" : label; + const inputType = password ? (isVisible ? "text" : "password") : type; + const inputPlaceholder = password ? "Enter your password" : placeholder; + const inputIsRequired = password ? true : isRequired; return ( >} render={({ field }) => ( <> - ) + ) : null } /> diff --git a/types/auth.ts b/types/auth.ts index f359f53883..2f1676d945 100644 --- a/types/auth.ts +++ b/types/auth.ts @@ -1,12 +1,27 @@ import { z } from "zod"; -export const authFormSchema = z.object({ - username: z - .string() - .min(4, { - message: "Username must be at least 4 characters.", - }) - .max(20), - password: z.string().min(6), - email: z.string().email(), -}); +export const authFormSchema = (type: string) => + z.object({ + // Sign Up + companyName: type === "sign-in" ? z.string().optional() : z.string().min(3), + firstName: + type === "sign-in" + ? z.string().optional() + : z + .string() + .min(3, { + message: "The name must be at least 3 characters.", + }) + .max(20), + termsAndConditions: + type === "sign-in" + ? z.literal(true).optional() + : z.literal(true, { + errorMap: () => ({ + message: "You must accept the terms and conditions.", + }), + }), + // both + email: z.string().email(), + password: z.string().min(6), + });