Merge commit 'd5afe1631eb3b58207a098285c8f73f246bb2c4d' into feat/gestion-utilisateur

front/package.json

@@ -3,6 +3,7 @@
   "type": "module",
   "version": "0.0.1",
   "private": "true",
+  "private": "true",
   "scripts": {
     "dev": "astro dev",
     "start": "node ./dist/server/entry.mjs",

front/src/components/Leaflet.astro

@@ -1,55 +0,0 @@
----
-import type { string } from 'astro/zod'
-import type { Marker } from 'leaflet'
-
-export interface Props {
-  latitude: number
-  longitude: number
-  zoom: number
-  /** the DOM ID of a <div> element */
-  container: string
-  /** https://leafletjs.com/reference.html#tilelayer */
-  tileLayer: string
-  /** Most tile servers require attribution. */
-  attribution: string
-  containerstyle?: string
-}
-
-const { latitude, longitude, zoom, container, tileLayer, attribution, containerstyle = "height: 61.8vh", class } = Astro.props
----
-
-<leaflet-map
-  data-latitude={latitude}
-  data-longitude={longitude}
-  data-zoom={zoom}
-  data-container={container}
-  data-tiles={tileLayer}
-  data-attribution={attribution}
-  data-containerstyle={containerstyle}
->
-
-<div id={container} style={containerstyle}></div>
-
-<script>
-  import L, { type LatLngTuple } from "leaflet"
-  import "leaflet/dist/leaflet"
-  import "leaflet/dist/leaflet.css"
-  
-
-  class LeafletMap extends HTMLElement {
-    constructor() {
-      super()
-
-      const latlng = [Number(this.dataset.latitude), Number(this.dataset.longitude)] as LatLngTuple
-
-      var map = L.map(this.dataset.container as string).setView(latlng, Number(this.dataset.zoom))
-      L.tileLayer(
-        this.dataset.tiles as string,
-        {attribution: this.dataset.attribution}
-        ).addTo(map)
-      var marker = L.marker([51.5, -0.09]).addTo(map);
-    }
-  }
-
-  window.customElements.define("leaflet-map", LeafletMap);
-</script>

front/src/libs/AstroUtils.ts

@@ -0,0 +1,5 @@
+export default class AstroUtils {
+	public static async wrap<T = void>(fn: () => T | Promise<T>) {
+		return await fn()
+	}
+}

front/src/pages/account/login.astro

@@ -0,0 +1,44 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import PocketBase from 'pocketbase';
+import AstroUtils from "../../libs/AstroUtils";
+import Schema from 'models/Schema'
+
+
+// const usr = await getUser(Astro.cookies)
+// if (usr) {
+// 	return Astro.redirect(route('/', {message: 'Vous êtes déjà connecté !'}))
+// }
+
+
+const res = await AstroUtils.wrap(async () => {
+    if (Astro.request.method !== 'POST') {
+        return
+    }
+    const form = await Astro.request.formData();
+    const request = {
+        email: form.get("username") as String,
+        password: form.get("password") as String
+    }
+    const pb = new PocketBase('http://127.0.0.1:3001');
+
+    const authData = await pb.collection('users').authWithPassword(
+        request.email,
+        request.password,
+    );
+
+    // after the above you can also access the auth data from the authStore
+    console.log(pb.authStore.isValid);
+    console.log(pb.authStore.token);
+    console.log(pb.authStore.model.id);
+
+})
+---
+
+<Layout title="login">
+    <form id="account-creation" method="post" enctype="multipart/form-data">
+        <input required name="username" placeholder="Pseudo ou email"/>
+        <input required name="password" type="password" placeholder="Mot de passe" />
+        <button>Connection</button>
+    </form>
+</Layout>

front/src/pages/account/register.astro

@@ -0,0 +1,44 @@
+---
+import PocketBase from 'pocketbase';
+import Layout from '../../layouts/Layout.astro';
+import AstroUtils from '../../libs/AstroUtils';
+
+//const connected = await getUser(Astro.cookies)
+
+// if(connected) {
+//     return Astro.redirect(route('/'))
+// }
+
+
+const res = await AstroUtils.wrap(async () => {
+    if (Astro.request.method !== 'POST'){
+        return
+    }
+    const form = await Astro.request.formData()
+    const request = {
+        username: form.get("username") as String,
+        name: form.get("name") as String,
+        email: form.get("email") as String,
+        password: form.get("password") as String,
+        passwordConfirm: form.get("passwordConfirm") as String,
+        emailVisibility: false
+    }
+    const pb = new PocketBase('http://127.0.0.1:3001');
+    
+    console.log(request);
+    const record = await pb.collection('users').create(request);
+    console.log(record);
+    
+})
+---
+
+<Layout title="register">
+    <form id="account-creation" method="post" enctype="multipart/form-data">
+        <input required name="name" placeholder="Prénom Nom"/>
+        <input required name="username" placeholder="Pseudo"/>
+        <input required name="email" type="email" placeholder="Renseignez votre email" />
+        <input required name="password" type="password" placeholder="Créez un mot de passe" />
+        <input required name="passwordConfirm" type="password" placeholder="Confirmer votre mot de passe" />
+        <button>Créer un compte</button>
+    </form>
+</Layout>

front/src/pages/maps.astro

@@ -1,32 +1,17 @@
 ---
-import Leaflet from 'components/Leaflet.astro';
 import Layout from 'layouts/Layout.astro';
-// import { Marker, Popup } from 'leaflet';
+import { Marker, Popup } from 'leaflet';
-// import type { only } from 'node:test';
+import { MapContainer } from 'react-leaflet'
-// import { MapContainer, TileLayer } from 'react-leaflet'
 ---
 
 <Layout title="maps test">
 
-    <!-- <MapContainer client:only="react" center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
+    <MapContainer client:load center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
-      <TileLayer
+        <Marker client:load lat={51.505} lng={-0.09}>
-      client:only="react"
+            <Popup client:load>
-      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-    />
-        <Marker client:only="react" lat={51.505} lng={-0.09}>
-            <Popup client:only="react">
               A pretty CSS3 popup. <br /> Easily customizable.
             </Popup>
           </Marker>
-    </MapContainer> -->
+    </MapContainer>
 
-  <Leaflet
-    latitude={51.505}
-    longitude={-0.09}
-    zoom={13}
-    container="leafletmap"
-    tileLayer="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-    attribution="© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors">
-  </Leaflet>
 </Layout>