Skip to content

Commit

Permalink
register page design and validation completed
Browse files Browse the repository at this point in the history
  • Loading branch information
sinanptm committed Aug 16, 2024
1 parent 5e43b81 commit fe20773
Show file tree
Hide file tree
Showing 6 changed files with 176 additions and 18 deletions.
34 changes: 29 additions & 5 deletions client/components/CustomFormField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,18 @@ import PhoneInput from "react-phone-number-input";
import ReactDatePicker from "react-datepicker";
import { Select } from "@radix-ui/react-select";
import { SelectContent, SelectTrigger, SelectValue } from "./ui/select";
import { Checkbox } from "./ui/checkbox";

const RenderField = ({ field, props }: { field: any; props: CustomProps }) => {
const { fieldType, iconSrc, iconAlt, placeholder, renderSkeleton } = props;
const {
fieldType,
iconSrc,
iconAlt,
placeholder,
renderSkeleton,
label,
name,
} = props;

switch (fieldType) {
case FormFieldType.INPUT:
Expand Down Expand Up @@ -80,8 +89,8 @@ const RenderField = ({ field, props }: { field: any; props: CustomProps }) => {
</Select>
</FormControl>
);
case FormFieldType.PHONE_INPUT:

case FormFieldType.PHONE_INPUT:
return (
<FormControl>
<PhoneInput
Expand Down Expand Up @@ -109,9 +118,24 @@ const RenderField = ({ field, props }: { field: any; props: CustomProps }) => {
</div>
);

case FormFieldType.SKELETON:
return renderSkeleton ? renderSkeleton(field) : null;
case FormFieldType.SKELETON:
return renderSkeleton ? renderSkeleton(field) : null;

case FormFieldType.CHECKBOX:
return (
<FormControl>
<div className="flex items-center gap-4">
<Checkbox
id={name}
checked={field.value}
onChange={field.onChange}
/>
<label htmlFor={name} className="checkbox-label">
{label}
</label>
</div>
</FormControl>
);
default:
return null;
}
Expand Down
33 changes: 28 additions & 5 deletions client/components/forms/RegistrationForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { z } from "zod";
import { Form, FormControl } from "@/components/ui/form";
import CustomFormField from "../CustomFormField";
import SubmitButton from "../SubmitButton";
import { loginFormValidation } from "@/lib/validation";
import { registerFormValidation } from "@/lib/validation";
// import { useLoginMutation } from "@/lib/features/api/authApi";
import { FormFieldType } from "@/types/fromTypes";
import Link from "next/link";
Expand All @@ -20,15 +20,15 @@ import Image from "next/image";
const RegistrationForm = () => {
const [isLoading, setIsLoading] = useState<boolean>(false);
// const [login] = useLoginMutation();
const form = useForm<z.infer<typeof loginFormValidation>>({
resolver: zodResolver(loginFormValidation),
const form = useForm<z.infer<typeof registerFormValidation>>({
resolver: zodResolver(registerFormValidation),
defaultValues: {
phone: "",
password: "",
},
});

const onSubmit = async (values: z.infer<typeof loginFormValidation>) => {
const onSubmit = async (values: z.infer<typeof registerFormValidation>) => {
setIsLoading(true);
setTimeout(() => {
console.log("done");
Expand Down Expand Up @@ -102,7 +102,7 @@ const RegistrationForm = () => {
fieldType={FormFieldType.DATE_PICKER}
control={form.control}
name="birthDate"
label="Date of birth"
label="Date of birth *"
/>

<CustomFormField
Expand Down Expand Up @@ -177,7 +177,30 @@ const RegistrationForm = () => {
label="Confirm Password"
placeholder="Re-enter your password"
/>
<section className="mb-12 space-y-4">
<div className="mb-9 space-y-1">
<h2 className="sub-header">Consent and Privacy</h2>
</div>
</section>

<CustomFormField
control={form.control}
fieldType={FormFieldType.CHECKBOX}
name="concent"
label="I consent to receive treatment for my health condition."
/>
<CustomFormField
control={form.control}
fieldType={FormFieldType.CHECKBOX}
name="disclosureConsent"
label="I consent to the use and disclosure of my health information for treatment purposes."
/>
<CustomFormField
control={form.control}
fieldType={FormFieldType.CHECKBOX}
name="privacyPolicy"
label="I acknowledge that I have reviewed and agree to the privacy policy."
/>
<SubmitButton isLoading={isLoading}>Sign In</SubmitButton>
</form>
</Form>
Expand Down
30 changes: 30 additions & 0 deletions client/components/ui/checkbox.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"

const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
>
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
66 changes: 58 additions & 8 deletions client/lib/validation.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,63 @@
import { BloodTypes, GenderOptions } from "@/constants";
import { z } from "zod";

export const loginFormValidation = z.object({
phone: z.string().refine(phone => /^\+?[1-9]\d{1,14}$/.test(phone), "Invalid phone number"),
password: z.string().min(4, "Password must be at least 6 characters long"),
// password: z.string()
// .min(8, "Password must be at least 8 characters long")
// .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
// .regex(/[a-z]/, "Password must contain at least one lowercase letter")
// .regex(/[0-9]/, "Password must contain at least one number")
// .regex(/[@$!%*?&#]/, "Password must contain at least one special character"),
phone: z
.string()
.refine(
(phone) => /^\+?[1-9]\d{1,14}$/.test(phone),
"Invalid phone number"
),
password: z.string().min(4, "Password must be at least 4 characters long"),
});

export const registerFormValidation = z
.object({
name: z
.string()
.min(1, "Full Name is required")
.nonempty("Full Name cannot be empty"),
email: z
.string()
.email("Invalid email address")
.min(1, "Email address is required"),
phone: z
.string()
.min(10, "Phone number must be at least 10 digits")
.max(15, "Phone number must be at most 15 digits"),
birthDate: z.string().min(1, "Date of birth is required"),
gender: z.enum(["Male", "Female", "Other"]),
bloodType: z.enum(["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"]),
disease: z.string().min(1, "Primary Disease is required"),
password: z.string().min(4, "Password must be at least 4 characters long"),
// password: z.string()
// .min(8, "Password must be at least 8 characters long")
// .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
// .regex(/[a-z]/, "Password must contain at least one lowercase letter")
// .regex(/[0-9]/, "Password must contain at least one number")
// .regex(/[@$!%*?&#]/, "Password must contain at least one special character"),
confirmPassword: z
.string()
.min(4, "Password must be at least 4 characters long"),
privacyPolicy: z
.boolean()
.refine(
(val) => val === true,
"You must agree to the Privacy Policy"
),
concent: z
.boolean()
.refine((val) => val === true, "You must Consent to Treatment"),
disclosureConsent: z
.boolean()
.refine((val) => val === true, "You must Consent to Privacy Policy"),
})
.superRefine(({ confirmPassword, password }, ctx) => {
if (confirmPassword !== password) {
ctx.addIssue({
code: "custom",
message: "The Password did not match",
path: ["confirmPassword"],
});
}
});
30 changes: 30 additions & 0 deletions client/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
},
"dependencies": {
"@hookform/resolvers": "^3.9.0",
"@radix-ui/react-checkbox": "^1.1.1",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-radio-group": "^1.2.0",
"@radix-ui/react-select": "^2.1.1",
Expand Down

0 comments on commit fe20773

Please sign in to comment.