add astro template for front #13

Merged
Clement merged 18 commits from feat/astro-template-for-front into master 2024-05-21 08:07:58 +00:00
4 changed files with 59 additions and 12 deletions
Showing only changes of commit beb24b342b - Show all commits

View File

@ -45,7 +45,7 @@ const {
{Array.isArray(actions) ? ( {Array.isArray(actions) ? (
actions.map((action) => ( actions.map((action) => (
<div class="flex w-full sm:w-auto"> <div class="flex w-full sm:w-auto">
<Button {...(action || {})} class="w-full sm:mb-0" /> <Button {...(action || {})} class:list={["w-full", "sm:mb-0", action.class]} />
</div> </div>
)) ))
) : ( ) : (

View File

@ -4,8 +4,7 @@ import Layout from 'layouts/PageLayout.astro';
import AstroUtils from "libs/AstroUtils"; import AstroUtils from "libs/AstroUtils";
import PocketBase from 'pocketbase' import PocketBase from 'pocketbase'
import ContactUs from 'components/widgets/Contact.astro'; import ContactUs from 'components/widgets/Contact.astro';
import FormContainer from 'components/ui/Form.astro'; import CallToAction from 'components/widgets/CallToAction.astro';
const pb = Astro.locals.pb const pb = Astro.locals.pb
@ -13,7 +12,9 @@ if(pb.authStore.isValid){
return Astro.redirect("/account") return Astro.redirect("/account")
} }
console.log(Astro.request.method); const oauths = (await pb.collection('users').listAuthMethods()).authProviders;
const discordProvider = oauths.find(item => item.name === 'discord');
const googleProvider = oauths.find(item => item.name === 'google');
await AstroUtils.wrap(async () => { await AstroUtils.wrap(async () => {
@ -45,8 +46,8 @@ const metadata = {
<Layout metadata={metadata}> <Layout metadata={metadata}>
<ContactUs <ContactUs
formid="account-creation" formid="account-creation"
title="Inscription" title="Connexion"
subtitle="Incrivez-vous pour sauvegardez vos recherche" subtitle="Connecter pour sauvegardez vos recherche"
button='Connexion' button='Connexion'
method='post' method='post'
enctype="multipart/form-data" enctype="multipart/form-data"
@ -63,4 +64,39 @@ const metadata = {
} }
]} ]}
/> />
<CallToAction
actions={[
{
variant: 'primary',
text: 'Discord',
href: discordProvider!.authUrl + Astro.url.protocol + "//" + Astro.url.host + '/account/oauth',
icon: 'tabler:brand-discord',
class: "oauth-btn",
"data-cookie": encodeURIComponent(JSON.stringify(discordProvider))
},
{
variant: 'primary',
text: 'Google',
href: googleProvider!.authUrl + Astro.url.protocol + "//" + Astro.url.host + '/account/oauth',
icon: 'tabler:brand-google',
class: "oauth-btn",
"data-cookie": encodeURIComponent(JSON.stringify(googleProvider))
}
]}
>
<Fragment slot="title">
Oauth
</Fragment>
<Fragment slot="subtitle">
Connecter Vous aussi avec
</Fragment>
</CallToAction>
</Layout> </Layout>
<script>
const btn = document.querySelectorAll('.oauth-btn')
btn.forEach((item: Element) =>(item.addEventListener('click', (ev) =>{
document.cookie = "provider" + "=" + item.getAttribute('data-cookie') + "; path=/";
})))
</script>

View File

@ -24,9 +24,13 @@ if (!code) {
// compare the redirect's state param and the stored provider's one // compare the redirect's state param and the stored provider's one
if (provider.state !== params.get('state')) { if (provider.state !== params.get('state')) {
console.log(provider.state)
console.log(params.get('state'))
throw "State parameters don't match."; throw "State parameters don't match.";
} }
let authenticated = false
await pb.collection('users').authWithOAuth2Code( await pb.collection('users').authWithOAuth2Code(
provider.name, provider.name,
code, code,
@ -41,12 +45,15 @@ await pb.collection('users').authWithOAuth2Code(
console.log(JSON.stringify(authData, null, 2)); console.log(JSON.stringify(authData, null, 2));
console.log(pb.authStore.isValid); console.log(pb.authStore.isValid);
console.log(pb.authStore.isValid); console.log(pb.authStore.isValid);
return Astro.redirect("/account") authenticated = true
}).catch((err) => { }).catch((err) => {
console.log("oauth fail !!"); console.log("oauth fail !!");
console.log(err); console.log(err);
}); });
if (authenticated) {
return Astro.redirect("/account")
}
--- ---

View File

@ -8,7 +8,13 @@ import Form from 'components/ui/Form.astro';
const pb = Astro.locals.pb const pb = Astro.locals.pb
if(pb.authStore.isValid){
return Astro.redirect("/account")
}
const oauths = await pb.collection('users').listAuthMethods(); const oauths = await pb.collection('users').listAuthMethods();
const discordProvider = oauths.authProviders.find(item => item.name === 'discord');
const googleProvider = oauths.authProviders.find(item => item.name === 'google');
console.log(JSON.stringify(oauths.authProviders[0])); console.log(JSON.stringify(oauths.authProviders[0]));
@ -21,14 +27,12 @@ if (getEnv('NODE_ENV', 'production') !== 'production') {
Astro.cookies.set('provider', oauths.authProviders[0],{ Astro.cookies.set('provider', oauths.authProviders[0],{
httpOnly: true, httpOnly: true,
path: '/', path: '/',
secure: secure, secure: secure,
sameSite: 'lax', sameSite: 'lax',
maxAge: 365000 maxAge: 365000
}) })
if(pb.authStore.isValid){
return Astro.redirect("/account")
}
await AstroUtils.wrap(async () => { await AstroUtils.wrap(async () => {
if (Astro.request.method !== 'POST'){ if (Astro.request.method !== 'POST'){