sarlink-portal/components/user/user-verify-dialog.tsx
i701 ff0eae6ec4 Enhance user verification and data validation features
- Updated `next.config.ts` to include remote image patterns for user verification.
- Introduced `VerifyUserDetails` function in `lib/person.ts` to validate user data against national records.
- Added `usePerson` hook for fetching national data based on ID card.
- Enhanced `signup` and `signin` functions in `auth-actions.ts` to handle user verification status and send notifications for pending verifications.
- Refactored `VerifyUser` function in `user-actions.ts` to incorporate national data validation.
- Improved UI components in the user verification page to display both database and national information.
- Updated `InputReadOnly` component to support customizable label classes for better styling.

These changes improve the user verification process, ensuring data integrity and enhancing the overall user experience.
2025-01-10 15:59:44 +05:00

78 lines
2.2 KiB
TypeScript

"use client";
import { VerifyUser } from "@/actions/user-actions";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import type { User } from "@prisma/client";
import { Check, CheckCheck } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
export function UserVerifyDialog({ user }: { user: User }) {
const userId = user.id;
const [disabled, setDisabled] = useState(false);
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button
variant={user.verified ? "secondary" : "default"}
disabled={disabled || user.verified}
>
{user.verified ? <CheckCheck size={16} /> : <Check size={16} />}
{user.verified ? "Verified" : "Verify"}
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogDescription>
Are you sure you want to verify the following user?
<span className="inline-block my-4">
<li>Name: {user.name}</li>
<li>ID Card: {user.id_card}</li>
<li>Address: {user.address}</li>
<li>DOB: {new Date(user.dob ?? "").toLocaleDateString("en-US", {
month: "short",
day: "2-digit",
year: "numeric",
})}</li>
<li>Phone Number: {user.phoneNumber}</li>
</span>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
disabled={disabled}
onClick={() => {
setDisabled(true);
toast.promise(VerifyUser(userId), {
loading: "Verifying...",
success: () => {
setDisabled(false);
return "User Verified!";
},
error: (error: Error) => {
setDisabled(false);
return error.message || "Something went wrong";
},
});
}}
>
{disabled ? "Verifying..." : "Verify"}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}