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

Enhance user verification and UI components
Some checks failed
Build and Push Docker Images / Build and Push Docker Images (push) Failing after 1m24s
Details

Browse Source 
- Updated `auth-actions.ts` to improve user verification notification formatting and date handling.
- Modified `layout.tsx` to support dark mode styling for better user experience.
- Refactored `signup/page.tsx` to enhance layout and responsiveness.
- Introduced a new API route in `route.ts` for sending user verification notifications.
- Improved user feedback in `user-payments-table.tsx` by updating the no payment message.
- Made minor adjustments in `application-layout.tsx` for consistent padding.
- Enhanced `signup-form.tsx` to display error messages for invalid user validation.

These changes improve the user verification process, enhance UI consistency, and provide better feedback to users.
This commit is contained in:
i701 2025-01-10 23:34:53 +05:00
parent a3f0759731
commit 2c67848618
8 changed files with 55 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
actions/auth-actions.ts
View File

@ -136,14 +136,17 @@ export async function signup(_actionState: ActionState, formData: FormData) {
if (!isValidPerson) { if (!isValidPerson) {
await SendUserRejectionDetailSMS({ await SendUserRejectionDetailSMS({
details: ` details: `
A new user has requested for verification. A new user has requested for verification. \n
USER DETAILS: USER DETAILS:
Name: ${parsedData.data.name} Name: ${parsedData.data.name}
Address: ${parsedData.data.address} Address: ${parsedData.data.address}
ID Card: ${parsedData.data.id_card} ID Card: ${parsedData.data.id_card}
DOB: ${parsedData.data.dob} DOB: ${parsedData.data.dob.toLocaleDateString("en-US", {
ACC No: ${parsedData.data.accNo} month: "short",
Verify the user with the folloiwing link: ${process.env.BETTER_AUTH_URL}/users/${newUser.id}/verify day: "2-digit",
year: "numeric",
})}
ACC No: ${parsedData.data.accNo}\n\nVerify the user with the folloiwing link: ${process.env.BETTER_AUTH_URL}/users/${newUser.id}/verify
`, `,
phoneNumber: process.env.ADMIN_PHONENUMBER ?? "", phoneNumber: process.env.ADMIN_PHONENUMBER ?? "",
}); });

12
app/(auth)/signup/page.tsx
View File

@ -29,15 +29,9 @@ export default async function SignupPage({
}); });
return ( return (
<div className="dark:bg-black w-full flex items-center justify-center font-sans"> <div className="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 py-4"> <div className="flex flex-col items-center justify-center w-full h-full ">
<Image <Image alt="Sar Link Logo" src="/logo.png" width={100} height={100} />
priority
alt="Sar Link Logo"
src="/logo.png"
width={100}
height={100}
/>
<div className="mt-4 flex flex-col items-center justify-center"> <div className="mt-4 flex flex-col items-center justify-center">
<h4 className="font-bold text-xl text-gray-600">SAR Link Portal</h4> <h4 className="font-bold text-xl text-gray-600">SAR Link Portal</h4>
<p className="text-gray-500"> <p className="text-gray-500">

16
app/api/test/route.ts Normal file
View File

@ -0,0 +1,16 @@
import { SendUserRejectionDetailSMS } from "@/actions/user-actions";
export async function POST(request: Request) {
await SendUserRejectionDetailSMS({
details: `
A new user has requested for verification. \n
USER DETAILS:
Name: Jacob
Address: Jacob House
ID Card: A222111
DOB: 24-08-1997
ACC No: 7770000010629 \n\nVerify the user with the folloiwing link: ${process.env.BETTER_AUTH_URL}/users/verify
`,
phoneNumber: process.env.ADMIN_PHONENUMBER ?? "",
});
}

2
app/layout.tsx
View File

@ -25,7 +25,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body className={`${barlow.variable} antialiased font-sans bg-gray-100`}> <body className={`${barlow.variable} antialiased font-sans bg-gray-100 dark:bg-black`}>
<Provider> <Provider>
<NextTopLoader color="#f49d1b" showSpinner={false} zIndex={9999} /> <NextTopLoader color="#f49d1b" showSpinner={false} zIndex={9999} />
<Toaster richColors /> <Toaster richColors />

2
components/admin/user-payments-table.tsx
View File

@ -131,7 +131,7 @@ export async function UsersPaymentsTable({
<div> <div>
{payments.length === 0 ? ( {payments.length === 0 ? (
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4"> <div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
<h3>No Users yet.</h3> <h3>No user payments yet.</h3>
</div> </div>
) : ( ) : (
<> <>

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

@ -45,6 +45,19 @@ export default function SignUpForm({ atolls }: { atolls: AtollWithIslands[] }) {
const NUMBER_WITHOUT_DASH = phoneNumberFromUrl?.split("-").join(""); 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 rounded-lg">{actionState.message}</div>
<div className="mb-4 text-center text-sm">
Go to {" "}
<Link href="login" className="underline">
login
</Link>
</div>
</>
)
}
return ( return (
<form <form
action={action} action={action}

10
lib/person.ts
View File

@ -18,11 +18,19 @@ export async function getNationalPerson({
} }
export async function VerifyUserDetails({ user }: { user: User }) { export async function VerifyUserDetails({ user }: { user: User }) {
const phoneNumber = user.phoneNumber.slice(4); const phoneNumber = String(user.phoneNumber).slice(4);
console.log({ phoneNumber });
const nationalData = await getNationalPerson({ idCard: user.id_card ?? "" }); const nationalData = await getNationalPerson({ idCard: user.id_card ?? "" });
const dob = new Date(nationalData.dob); const dob = new Date(nationalData.dob);
const age = new Date().getFullYear() - dob.getFullYear(); const age = new Date().getFullYear() - dob.getFullYear();
console.log("ID card", user.id_card === nationalData.nic);
console.log("name", user.name === nationalData.name_en);
console.log("house", user.address === nationalData.house_name_en);
console.log("phone", phoneNumber === nationalData.primary_contact);
console.log("db phone", phoneNumber);
console.log("national phone", nationalData.primary_contact);
if ( if (
user.id_card === nationalData.nic && user.id_card === nationalData.nic &&
user.name === nationalData.name_en && user.name === nationalData.name_en &&