Convert the form UI to be a layout

compass/app/auth/forgot_password/page.tsx

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

compass/app/auth/layout.tsx

@@ -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>
+  )
+}

compass/app/auth/login/page.tsx

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

compass/app/auth/new_password/page.tsx

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