set up /login action

app/root.tsx

@@ -76,7 +76,7 @@ function App() {
 
   // hide for specific routes
   const location = useLocation();
-  const routesToHideNavigation = ['/login', '/signup'];
+  const routesToHideNavigation = ['/login', '/signup']; ///// add homepage
   const shouldHideNavigation = routesToHideNavigation.includes(location.pathname);
 
 

app/routes/_auth.login.tsx

@@ -1,5 +1,7 @@
-import { Link, Form, useOutletContext } from "@remix-run/react";
+import { Link, Form, useOutletContext, useActionData, redirect } from "@remix-run/react";
+import { json } from "@remix-run/node";
 import { useState } from "react";
+import { createServerClient, parse, serialize } from '@supabase/ssr';
 
 
 import googleIcon from "~/assets/oauth_providers/google-icon.png";
@@ -9,13 +11,67 @@ import githubIcon from "~/assets/oauth_providers/github-icon.png";
 
 import type { Database } from '../../database.types'
 import type { SupabaseClient, Provider } from '@supabase/supabase-js'
+import type { ActionFunctionArgs } from "@remix-run/node"
+
+
+export async function action({request}: ActionFunctionArgs) {
+    const formData = await request.formData();
+    ////return json({ xxx: formData.get("form_type") });
+
+    const cookies = parse(request.headers.get('Cookie') ?? '')
+    const headers = new Headers()
+    const supabase = createServerClient(process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY!, {
+        cookies: {
+          get(key) {
+            return cookies[key]
+          },
+          set(key, value, options) {
+            headers.append('Set-Cookie', serialize(key, value, options))
+          },
+          remove(key, options) {
+            headers.append('Set-Cookie', serialize(key, '', options))
+          },
+        },
+    })
+
+    // LOGIN
+    if (formData.get("form_type") === "LOGIN"){        
+        const {error} = await supabase.auth.signInWithPassword({
+            email: String(formData.get("email_input")), 
+            password: String(formData.get("password_input"))
+        })
+        if (error) return json({ errorMessage: error.message });
+        return redirect("/");
+    }
+
+    // REGISTER
+    else if (formData.get("form_type") === "REGISTER") {
+        const email = String(formData.get("reg_email_input"));
+        const password = String(formData.get("reg_password_input"));
+
+        let errorMessage: string | null = null;
+        // validate info again on server side
+        if (!email.includes("@") || !email.includes(".")) {
+            errorMessage = "Invalid email address.";
+        }
+        else if (password.length < 6) {
+            errorMessage = "Password should be at least 6 characters.";
+        }
+        ////// more checks
+
+        if (errorMessage) return json({ errorMessage });
+        return redirect("/");
+    }
+
+    return json({ errorMessage: "Unknown form submitted." });
+  }
 
-export const loader = () => {
-
-    return {};
-};
 
 export default function Login(){
+    const actionData = useActionData<typeof action>();
+    console.log(actionData?.errorMessage); ///////// keeps coming back to undefined
+
+
     const [isAtLogin, setIsAtLogin] = useState<boolean>(true);
     const { supabase } = useOutletContext<{ supabase: SupabaseClient<Database> }>()
 
@@ -25,6 +81,18 @@ export default function Login(){
         });
     };
 
+
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [regPassword, setRegPassword] = useState("");
+    const [regConfirmPassword, setRegConfirmPassword] = useState("");
+
+    const fillDemoAcc = ()=>{
+        setEmail("[email protected]");
+        setPassword("sup3rs3cur3");
+    };
+
+
     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>
@@ -34,47 +102,64 @@ export default function Login(){
                     <img src={googleIcon} alt="google"/>
                 </button>
                 <button className="oauth-provider-btn" 
-                onClick={()=>providerClicked("facebook")}>
+                    onClick={()=>providerClicked("facebook")}>
                     <img src={facebookIcon} alt="facebook" />
                 </button>
                 <button className="oauth-provider-btn" 
-                onClick={()=>providerClicked("github")}>
+                    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="relative text-center overflow-hidden border-2 border-color-2 w-72 h-[480px]">
+            <button className="btn text-xs min-w-32 absolute top-2 right-2 z-50" onClick={()=>setIsAtLogin(!isAtLogin)}
+            >{isAtLogin? "New user?" : "Login?"}</button>
 
-            <div className={"auth-form " + (isAtLogin? "-translate-x-1/2" : "-translate-x-[200%]")}>
-                <Form action="/events" method="post">
+            <div className={"auth-form right-1/2 " + (isAtLogin? "translate-x-1/2" : "-translate-x-full")}>
+                <Form method="post">
                     <div className="flex flex-col">
+                        <h1 className="text-center text-2xl pb-4">Login</h1>
 
+                        <input name="form_type" type="hidden" value="LOGIN"/>
                         <label htmlFor="email_input">Email</label>
-                        <input id="email_input" type="email" autoComplete="email"/>
+                        <input name="email_input" id="email_input" 
+                            type="email" autoComplete="email" required
+                            className="text-input" value={email} onChange={(e) => setEmail(e.target.value)}/>
                         <label htmlFor="password_input">Password</label>
-                        <input id="password_input" type="password" autoComplete="current-password" />
+                        <input name="password_input" id="password_input"
+                            type="password" autoComplete="current-password"
+                            className="text-input" value={password} onChange={(e) => setPassword(e.target.value)}/>
 
                         <button type="submit" className='btn'>Log In</button>
+                        {actionData?.errorMessage ? (
+                            <em>{actionData?.errorMessage}</em>
+                        ) : null/* ///////// */}
                     </div>
                 </Form>
-                <button className="underline">Fill demo account</button>
+                <button className="btn text-xs mt-4" onClick={fillDemoAcc}>Fill demo account</button>
             </div>
 
 
-            <div className={"auth-form " + (isAtLogin? "translate-x-full" : "-translate-x-1/2")}>
-                <Form action="/events" method="post">
+            <div className={"auth-form left-1/2 " + (isAtLogin? "translate-x-full" : "-translate-x-1/2")}>
+                <Form 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"/>
+                        <h1 className="text-center text-2xl pb-4">Register</h1>
+
+                        <input name="form_type" type="hidden" value="REGISTER"/>
+                        <label htmlFor="reg_email_input">Email</label>
+                        <input name="reg_email_input" id="reg_email_input"
+                            type="email" autoComplete="email"
+                            className="text-input" />
+                        <label htmlFor="reg_password_input">Password</label>
+                        <input name="reg_password_input" id="reg_password_input"
+                            type="password" autoComplete="new-password"
+                            className="text-input" />
+                        <label htmlFor="reg_confirm_password_input">Confirm password</label>
+                        <input name="reg_confirm_password_input" id="reg_confirm_password_input" 
+                            type="password" autoComplete="new-password"
+                            className="text-input" />
 
                         <button type="submit" className='btn'>Sign up</button>
                     </div>

app/routes/test.tsx

@@ -41,10 +41,10 @@ export default function Test(){
     const { supabase } = useOutletContext<{ supabase: SupabaseClient<Database> }>()
 
     ////// get data from server side (in loaders and actions)
-    const data = useLoaderData() as string
-    useEffect(()=>{
-        console.log(JSON.parse(data))
-    }, [])
+    // const data = useLoaderData() as string
+    // useEffect(()=>{
+    //     console.log(JSON.parse(data))
+    // }, [])
 
 
     ////// get data from client side

app/routes/test2.tsx

@@ -0,0 +1,21 @@
+import type { ActionFunctionArgs } from "@remix-run/node"; // or cloudflare/deno
+import { json } from "@remix-run/node"; // or cloudflare/deno
+import { Form, useActionData } from "@remix-run/react";
+
+export async function action({
+  request,
+}: ActionFunctionArgs) {
+  const body = await request.formData();
+  const name = body.get("visitorsName");
+  return json({ message: `Hello, ${name}` });
+}
+
+export default function Invoices() {
+  const data = useActionData<typeof action>();
+  return (
+    <Form method="post">
+      <input type="text" name="visitorsName" />
+      {data ? data.message : "Waiting..."}
+    </Form>
+  );
+}

app/tailwind.css

@@ -3,17 +3,17 @@
 @tailwind utilities;
 
 html {
-    --color-1: #fff;
-    --color-2: #000;
-    --color-3: #562a2a;
-    --color-4: #170d53;
-    --color-5: #0d5641;
+    --color-1: #fff; /*background*/
+    --color-2: #000; /*text*/
+    --color-3: #562a2a; /*button*/
+    --color-4: #170d53; /* */
+    --color-5: #0d5641; /**/
 }
 
 html.dark {
     --color-1: #1d1d1d;
     --color-2: #7fffe1;
-    --color-3: #951919;
+    --color-3: #353535;
     --color-4: #147b2d;
     --color-5: #9f9d12;
 }
@@ -30,25 +30,28 @@ body *, body {
 
 /* CUSTOM CLASSES */
 .btn {
-    @apply font-bold py-2 px-4 rounded-lg text-color-2 bg-color-1 border-color-2 border-2;
+    @apply font-bold py-2 px-4 text-color-2 bg-color-3 rounded-lg
+    hover:opacity-80 transition-opacity;
 }
 
 .oauth-provider-btn {
-    @apply m-2 hover:opacity-50 transition-opacity;
+    @apply m-2 hover:opacity-80 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
+    @apply flex flex-col items-center absolute 
+    top-1/2 -translate-y-1/2
     transition-transform duration-200
-    text-left;
+    text-left p-2;
 }
 .auth-form input {
-    @apply mb-2;
+    @apply mb-2 w-56;
+}
+.text-input {
+    @apply bg-color-3 p-2;
 }
-
 
 /* SCROLLBAR */
 /* width */