mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-02 03:38:22 +00:00
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
Some checks failed
Build and Push Docker Images / Build and Push Docker Images (push) Failing after 1m49s
This commit is contained in:
22
app/(auth)/auth/layout.tsx
Normal file
22
app/(auth)/auth/layout.tsx
Normal 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>
|
||||
);
|
||||
}
|
@ -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 />;
|
||||
}
|
||||
|
@ -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 />;
|
||||
}
|
||||
|
@ -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} />;
|
||||
}
|
||||
|
@ -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} />;
|
||||
}
|
||||
|
Reference in New Issue
Block a user