feat/ make oauth to componant
This commit is contained in:
parent
beb24b342b
commit
65955039ae
53
front/src/components/Oauth.astro
Normal file
53
front/src/components/Oauth.astro
Normal 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>
|
@ -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>
|
|
||||||
|
@ -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,54 +12,23 @@ 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,
|
email: form.get("email") as string,
|
||||||
email: form.get("email") as string,
|
password: form.get("password") as string,
|
||||||
password: form.get("password") as string,
|
passwordConfirm: form.get("passwordConfirm") as string,
|
||||||
passwordConfirm: form.get("passwordConfirm") as string,
|
}
|
||||||
}
|
try{
|
||||||
try{
|
await pb.collection('users').create(request)
|
||||||
await pb.collection('users').create(request)
|
return Astro.redirect('/account/login')
|
||||||
return Astro.redirect('/account/login')
|
}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")
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user