login with pocketbase and add simple router

package.json

@@ -13,6 +13,7 @@
     "@astrojs/preact": "^3.0.0",
     "@astrojs/tailwind": "^5.0.0",
     "astro": "^3.0.12",
+    "pocketbase": "^0.18.0",
     "preact": "^10.6.5",
     "tailwindcss": "^3.0.24"
   }

pnpm-lock.yaml

@@ -10,6 +10,9 @@ dependencies:
   astro:
     specifier: ^3.0.12
     version: 3.0.12
+  pocketbase:
+    specifier: ^0.18.0
+    version: 0.18.0
   preact:
     specifier: ^10.6.5
     version: 10.17.1
@@ -2752,6 +2755,10 @@ packages:
       find-up: 4.1.0
     dev: false
 
+  /pocketbase@0.18.0:
+    resolution: {integrity: sha512-09ri0Rnm4JjboU4OJeibd6pgvKi4DPg/r/Uu/QI3mKSZsrROoMT75zyiOldbBBMWZUDG1TRlv6BjQj30SFsrVw==}
+    dev: false
+
   /postcss-import@15.1.0(postcss@8.4.29):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}

src/components/EspaceMembres.tsx

@@ -0,0 +1,48 @@
+import { createContext } from "preact";
+import Login from "./Login";
+import PocketBase from 'pocketbase';
+import { useContext, useState } from "preact/hooks";
+
+const pb = new PocketBase(import.meta.env.PUBLIC_PB_API);
+export const Pb = createContext(pb);
+
+export const Router = createContext({
+  navigate: (path: string) => {
+    console.log(path);
+  },
+});
+
+function Fake() {
+  const router = useContext(Router);
+  const handleClick = () => {
+    router.navigate('/login');
+  }
+
+  return (
+    <div className="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
+      <h1 className="text-2xl font-bold leading-9 tracking-tight text-gray-900">Fake</h1>
+      <button onClick={handleClick}>Go to login</button>
+    </div>
+  )
+}
+
+export default function EspaceMembres() {
+  const [route, setRoute] = useState('/');
+
+  const navigate = (path: string) => {
+    setRoute(path);
+  }
+
+  return (
+    <Pb.Provider value={pb}>
+      <Router.Provider value={{
+        navigate,
+      }}>
+        {{
+          '/': <Fake />,
+          '/login': <Login />,
+        }[route]}
+      </Router.Provider>
+    </Pb.Provider>
+  )
+}

src/components/Login.tsx

@@ -1,13 +1,26 @@
-import type { TargetedEvent } from "preact/compat"
+import { type TargetedEvent } from "preact/compat"
+import { useContext } from "preact/compat"
+import { Pb, Router } from "./EspaceMembres"
 
 export default function Login() {
+  const pb = useContext(Pb);
+  const router = useContext(Router);
+
   const handleSubmit = (event: TargetedEvent<HTMLFormElement>) => {
     event.preventDefault()
-    console.log(import.meta.env.PUBLIC_PB_API)
+    login(event.currentTarget.email.value, event.currentTarget.password.value)
   }
-  const handleChange = (event: TargetedEvent<HTMLInputElement>) => {
-    console.log(event.currentTarget.value)
+
+  const login = async (email: string, password: string) => {
+    try {
+      await pb.collection('users').authWithPassword(email, password);
+      router.navigate('/');
+    } catch (error) {
+      if (error instanceof Error)
+        console.error(error.message);
+    }
   }
+
   return (
     <div className="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
       <div className="sm:mx-auto sm:w-full sm:max-w-sm">
@@ -19,7 +32,7 @@ export default function Login() {
           <div>
             <label for="email" className="block text-sm font-medium leading-6 text-gray-900">Adresse e-mail</label>
             <div className="mt-2">
-              <input id="email" name="email" type="email" autocomplete="email" required className="block w-full rounded-sm border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 sm:text-sm sm:leading-6" onInput={handleChange}/>
+              <input id="email" name="email" type="email" autocomplete="email" required className="block w-full rounded-sm border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 sm:text-sm sm:leading-6" />
             </div>
           </div>
 

src/pages/espace-membres.astro

@@ -1,7 +1,9 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import Login from '../components/Login.tsx'
+// import Login from '../components/Login.tsx'
+import EspaceMembres from '../components/EspaceMembres.tsx';
 ---
 <Layout title="Espace membres">
-  <Login client:only="preact"/>
+  <!-- <Login client:only="preact"/> -->
+  <EspaceMembres client:only="preact"/>
 </Layout>