feat: update authentication layout and forms for improved user experience; add new dependencies and enhance styling

components/auth/login-form.tsx

@@ -15,7 +15,7 @@ export default function LoginForm() {
 
 	return (
 		<form
-			className="overflow-clip title-bg dark:border-2 w-full max-w-xs mx-auto rounded-lg shadow border mt-4"
+			className="overflow-clip title-bg w-full max-w-xs mx-auto rounded-lg shadow border-2 border-sarLinkOrange/50 dark:border-sarLinkOrange/50 mt-4"
 			action={formAction}
 		>
 			<div className="py-4 px-4">

components/auth/signup-form.tsx

@@ -21,6 +21,7 @@ import {
 import type { ApiResponse, Atoll } from "@/lib/backend-types";
 import { getAtolls } from "@/queries/islands";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import Image from "next/image";
 
 export default function SignUpForm() {
 	const { data: atolls } = useQuery<ApiResponse<Atoll>>({
@@ -58,297 +59,322 @@ export default function SignUpForm() {
 					<Link href="login" className="underline">
 						login
 					</Link>
-				</div>
+				</div>-
 			</>
 		);
 	}
 	return (
-		<form
-			action={action}
-			className="max-w-xs mt-2 w-full bg-white dark:bg-transparent dark:border-2 shadow rounded-lg mx-auto"
-		>
-			<div className="py-2 px-4 my-2 space-y-2">
-				<div>
-					<label htmlFor="name" className="text-sm">
-						Name
-					</label>
+		<div className="grid grid-cols-1 lg:grid-cols-2 w-full rounded h-screen overflow-y-scroll relative items-center justify-center">
+			<div className="absolute inset-0 title-bg mask-dir-to-r mask-from-0 mask-via-100 mask-to-100 mask-linear" />
+			<div className="hidden lg:flex relative overflow-hidden dark:text-white text-gray-900">
+				<div className="relative z-10 flex flex-col justify-center items-center p-12 w-full">
+					<div className="max-w-md text-center">
+						{/* Logo */}
+						<div className="mb-8">
+							<div className="w-20 h-20 bg-transparent backdrop-blur-sm rounded-2xl flex items-center justify-center mx-auto mb-4">
+								<Image src="/logo.png" alt="Company Logo" height={1080} width={1080} className="w-12 h-12 text-white" />
+							</div>
+							<h3 className="text-xl font-semibold dark:text-orange-100">SAR Link Portal</h3>
+						</div>
 
-					<Input
-						className={cn(
-							"text-base",
-							actionState?.errors?.fieldErrors.name &&
-								"border-2 border-red-500",
-						)}
-						name="name"
-						type="text"
-						disabled={isPending}
-						defaultValue={(actionState?.payload?.get("name") || "") as string}
-						placeholder="Full Name"
-					/>
-					{actionState?.errors?.fieldErrors.name && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.errors?.fieldErrors.name}
-						</span>
-					)}
+						<h1 className="text-4xl font-bold mb-6">Welcome to Our Platform</h1>
+						<p className="text-xl mb-8 dark:text-orange-100">
+							Pay for your devices and track your bills.
+						</p>
+					</div>
 				</div>
-				<div>
-					<label htmlFor="id_card" className="text-sm">
-						ID Card
-					</label>
-					<Input
-						name="id_card"
-						type="text"
-						maxLength={7}
-						disabled={isPending}
-						defaultValue={
-							(actionState?.payload?.get("id_card") || "") as string
-						}
-						className={cn(
-							"text-base",
-							actionState?.errors?.fieldErrors?.id_card &&
-								"border-2 border-red-500",
-						)}
-						placeholder="ID Card"
-					/>
-					{actionState?.errors?.fieldErrors?.id_card?.[0] && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.errors.fieldErrors.id_card[0]}
-						</span>
-					)}
-					{actionState?.db_error === "id_card" && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.message}
-						</span>
-					)}
-				</div>
-				<div>
-					<div>
-						<label htmlFor="atoll" className="text-sm">
-							Atoll
-						</label>
-						<Select
-							disabled={isPending}
-							onValueChange={(v) => {
-								console.log({ v });
-								setAtoll(
-									atolls?.data.find((atoll) => atoll.id === Number.parseInt(v)),
-								);
-							}}
-							name="atoll_id"
-							value={atoll?.id?.toString() ?? ""}
-						>
-							<SelectTrigger className="w-full">
-								<SelectValue placeholder="Select atoll" />
-							</SelectTrigger>
-							<SelectContent>
-								<SelectGroup>
-									<SelectLabel>Atolls</SelectLabel>
-									{atolls?.data.map((atoll) => (
-										<SelectItem key={atoll.id} value={atoll.id.toString()}>
-											{atoll.name}
-										</SelectItem>
-									))}
-								</SelectGroup>
-							</SelectContent>
-							{actionState?.errors?.fieldErrors?.atoll_id && (
+				{/* Decorative elements */}
+			</div>
+			<form
+				action={action}
+				className="flex flex-col justify-center items-center p-6 lg:p-12 space-y-4 w-full "
+			>
+				<div className="max-w-sm shadow-2xl shadow-sarLinkOrange/20 h-fit my-auto mt-2 w-full bg-white dark:bg-transparent rounded-lg m-auto backdrop-blur-lg self-center border-2 border-sarLinkOrange/10 dark:border-sarLinkOrange/50">
+					<div className="py-2 px-4 my-2 space-y-2">
+						<div className="space-y-2">
+							<label htmlFor="name" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+								Full Name
+							</label>
+
+							<Input
+								className={cn(
+									"text-base",
+									actionState?.errors?.fieldErrors.name &&
+									"border-2 border-red-500",
+								)}
+								name="name"
+								type="text"
+								disabled={isPending}
+								defaultValue={(actionState?.payload?.get("name") || "") as string}
+								placeholder="Full Name"
+							/>
+							{actionState?.errors?.fieldErrors.name && (
 								<span className="text-sm inline-block text-red-500">
-									{actionState?.errors?.fieldErrors?.atoll_id}
+									{actionState?.errors?.fieldErrors.name}
 								</span>
 							)}
-						</Select>
-					</div>
-					<div>
-						<label htmlFor="island" className="text-sm">
-							Island
-						</label>
-						<Select disabled={isPending} name="island_id">
-							<SelectTrigger className="w-full">
-								<SelectValue placeholder="Select island" />
-							</SelectTrigger>
-							<SelectContent>
-								<SelectGroup>
-									<SelectLabel>Islands</SelectLabel>
-									{atoll?.islands?.map((island) => (
-										<SelectItem key={island.id} value={island.id.toString()}>
-											{island.name}
-										</SelectItem>
-									))}
-								</SelectGroup>
-							</SelectContent>
-							{actionState?.errors?.fieldErrors?.island_id && (
+						</div>
+						<div className="space-y-2">
+							<label htmlFor="id_card" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+								ID Card
+							</label>
+							<Input
+								name="id_card"
+								type="text"
+								maxLength={7}
+								disabled={isPending}
+								defaultValue={
+									(actionState?.payload?.get("id_card") || "") as string
+								}
+								className={cn(
+									"text-base",
+									actionState?.errors?.fieldErrors?.id_card &&
+									"border-2 border-red-500",
+								)}
+								placeholder="ID Card"
+							/>
+							{actionState?.errors?.fieldErrors?.id_card?.[0] && (
 								<span className="text-sm inline-block text-red-500">
-									{actionState?.errors?.fieldErrors?.island_id}
+									{actionState?.errors.fieldErrors.id_card[0]}
 								</span>
 							)}
-						</Select>
+							{actionState?.db_error === "id_card" && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState?.message}
+								</span>
+							)}
+						</div>
+						<div>
+							<div className="space-y-2">
+								<label htmlFor="atoll" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+									Atoll
+								</label>
+								<Select
+									disabled={isPending}
+									onValueChange={(v) => {
+										console.log({ v });
+										setAtoll(
+											atolls?.data.find((atoll) => atoll.id === Number.parseInt(v)),
+										);
+									}}
+									name="atoll_id"
+									value={atoll?.id?.toString() ?? ""}
+								>
+									<SelectTrigger className="w-full">
+										<SelectValue placeholder="Select atoll" />
+									</SelectTrigger>
+									<SelectContent>
+										<SelectGroup>
+											<SelectLabel>Atolls</SelectLabel>
+											{atolls?.data.map((atoll) => (
+												<SelectItem key={atoll.id} value={atoll.id.toString()}>
+													{atoll.name}
+												</SelectItem>
+											))}
+										</SelectGroup>
+									</SelectContent>
+									{actionState?.errors?.fieldErrors?.atoll_id && (
+										<span className="text-sm inline-block text-red-500">
+											{actionState?.errors?.fieldErrors?.atoll_id}
+										</span>
+									)}
+								</Select>
+							</div>
+							<div className="space-y-2">
+								<label htmlFor="island" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+									Island
+								</label>
+								<Select disabled={isPending} name="island_id">
+									<SelectTrigger className="w-full">
+										<SelectValue placeholder="Select island" />
+									</SelectTrigger>
+									<SelectContent>
+										<SelectGroup>
+											<SelectLabel>Islands</SelectLabel>
+											{atoll?.islands?.map((island) => (
+												<SelectItem key={island.id} value={island.id.toString()}>
+													{island.name}
+												</SelectItem>
+											))}
+										</SelectGroup>
+									</SelectContent>
+									{actionState?.errors?.fieldErrors?.island_id && (
+										<span className="text-sm inline-block text-red-500">
+											{actionState?.errors?.fieldErrors?.island_id}
+										</span>
+									)}
+								</Select>
+							</div>
+						</div>
+
+						<div className="space-y-2">
+							<label htmlFor="address" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+								Address
+							</label>
+							<Input
+								className={cn(
+									"text-base",
+									actionState?.errors?.fieldErrors?.address &&
+									"border-2 border-red-500",
+								)}
+								disabled={isPending}
+								name="address"
+								defaultValue={
+									(actionState?.payload?.get("address") || "") as string
+								}
+								type="text"
+								placeholder="Address"
+							/>
+							{actionState?.errors?.fieldErrors?.address && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState?.errors?.fieldErrors?.address}
+								</span>
+							)}
+						</div>
+
+						<div className="space-y-2">
+							<label htmlFor="dob" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+								Date of Birth
+							</label>
+							<Input
+								className={cn(
+									"text-base",
+									actionState?.errors?.fieldErrors?.dob &&
+									"border-2 border-red-500",
+								)}
+								name="dob"
+								disabled={isPending}
+								defaultValue={(actionState?.payload?.get("dob") || "") as string}
+								type="date"
+								placeholder="Date of birth"
+							/>
+							{actionState?.errors?.fieldErrors?.dob && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState?.errors?.fieldErrors?.dob}
+								</span>
+							)}
+							{actionState?.db_error === "dob" && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState?.message}
+								</span>
+							)}
+						</div>
+						<div className="space-y-2">
+							<label htmlFor="accNo" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+								Account Number
+							</label>
+
+							<Input
+								className={cn(
+									"text-base",
+									actionState?.errors?.fieldErrors.accNo &&
+									"border-2 border-red-500",
+								)}
+								name="accNo"
+								type="number"
+								disabled={isPending}
+								defaultValue={(actionState?.payload?.get("accNo") || "") as string}
+								placeholder="Account no"
+							/>
+							{actionState?.errors?.fieldErrors.accNo && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState?.errors?.fieldErrors.accNo}
+								</span>
+							)}
+						</div>
+						<div className="space-y-2">
+							<label htmlFor="phone_number" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+								Phone Number
+							</label>
+							<Input
+								id="phone-number"
+								name="phone_number"
+								maxLength={8}
+								disabled={isPending}
+								className={cn(
+									!phoneNumberFromUrl &&
+									actionState?.errors?.fieldErrors?.phone_number &&
+									"border-2 border-red-500 rounded-md",
+								)}
+								defaultValue={NUMBER_WITHOUT_DASH ?? ""}
+								readOnly={Boolean(phoneNumberFromUrl)}
+								placeholder={phoneNumberFromUrl ?? "Phone number"}
+							/>
+						</div>
+						{actionState?.errors?.fieldErrors?.phone_number?.[0] && (
+							<span className="text-sm inline-block text-red-500">
+								{actionState?.errors.fieldErrors.phone_number[0]}
+							</span>
+						)}
+						{actionState?.db_error === "phone_number" && (
+							<span className="text-sm inline-block text-red-500">
+								{actionState?.message}
+							</span>
+						)}
+						<div className="flex flex-col gap-2 items-start justify-start py-2">
+							<div className="flex gap-2 items-center">
+								<input
+									type="checkbox"
+									defaultChecked={
+										((actionState?.payload?.get("terms") || "") as string) === "on"
+									}
+									name="terms"
+									id="terms"
+								/>
+								<label
+									htmlFor="terms"
+									className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+								>
+									<span>i accept</span>
+									<Link className="ml-1 underline" href="">
+										terms and conditions
+									</Link>
+								</label>
+							</div>
+							{actionState?.errors?.fieldErrors?.terms && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState?.errors?.fieldErrors?.terms}
+								</span>
+							)}
+							<div className="flex gap-2 items-center">
+								<input
+									type="checkbox"
+									defaultChecked={
+										((actionState?.payload?.get("policy") || "") as string) === "on"
+									}
+									name="policy"
+									id="terms"
+								/>
+								<label
+									htmlFor="terms"
+									className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+								>
+									<span>i undertand</span>
+									<Link className="ml-1 underline" href="">
+										the privacy policy
+									</Link>
+								</label>
+							</div>
+							{actionState?.errors?.fieldErrors?.policy && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState?.errors?.fieldErrors?.policy}
+								</span>
+							)}
+						</div>
+						<Button disabled={isPending} className="mt-4 w-full" type="submit">
+							{isPending ? <Loader2 className="animate-spin" /> : "Submit"}
+						</Button>
+					</div>
+					<div className="mb-4 text-center text-sm">
+						Already have an account?{" "}
+						<Link href="signin" className="underline">
+							login
+						</Link>
 					</div>
 				</div>
 
-				<div>
-					<label htmlFor="address" className="text-sm">
-						Address
-					</label>
-					<Input
-						className={cn(
-							"text-base",
-							actionState?.errors?.fieldErrors?.address &&
-								"border-2 border-red-500",
-						)}
-						disabled={isPending}
-						name="address"
-						defaultValue={
-							(actionState?.payload?.get("address") || "") as string
-						}
-						type="text"
-						placeholder="Address"
-					/>
-					{actionState?.errors?.fieldErrors?.address && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.errors?.fieldErrors?.address}
-						</span>
-					)}
-				</div>
+			</form>
+		</div>
 
-				<div>
-					<label htmlFor="dob" className="text-sm">
-						Date of Birth
-					</label>
-					<Input
-						className={cn(
-							"text-base",
-							actionState?.errors?.fieldErrors?.dob &&
-								"border-2 border-red-500",
-						)}
-						name="dob"
-						disabled={isPending}
-						defaultValue={(actionState?.payload?.get("dob") || "") as string}
-						type="date"
-						placeholder="Date of birth"
-					/>
-					{actionState?.errors?.fieldErrors?.dob && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.errors?.fieldErrors?.dob}
-						</span>
-					)}
-					{actionState?.db_error === "dob" && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.message}
-						</span>
-					)}
-				</div>
-				<div>
-					<label htmlFor="accNo" className="text-sm">
-						Account Number
-					</label>
-
-					<Input
-						className={cn(
-							"text-base",
-							actionState?.errors?.fieldErrors.accNo &&
-								"border-2 border-red-500",
-						)}
-						name="accNo"
-						type="number"
-						disabled={isPending}
-						defaultValue={(actionState?.payload?.get("accNo") || "") as string}
-						placeholder="Account no"
-					/>
-					{actionState?.errors?.fieldErrors.accNo && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.errors?.fieldErrors.accNo}
-						</span>
-					)}
-				</div>
-				<div>
-					<label htmlFor="phone_number" className="text-sm">
-						Phone Number
-					</label>
-					<Input
-						id="phone-number"
-						name="phone_number"
-						maxLength={8}
-						disabled={isPending}
-						className={cn(
-							!phoneNumberFromUrl &&
-								actionState?.errors?.fieldErrors?.phone_number &&
-								"border-2 border-red-500 rounded-md",
-						)}
-						defaultValue={NUMBER_WITHOUT_DASH ?? ""}
-						readOnly={Boolean(phoneNumberFromUrl)}
-						placeholder={phoneNumberFromUrl ?? "Phone number"}
-					/>
-				</div>
-				{actionState?.errors?.fieldErrors?.phone_number?.[0] && (
-					<span className="text-sm inline-block text-red-500">
-						{actionState?.errors.fieldErrors.phone_number[0]}
-					</span>
-				)}
-				{actionState?.db_error === "phone_number" && (
-					<span className="text-sm inline-block text-red-500">
-						{actionState?.message}
-					</span>
-				)}
-				<div className="flex flex-col gap-2 items-start justify-start py-2">
-					<div className="flex gap-2 items-center">
-						<input
-							type="checkbox"
-							defaultChecked={
-								((actionState?.payload?.get("terms") || "") as string) === "on"
-							}
-							name="terms"
-							id="terms"
-						/>
-						<label
-							htmlFor="terms"
-							className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-						>
-							<span>i accept</span>
-							<Link className="ml-1 underline" href="">
-								terms and conditions
-							</Link>
-						</label>
-					</div>
-					{actionState?.errors?.fieldErrors?.terms && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.errors?.fieldErrors?.terms}
-						</span>
-					)}
-					<div className="flex gap-2 items-center">
-						<input
-							type="checkbox"
-							defaultChecked={
-								((actionState?.payload?.get("policy") || "") as string) === "on"
-							}
-							name="policy"
-							id="terms"
-						/>
-						<label
-							htmlFor="terms"
-							className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-						>
-							<span>i undertand</span>
-							<Link className="ml-1 underline" href="">
-								the privacy policy
-							</Link>
-						</label>
-					</div>
-					{actionState?.errors?.fieldErrors?.policy && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.errors?.fieldErrors?.policy}
-						</span>
-					)}
-				</div>
-				<Button disabled={isPending} className="mt-4 w-full" type="submit">
-					{isPending ? <Loader2 className="animate-spin" /> : "Submit"}
-				</Button>
-			</div>
-
-			<div className="mb-4 text-center text-sm">
-				Already have an account?{" "}
-				<Link href="signin" className="underline">
-					login
-				</Link>
-			</div>
-		</form>
 	);
 }