mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-06-11 22:06:19 +00:00
i701
406733b360
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 5m39s
381 lines
12 KiB
TypeScript
381 lines
12 KiB
TypeScript
"use client";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import Link from "next/link";
|
|
|
|
import { signup } from "@/actions/auth-actions";
|
|
import { cn } from "@/lib/utils";
|
|
import { Loader2 } from "lucide-react";
|
|
import { useSearchParams } from "next/navigation";
|
|
import * as React from "react";
|
|
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
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>>({
|
|
queryKey: ["ATOLLS"],
|
|
queryFn: () => getAtolls(),
|
|
placeholderData: keepPreviousData,
|
|
staleTime: 1,
|
|
});
|
|
|
|
const [atoll, setAtoll] = React.useState<Atoll>();
|
|
|
|
const [actionState, action, isPending] = React.useActionState(signup, {
|
|
message: "",
|
|
db_error: "",
|
|
errors: undefined,
|
|
payload: new FormData(),
|
|
});
|
|
|
|
React.useEffect(() => {
|
|
console.log(atoll);
|
|
}, [atoll]);
|
|
|
|
const params = useSearchParams();
|
|
const phoneNumberFromUrl = params.get("phone_number");
|
|
const NUMBER_WITHOUT_DASH = phoneNumberFromUrl?.split("-").join("");
|
|
|
|
if (actionState?.db_error === "invalidPersonValidation") {
|
|
return (
|
|
<>
|
|
<div className="h-24 w-72 text-center text-green-500 p-4 flex my-4 flex-col items-center justify-center border dark:title-bg bg-white dark:bg-black rounded-lg">
|
|
{actionState.message}
|
|
</div>
|
|
<div className="mb-4 text-center text-sm">
|
|
Go to{" "}
|
|
<Link href="login" className="underline">
|
|
login
|
|
</Link>
|
|
</div>-
|
|
</>
|
|
);
|
|
}
|
|
return (
|
|
<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>
|
|
|
|
<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>
|
|
{/* 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.name}
|
|
</span>
|
|
)}
|
|
</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.id_card[0]}
|
|
</span>
|
|
)}
|
|
{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>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
);
|
|
}
|