Merge commit 'd5afe1631eb3b58207a098285c8f73f246bb2c4d' into feat/gestion-utilisateur

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 }}

docker-compose.yml

@@ -0,0 +1,34 @@
+version: "3.8"
+services:
+  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/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,4 +1,8 @@
 import { defineConfig } from 'astro/config';
+import node from '@astrojs/node';
+import tailwind from "@astrojs/tailwind";
+
+import react from "@astrojs/react";
 
 // https://astro.build/config
 export default defineConfig({
@@ -13,8 +17,14 @@ export default defineConfig({
     port: 3000
   },
   trailingSlash: 'never',
-    output: 'static', //'server',
+  output: 'server',
-    // adapter: node({
+  adapter: node({
-	// 	mode: 'standalone'
+    mode: 'standalone'
-	// }),
+  }),
+  integrations: [tailwind(), react()],
+  vite: {
+    optimizeDeps: {
+      include: ['leaflet']
+    }
+  }
 });

front/package.json

@@ -3,30 +3,42 @@
   "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",
+    "react-leaflet": "^4.2.1",
     "simple-icons-astro": "^11.12.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2"
   },
   "devDependencies": {
     "@astrojs/check": "^0",
+    "@types/leaflet": "^1.9.12",
     "@types/node": "^20",
-		"@typescript-eslint/eslint-plugin": "^6",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
-		"@typescript-eslint/parser": "^6",
+    "@typescript-eslint/parser": "^6.21.0",
     "@vitest/coverage-v8": "^1",
-		"eslint": "^8",
+    "eslint": "^8.57.0",
-		"eslint-plugin-astro": "^0.31",
+    "eslint-plugin-astro": "^0.31.4",
     "typescript": "^5",
     "vitest": "^1"
   }

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/AuthUtils.ts

@@ -0,0 +1,12 @@
+
+//référence a loop
+//fonction get user pour récupéré un utilisateur (notament coté client)
+//sessionID = JWS
+
+
+//fonction set user crée un cookies de session
+//passé le cookies astro dans les paramètre
+
+//utiliser cookie.set pour crée un nouveau cookies
+
+

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/index.astro

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

front/src/pages/maps.astro

@@ -0,0 +1,17 @@
+---
+import Layout from 'layouts/Layout.astro';
+import { Marker, Popup } from 'leaflet';
+import { MapContainer } from 'react-leaflet'
+---
+
+<Layout title="maps test">
+
+    <MapContainer client:load center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
+        <Marker client:load lat={51.505} lng={-0.09}>
+            <Popup client:load>
+              A pretty CSS3 popup. <br /> Easily customizable.
+            </Popup>
+          </Marker>
+    </MapContainer>
+
+</Layout>

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,8 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+		"baseUrl": "src",
+		// hide an issue with typescript
+		"noUnusedLocals": false
+	},
 }