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
3 changed files with 106 additions and 86 deletions
Showing only changes of commit 65955039ae - Show all commits

View File

@ -0,0 +1,53 @@
---
import ContactUs from 'components/widgets/Contact.astro';
import CallToAction from 'components/widgets/CallToAction.astro';
const pb = Astro.locals.pb
const oauths = (await pb.collection('users').listAuthMethods()).authProviders;
const discordProvider = oauths.find(item => item.name === 'discord');
const googleProvider = oauths.find(item => item.name === 'google');
---
<>
<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>
</>
<script>
// import { date } from "astro/zod";
document.cookie = "provider" + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
// console.log(date.toString)
const btn = document.querySelectorAll('.oauth-btn')
btn.forEach((item: Element) =>(item.addEventListener('click', (ev) =>{
document.cookie = "provider" + "=" + item.getAttribute('data-cookie') + "; path=/;"// expires=" + ;
})))
</script>

View File

@ -5,6 +5,7 @@ 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 CallToAction from 'components/widgets/CallToAction.astro'; import CallToAction from 'components/widgets/CallToAction.astro';
import Oauth from 'components/Oauth.astro';
const pb = Astro.locals.pb const pb = Astro.locals.pb
@ -12,10 +13,6 @@ if(pb.authStore.isValid){
return Astro.redirect("/account") return Astro.redirect("/account")
} }
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 () => {
if (Astro.request.method !== 'POST') { if (Astro.request.method !== 'POST') {
@ -45,9 +42,9 @@ const metadata = {
<Layout metadata={metadata}> <Layout metadata={metadata}>
<ContactUs <ContactUs
formid="account-creation" formid="login"
title="Connexion" title="Connexion"
subtitle="Connecter pour sauvegardez vos recherche" subtitle="Connectez vous pour sauvegardez vos recherche"
button='Connexion' button='Connexion'
method='post' method='post'
enctype="multipart/form-data" enctype="multipart/form-data"
@ -64,39 +61,5 @@ const metadata = {
} }
]} ]}
/> />
<CallToAction <Oauth/>
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

@ -4,7 +4,7 @@ import Layout from 'layouts/PageLayout.astro';
import AstroUtils from 'libs/AstroUtils'; import AstroUtils from 'libs/AstroUtils';
import { getEnv } from 'libs/Env'; import { getEnv } from 'libs/Env';
import ContactUs from 'components/widgets/Contact.astro'; import ContactUs from 'components/widgets/Contact.astro';
import Form from 'components/ui/Form.astro'; import Oauth from 'components/Oauth.astro';
const pb = Astro.locals.pb const pb = Astro.locals.pb
@ -12,34 +12,11 @@ if(pb.authStore.isValid){
return Astro.redirect("/account") return Astro.redirect("/account")
} }
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]));
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
})
await AstroUtils.wrap(async () => { await AstroUtils.wrap(async () => {
if (Astro.request.method !== 'POST'){ if (Astro.request.method !== 'POST'){
return return
} }
const form = await Astro.request.formData() const form = await Astro.request.formData()
if(form.get("type") == "userPassword"){
const request = { const request = {
username: form.get("username") as string, username: form.get("username") as string,
name: form.get("name") as string, name: form.get("name") as string,
@ -53,14 +30,6 @@ await AstroUtils.wrap(async () => {
}catch(e){ }catch(e){
console.log(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")
}
}) })
const metadata = { const metadata = {
@ -70,6 +39,42 @@ const metadata = {
--- ---
<Layout metadata={metadata}> <Layout metadata={metadata}>
<ContactUs
formid='account-creation'
title='Inscription'
subtitle="inscrivez vous pour sauvegardez vos recherche"
button='Créer un compte'
method='post'
enctype="multipart/form-data"
inputs={[
{
type: 'text',
name: 'name',
label: 'Prénom Nom',
placeholder: "Michel Biche"
},{
type: 'text',
name: 'username',
label: 'Nom d\'utilisateur',
placeholder: "michel85"
},{
type: 'email',
name: 'email',
label: 'Adresse email',
placeholder: "michel@example.com"
},{
type: 'password',
name: 'password',
label: 'Créez un mot de passe',
},{
type: 'password',
name: 'passwordConfirm',
label: 'Confirmer votre mot de passe',
},
]}
/>
<Oauth/>
<form id="account-creation" method="post" enctype="multipart/form-data"> <form id="account-creation" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="userPassword"> <input type="hidden" name="type" value="userPassword">
<input required name="name" placeholder="Prénom Nom"/> <input required name="name" placeholder="Prénom Nom"/>
@ -84,5 +89,4 @@ const metadata = {
<form method="post" enctype="multipart/form-data"> <form method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="discord2FA"> <input type="hidden" name="type" value="discord2FA">
</form> </form>
<a href={oauths.authProviders[0].authUrl + Astro.url.protocol + "//" + Astro.url.host + '/account/oauth'}>discord?</a>
</Layout> </Layout>