feature: setup signup and signin

web/src/App.tsx

@@ -1,11 +1,11 @@
+import './index.css'
+
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
 
-import './index.css'
-
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">

web/src/Routes.tsx

@@ -1,6 +1,7 @@
 import { PrivateSet, Route, Router, Set } from '@redwoodjs/router'
 
 import AuthLayout from './layouts/AuthLayout/AuthLayout'
+import InteriorLayout from './layouts/InteriorLayout/InteriorLayout'
 
 // In this file, all Page components from 'src/pages` are auto-imported. Nested
 // directories are supported, and should be uppercase. Each subdirectory will be
@@ -14,7 +15,9 @@ const Routes = () => {
   return (
     <Router>
       <PrivateSet unauthenticated="login">
-        <Route path="/dashboard" page={DashboardPage} name="dashboard" />
+        <Set wrap={InteriorLayout}>
+          <Route path="/dashboard" page={DashboardPage} name="dashboard" />
+        </Set>
       </PrivateSet>
       <Set wrap={AuthLayout}>
         <Route path="/signup" page={SignupPage} name="signup" />

web/src/pages/HomePage/HomePage.tsx

@@ -1,26 +1,12 @@
-import { Auth0Provider } from '@auth0/auth0-react'
-
 import { MetaTags } from '@redwoodjs/web'
 
-import AuthLayout from 'src/layouts/AuthLayout/AuthLayout'
-
 import LoginPage from '../LoginPage/LoginPage'
 
 const HomePage = () => {
   return (
     <>
-      <AuthLayout>
-        <Auth0Provider
-          domain={process.env.AUTH0_DOMAIN}
-          clientId={process.env.AUTH0_CLIENT_ID}
-          authorizationParams={{
-            redirect_uri: window.location.origin,
-          }}
-        >
-          <MetaTags title="Home" description="Home Page" />
-          <LoginPage></LoginPage>
-        </Auth0Provider>
-      </AuthLayout>
+      <MetaTags title="Home" description="Home Page" />
+      <LoginPage></LoginPage>
     </>
   )
 }

web/src/pages/HomePage/Login.tsx

@@ -1,5 +1,3 @@
-import { useAuth0 } from '@auth0/auth0-react'
-
 import Button from 'src/components/Button'
 
 const LoginButton = () => {

web/src/pages/HomePage/Logout.tsx

@@ -1,12 +1,8 @@
 import React from 'react'
 
-import { useAuth0 } from '@auth0/auth0-react'
-
 import Button from 'src/components/Button'
 
 const LogoutButton = () => {
-  const { logout } = useAuth0()
-
   return (
     <Button
       handleClick={() =>

web/src/pages/LoginPage/LoginPage.tsx

@@ -1,22 +1,38 @@
+import { supabase } from 'api/db/supabase'
+
 import { Form } from '@redwoodjs/forms'
-import { Link, routes } from '@redwoodjs/router'
+import { Link, navigate, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 
 import Button from 'src/components/Button/Button'
 import HeaderWithRulers from 'src/components/HeaderWithRulers/HeaderWithRulers'
 import Input from 'src/components/Input/Input'
 import ShowHidePassword from 'src/components/ShowHidePassword/ShowHidePassword'
-import { useAuth } from 'src/lib/auth'
 
 const LoginPage = () => {
+  const onSubmit = (inputs) => {
+    signIn(inputs)
+    onLogin()
+  }
+  const onLogin = () => {
+    navigate(routes.dashboard())
+  }
+  async function signIn(state) {
+    console.log(state)
+    const { data, error } = await supabase.auth.signInWithPassword({
+      email: state.Email,
+      password: state.Password,
+    })
+    console.log(data.user.role)
+  }
   return (
     <>
       <MetaTags title="Login" description="Login page" />
       <div className="container	 mx-auto items-center justify-center">
         <HeaderWithRulers heading="Login" className="text-white" />
-        <Form>
-          <Input name="Username" />
-          <ShowHidePassword name="password" />
+        <Form onSubmit={onSubmit}>
+          <Input name="Email" />
+          <ShowHidePassword name="Password" />
           <Button
             handleClick={() => {
               console.log('clicked')

web/src/pages/SignupPage/SignupPage.tsx

@@ -1,19 +1,59 @@
+import { supabase } from 'api/db/supabase'
+
+import { Form } from '@redwoodjs/forms'
 import { Link, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
+import { Toaster } from '@redwoodjs/web/toast'
+
+import Button from 'src/components/Button/Button'
+import HeaderWithRulers from 'src/components/HeaderWithRulers/HeaderWithRulers'
+import Input from 'src/components/Input/Input'
+import ShowHidePassword from 'src/components/ShowHidePassword/ShowHidePassword'
 
 const SignupPage = () => {
+  const [toastMessage, setToastMessage] = React.useState(false)
+  const onSubmit = (inputs) => {
+    signUpNewUser(inputs)
+  }
+
+  async function signUpNewUser(state) {
+    console.log(state)
+    const { data, error } = await supabase.auth.signUp({
+      email: state.Email,
+      password: state.Password,
+      options: {
+        data: {
+          name: state.Name,
+        },
+      },
+    })
+    if (error == null) {
+      setToastMessage(true)
+    }
+  }
+
   return (
     <>
-      <MetaTags title="Signup" description="Signup page" />
-
-      <h1>SignupPage</h1>
-      <p>
-        Find me in <code>./web/src/pages/SignupPage/SignupPage.tsx</code>
-      </p>
-      <p>
-        My default route is named <code>signup</code>, link to me with `
-        <Link to={routes.signup()}>Signup</Link>`
-      </p>
+      <MetaTags title="Signup" description="sign up page" />
+      <Toaster />
+      <div className="container	 mx-auto">
+        <HeaderWithRulers heading="Sign Up" className="text-white" />
+        <Form onSubmit={onSubmit}>
+          <Input name="Name" />
+          <Input name="Email" />
+          <ShowHidePassword name="Password" />
+          <Button
+            handleClick={() => {
+              console.log('hi')
+            }}
+            className="
+      w-full
+    rounded-full bg-supernova py-5 font-handwriting text-3xl uppercase text-black"
+          >
+            Submit
+          </Button>
+        </Form>
+      </div>
     </>
   )
 }