14 changed files with 912 additions and 195 deletions
File diff suppressed because it is too large
@ -1,42 +0,0 @@ |
|||
#root { |
|||
max-width: 1280px; |
|||
margin: 0 auto; |
|||
padding: 2rem; |
|||
text-align: center; |
|||
} |
|||
|
|||
.logo { |
|||
height: 6em; |
|||
padding: 1.5em; |
|||
will-change: filter; |
|||
transition: filter 300ms; |
|||
} |
|||
.logo:hover { |
|||
filter: drop-shadow(0 0 2em #646cffaa); |
|||
} |
|||
.logo.react:hover { |
|||
filter: drop-shadow(0 0 2em #61dafbaa); |
|||
} |
|||
|
|||
@keyframes logo-spin { |
|||
from { |
|||
transform: rotate(0deg); |
|||
} |
|||
to { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
@media (prefers-reduced-motion: no-preference) { |
|||
a:nth-of-type(2) .logo { |
|||
animation: logo-spin infinite 20s linear; |
|||
} |
|||
} |
|||
|
|||
.card { |
|||
padding: 2em; |
|||
} |
|||
|
|||
.read-the-docs { |
|||
color: #888; |
|||
} |
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,68 +1,20 @@ |
|||
:root { |
|||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; |
|||
line-height: 1.5; |
|||
font-weight: 400; |
|||
@import "tailwindcss"; |
|||
|
|||
color-scheme: light dark; |
|||
color: rgba(255, 255, 255, 0.87); |
|||
background-color: #242424; |
|||
|
|||
font-synthesis: none; |
|||
text-rendering: optimizeLegibility; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
a { |
|||
font-weight: 500; |
|||
color: #646cff; |
|||
text-decoration: inherit; |
|||
} |
|||
a:hover { |
|||
color: #535bf2; |
|||
@font-face { |
|||
font-family: "BigBlueTerm437 Nerd Font"; |
|||
src: url("./assets/fonts/BigBlueTerm437NerdFont-Regular.ttf") format("truetype"); |
|||
} |
|||
|
|||
body { |
|||
margin: 0; |
|||
display: flex; |
|||
place-items: center; |
|||
min-width: 320px; |
|||
min-height: 100vh; |
|||
} |
|||
@theme { |
|||
--color-black: #0D0608; |
|||
--color-brown: #9A8271; |
|||
|
|||
h1 { |
|||
font-size: 3.2em; |
|||
line-height: 1.1; |
|||
} |
|||
--color-primary-100: #884C59; |
|||
--color-primary-200: #945662; |
|||
--color-primary-300: #9E6268; |
|||
--color-primary-400: #B46D79; |
|||
|
|||
button { |
|||
border-radius: 8px; |
|||
border: 1px solid transparent; |
|||
padding: 0.6em 1.2em; |
|||
font-size: 1em; |
|||
font-weight: 500; |
|||
font-family: inherit; |
|||
background-color: #1a1a1a; |
|||
cursor: pointer; |
|||
transition: border-color 0.25s; |
|||
} |
|||
button:hover { |
|||
border-color: #646cff; |
|||
} |
|||
button:focus, |
|||
button:focus-visible { |
|||
outline: 4px auto -webkit-focus-ring-color; |
|||
} |
|||
--color-pink: #BE687C; |
|||
|
|||
@media (prefers-color-scheme: light) { |
|||
:root { |
|||
color: #213547; |
|||
background-color: #ffffff; |
|||
} |
|||
a:hover { |
|||
color: #747bff; |
|||
} |
|||
button { |
|||
background-color: #f9f9f9; |
|||
} |
|||
--font-bigblueterm: "BigBlueTerm437 Nerd Font", monospace; |
|||
} |
|||
@ -0,0 +1,160 @@ |
|||
import {useState} from 'react' |
|||
|
|||
export default function AuthPage() { |
|||
const [username, setUsername] = useState(''); |
|||
const [email, setEmail] = useState(''); |
|||
const [password, setPassword] = useState(''); |
|||
const [isLogin, setIsLogin] = useState(true); |
|||
|
|||
|
|||
const handleSubmit = async (e) => { |
|||
e.preventDefault(); |
|||
|
|||
if (isLogin) { |
|||
const request = await fetch('http://localhost:3000/api/users/login', { |
|||
method: 'POST', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
}, |
|||
body: JSON.stringify({ username, password }), |
|||
}); |
|||
|
|||
const response = await request.json(); |
|||
|
|||
if (response.code === 200) { |
|||
localStorage.setItem('token', response.token); |
|||
} else { |
|||
// Handle login error |
|||
} |
|||
} else { |
|||
const request = await fetch('http://localhost:3000/api/users/', { |
|||
method: 'POST', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
}, |
|||
body: JSON.stringify({ username, email, password }), |
|||
}); |
|||
|
|||
const response = await request.json(); |
|||
|
|||
if (response.code === 201) { |
|||
alert('Registration successful!'); |
|||
} else { |
|||
// Handle registration error |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
return ( |
|||
<div className="bg-black w-screen h-screen flex items-center justify-center"> |
|||
<div className="w-128 border-4 border-primary-400"> |
|||
{ |
|||
isLogin ? ( |
|||
<> |
|||
<div className="bg-primary-400 h-16 flex justify-center items-center "> |
|||
<h1 className="text-white font-bigblueterm text-4xl">Se connecter</h1> |
|||
</div> |
|||
|
|||
<div className="flex flex-col items-center justify-center mt-8 px-8"> |
|||
|
|||
<label htmlFor="username" className="mb-2 text-white font-bigblueterm w-full">Nom d'utilisateur</label> |
|||
<input |
|||
type="text" |
|||
id="username" |
|||
placeholder="Nom d'utilisateur" |
|||
value={username} |
|||
onChange={(e) => setUsername(e.target.value)} |
|||
className="mb-4 p-2 border-2 border-primary-400 font-bigblueterm w-full text-white placeholder:text-brown focus:outline-none focus:border-primary-200" |
|||
/> |
|||
|
|||
<label htmlFor="password" className="mb-2 text-white font-bigblueterm w-full">Mot de passe</label> |
|||
<input |
|||
type="password" |
|||
id="password" |
|||
placeholder="Mot de passe" |
|||
value={password} |
|||
onChange={(e) => setPassword(e.target.value)} |
|||
className="mb-4 p-2 border-2 border-primary-400 font-bigblueterm w-full text-white placeholder:text-brown focus:outline-none focus:border-primary-200" |
|||
/> |
|||
|
|||
<button |
|||
className="bg-primary-400 text-white p-2 font-bigblueterm mb-4" |
|||
onClick={handleSubmit} |
|||
> |
|||
Se connecter |
|||
</button> |
|||
|
|||
<hr className="border-primary-400 border w-full" /> |
|||
|
|||
<div className="flex justify-center"> |
|||
<button |
|||
className="bg-primary-400 text-white p-2 font-bigblueterm my-4" |
|||
onClick={() => setIsLogin(false)} |
|||
> |
|||
S'inscrire |
|||
</button> |
|||
</div> |
|||
|
|||
</div> |
|||
</> |
|||
) : ( |
|||
<> |
|||
<div className="bg-primary-400 h-16 flex justify-center items-center "> |
|||
<h1 className="text-white font-bigblueterm text-4xl">S'inscrire</h1> |
|||
</div> |
|||
|
|||
<div className="flex flex-col items-center justify-center mt-8 px-8"> |
|||
|
|||
<label htmlFor="name" className="mb-2 text-white font-bigblueterm w-full">Nom d'utilisateur</label> |
|||
<input |
|||
type="text" |
|||
id="name" |
|||
placeholder="Nom" |
|||
value={username} |
|||
onChange={(e) => setUsername(e.target.value)} |
|||
className="mb-4 p-2 border-2 border-primary-400 font-bigblueterm w-full text-white placeholder:text-brown focus:outline-none focus:border-primary-200" |
|||
/> |
|||
|
|||
<label htmlFor="email" className="mb-2 text-white font-bigblueterm w-full">Email</label> |
|||
<input |
|||
type="text" |
|||
id="email" |
|||
placeholder="Email" |
|||
value={email} |
|||
onChange={(e) => setEmail(e.target.value)} |
|||
className="mb-4 p-2 border-2 border-primary-400 font-bigblueterm w-full text-white placeholder:text-brown focus:outline-none focus:border-primary-200" |
|||
/> |
|||
|
|||
<label htmlFor="password" className="mb-2 text-white font-bigblueterm w-full">Mot de passe</label> |
|||
<input |
|||
type="password" |
|||
id="password" |
|||
placeholder="Mot de passe" |
|||
value={password} |
|||
onChange={(e) => setPassword(e.target.value)} |
|||
className="mb-4 p-2 border-2 border-primary-400 font-bigblueterm w-full text-white placeholder:text-brown focus:outline-none focus:border-primary-200" |
|||
/> |
|||
|
|||
<button className="bg-primary-400 text-white p-2 font-bigblueterm mb-4" onClick={handleSubmit}>S'inscrire</button> |
|||
|
|||
<hr className="border-primary-400 border w-full" /> |
|||
|
|||
<div className="flex justify-center"> |
|||
<button |
|||
className="bg-primary-400 text-white p-2 font-bigblueterm my-4" |
|||
onClick={() => setIsLogin(true)} |
|||
> |
|||
Se connecter |
|||
</button> |
|||
</div> |
|||
|
|||
</div> |
|||
</> |
|||
|
|||
) |
|||
} |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
|
|||
|
|||
export default function HomePage() { |
|||
return ( |
|||
<div> |
|||
<h1>Welcome to the Home Page</h1> |
|||
</div> |
|||
); |
|||
} |
|||
@ -1,7 +1,11 @@ |
|||
import { defineConfig } from 'vite' |
|||
import react from '@vitejs/plugin-react' |
|||
import tailwindcss from '@tailwindcss/vite' |
|||
|
|||
// https://vite.dev/config/
|
|||
export default defineConfig({ |
|||
plugins: [react()], |
|||
plugins: [ |
|||
react(), |
|||
tailwindcss() |
|||
], |
|||
}) |
|||
|
|||
Loading…
Reference in new issue