update npm package

front/package.json

@@ -39,6 +39,7 @@
     "@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

@@ -16,10 +16,17 @@ interface ImportMeta {
 }
 
 
-// eslint-disable-next-line  @typescript-eslint/no-namespace
-declare namespace App {
-	// eslint-disable-next-line  @typescript-eslint/no-empty-interface
-	export interface Locals {
-		pb: PocketBase
-	}
+// declare namespace App {
+// 	interface Locals {
+// 		pb: PocketBase
+// 	}
+// }
+
+
+declare global {
+    namespace App {
+        interface Locals {
+			pb: PocketBase
+        }
+    }
 }

front/src/libs/AuthUtils.ts

@@ -1,107 +0,0 @@
-import type { AstroCookies } from 'astro'
-import type UserObj from 'models/User'
-import PocketBase from 'pocketbase'
-import { getEnv } from 'libs/Env'
-
-
-const pb = new PocketBase(getEnv('POCKETBASE_URL','https://pb-tweb.cb85.fr')) // XXX: 'https://pb-tweb.cb85.fr'
-
-export async function clearUser(cookies: AstroCookies): Promise<void> {
-	const sessionID = cookies.get('session')?.value
-
-	if(!sessionID){
-		return
-	}
-
-	cookies.delete('session',{
-		path: '/'
-	})
-}
-
-export async function login(cookies: AstroCookies, user: {user: string, password: string}): Promise<boolean> {
-
-	const authData = await pb.collection('users').authWithPassword(user.user, user.password)
-
-	let secure = true
-
-	if (getEnv('NODE_ENV', 'production') !== 'production') {
-		secure = false
-	}
-
-	if(authData){
-		cookies.set('session', authData.token,{
-			httpOnly: true,
-			path: '/',
-			secure: secure,
-			sameSite: 'strict',
-			maxAge: 365000,
-		})
-		return true
-	}
-	return false
-}
-
-export async function getUser(cookies: AstroCookies): Promise<UserObj | null> {
-	const sessionID = cookies.get('session')?.value
-
-	const bpAuth = pb.authStore
-
-	if(!sessionID){
-		return null
-	}
-	if(!bpAuth.isValid){
-		return null
-	}
-	if(!bpAuth){
-		return null
-	}
-
-	console.log(bpAuth.model)
-
-	if(!bpAuth.model){
-		return null
-	}
-
-	const output: UserObj = {
-		id: bpAuth.model.id as string,
-		collectionId: bpAuth.model.collectionId as string,
-		collectionName: bpAuth.model.collectionName as string,
-		created: bpAuth.model.created as string,
-		updated: bpAuth.model.updated as string,
-		avatar: bpAuth.model.avatar as string,
-		username: bpAuth.model.username as string,
-		email: bpAuth.model.email as string,
-		emailVisibility: false,
-		name: bpAuth.model.name as string,
-		password: undefined,
-		passwordConfirm: undefined,
-	}
-
-	return output
-
-}
-
-export async function setUser(cookies: AstroCookies, user: UserObj): Promise<void>{
-
-	const record = await pb.collection('users').create(user)
-
-	console.log(record)
-
-	const session = pb.authStore.token
-
-	console.log(session)
-
-	let secure = true
-
-	if (getEnv('NODE_ENV', 'production') !== 'production') {
-		secure = false
-	}
-
-	cookies.set('session', session,{
-		httpOnly: true,
-		path: '/',
-		secure: secure,
-		sameSite: 'strict',
-		maxAge: 365000,
-	})
-}

front/src/models/User/index.ts

@@ -1,19 +0,0 @@
-
-
-export interface PBData{
-    id?: string | null
-    collectionId?: string | null
-    collectionName?: string | null
-    created?: string | null // TODO: passé ca en date auto
-    updated?: string | null // TODO: passé ca en date auto
-}
-
-export default interface UserObj extends PBData{
-    avatar?: string | null
-    username: string
-    email: string
-    emailVisibility?: boolean
-    password?: string | undefined
-    passwordConfirm?: string | undefined
-    name: string | null
-}

front/src/pages/account/index.astro

@@ -3,7 +3,7 @@ import Layout from 'layouts/Layout.astro'
 import PocketBase from 'pocketbase'
 
 
-const pb = Astro.locals.pb as PocketBase
+const pb = Astro.locals.pb
 const auth = pb.authStore
 const user = auth.model
 
@@ -15,4 +15,7 @@ if(!auth.isValid){
 
 <Layout title="Account setting">
     <h1>Bonjour {user!.name}</h1>
+    <div>
+        <a href="/account/logout">deconnexion</a>
+    </div>
 </Layout>

front/src/pages/account/login.astro

@@ -4,7 +4,7 @@ import AstroUtils from "libs/AstroUtils";
 import PocketBase from 'pocketbase'
 
 
-const pb = Astro.locals.pb as PocketBase
+const pb = Astro.locals.pb
 
 if(pb.authStore.isValid){
     return Astro.redirect("/account")
@@ -13,10 +13,7 @@ if(pb.authStore.isValid){
 const res = await AstroUtils.wrap(async () => {
     if (Astro.request.method !== 'POST') {
         return
-    }
-    // FIXME checké si utilisateur deja connecté
-    const locals = Astro.locals
-    
+    }    
     const form = await Astro.request.formData();
     const request = {
         user: form.get("username") as string,
@@ -24,13 +21,13 @@ const res = await AstroUtils.wrap(async () => {
     }
 
     try {
-        await locals.pb.collection('users').authWithPassword(request.user,request.password);
+        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
     }
-
-    return Astro.redirect("/account")
-
 })
 ---
 

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

@@ -4,7 +4,7 @@ import AstroUtils from 'libs/AstroUtils';
 import PocketBase from 'pocketbase'
 
 
-const pb = Astro.locals.pb as PocketBase
+const pb = Astro.locals.pb
 
 if(pb.authStore.isValid){
     return Astro.redirect("/account")
@@ -15,24 +15,34 @@ await AstroUtils.wrap(async () => {
         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,
-    }
-    try{
-        await pb.collection('users').create(request)
-        return Astro.redirect('account/login')
-    }catch(e){
-        console.log(e);
+    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" />
@@ -40,4 +50,21 @@ await AstroUtils.wrap(async () => {
         <input required name="passwordConfirm" type="password" placeholder="Confirmer votre mot de passe" />
         <button>Créer un compte</button>
     </form>
-</Layout>
+
+    <form method="post" enctype="multipart/form-data">
+        <input type="hidden" name="type" value="discord2FA">
+        <button id="OauthDiscord">connexion avec discord</button>
+    </form>
+</Layout>
+
+<script>
+    import PocketBase from 'pocketbase'
+    const pb = Astro.locals.pb
+    const discordBtn = document.querySelector<HTMLButtonElement>("#OauthDiscord")
+    
+    if (discordBtn) {
+        discordBtn.addEventListener('onclick', async () =>{
+            await pb.collection('user').authWithOAuth2({provider: 'discord'})
+        })
+    }
+</script>