Convert the form UI to be a layout

This commit is contained in:
Meliora Ho 2024-03-20 21:48:10 +00:00
parent 3b088d5de2
commit cc2f32bc23
4 changed files with 24 additions and 39 deletions

View File

@ -32,16 +32,6 @@ export default function ForgotPasswordPage() {
return (
<>
<Paper>
<form
onSubmit={(e) => {
e.preventDefault();
// submit form logic here. since it's a "forgot password" form,
// typically you would send a reset password link to the email provided.
console.log('Form submitted with email:', confirmEmail);
}}
className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl"
>
<h1 className="font-bold text-xl text-purple-800">Forgot Password</h1>
<div className="mb-6">
<Input
@ -62,11 +52,7 @@ export default function ForgotPasswordPage() {
Send
</Button>
</div>
</form>
<p className="text-center mt-6 text-gray-500 text-xs">
&copy; 2024 Compass Center
</p>
</Paper>
</>
);
}

View File

@ -0,0 +1,22 @@
import Paper from '@/components/auth/Paper';
export default function RootLayout({
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
children,
}: {
children: React.ReactNode
}) {
return (
<Paper>
<form className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
{children}
</form>
<p className="text-center mt-6 text-gray-500 text-xs">
&copy; 2024 Compass Center
</p>
</Paper>
)
}

View File

@ -45,10 +45,6 @@ export default function Page() {
return (
<>
<Paper>
<form onSubmit={(e) => {
e.preventDefault();
}} className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
<Image
src="/logo.png"
alt='Compass Center logo.'
@ -79,11 +75,7 @@ export default function Page() {
</Button>
</div>
</form>
<p className="text-center mt-6 text-gray-500 text-xs">
&copy; 2024 Compass Center
</p>
</Paper>
</>
);
};

View File

@ -26,18 +26,6 @@ export default function Page() {
return (
<>
<Paper>
<form
onSubmit={(e) => {
e.preventDefault();
if (newPassword === confirmPassword) {
console.log('Passwords match. Submitting form...');
} else {
console.log('Passwords do not match. Please try again.');
}
}}
className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl"
>
<div className="text-center sm:text-left">
<h1 className="font-bold text-xl text-purple-800">New Password</h1>
</div>
@ -68,9 +56,6 @@ export default function Page() {
Send
</Button>
</div>
</form>
<p className="text-center mt-6 text-gray-500 text-xs">&copy; 2024 Compass Center</p>
</Paper>
</>
);
}