Add login and signup form
This commit is contained in:
Arthur Belleville
parent
14b29bde16
commit
f62175e490
4 changed files with 464 additions and 71 deletions
|
|
@ -1,7 +1,5 @@
|
|||
import { Button } from "./ui-components/button";
|
||||
import logo from "./assets/icon.jpg";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Switch } from "./ui-components/switch";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { Header } from "./ui-components/header";
|
||||
|
||||
|
|
|
|||
137
ui/src/ui-components/connection-form.tsx
Normal file
137
ui/src/ui-components/connection-form.tsx
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
import { Button } from "./button";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { useState } from "react";
|
||||
|
||||
interface ConnectionFormProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function ConnectionForm({ onClose }: ConnectionFormProps) {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// TODO: Implement connection logic
|
||||
console.log("Connection attempt with:", { email, password });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
|
||||
<div
|
||||
className={twMerge(
|
||||
"bg-white dark:bg-slate-800 rounded-2xl p-8 w-full max-w-md",
|
||||
"shadow-xl border border-slate-200 dark:border-slate-700"
|
||||
)}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white">
|
||||
Connexion
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className={twMerge(
|
||||
"w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600",
|
||||
"bg-white dark:bg-slate-700 text-slate-900 dark:text-white",
|
||||
"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1"
|
||||
>
|
||||
Mot de passe
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className={twMerge(
|
||||
"w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600",
|
||||
"bg-white dark:bg-slate-700 text-slate-900 dark:text-white",
|
||||
"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="rounded border-slate-300 dark:border-slate-600 text-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-slate-700 dark:text-slate-300">
|
||||
Se souvenir de moi
|
||||
</span>
|
||||
</label>
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
>
|
||||
Mot de passe oublié ?
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className={twMerge(
|
||||
"w-full bg-blue-950 text-white hover:bg-blue-900",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
Se connecter
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Pas encore de compte ?{" "}
|
||||
<a
|
||||
href="#"
|
||||
className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
>
|
||||
S'inscrire
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,6 +2,9 @@ import { Button } from "./button";
|
|||
import { Switch } from "./switch";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import logo from "../assets/icon.jpg";
|
||||
import { useState } from "react";
|
||||
import { ConnectionForm } from "./connection-form";
|
||||
import { SignUpForm } from "./signup-form";
|
||||
|
||||
interface HeaderProps {
|
||||
theme: "dark" | "light" | "system";
|
||||
|
|
@ -9,77 +12,90 @@ interface HeaderProps {
|
|||
}
|
||||
|
||||
export function Header({ theme, onThemeChange }: HeaderProps) {
|
||||
const [showConnectionForm, setShowConnectionForm] = useState(false);
|
||||
const [showSignUpForm, setShowSignUpForm] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full border-b border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 backdrop-blur-lg">
|
||||
<div className="container mx-auto px-4">
|
||||
<nav className="flex items-center justify-between h-16">
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={logo} alt="Logo XTablo" className="w-8 h-8" />
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">
|
||||
XTablo
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="hidden md:flex items-center gap-6">
|
||||
<a
|
||||
href="#features"
|
||||
className={twMerge(
|
||||
"text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
Fonctionnalités
|
||||
</a>
|
||||
<a
|
||||
href="#pricing"
|
||||
className={twMerge(
|
||||
"text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
Tarifs
|
||||
</a>
|
||||
<a
|
||||
href="#contact"
|
||||
className={twMerge(
|
||||
"text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
<>
|
||||
<header className="sticky top-0 z-50 w-full border-b border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 backdrop-blur-lg">
|
||||
<div className="container mx-auto px-4">
|
||||
<nav className="flex items-center justify-between h-16">
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={logo} alt="Logo XTablo" className="w-8 h-8" />
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">
|
||||
XTablo
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className={twMerge(
|
||||
"text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-white/80",
|
||||
"border-slate-300 dark:border-white/30 hover:border-slate-400 dark:hover:border-white/50",
|
||||
"transition"
|
||||
)}
|
||||
>
|
||||
Connexion
|
||||
</Button>
|
||||
<Button
|
||||
className={twMerge(
|
||||
"bg-blue-950 text-white hover:bg-blue-900",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
S'inscrire
|
||||
</Button>
|
||||
<Switch
|
||||
isSelected={theme === "dark"}
|
||||
onChange={() =>
|
||||
onThemeChange(theme === "dark" ? "light" : "dark")
|
||||
}
|
||||
>
|
||||
Dark mode
|
||||
</Switch>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="hidden md:flex items-center gap-6">
|
||||
<a
|
||||
href="#features"
|
||||
className={twMerge(
|
||||
"text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
Fonctionnalités
|
||||
</a>
|
||||
<a
|
||||
href="#pricing"
|
||||
className={twMerge(
|
||||
"text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
Tarifs
|
||||
</a>
|
||||
<a
|
||||
href="#contact"
|
||||
className={twMerge(
|
||||
"text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onPress={() => setShowConnectionForm(true)}
|
||||
className={twMerge(
|
||||
"text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-white/80",
|
||||
"border-slate-300 dark:border-white/30 hover:border-slate-400 dark:hover:border-white/50",
|
||||
"transition"
|
||||
)}
|
||||
>
|
||||
Connexion
|
||||
</Button>
|
||||
<Button
|
||||
onPress={() => setShowSignUpForm(true)}
|
||||
className={twMerge(
|
||||
"bg-blue-950 text-white hover:bg-blue-900",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
S'inscrire
|
||||
</Button>
|
||||
<Switch
|
||||
isSelected={theme === "dark"}
|
||||
onChange={() =>
|
||||
onThemeChange(theme === "dark" ? "light" : "dark")
|
||||
}
|
||||
>
|
||||
Dark mode
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
{showConnectionForm && (
|
||||
<ConnectionForm onClose={() => setShowConnectionForm(false)} />
|
||||
)}
|
||||
{showSignUpForm && (
|
||||
<SignUpForm onClose={() => setShowSignUpForm(false)} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
242
ui/src/ui-components/signup-form.tsx
Normal file
242
ui/src/ui-components/signup-form.tsx
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
import { Button } from "./button";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { useState } from "react";
|
||||
|
||||
interface SignUpFormProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function SignUpForm({ onClose }: SignUpFormProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
company: "",
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// TODO: Implement sign up logic
|
||||
console.log("Sign up attempt with:", formData);
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
|
||||
<div
|
||||
className={twMerge(
|
||||
"bg-white dark:bg-slate-800 rounded-2xl p-8 w-full max-w-md",
|
||||
"shadow-xl border border-slate-200 dark:border-slate-700"
|
||||
)}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white">
|
||||
Créer un compte
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="firstName"
|
||||
className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1"
|
||||
>
|
||||
Prénom
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={handleChange}
|
||||
className={twMerge(
|
||||
"w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600",
|
||||
"bg-white dark:bg-slate-700 text-slate-900 dark:text-white",
|
||||
"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="lastName"
|
||||
className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1"
|
||||
>
|
||||
Nom
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={handleChange}
|
||||
className={twMerge(
|
||||
"w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600",
|
||||
"bg-white dark:bg-slate-700 text-slate-900 dark:text-white",
|
||||
"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="company"
|
||||
className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1"
|
||||
>
|
||||
Entreprise
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleChange}
|
||||
className={twMerge(
|
||||
"w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600",
|
||||
"bg-white dark:bg-slate-700 text-slate-900 dark:text-white",
|
||||
"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className={twMerge(
|
||||
"w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600",
|
||||
"bg-white dark:bg-slate-700 text-slate-900 dark:text-white",
|
||||
"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1"
|
||||
>
|
||||
Mot de passe
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
className={twMerge(
|
||||
"w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600",
|
||||
"bg-white dark:bg-slate-700 text-slate-900 dark:text-white",
|
||||
"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="confirmPassword"
|
||||
className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1"
|
||||
>
|
||||
Confirmer le mot de passe
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleChange}
|
||||
className={twMerge(
|
||||
"w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600",
|
||||
"bg-white dark:bg-slate-700 text-slate-900 dark:text-white",
|
||||
"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="terms"
|
||||
className="rounded border-slate-300 dark:border-slate-600 text-blue-500 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
<label
|
||||
htmlFor="terms"
|
||||
className="ml-2 text-sm text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
J'accepte les{" "}
|
||||
<a
|
||||
href="#"
|
||||
className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
>
|
||||
conditions d'utilisation
|
||||
</a>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className={twMerge(
|
||||
"w-full bg-blue-950 text-white hover:bg-blue-900",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
Créer mon compte
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Déjà un compte ?{" "}
|
||||
<a
|
||||
href="#"
|
||||
className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
>
|
||||
Se connecter
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue