Epitech/ratrapage_T-WEB
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 1 Wiki Activity

feat: gestion-utilisateur (#1)
All checks were successful
Build Docker Image Front / run (push) Successful in 24s
Details
Build Docker Image Back / run (push) Successful in 21s
Details

Browse Source 
Reviewed-on: #1
Co-authored-by: Clement <c.boesmier@aptatio.com>
Co-committed-by: Clement <c.boesmier@aptatio.com>
This commit is contained in:
Clement
2024-05-20 12:48:34 +02:00
committed by Clement
parent 0c85df498e
commit 57a57c63ff
23 changed files with 2273 additions and 732 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
front/src/env.d.ts vendored
View File

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

31
front/src/layouts/Layout.astro
View File

@ -19,33 +19,4 @@ const { title } = Astro.props;
<body>
<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>
</html>

5
front/src/libs/AstroUtils.ts Normal file
View File

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

12
front/src/libs/AuthUtils.ts
View File

@ -1,12 +0,0 @@
//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

17
front/src/libs/Env.ts Normal file
View File

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

39
front/src/middleware/index.ts Normal file
View File

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

21
front/src/pages/account/index.astro Normal file
View File

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

40
front/src/pages/account/login.astro Normal file
View File

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

13
front/src/pages/account/logout.astro Normal file
View File

@ -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')
---

97
front/src/pages/account/oauth.astro Normal file
View File

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

77
front/src/pages/account/register.astro Normal file
View File

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

27
front/src/pages/maps.astro
View File

@ -1,17 +1,26 @@
---
import Layout from 'layouts/Layout.astro';
import { Marker, Popup } from 'leaflet';
import { MapContainer } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
---
<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>
<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>