sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-07-02 09:48:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: update authentication flow to use PIN instead of email/password, enhance OTP verification with NextAuth, and improve session handling in components
Some checks failed
Build and Push Docker Images / Build and Push Docker Images (push) Failing after 6m26s
Details

Browse Source
This commit is contained in:
i701
2025-04-05 11:50:39 +05:00
parent ef9f032366
commit dbdc1df7d5
5 changed files with 67 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
components/auth/signup-form.tsx
View File

@ -22,12 +22,10 @@ import type { ApiResponse, Atoll } from "@/lib/backend-types";
import { getAtolls } from "@/queries/islands";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
export default function SignUpForm() {
const { data: atolls, isFetching } = useQuery<ApiResponse<Atoll>>({
queryKey: ["ATOLLS"],
queryFn: () =>
getAtolls(),
queryFn: () => getAtolls(),
placeholderData: keepPreviousData,
staleTime: 1,
});
@ -38,29 +36,28 @@ export default function SignUpForm() {
message: "",
});
React.useEffect(() => {
console.log(atoll)
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="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 {" "}
Go to{" "}
<Link href="login" className="underline">
login
</Link>
</div>
</>
)
);
}
return (
<form
@ -76,7 +73,8 @@ export default function SignUpForm() {
<Input
className={cn(
"text-base",
actionState?.errors?.fieldErrors.name && "border-2 border-red-500",
actionState?.errors?.fieldErrors.name &&
"border-2 border-red-500",
)}
name="name"
type="text"
@ -99,11 +97,13 @@ export default function SignUpForm() {
type="text"
maxLength={7}
disabled={isPending}
defaultValue={(actionState?.payload?.get("id_card") || "") as string}
defaultValue={
(actionState?.payload?.get("id_card") || "") as string
}
className={cn(
"text-base",
actionState?.errors?.fieldErrors?.id_card &&
"border-2 border-red-500",
"border-2 border-red-500",
)}
placeholder="ID Card"
/>
@ -126,8 +126,10 @@ export default function SignUpForm() {
<Select
disabled={isPending}
onValueChange={(v) => {
console.log({ v })
setAtoll(atolls?.data.find((atoll) => atoll.id === Number.parseInt(v)));
console.log({ v });
setAtoll(
atolls?.data.find((atoll) => atoll.id === Number.parseInt(v)),
);
}}
name="atoll_id"
value={atoll?.id?.toString() ?? ""}
@ -187,7 +189,7 @@ export default function SignUpForm() {
className={cn(
"text-base",
actionState?.errors?.fieldErrors?.address &&
"border-2 border-red-500",
"border-2 border-red-500",
)}
disabled={isPending}
name="address"
@ -211,7 +213,8 @@ export default function SignUpForm() {
<Input
className={cn(
"text-base",
actionState?.errors?.fieldErrors?.dob && "border-2 border-red-500",
actionState?.errors?.fieldErrors?.dob &&
"border-2 border-red-500",
)}
name="dob"
disabled={isPending}
@ -233,7 +236,8 @@ export default function SignUpForm() {
<Input
className={cn(
"text-base",
actionState?.errors?.fieldErrors.accNo && "border-2 border-red-500",
actionState?.errors?.fieldErrors.accNo &&
"border-2 border-red-500",
)}
name="accNo"
type="number"
@ -258,8 +262,8 @@ export default function SignUpForm() {
disabled={isPending}
className={cn(
!phoneNumberFromUrl &&
actionState?.errors?.fieldErrors?.phone_number &&
"border-2 border-red-500 rounded-md",
actionState?.errors?.fieldErrors?.phone_number &&
"border-2 border-red-500 rounded-md",
)}
defaultValue={NUMBER_WITHOUT_DASH ?? ""}
readOnly={Boolean(phoneNumberFromUrl)}
@ -280,15 +284,17 @@ export default function SignUpForm() {
<div className="flex gap-2 items-center">
<input
type="checkbox"
defaultChecked={(actionState?.payload?.get("terms") || "") as string === 'on'}
name="terms" id="terms" />
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>
<span>i accept</span>
<Link className="ml-1 underline" href="">
terms and conditions
</Link>
@ -300,18 +306,19 @@ export default function SignUpForm() {
</span>
)}
<div className="flex gap-2 items-center">
<input
type="checkbox"
defaultChecked={(actionState?.payload?.get("policy") || "") as string === 'on'}
name="policy" id="terms" />
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>
<span>i undertand</span>
<Link className="ml-1 underline" href="">
the privacy policy
</Link>
@ -322,7 +329,6 @@ export default function SignUpForm() {
{actionState?.errors?.fieldErrors?.policy}
</span>
)}
</div>
<Button disabled={isPending} className="mt-4 w-full" type="submit">
{isPending ? <Loader2 className="animate-spin" /> : "Submit"}
@ -331,10 +337,10 @@ export default function SignUpForm() {
<div className="mb-4 text-center text-sm">
Already have an account?{" "}
<Link href="login" className="underline">
<Link href="signin" className="underline">
login
</Link>
</div>
</form>
);
}
}