diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 3daf3a9..bee3eef 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -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"; diff --git a/ui/src/ui-components/connection-form.tsx b/ui/src/ui-components/connection-form.tsx new file mode 100644 index 0000000..79c5ef2 --- /dev/null +++ b/ui/src/ui-components/connection-form.tsx @@ -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 ( +
+
+
+

+ Connexion +

+ +
+ +
+
+ + 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 + /> +
+ +
+ + 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 + /> +
+ +
+ + + Mot de passe oublié ? + +
+ + +
+ +
+

+ Pas encore de compte ?{" "} + + S'inscrire + +

+
+
+
+ ); +} diff --git a/ui/src/ui-components/header.tsx b/ui/src/ui-components/header.tsx index 63b1e01..c83f0b5 100644 --- a/ui/src/ui-components/header.tsx +++ b/ui/src/ui-components/header.tsx @@ -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 ( -
-
- +
+
+ {showConnectionForm && ( + setShowConnectionForm(false)} /> + )} + {showSignUpForm && ( + setShowSignUpForm(false)} /> + )} + ); } diff --git a/ui/src/ui-components/signup-form.tsx b/ui/src/ui-components/signup-form.tsx new file mode 100644 index 0000000..78e6d00 --- /dev/null +++ b/ui/src/ui-components/signup-form.tsx @@ -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) => { + const { name, value } = e.target; + setFormData((prev) => ({ ...prev, [name]: value })); + }; + + return ( +
+
+
+

+ Créer un compte +

+ +
+ +
+
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ +
+

+ Déjà un compte ?{" "} + + Se connecter + +

+
+
+
+ ); +}