feat: gestion-utilisateur (#1)
Reviewed-on: #1 Co-authored-by: Clement <c.boesmier@aptatio.com> Co-committed-by: Clement <c.boesmier@aptatio.com>
This commit is contained in:
21
front/src/pages/account/index.astro
Normal file
21
front/src/pages/account/index.astro
Normal 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
40
front/src/pages/account/login.astro
Normal 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
13
front/src/pages/account/logout.astro
Normal 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
97
front/src/pages/account/oauth.astro
Normal 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
77
front/src/pages/account/register.astro
Normal 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>
|
||||
|
||||
@ -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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
var marker = L.marker([51.5, -0.09]).addTo(map);
|
||||
</script>
|
||||
Reference in New Issue
Block a user