sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-04-19 14:46:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: implement AuthLayout component and streamline OTP verification forms with enhanced messaging
Some checks failed
Build and Push Docker Images / Build and Push Docker Images (push) Failing after 1m49s
Details

Browse Source
This commit is contained in:
i701 2025-04-19 10:22:42 +05:00
parent 3703b3e8fc
commit a4ffb1e34a
Signed by: i701
GPG Key ID: 54A0DA1E26D8E587
8 changed files with 44 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/(auth)/auth/layout.tsx Normal file
View File

@ -0,0 +1,22 @@
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>
</div>
);
}

15
app/(auth)/auth/signin/page.tsx
View File

@ -2,18 +2,5 @@ import LoginForm from "@/components/auth/login-form";
import Image from "next/image";
export default async function LoginPage() {
return (
<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 ">
<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-gray-600">SAR Link Portal</h4>
<p className="text-gray-500">
Pay for your devices and track your bills.
</p>
</div>
<LoginForm />
</div>
</div>
);
return <LoginForm />;
}

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

@ -13,25 +13,5 @@ export default async function SignupPage({
return redirect("/auth/login");
}
return (
<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 ">
<Image
priority
alt="Sar Link Logo"
src="/logo.png"
width={100}
height={100}
style={{ width: "auto", height: "auto" }}
/>
<div className="mt-4 flex flex-col items-center justify-center">
<h4 className="font-bold text-xl text-gray-600">SAR Link Portal</h4>
<p className="text-gray-500">
Pay for your devices and track your bills.
</p>
</div>
<SignUpForm />
</div>
</div>
);
return <SignUpForm />;
}

15
app/(auth)/auth/verify-otp-registration/page.tsx
View File

@ -26,18 +26,5 @@ export default async function VerifyRegistrationOTP({
return <ClientErrorMessage message={error.message} />;
}
if (response.otp_verified) redirect("/auth/signin");
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-gray-600">SAR Link Portal</h4>
<p className="text-gray-500">
Pay for your devices and track your bills.
</p>
</div>
<VerifyRegistrationOTPForm phone_number={phone_number} />
</div>
</div>
);
return <VerifyRegistrationOTPForm phone_number={phone_number} />;
}

15
app/(auth)/auth/verify-otp/page.tsx
View File

@ -17,18 +17,5 @@ export default async function VerifyOTP({
phone_number,
);
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-gray-600">SAR Link Portal</h4>
<p className="text-gray-500">
Pay for your devices and track your bills.
</p>
</div>
<VerifyOTPForm phone_number={phone_number} />
</div>
</div>
);
return <VerifyOTPForm phone_number={phone_number} />;
}

9
components/auth/verify-otp-form.tsx
View File

@ -61,6 +61,9 @@ export default function VerifyOTPForm({
>
<div className="grid pb-4 pt-4 gap-4 px-4">
<div className="flex flex-col gap-4">
<p className="text-center text-sm text-sarLinkOrange">
Login OTP Sent to {phone_number}
</p>
<Label htmlFor="otp-number" className="sr-only text-gray-500">
Enter the OTP
</Label>
@ -70,7 +73,7 @@ export default function VerifyOTPForm({
{...register("pin")}
type="text"
placeholder="Enter OTP"
className="bg-white dark:bg-sarLinkOrange/10"
className="bg-white dark:bg-black"
/>
{errors.pin && (
<p className="text-red-500 text-sm">{errors.pin.message}</p>
@ -81,9 +84,9 @@ export default function VerifyOTPForm({
</Button>
</div>
<div className="mb-4 text-center text-sm">
Go back to{" "}
Change{" "}
<Link href="signin" className="underline">
login
phone number
</Link>
</div>
</form>

17
components/auth/verify-registration-otp-form.tsx
View File

@ -36,8 +36,7 @@ export default function VerifyRegistrationOTPForm({
</p>
) : (
<p className="bg-sarLinkOrange/50 border border-yellow-900/50 dark:border-sarLinkOrange/50 rounded p-2 text-center text-sm text-gray-900 dark:text-gray-300">
Please enter the OTP sent to your mobile number [{phone_number}]
to verify and complete your registration.
Account verification OTP sent to [{phone_number}]
</p>
)}
@ -84,12 +83,14 @@ export default function VerifyRegistrationOTPForm({
)}
</Button>
</div>
<div className="mb-4 text-center text-sm">
Go back to{" "}
<Link href="signin" className="underline">
login
</Link>
</div>
{state.status === "verify_success" && (
<div className="mb-4 text-center text-sm">
Go to{" "}
<Link href="signin" className="underline">
login
</Link>
</div>
)}
</form>
);
}

4
queries/authentication.ts
View File

@ -199,7 +199,9 @@ export async function VerifyRegistrationOTP(
// }
}
return {
message: "Your account could not be verified. Please contact support.",
message:
data.message ||
"Your account could not be verified. Please contact support.",
status: "verify_error",
};
}