add Login component and espace-membres
This commit is contained in:
parent
745e9850a6
commit
1e7326a85d
|
|
@ -16,6 +16,7 @@ pnpm-debug.log*
|
|||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
.env.local
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
|
||||
import preact from "@astrojs/preact";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [tailwind()]
|
||||
});
|
||||
integrations: [tailwind(), preact()]
|
||||
});
|
||||
|
|
@ -10,8 +10,10 @@
|
|||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/preact": "^3.0.0",
|
||||
"@astrojs/tailwind": "^5.0.0",
|
||||
"astro": "^3.0.12",
|
||||
"preact": "^10.6.5",
|
||||
"tailwindcss": "^3.0.24"
|
||||
}
|
||||
}
|
||||
143
pnpm-lock.yaml
143
pnpm-lock.yaml
|
|
@ -1,12 +1,18 @@
|
|||
lockfileVersion: '6.0'
|
||||
|
||||
dependencies:
|
||||
'@astrojs/preact':
|
||||
specifier: ^3.0.0
|
||||
version: 3.0.0(@babel/core@7.22.17)(preact@10.17.1)(vite@4.4.9)
|
||||
'@astrojs/tailwind':
|
||||
specifier: ^5.0.0
|
||||
version: 5.0.0(astro@3.0.12)(tailwindcss@3.3.3)
|
||||
astro:
|
||||
specifier: ^3.0.12
|
||||
version: 3.0.12
|
||||
preact:
|
||||
specifier: ^10.6.5
|
||||
version: 10.17.1
|
||||
tailwindcss:
|
||||
specifier: ^3.0.24
|
||||
version: 3.3.3
|
||||
|
|
@ -57,6 +63,25 @@ packages:
|
|||
- supports-color
|
||||
dev: false
|
||||
|
||||
/@astrojs/preact@3.0.0(@babel/core@7.22.17)(preact@10.17.1)(vite@4.4.9):
|
||||
resolution: {integrity: sha512-KlHyozAyQIOorYb3op8MJlktvtKiK/an1nXqHsVYxW5oiOJZjD4fkTEgcDFByl/uRpce93tuK4pdGKKzzyMUVw==}
|
||||
engines: {node: '>=18.14.1'}
|
||||
peerDependencies:
|
||||
preact: ^10.6.5
|
||||
dependencies:
|
||||
'@babel/plugin-transform-react-jsx': 7.22.15(@babel/core@7.22.17)
|
||||
'@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.22.17)
|
||||
'@preact/preset-vite': 2.5.0(@babel/core@7.22.17)(preact@10.17.1)(vite@4.4.9)
|
||||
'@preact/signals': 1.2.1(preact@10.17.1)
|
||||
babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.22.17)
|
||||
preact: 10.17.1
|
||||
preact-render-to-string: 6.2.1(preact@10.17.1)
|
||||
transitivePeerDependencies:
|
||||
- '@babel/core'
|
||||
- supports-color
|
||||
- vite
|
||||
dev: false
|
||||
|
||||
/@astrojs/prism@3.0.0:
|
||||
resolution: {integrity: sha512-g61lZupWq1bYbcBnYZqdjndShr/J3l/oFobBKPA3+qMat146zce3nz2kdO4giGbhYDt4gYdhmoBz0vZJ4sIurQ==}
|
||||
engines: {node: '>=18.14.1'}
|
||||
|
|
@ -272,6 +297,16 @@ packages:
|
|||
'@babel/helper-plugin-utils': 7.22.5
|
||||
dev: false
|
||||
|
||||
/@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.22.17):
|
||||
resolution: {integrity: sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
peerDependencies:
|
||||
'@babel/core': ^7.0.0-0
|
||||
dependencies:
|
||||
'@babel/core': 7.22.17
|
||||
'@babel/plugin-transform-react-jsx': 7.22.15(@babel/core@7.22.17)
|
||||
dev: false
|
||||
|
||||
/@babel/plugin-transform-react-jsx@7.22.15(@babel/core@7.22.17):
|
||||
resolution: {integrity: sha512-oKckg2eZFa8771O/5vi7XeTvmM6+O9cxZu+kanTU7tD4sin5nO/G8jGJhq8Hvt2Z0kUoEDRayuZLaUlYl8QuGA==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
|
|
@ -769,6 +804,81 @@ packages:
|
|||
fastq: 1.15.0
|
||||
dev: false
|
||||
|
||||
/@preact/preset-vite@2.5.0(@babel/core@7.22.17)(preact@10.17.1)(vite@4.4.9):
|
||||
resolution: {integrity: sha512-BUhfB2xQ6ex0yPkrT1Z3LbfPzjpJecOZwQ/xJrXGFSZD84+ObyS//41RdEoQCMWsM0t7UHGaujUxUBub7WM1Jw==}
|
||||
peerDependencies:
|
||||
'@babel/core': 7.x
|
||||
vite: 2.x || 3.x || 4.x
|
||||
dependencies:
|
||||
'@babel/core': 7.22.17
|
||||
'@babel/plugin-transform-react-jsx': 7.22.15(@babel/core@7.22.17)
|
||||
'@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.22.17)
|
||||
'@prefresh/vite': 2.4.1(preact@10.17.1)(vite@4.4.9)
|
||||
'@rollup/pluginutils': 4.2.1
|
||||
babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.22.17)
|
||||
debug: 4.3.4
|
||||
kolorist: 1.8.0
|
||||
resolve: 1.22.4
|
||||
vite: 4.4.9
|
||||
transitivePeerDependencies:
|
||||
- preact
|
||||
- supports-color
|
||||
dev: false
|
||||
|
||||
/@preact/signals-core@1.4.0:
|
||||
resolution: {integrity: sha512-5iYoZBhELLIhUQceZI7sDTQWPb+xcVSn2qk8T/aNl/VMh+A4AiPX9YRSh4XO7fZ6pncrVxl1Iln82poVqYVbbw==}
|
||||
dev: false
|
||||
|
||||
/@preact/signals@1.2.1(preact@10.17.1):
|
||||
resolution: {integrity: sha512-hRPvp1C2ooDzOHqfnhdpHgoIFDbYFAXLhoid3+jSItuPPD/J0r/UsiWKv/8ZO/oEhjRaP0M5niuRYsWqmY2GEA==}
|
||||
peerDependencies:
|
||||
preact: 10.x
|
||||
dependencies:
|
||||
'@preact/signals-core': 1.4.0
|
||||
preact: 10.17.1
|
||||
dev: false
|
||||
|
||||
/@prefresh/babel-plugin@0.5.0:
|
||||
resolution: {integrity: sha512-joAwpkUDwo7ZqJnufXRGzUb+udk20RBgfA8oLPBh5aJH2LeStmV1luBfeJTztPdyCscC2j2SmZ/tVxFRMIxAEw==}
|
||||
dev: false
|
||||
|
||||
/@prefresh/core@1.5.1(preact@10.17.1):
|
||||
resolution: {integrity: sha512-e0mB0Oxtog6ZpKPDBYbzFniFJDIktuKMzOHp7sguntU+ot0yi6dbhJRE9Css1qf0u16wdSZjpL2W2ODWuU05Cw==}
|
||||
peerDependencies:
|
||||
preact: ^10.0.0
|
||||
dependencies:
|
||||
preact: 10.17.1
|
||||
dev: false
|
||||
|
||||
/@prefresh/utils@1.2.0:
|
||||
resolution: {integrity: sha512-KtC/fZw+oqtwOLUFM9UtiitB0JsVX0zLKNyRTA332sqREqSALIIQQxdUCS1P3xR/jT1e2e8/5rwH6gdcMLEmsQ==}
|
||||
dev: false
|
||||
|
||||
/@prefresh/vite@2.4.1(preact@10.17.1)(vite@4.4.9):
|
||||
resolution: {integrity: sha512-vthWmEqu8TZFeyrBNc9YE5SiC3DVSzPgsOCp/WQ7FqdHpOIJi7Z8XvCK06rBPOtG4914S52MjG9Ls22eVAiuqQ==}
|
||||
peerDependencies:
|
||||
preact: ^10.4.0
|
||||
vite: '>=2.0.0'
|
||||
dependencies:
|
||||
'@babel/core': 7.22.17
|
||||
'@prefresh/babel-plugin': 0.5.0
|
||||
'@prefresh/core': 1.5.1(preact@10.17.1)
|
||||
'@prefresh/utils': 1.2.0
|
||||
'@rollup/pluginutils': 4.2.1
|
||||
preact: 10.17.1
|
||||
vite: 4.4.9
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
dev: false
|
||||
|
||||
/@rollup/pluginutils@4.2.1:
|
||||
resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
|
||||
engines: {node: '>= 8.0.0'}
|
||||
dependencies:
|
||||
estree-walker: 2.0.2
|
||||
picomatch: 2.3.1
|
||||
dev: false
|
||||
|
||||
/@types/babel__core@7.20.1:
|
||||
resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==}
|
||||
dependencies:
|
||||
|
|
@ -1008,6 +1118,14 @@ packages:
|
|||
dev: false
|
||||
optional: true
|
||||
|
||||
/babel-plugin-transform-hook-names@1.0.2(@babel/core@7.22.17):
|
||||
resolution: {integrity: sha512-5gafyjyyBTTdX/tQQ0hRgu4AhNHG/hqWi0ZZmg2xvs2FgRkJXzDNKBZCyoYqgFkovfDrgM8OoKg8karoUvWeCw==}
|
||||
peerDependencies:
|
||||
'@babel/core': ^7.12.10
|
||||
dependencies:
|
||||
'@babel/core': 7.22.17
|
||||
dev: false
|
||||
|
||||
/bail@2.0.2:
|
||||
resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
|
||||
dev: false
|
||||
|
|
@ -1452,6 +1570,10 @@ packages:
|
|||
hasBin: true
|
||||
dev: false
|
||||
|
||||
/estree-walker@2.0.2:
|
||||
resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
|
||||
dev: false
|
||||
|
||||
/estree-walker@3.0.3:
|
||||
resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
|
||||
dependencies:
|
||||
|
|
@ -1900,6 +2022,10 @@ packages:
|
|||
engines: {node: '>=6'}
|
||||
dev: false
|
||||
|
||||
/kolorist@1.8.0:
|
||||
resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
|
||||
dev: false
|
||||
|
||||
/lilconfig@2.1.0:
|
||||
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
@ -2696,6 +2822,19 @@ packages:
|
|||
source-map-js: 1.0.2
|
||||
dev: false
|
||||
|
||||
/preact-render-to-string@6.2.1(preact@10.17.1):
|
||||
resolution: {integrity: sha512-5t7nFeMUextd53igL3GAakAAMaUD+dVWDHaRYaeh1tbPIjQIBtgJnMw6vf8VS/lviV0ggFtkgebatPxvtJsXyQ==}
|
||||
peerDependencies:
|
||||
preact: '>=10'
|
||||
dependencies:
|
||||
preact: 10.17.1
|
||||
pretty-format: 3.8.0
|
||||
dev: false
|
||||
|
||||
/preact@10.17.1:
|
||||
resolution: {integrity: sha512-X9BODrvQ4Ekwv9GURm9AKAGaomqXmip7NQTZgY7gcNmr7XE83adOMJvd3N42id1tMFU7ojiynRsYnY6/BRFxLA==}
|
||||
dev: false
|
||||
|
||||
/prebuild-install@7.1.1:
|
||||
resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
@ -2726,6 +2865,10 @@ packages:
|
|||
which-pm: 2.0.0
|
||||
dev: false
|
||||
|
||||
/pretty-format@3.8.0:
|
||||
resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
|
||||
dev: false
|
||||
|
||||
/prismjs@1.29.0:
|
||||
resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
|
||||
engines: {node: '>=6'}
|
||||
|
|
|
|||
|
|
@ -1,61 +0,0 @@
|
|||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
background-color: #23262d;
|
||||
background-image: none;
|
||||
background-size: 400%;
|
||||
border-radius: 7px;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: calc(1.5rem - 1px);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
background-color: #23262d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
background-image: var(--accent-gradient);
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent-light));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import type { TargetedEvent } from "preact/compat"
|
||||
|
||||
export default function Login() {
|
||||
const handleSubmit = (event: TargetedEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
console.log(import.meta.env.PUBLIC_PB_API)
|
||||
}
|
||||
const handleChange = (event: TargetedEvent<HTMLInputElement>) => {
|
||||
console.log(event.currentTarget.value)
|
||||
}
|
||||
return (
|
||||
<div className="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-sm">
|
||||
<h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Connectez-vous à votre compte</h2>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label for="email" className="block text-sm font-medium leading-6 text-gray-900">Adresse e-mail</label>
|
||||
<div className="mt-2">
|
||||
<input id="email" name="email" type="email" autocomplete="email" required className="block w-full rounded-sm border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 sm:text-sm sm:leading-6" onInput={handleChange}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<label for="password" className="block text-sm font-medium leading-6 text-gray-900">Mot de passe</label>
|
||||
<div className="text-sm">
|
||||
<a href="#" className="font-semibold text-gray-600 hover:text-gray-500">Mot de passe oublié ?</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<input id="password" name="password" type="password" autocomplete="current-password" required className="block w-full rounded-sm border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 sm:text-sm sm:leading-6" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit" className="flex w-full justify-center rounded-sm bg-gray-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">Connexion</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p className="mt-10 text-center text-sm text-gray-500">
|
||||
Pas encore de compte ? <a href="#" className="font-semibold leading-6 text-gray-600 hover:text-gray-500">Inscrivez-vous</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Login from '../components/Login.tsx'
|
||||
---
|
||||
<Layout title="Espace membres">
|
||||
<Login client:only="preact"/>
|
||||
</Layout>
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict"
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "preact"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue