feat: MAP WORKING

Reviewed-on: #7
Co-authored-by: Clement <c.boesmier@aptatio.com>
Co-committed-by: Clement <c.boesmier@aptatio.com>

.github/workflows/build_docker.yml

@@ -0,0 +1,53 @@
+name: Build Docker Image # nom du workflow
+
+on: #declancheur
+  push:
+    branches:
+      - '*'
+    tags:
+      - v*
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  run: #jobs ID (nom du jobs)
+    runs-on: ubuntu-latest # environement de run
+
+    steps: # liste des étapes
+    - name: Checkout # rapatrie le depot
+      uses: actions/checkout@v3
+
+    - name: Docker meta
+      id: meta
+      uses: docker/metadata-action@v5
+      with:
+        images: |
+          git.lab-ouest.org/Epitech/ratrapage_T-WEB_front
+        tags: |
+          type=edge
+          type=ref,event=pr
+          type=ref,event=branch
+          type=semver,pattern={{version}}
+          type=semver,pattern={{major}}.{{minor}}
+          type=semver,pattern={{major}}
+          type=semver,pattern=latest
+
+    - name: Login to Gitea
+      uses: docker/login-action@v3
+      with:
+        registry: git.lab-ouest.org
+        username: ${{ secrets.DOCKER_USERNAME }}
+        password: ${{ secrets.DOCKER_TOKEN }}
+
+    # - name: Set up Docker Buildx
+    #   uses: docker/setup-buildx-action@v3
+
+    - name: Build and push front
+      uses: docker/build-push-action@v5
+      with:
+        context: ./front
+        push: true
+        file: ./front/Dockerfile
+        tags: ${{ steps.meta.outputs.tags }}
+        labels: ${{ steps.meta.outputs.labels }}

bruno/OpenData datatourisme/Google API.bru

@@ -0,0 +1,30 @@
+meta {
+  name: Google API
+  type: http
+  seq: 3
+}
+
+post {
+  url: https://places.googleapis.com/v1/places:searchNearby
+  body: json
+  auth: none
+}
+
+headers {
+  X-Goog-Api-Key: {{GOOGLE_API_KEY}}
+}
+
+body:json {
+  {
+    "includedTypes": ["restaurant"],
+    "maxResultCount": 10,
+    "locationRestriction": {
+      "circle": {
+        "center": {
+          "latitude": 37.7937,
+          "longitude": -122.3965},
+        "radius": 500.0
+      }
+    }
+  }
+}

bruno/OpenData datatourisme/environments/dev.bru

@@ -1,6 +1,4 @@
-vars {
-  URL: http://localhost:8080
-}
 vars:secret [
-  app_key
+  app_key,
+  GOOGLE_API_KEY
 ]

bruno/OpenData datatourisme/environments/prod.bru

@@ -1,3 +0,0 @@
-vars:secret [
-  URL
-]

bruno/OpenData datatourisme/list oaut methode.bru

@@ -0,0 +1,11 @@
+meta {
+  name: list oaut methode
+  type: http
+  seq: 5
+}
+
+get {
+  url: https://pb-tweb.cb85.fr/api/collections/users/auth-methods
+  body: none
+  auth: none
+}

bruno/OpenData datatourisme/oauth test.bru

@@ -0,0 +1,18 @@
+meta {
+  name: oauth test
+  type: http
+  seq: 4
+}
+
+post {
+  url: https://pb-tweb.cb85.fr/api/collections/users/auth-with-oauth2
+  body: json
+  auth: none
+}
+
+body:json {
+  {
+    provider: "google"
+    
+  }
+}

bruno/OpenData datatourisme/test pays de la loire.bru

@@ -5,11 +5,11 @@ meta {
 }
 
 post {
-  url: {{URL}}
+  url: http://localhost:8080
   body: graphql
   auth: none
 }
 
 body:graphql {
-  {poi() {results{dc_identifier, lastUpdate}}}
+  {poi() {results{dc_identifier rdfs_label}}}
 }

docker-compose.yml

@@ -1,20 +1,34 @@
+version: "3.8"
 services:
-
-  blazegraph:
-      image: conjecto/blazegraph:2.1.5
-      # ports:
-      #   - 9999:9999
-      environment:
-          JAVA_OPTS: "-Xms6G -Xmx6G"
-      volumes:
-        - ./datatourisme/dataset:/docker-entrypoint-initdb.d
-      ulimits:
-        nofile:
-          soft: 65536
-          hard: 65536
-  datatourisme:
-      image: git.lab-ouest.org/epitech/fork-open-data-tourism:master
-      # ports:
-      #     - "8080:80"
-      depends_on:
-          - blazegraph
+  pocketbase:
+    image: ghcr.io/coollabsio/pocketbase:latest
+    environment:
+      - SERVICE_FQDN_POCKETBASE_8080
+    volumes:
+      - ./.pb/pocketbase-data:/app/pb_data
+      - ./.pb/pocketbase-hooks:/app/pb_hooks
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.poketBaseTweb.rule=Host(`${POCKET_BASE_URL}`)
+      - traefik.http.services.poketBaseTweb.loadbalancer.server.port=${POCKET_BASE_PORT}
+      - traefik.http.routers.poketBaseTweb.tls.certresolver=le
+    networks:
+      - public
+  front:
+    image: git.lab-ouest.org/epitech/ratrapage_t-web_front:pr-7-head
+    depends_on: 
+      - pocketbase
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.astroTweb.rule=Host(`${FRONT_URL}`)
+      - traefik.http.services.astroTweb.loadbalancer.server.port=${FRONT_BASE_PORT}
+      - traefik.http.routers.astroTweb.tls.certresolver=le
+    networks:
+      - public
+networks:
+  public:
+    external: true
+x-dockge:
+  urls:
+    - https://${POCKET_BASE_URL}/
+    - https://${FRONT_URL}/

front/.eslintignore

@@ -0,0 +1,8 @@
+node_modules
+
+out
+.next
+
+next-env.d.ts
+*.js
+__tests__

front/.eslintrc.json

@@ -0,0 +1,324 @@
+{
+	"env": {
+		"browser": true,
+		"es6": true,
+		"node": true
+	},
+	"extends": [
+		"eslint:recommended",
+		"plugin:astro/recommended",
+		"plugin:@typescript-eslint/strict",
+		"plugin:@typescript-eslint/stylistic"
+	],
+	"globals": {
+		"Atomics": "readonly",
+		"SharedArrayBuffer": "readonly"
+	},
+	"overrides": [
+		{
+			"files": [
+				"*.astro"
+			],
+			"parser": "astro-eslint-parser",
+			"parserOptions": {
+				"extraFileExtensions": [
+					".astro"
+				],
+				"parser": "@typescript-eslint/parser"
+			}
+		},
+		{
+			"files": [
+				"*.ts",
+				"*.tsx",
+				"*.astro"
+			],
+			"rules": {
+				"no-extra-parens": "off",
+				"no-unused-expressions": "off",
+				"no-shadow": "off",
+				"quotes": "off",
+				"semi": "off",
+				"space-before-function-paren": "off"
+			}
+		}
+	],
+	"parser": "@typescript-eslint/parser",
+	"parserOptions": {
+		"ecmaFeatures": {
+			"jsx": true,
+			"project": "tsconfig.json",
+			"sourceType": "module",
+			"ecmaVersion": 2018
+		}
+	},
+	"plugins": [
+		"@typescript-eslint"
+	],
+	"root": true,
+	"rules": {
+		"@typescript-eslint/prefer-for-of": "error",
+		"@typescript-eslint/prefer-function-type": "error",
+		"@typescript-eslint/prefer-namespace-keyword": "error",
+		"@typescript-eslint/space-before-function-paren": [
+			"error",
+			{
+				"anonymous": "never",
+				"asyncArrow": "always",
+				"named": "never"
+			}
+		],
+		"@typescript-eslint/triple-slash-reference": "error",
+		"@typescript-eslint/type-annotation-spacing": "error",
+		"@typescript-eslint/unified-signatures": "error",
+
+		"@typescript-eslint/adjacent-overload-signatures": "error",
+		"@typescript-eslint/array-type": [
+			"error",
+			{
+				"default": "generic"
+			}
+		],
+		"arrow-body-style": "error",
+		"arrow-parens": [
+			"error",
+			"always"
+		],
+		"@typescript-eslint/ban-types": [
+			"error",
+			{
+				"types": {
+					"{}": false
+				}
+			}
+		],
+		"complexity": [
+			"warn",
+			10
+		],
+		"@typescript-eslint/consistent-type-assertions": "error",
+		"@typescript-eslint/consistent-type-definitions": "error",
+		"constructor-super": "error",
+		"curly": "error",
+		"dot-notation": "error",
+		"eol-last": "error",
+		"eqeqeq": [
+			"error",
+			"smart"
+		],
+		"@typescript-eslint/explicit-member-accessibility": [
+			"error",
+			{
+				"accessibility": "explicit"
+			}
+		],
+		"for-direction": "error",
+		"getter-return": "error",
+		"guard-for-in": "error",
+		"id-blacklist": [
+			"error",
+			"any",
+			"Number",
+			"number",
+			"String",
+			"string",
+			"Boolean",
+			"boolean",
+			"Undefined"
+		],
+		"id-length": [
+			"warn",
+			{
+				"exceptions": [
+					"_"
+				]
+			}
+		],
+		"id-match": "error",
+		"indent": [
+			"error",
+			"tab",
+			{
+				"SwitchCase": 1
+			}
+		],
+		"linebreak-style": [
+			"error",
+			"unix"
+		],
+		"max-classes-per-file": [
+			"error",
+			1
+		],
+		"max-depth": [
+			"warn",
+			2
+		],
+		"max-len": [
+			"warn",
+			{
+				"code": 256
+			}
+		],
+		"@typescript-eslint/member-delimiter-style": [
+			"error",
+			{
+				"multiline": {
+					"delimiter": "none",
+					"requireLast": true
+				},
+				"singleline": {
+					"delimiter": "comma",
+					"requireLast": false
+				}
+			}
+		],
+		"@typescript-eslint/member-ordering": "error",
+		"new-parens": "error",
+
+		"no-async-promise-executor": "error",
+		"no-await-in-loop": "warn",
+		"no-bitwise": "error",
+		"no-caller": "error",
+		"no-compare-neg-zero": "error",
+		"no-cond-assign": "error",
+		"no-console": "off",
+		"no-constant-condition": "error",
+		"no-control-regex": "warn",
+		"no-debugger": "error",
+		"no-delete-var": "error",
+		"no-dupe-args": "error",
+		"no-dupe-else-if": "error",
+		"no-dupe-keys": "error",
+		"no-duplicate-case": "error",
+		"no-empty": [
+			"error",
+			{
+				"allowEmptyCatch": true
+			}
+		],
+		"no-empty-character-class": "error",
+		"@typescript-eslint/no-empty-function": "error",
+		"@typescript-eslint/no-empty-interface": "error",
+		"no-eval": "error",
+		"no-ex-assign": "error",
+		"@typescript-eslint/no-explicit-any": "off",
+
+
+		"no-extra-boolean-cast": "error",
+		"no-extra-parens": "off",
+		"@typescript-eslint/no-extra-parens": [
+			"error",
+			"all",
+			{
+				"ignoreJSX": "all"
+			}
+		],
+		"no-extra-semi": "error",
+		"no-fallthrough": "off",
+		"no-func-assign": "error",
+		"no-import-assign": "error",
+		"no-inner-declarations": "error",
+		"no-invalid-regexp": "error",
+		"no-irregular-whitespace": "error",
+		"no-label-var": "error",
+		"no-loss-of-precision": "error",
+		"no-misleading-character-class": "error",
+		"@typescript-eslint/no-misused-new": "error",
+		"no-multiple-empty-lines": "error",
+		"@typescript-eslint/no-namespace": "error",
+		"no-new-wrappers": "error",
+		"no-obj-calls": "error",
+		"no-promise-executor-return": "error",
+		"@typescript-eslint/no-parameter-properties": "off",
+		"no-prototype-builtins": "error",
+		"no-regex-spaces": "error",
+		"no-setter-return": "error",
+		"@typescript-eslint/no-shadow": "error",
+		"no-shadow": [
+			"error",
+			{
+				"builtinGlobals": false,
+				"hoist": "all"
+			}
+		],
+		"no-shadow-restricted-names": "error",
+		"no-sparse-arrays": "error",
+		"no-template-curly-in-string": "warn",
+		"no-throw-literal": "error",
+		"no-trailing-spaces": "error",
+		"no-undef": "error",
+		"no-undef-init": "error",
+		"no-underscore-dangle": "off",
+		"no-unexpected-multiline": "error",
+		"no-unreachable": "warn",
+		"no-unreachable-loop": "warn",
+		"no-unsafe-finally": "error",
+		"no-unsafe-negation": "error",
+		"no-unsafe-optional-chaining": "error",
+		"no-unused-expressions": [
+			"error",
+			{
+				"allowTernary": true
+			}
+		],
+		"@typescript-eslint/no-unused-expressions": [
+			"error",
+			{
+				"allowTernary": true
+			}
+		],
+		"no-unused-labels": "error",
+		"no-unused-vars": "off",
+		"@typescript-eslint/no-unused-vars": ["error", {
+			"args": "all",
+			"argsIgnorePattern": "^_",
+			"caughtErrors": "all",
+			"caughtErrorsIgnorePattern": "^_",
+			"destructuredArrayIgnorePattern": "^_",
+			"varsIgnorePattern": "^_",
+			"ignoreRestSiblings": true
+		}],
+		"@typescript-eslint/no-non-null-assertion": ["warn"],
+		"no-var": "error",
+		"object-shorthand": [
+			"warn",
+			"methods"
+		],
+		"one-var": [
+			"error",
+			"never"
+		],
+		"prefer-const": "error",
+		"quote-props": [
+			"error",
+			"consistent-as-needed"
+		],
+		"quotes": "off",
+		"@typescript-eslint/quotes": [
+			"error",
+			"single",
+			{
+				"avoidEscape": true
+			}
+		],
+		"radix": "error",
+		"require-atomic-updates": "warn",
+		"semi": "off",
+		"@typescript-eslint/semi": [
+			"error",
+			"never"
+		],
+		"space-before-function-paren": [
+			"error",
+			{
+				"anonymous": "never",
+				"asyncArrow": "always",
+				"named": "never"
+			}
+		],
+		"spaced-comment": ["error", "always", { "block": { "exceptions": ["*"] } }],
+		"use-isnan": "error",
+		"valid-typeof": "warn"
+	}
+}

front/.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+	"editor.quickSuggestions": {
+		"strings": "on"
+	},
+	"tailwindCSS.includeLanguages": {
+		"astro": "html"
+	},
+	"typescript.tsdk": "node_modules/typescript/lib"
+}

front/Dockerfile

@@ -0,0 +1,64 @@
+# This Dockerfile allows you to run AstroJS in server mode
+
+#########
+# Build #
+#########
+FROM docker.io/node:20-alpine as BUILD_IMAGE
+
+# Disable telemetry
+ENV ASTRO_TELEMETRY_DISABLED=1
+
+# External deps (for node-gyp add: "python3 make g++")
+RUN apk add --no-cache git
+
+# run as non root user
+USER node
+
+# go to user repository
+WORKDIR /home/node
+
+# Add package json
+ADD --chown=node:node package.json package-lock.json ./
+
+# install dependencies from package lock
+RUN npm ci
+
+# Add project files
+ADD --chown=node:node . .
+
+# build
+RUN npm run build
+
+# remove dev deps
+RUN npm prune --omit=dev
+
+##############
+# Production #
+##############
+FROM docker.io/node:20-alpine as PROD_IMAGE
+
+# inform software to be in production
+ENV NODE_ENV=production
+ENV HOST=0.0.0.0
+ENV RESOURCES_FOLDER=/home/node/.loop/uploads
+ENV ASTRO_TELEMETRY_DISABLED=1
+
+# run as non root user
+USER node
+
+# go to work folder
+WORKDIR /home/node
+
+# Expose port
+EXPOSE 3000
+
+# Add Healthcheck
+HEALTHCHECK --interval=10s --timeout=10s --start-period=5s --retries=3 CMD wget --no-verbose --tries=1 --spider http://localhost:3000 || exit 1
+
+# copy from build image
+COPY --chown=node:node --from=BUILD_IMAGE /home/node/node_modules ./node_modules
+COPY --chown=node:node --from=BUILD_IMAGE /home/node/dist ./dist
+COPY --chown=node:node --from=BUILD_IMAGE /home/node/package.json /home/node/.env* ./
+
+# run it !
+CMD ["npm", "run", "start"]

front/astro.config.mjs

@@ -1,8 +1,11 @@
-import { defineConfig } from 'astro/config';
+import node from '@astrojs/node'
+import tailwind from '@astrojs/tailwind'
+import { defineConfig } from 'astro/config'
+
+import react from '@astrojs/react'
 
 // https://astro.build/config
 export default defineConfig({
-    // integrations: [tailwind(), test, routing(), version(), buildInfos()],
 	compressHTML: true,
 	build: {
 		assets: 'assets',
@@ -12,9 +15,15 @@ export default defineConfig({
 		host: true,
 		port: 3000
 	},
-    trailingSlash: 'never',
-    output: 'static', //'server',
-    // adapter: node({
-	// 	mode: 'standalone'
-	// }),
-});
+	trailingSlash: 'never',
+	output: 'server',
+	adapter: node({
+		mode: 'standalone'
+	}),
+	integrations: [tailwind(), react()],
+	vite: {
+		optimizeDeps: {
+			include: ['leaflet']
+		}
+	}
+})

front/package.json

@@ -2,32 +2,44 @@
   "name": "front",
   "type": "module",
   "version": "0.0.1",
-  "private":"true",
+  "private": "true",
   "scripts": {
     "dev": "astro dev",
-    "start": "astro dev",
+    "start": "node ./dist/server/entry.mjs",
     "build": "astro check && astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "check:lint": "eslint src"
   },
   "dependencies": {
+    "@astrojs/node": "^8.2.5",
+    "@astrojs/react": "^3.3.1",
     "@astrojs/tailwind": "^5.1.0",
     "@tailwindcss/typography": "^0.5.12",
-    "astro": "^4.6.3",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "astro": "4.5.12",
+    "leaflet": "^1.9.4",
     "lucide-astro": "^0.372.0",
+    "pocketbase": "^0.21.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "simple-icons-astro": "^11.12.0",
     "tailwindcss": "^3.4.3",
-    "typescript": "^5.2.2"
+    "typescript": "^5"
   },
   "devDependencies": {
-		"@astrojs/check": "^0",
-		"@types/node": "^20",
-		"@typescript-eslint/eslint-plugin": "^6",
-		"@typescript-eslint/parser": "^6",
-		"@vitest/coverage-v8": "^1",
-		"eslint": "^8",
-		"eslint-plugin-astro": "^0.31",
-		"typescript": "^5",
-		"vitest": "^1"
-	}
+    "@astrojs/check": "^0",
+    "@astrojs/ts-plugin": "^1.6.1",
+    "@types/leaflet": "^1.9.12",
+    "@types/node": "^20",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitest/coverage-v8": "^1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-astro": "^0.31.4",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "typescript": "^5",
+    "vitest": "^1"
+  }
 }

front/src/env.d.ts

@@ -1 +1,32 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+import PocketBase from 'pocketbase'
+export interface ImportMetaEnv {
+    NODE_ENV: string
+    APP_URL: string
+
+    POCKETBASE_URL: string
+
+	GOOGLE_API_KEY: string
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv
+}
+
+
+// declare namespace App {
+// 	interface Locals {
+// 		pb: PocketBase
+// 	}
+// }
+
+
+declare global {
+    namespace App {
+        interface Locals {
+			pb: PocketBase
+        }
+    }
+}

front/src/layouts/Layout.astro

@@ -20,32 +20,3 @@ const { title } = Astro.props;
 		<slot />
 	</body>
 </html>
-<style is:global>
-	:root {
-		--accent: 136, 58, 234;
-		--accent-light: 224, 204, 250;
-		--accent-dark: 49, 10, 101;
-		--accent-gradient: linear-gradient(
-			45deg,
-			rgb(var(--accent)),
-			rgb(var(--accent-light)) 30%,
-			white 60%
-		);
-	}
-	html {
-		font-family: system-ui, sans-serif;
-		background: #13151a;
-		background-size: 224px;
-	}
-	code {
-		font-family:
-			Menlo,
-			Monaco,
-			Lucida Console,
-			Liberation Mono,
-			DejaVu Sans Mono,
-			Bitstream Vera Sans Mono,
-			Courier New,
-			monospace;
-	}
-</style>

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/libs/Env.ts

@@ -0,0 +1,17 @@
+import type { ImportMetaEnv } from 'env'
+
+/**
+ * Get the environment variable
+ *
+ * @param key the env variable key
+ * @param defaultValue a default value if applicable
+ * @returns the environment value or undefined if not found
+ */
+export function getEnv(key: keyof ImportMetaEnv, defaultValue: string): string
+export function getEnv(key: keyof ImportMetaEnv, defaultValue?: string | undefined): string | undefined
+export function getEnv(key: keyof ImportMetaEnv, defaultValue?: string | undefined): string | undefined {
+	// get the env variable through Astro > NodeJS > input
+	const res = import.meta.env[key] ?? process.env[key] ?? defaultValue
+
+	return res ?? undefined
+}

front/src/middleware/index.ts

@@ -0,0 +1,39 @@
+import PocketBase from 'pocketbase'
+
+import { defineMiddleware } from 'astro/middleware'
+import { getEnv } from 'libs/Env'
+
+export const onRequest = defineMiddleware(async ({ locals, cookies}, next) => {
+	locals.pb = new PocketBase(getEnv('POCKETBASE_URL','http://localhost:8080'))
+
+	// load the store data from the request cookie string
+	const pbcookie = cookies.get('session')?.value
+	locals.pb.authStore.loadFromCookie('pb_auth=' + pbcookie || '')
+
+	try {
+		// get an up-to-date auth store state by verifying and refreshing the loaded auth model (if any)
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		locals.pb.authStore.isValid && await locals.pb.collection('users').authRefresh()
+	} catch (_) {
+		// clear the auth store on failed refresh
+		locals.pb.authStore.clear()
+	}
+
+	const response = await next()
+
+	let secure = true
+	if (getEnv('NODE_ENV', 'production') !== 'production') {
+		secure = false
+	}
+	const pbcookieStr = locals.pb.authStore.exportToCookie()
+
+	cookies.set('session',pbcookieStr.slice(pbcookieStr.indexOf('=')+1,pbcookieStr.indexOf(';')),{
+		httpOnly: true,
+		path: '/',
+		secure: secure,
+		sameSite: 'lax',
+		maxAge: 365000
+	})
+
+	return response
+})

front/src/pages/account/index.astro

@@ -0,0 +1,21 @@
+---
+import Layout from 'layouts/Layout.astro'
+import PocketBase from 'pocketbase'
+
+
+const pb = Astro.locals.pb
+const auth = pb.authStore
+const user = auth.model
+
+if(!auth.isValid){
+    return Astro.redirect("/account/login");
+}
+
+---
+
+<Layout title="Account setting">
+    <h1>Bonjour {user!.name}</h1>
+    <div>
+        <a href="/account/logout">deconnexion</a>
+    </div>
+</Layout>

front/src/pages/account/login.astro

@@ -0,0 +1,40 @@
+---
+import Layout from "layouts/Layout.astro";
+import AstroUtils from "libs/AstroUtils";
+import PocketBase from 'pocketbase'
+
+
+const pb = Astro.locals.pb
+
+if(pb.authStore.isValid){
+    return Astro.redirect("/account")
+}
+
+const res = await AstroUtils.wrap(async () => {
+    if (Astro.request.method !== 'POST') {
+        return
+    }    
+    const form = await Astro.request.formData();
+    const request = {
+        user: form.get("username") as string,
+        password: form.get("password") as string
+    }
+
+    try {
+        await pb.collection('users').authWithPassword(request.user,request.password);
+        return Astro.redirect("/account")
+    } catch (error) {
+        console.log(error)
+        console.warn('user password is incorrect')
+        return Astro.redirect("/account/login");// route('/account/login', {message: 'Compte invalide, valider les identifiants'})) //XXX: comprendre comment le system de route fonctionne
+    }
+})
+---
+
+<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/logout.astro

@@ -0,0 +1,13 @@
+---
+import PocketBase from 'pocketbase'
+
+
+const pb = Astro.locals.pb
+
+if(pb.authStore.isValid){
+    pb.authStore.clear()
+}
+
+return Astro.redirect('/account/login')
+
+---

front/src/pages/account/oauth.astro

@@ -0,0 +1,97 @@
+---
+
+const pb = Astro.locals.pb
+const redirectUrl = Astro.url.protocol + "//" + Astro.url.host + '/account/oauth';
+
+console.log(redirectUrl)
+
+const params = Astro.url.searchParams
+
+const code = params.get('code')
+
+console.log(Astro.request.headers.get('cookie'))
+//TODO socké dans les cookies
+// load the previously stored provider's data
+const providerstr = Astro.cookies.get('provider')
+
+if (!providerstr) {
+    console.error("Fail to load provider")
+    console.log(providerstr)
+    return
+}
+const provider = providerstr.json()
+
+if (!code) {
+    console.error("Fail to load code params");
+    return
+}
+
+// compare the redirect's state param and the stored provider's one
+if (provider.state !== params.get('state')) {
+    throw "State parameters don't match.";
+}
+
+pb.collection('users').authWithOAuth2Code(
+    provider.name,
+    code,
+    provider.codeVerifier,
+    redirectUrl,
+    // pass optional user create data
+    {
+        emailVisibility: false,
+    }
+).then((authData) => {
+    //REDIRECT
+    console.log("oauth OK !!");
+    console.log(JSON.stringify(authData, null, 2));
+}).catch((err) => {
+    console.log("oauth fail !!");
+    console.log(err);
+});
+
+---
+
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>OAuth2 redirect page</title>
+</head>
+<body>
+    <pre id="content">Authenticating...</pre>
+
+    <script src="https://cdn.jsdelivr.net/gh/pocketbase/js-sdk@master/dist/pocketbase.umd.js"></script>
+    <script type="text/javascript">
+        const pb = new PocketBase("http://127.0.0.1:8090");
+        const redirectUrl = 'http://127.0.0.1:8090/redirect.html';
+
+        // parse the query parameters from the redirected url
+        const params = (new URL(window.location)).searchParams;
+
+        // load the previously stored provider's data
+        const provider = JSON.parse(localStorage.getItem('provider'))
+
+        // compare the redirect's state param and the stored provider's one
+        if (provider.state !== params.get('state')) {
+            throw "State parameters don't match.";
+        }
+
+        // authenticate
+        pb.collection('users').authWithOAuth2Code(
+            provider.name,
+            params.get('code'),
+            provider.codeVerifier,
+            redirectUrl,
+            // pass optional user create data
+            {
+                emailVisibility: false,
+            }
+        ).then((authData) => {
+            document.getElementById('content').innerText = JSON.stringify(authData, null, 2);
+        }).catch((err) => {
+            document.getElementById('content').innerText = "Failed to exchange code.\n" + err;
+        });
+    </script>
+</body>
+</html>

front/src/pages/account/register.astro

@@ -0,0 +1,77 @@
+---
+import Layout from 'layouts/Layout.astro';
+import AstroUtils from 'libs/AstroUtils';
+import { getEnv } from 'libs/Env';
+
+const pb = Astro.locals.pb
+
+const oauths = await pb.collection('users').listAuthMethods();
+
+
+console.log(JSON.stringify(oauths.authProviders[0]));
+
+let secure = true
+if (getEnv('NODE_ENV', 'production') !== 'production') {
+    secure = false
+}
+
+Astro.cookies.set('provider', oauths.authProviders[0],{
+		httpOnly: true,
+		path: '/',
+		secure: secure,
+		sameSite: 'lax',
+		maxAge: 365000
+	})
+
+if(pb.authStore.isValid){
+    return Astro.redirect("/account")
+}
+
+await AstroUtils.wrap(async () => {
+    if (Astro.request.method !== 'POST'){
+        return
+    }
+    const form = await Astro.request.formData()
+    if(form.get("type") == "userPassword"){
+        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,
+        }
+        try{
+            await pb.collection('users').create(request)
+            return Astro.redirect('/account/login')
+        }catch(e){
+            console.log(e);
+        }
+    }else if (form.get("type") == "discord2FA") {
+        // console.log("pouet")
+        // await pb.collection('user').authWithOAuth2({provider: 'discord'})
+        // console.log("pouetF");
+        
+    }else{
+        Astro.redirect("/404")
+    }
+})
+---
+
+<Layout title="register">
+    <form id="account-creation" method="post" enctype="multipart/form-data">
+        <input type="hidden" name="type" value="userPassword">
+        <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>
+
+    <button id="OauthDiscord">connexion avec discord</button>
+    <form method="post" enctype="multipart/form-data">
+        <input type="hidden" name="type" value="discord2FA">
+    </form>
+    <a href={oauths.authProviders[0].authUrl + Astro.url.protocol + "//" + Astro.url.host + '/account/oauth'}>discord?</a>
+</Layout>
+ 

front/src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
+import Layout from 'layouts/Layout.astro';
+import Card from 'components/Card.astro';
 ---
 
 <Layout title="Welcome to Astro.">

front/src/pages/maps.astro

@@ -0,0 +1,26 @@
+---
+import Layout from 'layouts/Layout.astro';
+import 'leaflet/dist/leaflet.css'
+---
+
+<Layout title="maps test">
+
+  <div class="w-52 h-52" id="map" />
+
+
+</Layout>
+
+<script>
+  import L from 'leaflet'
+
+  const map = L.map('map', {
+    center: [50,0],
+    zoom: 13,
+    preferCanvas: true
+  })
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+}).addTo(map);
+var marker = L.marker([51.5, -0.09]).addTo(map);
+</script>

front/tailwind.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}

front/tsconfig.json

@@ -1,3 +1,11 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+		"baseUrl": "src",
+		// hide an issue with typescript
+		"noUnusedLocals": false
+	},
+	"ts-node": {
+		"esm": true
+	}
 }