added oauth providers. set up login/signup layout

app/routes/_auth.login.tsx

@@ -1,31 +1,88 @@
-import { Link, Form } from "@remix-run/react";
+import { Link, Form, useOutletContext } from "@remix-run/react";
+import { useState } from "react";
 
 
+import googleIcon from "~/assets/oauth_providers/google-icon.png";
+import facebookIcon from "~/assets/oauth_providers/facebook-icon.png";
+import githubIcon from "~/assets/oauth_providers/github-icon.png";
+
+
+import type { Database } from '../../database.types'
+import type { SupabaseClient, Provider } from '@supabase/supabase-js'
+
 export const loader = () => {
 
     return {};
 };
 
 export default function Login(){
-    return <div className="flex flex-col items-start">
-        <h1>Login</h1>
-        <Form action="/events" method="post">
-            <div className="flex flex-col">
+    const [isAtLogin, setIsAtLogin] = useState<boolean>(true);
+    const { supabase } = useOutletContext<{ supabase: SupabaseClient<Database> }>()
+
+    const providerClicked = async (providerName: Provider) => {
+        const { data, error } = await supabase.auth.signInWithOAuth({
+            provider: providerName
+        });
+    };
+
+    return <div className="flex flex-col md:flex-row justify-center items-center">
+        <div className="flex flex-col items-center">
+            <h1 className="text-xl mb-4">Continue with</h1>
+            <div className="flex justify-center flex-row md:flex-col md:w-20 h-20 md:h-auto">
+                <button className="oauth-provider-btn" 
+                onClick={()=>providerClicked("google")}>
+                    <img src={googleIcon} alt="google"/>
+                </button>
+                <button className="oauth-provider-btn" 
+                onClick={()=>providerClicked("facebook")}>
+                    <img src={facebookIcon} alt="facebook" />
+                </button>
+                <button className="oauth-provider-btn" 
+                onClick={()=>providerClicked("github")}>
+                    <img src={githubIcon} alt="github" />
+                </button>
+            </div>
+        </div>
+        <div className="m-8 text-4xl mx-32 my-12">OR</div>
+
+        <div className="relative text-center overflow-hidden border-2 border-color-2 rounded-lg w-80 h-96">
+            <button className="btn" onClick={()=>setIsAtLogin(!isAtLogin)}
+            >{isAtLogin? "[Login]/Signup" : "Login/[Signup]"}</button>
+
+            <div className={"auth-form " + (isAtLogin? "-translate-x-1/2" : "-translate-x-[200%]")}>
+                <Form action="/events" method="post">
+                    <div className="flex flex-col">
 
-                <label htmlFor="email_input">Email</label>
-                <input id="email_input" type="email" autoComplete="email"/>
-                <label htmlFor="password_input">Password</label>
-                <input id="password_input" type="password" autoComplete="current-password" />
+                        <label htmlFor="email_input">Email</label>
+                        <input id="email_input" type="email" autoComplete="email"/>
+                        <label htmlFor="password_input">Password</label>
+                        <input id="password_input" type="password" autoComplete="current-password" />
 
-                <button type="submit" className='btn'>Log In</button>
+                        <button type="submit" className='btn'>Log In</button>
+                    </div>
+                </Form>
+                <button className="underline">Fill demo account</button>
             </div>
-        </Form>
-
-        <button className="underline">Use demo account</button>
-        <Link to="/signup">
-            <button className="underline">Create new account</button>
-        </Link>
-
-        {/* OR login providers */}
+
+
+            <div className={"auth-form " + (isAtLogin? "translate-x-full" : "-translate-x-1/2")}>
+                <Form action="/events" method="post">
+                    <div className="flex flex-col">
+
+                        <label htmlFor="email_input">Email</label>
+                        <input id="email_input" type="email" autoComplete="email"/>
+                        <label htmlFor="password_input">Password</label>
+                        <input id="password_input" type="password" autoComplete="new-password" />
+                        <label htmlFor="confirm_password_input">Confirm password</label>
+                        <input id="confirm_password_input" type="password" autoComplete="new-password"/>
+
+                        <button type="submit" className='btn'>Sign up</button>
+                    </div>
+                </Form>
+            </div>
+
+        </div>
+
     </div>
-}
+}
+

app/routes/_auth.signup.tsx

@@ -1,3 +1,5 @@
+///////////// will be removed
+
 import { Link, Form } from "@remix-run/react";
 
 export default function Signup(){

app/routes/test.tsx

@@ -1,7 +1,7 @@
 
 import { useLoaderData, useOutletContext } from "@remix-run/react";
 import { createServerClient, parse, serialize } from '@supabase/ssr';
-import { json } from "@remix-run/node";
+
 
 import type { Database } from '../../database.types'
 import type { SupabaseClient } from '@supabase/supabase-js'
@@ -70,8 +70,11 @@ export default function Test(){
         })
     }
 
-    function signOut(){
-        supabase.auth.signOut()
+    async function signOut(){
+      const { error } = await supabase.auth.signOut()
+      if (error){
+        console.log(error)
+      }
     }
 
     return <div>

app/tailwind.css

@@ -33,6 +33,21 @@ body *, body {
     @apply font-bold py-2 px-4 rounded-lg text-color-2 bg-color-1 border-color-2 border-2;
 }
 
+.oauth-provider-btn {
+    @apply m-2 hover:opacity-50 transition-opacity;
+}
+.oauth-provider-btn > img { /* img inside */
+    @apply h-full;
+}
+.auth-form {
+    @apply flex flex-col items-center p-8 absolute 
+    top-1/2 left-1/2 -translate-y-1/2
+    transition-transform duration-200
+    text-left;
+}
+.auth-form input {
+    @apply mb-2;
+}
 
 
 /* SCROLLBAR */