mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-01 15:23:58 +00:00
feat: update authentication layout and forms for improved user experience; add new dependencies and enhance styling
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 5m39s
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 5m39s
This commit is contained in:
@ -1,22 +1,10 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function AuthLayout({
|
||||
children,
|
||||
}: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="bg-gray-100 dark:bg-black w-full h-screen flex items-center justify-center font-sans">
|
||||
<div className="flex flex-col items-center justify-center w-full h-full ">
|
||||
<Image alt="Sar Link Logo" src="/logo.png" width={100} height={100} />
|
||||
<div className="mt-4 flex flex-col items-center justify-center">
|
||||
<h4 className="font-bold text-xl text-sarLinkOrange dark:text-gray-400">
|
||||
SAR Link Portal
|
||||
</h4>
|
||||
<p className="text-gray-400">
|
||||
Pay for your devices and track your bills.
|
||||
</p>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import { authOptions } from "@/app/auth";
|
||||
import VerifyRegistrationOTPForm from "@/components/auth/verify-registration-otp-form";
|
||||
import ClientErrorMessage from "@/components/client-error-message";
|
||||
import { checkTempIdOrPhone } from "@/queries/authentication";
|
||||
import { tryCatch } from "@/utils/tryCatch";
|
||||
import { getServerSession } from "next-auth";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default async function VerifyRegistrationOTP({
|
||||
@ -9,6 +11,11 @@ export default async function VerifyRegistrationOTP({
|
||||
}: {
|
||||
searchParams: Promise<{ phone_number: string }>;
|
||||
}) {
|
||||
const session = await getServerSession(authOptions)
|
||||
if (session) {
|
||||
// If the user is already logged in, redirect them to the home page
|
||||
return redirect("/");
|
||||
}
|
||||
const phone_number = (await searchParams).phone_number;
|
||||
if (!phone_number) {
|
||||
return redirect("/login");
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -61,7 +61,7 @@ const InputComponent = React.forwardRef<
|
||||
HTMLInputElement,
|
||||
React.ComponentProps<"input">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<Input className={cn("mx-2 bg-white/10", className)} {...props} ref={ref} />
|
||||
<Input className={cn("mx-2 bg-white/10 backdrop-blur-md", className)} {...props} ref={ref} />
|
||||
));
|
||||
InputComponent.displayName = "InputComponent";
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { type VariantProps, cva } from "class-variance-authority"
|
||||
import { X } from "lucide-react"
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
|
||||
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
|
||||
|
||||
const sheetVariants = cva(
|
||||
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
|
||||
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-150 data-[state=open]:duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out",
|
||||
{
|
||||
variants: {
|
||||
side: {
|
||||
@ -51,7 +51,7 @@ const sheetVariants = cva(
|
||||
|
||||
interface SheetContentProps
|
||||
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
||||
VariantProps<typeof sheetVariants> {}
|
||||
VariantProps<typeof sheetVariants> { }
|
||||
|
||||
const SheetContent = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||
|
||||
@ -242,7 +242,7 @@ const Sidebar = React.forwardRef<
|
||||
{/* This is what handles the sidebar gap on desktop */}
|
||||
<div
|
||||
className={cn(
|
||||
"duration-75 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
|
||||
"duration-150 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
|
||||
"group-data-[collapsible=offcanvas]:w-0",
|
||||
"group-data-[side=right]:rotate-180",
|
||||
variant === "floating" || variant === "inset"
|
||||
@ -252,7 +252,7 @@ const Sidebar = React.forwardRef<
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"duration-75 fixed inset-y-0 z-0 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
|
||||
"duration-150 fixed inset-y-0 z-0 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
|
||||
side === "left"
|
||||
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
||||
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
||||
@ -457,7 +457,7 @@ const SidebarGroupLabel = React.forwardRef<
|
||||
ref={ref}
|
||||
data-sidebar="group-label"
|
||||
className={cn(
|
||||
"duration-75 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
"duration-150 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
||||
className,
|
||||
)}
|
||||
|
||||
@ -1,39 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
interface WelcomeBannerProps {
|
||||
firstName?: string | null;
|
||||
lastName?: string | null;
|
||||
}
|
||||
|
||||
const ANIMATION_DURATION_MS = 500;
|
||||
export function WelcomeBanner({ firstName, lastName }: WelcomeBannerProps) {
|
||||
const [isMounted, setIsMounted] = useState(true);
|
||||
const [isFadingOut, setIsFadingOut] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const startFadeOutTimer = setTimeout(() => {
|
||||
setIsFadingOut(true);
|
||||
}, 3000);
|
||||
const unmountTimer = setTimeout(() => {
|
||||
setIsMounted(false);
|
||||
}, 3000 + ANIMATION_DURATION_MS);
|
||||
|
||||
return () => {
|
||||
clearTimeout(startFadeOutTimer);
|
||||
clearTimeout(unmountTimer);
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (!isMounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`text-sm font-mono px-2 p-1 bg-green-500/10 text-green-900 dark:text-green-400 ${isFadingOut ? "animate-out fade-out animate-duration-500 animate-ease-out" : "animate-in fade-in"
|
||||
}`}
|
||||
className={"text-sm font-mono px-2 p-1 bg-green-500/10 text-green-900 dark:text-green-400"}
|
||||
>
|
||||
Welcome,{" "}
|
||||
<span className="font-semibold">
|
||||
|
||||
6
package-lock.json
generated
6
package-lock.json
generated
@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@faker-js/faker": "^9.3.0",
|
||||
"@hookform/resolvers": "^5.0.1",
|
||||
"@pyncz/tailwind-mask-image": "^2.0.0",
|
||||
"@radix-ui/react-accordion": "^1.2.11",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.2",
|
||||
"@radix-ui/react-checkbox": "^1.1.2",
|
||||
@ -856,6 +857,11 @@
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@pyncz/tailwind-mask-image": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@pyncz/tailwind-mask-image/-/tailwind-mask-image-2.0.0.tgz",
|
||||
"integrity": "sha512-BN52RPSp56VIA25ZpLD3SEigwADTrQ6a3Kq8x94rbhU6YP1HpvRjSYtnFenEfGw2nzESvFsNdYT6KKP+JuS73w=="
|
||||
},
|
||||
"node_modules/@radix-ui/number": {
|
||||
"version": "1.1.0",
|
||||
"license": "MIT"
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
"dependencies": {
|
||||
"@faker-js/faker": "^9.3.0",
|
||||
"@hookform/resolvers": "^5.0.1",
|
||||
"@pyncz/tailwind-mask-image": "^2.0.0",
|
||||
"@radix-ui/react-accordion": "^1.2.11",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.2",
|
||||
"@radix-ui/react-checkbox": "^1.1.2",
|
||||
|
||||
@ -9,96 +9,96 @@ export default {
|
||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
sarLinkOrange: '#f49b5b',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))'
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))'
|
||||
},
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))'
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))'
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))'
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))'
|
||||
},
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
chart: {
|
||||
'1': 'hsl(var(--chart-1))',
|
||||
'2': 'hsl(var(--chart-2))',
|
||||
'3': 'hsl(var(--chart-3))',
|
||||
'4': 'hsl(var(--chart-4))',
|
||||
'5': 'hsl(var(--chart-5))'
|
||||
},
|
||||
sidebar: {
|
||||
DEFAULT: 'hsl(var(--sidebar-background))',
|
||||
foreground: 'hsl(var(--sidebar-foreground))',
|
||||
primary: 'hsl(var(--sidebar-primary))',
|
||||
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
||||
accent: 'hsl(var(--sidebar-accent))',
|
||||
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
||||
border: 'hsl(var(--sidebar-border))',
|
||||
ring: 'hsl(var(--sidebar-ring))'
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)'
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [
|
||||
'var(--font-barlow)'
|
||||
],
|
||||
mono: [
|
||||
'var(--font-mono)'
|
||||
]
|
||||
},
|
||||
keyframes: {
|
||||
'accordion-down': {
|
||||
from: {
|
||||
height: '0'
|
||||
},
|
||||
to: {
|
||||
height: 'var(--radix-accordion-content-height)'
|
||||
}
|
||||
},
|
||||
'accordion-up': {
|
||||
from: {
|
||||
height: 'var(--radix-accordion-content-height)'
|
||||
},
|
||||
to: {
|
||||
height: '0'
|
||||
}
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||
'accordion-up': 'accordion-up 0.2s ease-out'
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [tailwindcssAnimate, tailwindcssMotion],
|
||||
extend: {
|
||||
colors: {
|
||||
sarLinkOrange: "#f49b5b",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
chart: {
|
||||
"1": "hsl(var(--chart-1))",
|
||||
"2": "hsl(var(--chart-2))",
|
||||
"3": "hsl(var(--chart-3))",
|
||||
"4": "hsl(var(--chart-4))",
|
||||
"5": "hsl(var(--chart-5))",
|
||||
},
|
||||
sidebar: {
|
||||
DEFAULT: "hsl(var(--sidebar-background))",
|
||||
foreground: "hsl(var(--sidebar-foreground))",
|
||||
primary: "hsl(var(--sidebar-primary))",
|
||||
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
|
||||
accent: "hsl(var(--sidebar-accent))",
|
||||
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
|
||||
border: "hsl(var(--sidebar-border))",
|
||||
ring: "hsl(var(--sidebar-ring))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["var(--font-barlow)"],
|
||||
mono: ["var(--font-mono)"],
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: {
|
||||
height: "0",
|
||||
},
|
||||
to: {
|
||||
height: "var(--radix-accordion-content-height)",
|
||||
},
|
||||
},
|
||||
"accordion-up": {
|
||||
from: {
|
||||
height: "var(--radix-accordion-content-height)",
|
||||
},
|
||||
to: {
|
||||
height: "0",
|
||||
},
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
tailwindcssAnimate,
|
||||
tailwindcssMotion,
|
||||
require("@pyncz/tailwind-mask-image"),
|
||||
],
|
||||
} satisfies Config;
|
||||
|
||||
Reference in New Issue
Block a user