👚🌚 ↝ [ FCDB-24 ] Login modal now working

Author: Gizmotronn

components/Authentication/LoginModal.tsx

@@ -0,0 +1,62 @@
+import { ReactNode, useEffect } from 'react';
+// import { useHistory } from 'react-router-dom';
+import Link from 'next/link';
+import Layout from '../../components/Section/Layout';
+import { Auth, ThemeSupa } from '@supabase/auth-ui-react';
+import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
+import { useRouter } from 'next/router';
+
+export function SupabaseAuthWrapper({ children }: { children: ReactNode }) {
+    return (
+        <div className='flex min-h-full flex-col justify-center pt-10 sm:px-6 lg:px-8'>
+        <div className='sm:mx-auto sm:w-full sm:max-w-md'>
+            <div className='bg-white py-8 px-4 shadow-xl ring-1 ring-gray-900/10 sm:rounded-lg sm:px-10 dark:bg-white dark:text-gray-900'>
+            <div className='-mt-8'>
+                {children}
+            </div>
+            </div>
+        </div>
+        </div>
+    );
+};
+
+interface AuthPageProps {
+  children: ReactNode;
+}
+
+export function AuthPage({ children }: AuthPageProps) {
+//   const history = useHistory();
+  const session = useSession();
+  const router = useRouter();
+
+//   useEffect(() => {
+//     if (session) {
+//       router.push('/')
+//     }
+//   }, [session, history]);
+
+  return (
+    <SupabaseAuthWrapper>
+      {children}
+    </SupabaseAuthWrapper>
+  );
+};
+
+export default function LoginPage() {
+    const supabase = useSupabaseClient();
+
+    return (
+      <AuthPage>
+        <Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} theme='dark' />
+        <br />
+        <span className='text-sm font-medium text-gray-900 dark:text-gray-900'>
+          Don't have an account yet?{' '}
+          <Link href='/signup' className='underline'>
+            go to signup
+          </Link>
+          .
+        </span>
+        <br />
+      </AuthPage>
+    );
+};

pages/login/index.tsx

@@ -3,6 +3,7 @@ import React, { useEffect } from 'react';
 import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
 import { useRouter } from 'next/router'; // Import the useRouter hook
 import Layout from '../../components/Section/Layout';
+import LoginPage from '../../components/Authentication/LoginModal';
 
 const Login = () => {
     const session = useSession();
@@ -19,12 +20,56 @@ const Login = () => {
     return (
         <div className='container' style={{ padding: '50px 0 100px 0' }}>
             {!session ? (
-                <div className='w-80%'><Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} theme='dark' /></div>
+                // <div className='w-80%'><Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} theme='dark' /></div>
+                <div><LoginPage /></div>
             ) : (
                 <Layout>Logged in</Layout>
             )}
         </div>
     );
-}
+};
+
+export default Login;
+
+/*
+import { useHistory } from 'react-router-dom';
+import { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { LoginForm } from '@wasp/auth/forms/Login';
+import { AuthWrapper } from './authWrapper';
+import useAuth from '@wasp/auth/useAuth';
+
+export default function Login() {
+  const history = useHistory();
 
-export default Login;
+  const { data: user } = useAuth();
+
+  useEffect(() => {
+    if (user) {
+      history.push('/');
+    }
+  }, [user, history]);
+
+  return (
+    <AuthWrapper>
+      <LoginForm />
+      <br />
+      <span className='text-sm font-medium text-gray-900 dark:text-gray-900'>
+        Don't have an account yet?{' '}
+        <Link to='/signup' className='underline'>
+          go to signup
+        </Link>
+        .
+      </span>
+      <br />
+      <span className='text-sm font-medium text-gray-900'>
+        Forgot your password?{' '}
+        <Link to='/request-password-reset' className='underline'>
+          reset it
+        </Link>
+        .
+      </span>
+    </AuthWrapper>
+  );
+}
+*/