import { Link } from "react-router-dom";
import logo2 from "../../../Assets/logo2.svg";
import "./Register.css";
import { useState } from "react";
import axios from "axios";
export default function Register() {
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const handleRegister = (e) => {
e.preventDefault();
if (name !== '' && email !== '' && password !== '') {
axios.post('http://127.0.0.1:8000/api/auth/register', {
name, email, password
})
.then((res) => {
console.log((res.data))
.catch((err) => console.error(err))
})
} else {
alert("veuillez remplir tous champs")
}
console.log(name, email, password);
return (
<>
<div className="container">
<div className="signup-layout">
{/* Colonne logo */}
<section className="signup-logo">
<img src={logo2} alt="Kanban logo" className="logo-big" />
<h1 className="brand">KANBAN</h1>
</section>
{/* Colonne formulaire */}
<section className="signup-form">
<form className="card" onSubmit={handleRegister} >
{/* En-tête */}
<div className="head">
<img src={logo2} alt="" className="logo-mini" />
<h2>Créer un compte</h2>
{/*<p className="subtitle">Start your 30-day free trial.</p>*/}
</div>
{/* Nom complet */}
<label className="field">
<span>Nom complet </span>
<input type="text"
placeholder="Entrez votre nom"
name="name"
onChange={(e) => { setName(e.target.value) }}
value={name}
/>
</label>
{/* Email */}
<label className="field">
<span>Email </span>
<input
type="email"
placeholder="Entrez votre email"
name="email"
onChange={(e) => { setEmail(e.target.value) }}
value={email}
/>
</label>
{/* Password */}
<label className="field">
<span>Mot de Passe </span>
<input
type="password"
placeholder="Créer un mot de passe"
minLength={8}
name="password"
onChange={(e) => { setPassword(e.target.value) }}
value={password}
/>
<small >Doit contenir au moins 8 caractères.</small>
</label>
{/* Bouton principal */}
<button type="submit" className="btn-primary" onInvalid={!
handleRegister}>
Enregistrez
</button>
{/* Bouton Google */}
<button type="button" className="btn-google">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="18"
height="18"
>
<path
d="M21.35 11.1H12v2.9h5.31c-.23 1.29-.93 2.39-1.98
3.12v2.59h3.21c1.88-1.73 2.81-4.28 2.81-7.02 0-.63-.06-1.24-.2-1.83z"
fill="#4285F4"
/>
<path
d="M12 22c2.43 0 4.47-.8 5.96-2.16l-3.21-2.59c-.89.6-2.03.96-
2.75.96-2.11 0-3.9-1.43-4.55-3.35H4.15v2.63A9.996 9.996 0 0 0 12 22z"
fill="#34A853"
/>
<path
d="M7.45 14.86c-.2-.6-.32-1.25-.32-1.91s.12-1.31.32-
1.91V8.41H4.15A9.967 9.967 0 0 0 2 12c0 1.61.38 3.13 1.05 4.45l3.4-2.59z"
fill="#FBBC05"
/>
<path
d="M12 4.79c1.32 0 2.5.45 3.44 1.34l2.58-2.58A9.86 9.86 0 0 0
12 2C8.13 2 4.78 4.23 3.4 7.55l3.4 2.63C8.1 7.21 9.89 4.79 12 4.79z"
fill="#EA4335"
/>
</svg>
<span>Inscrivez-vous avec Google</span>
</button>
{/* Lien vers login */}
<p className="footer">
Vous avez déjà un compte?{" "}
<Link to="/login" className="link">
Se connecter
</Link>
</p>
</form>
</section>
</div>
</div>
</>
);
}
