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

This commit is contained in:
2025-04-19 10:22:42 +05:00
parent 3703b3e8fc
commit a4ffb1e34a
8 changed files with 44 additions and 75 deletions

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>
);
}

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 />;
}

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 />;
}

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} />;
}

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} />;
}