RegWatch frontend : React/Vite -> nginx + Docker/CI homelab

- URL d'API externalisée (VITE_API_URL bakée au build), plus de localhost en dur - Dockerfile multi-stage pnpm build -> nginx (fallback SPA) - docker-compose (Watchtower) + .gitea/workflows/build.yml Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-24 18:43:29 +02:00
commit 2307d9a134
49 changed files with 6678 additions and 0 deletions
@@ -0,0 +1,169 @@
+import { useState } from "react";
+import styles from "../styles/AuthPage.module.css";
+
+export default function AuthPage({ onAuthSuccess }: { onAuthSuccess: (token: string, user: { id: number; email: string; full_name: string | null }) => void }) {
+  const [isLogin, setIsLogin] = useState(true);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [fullName, setFullName] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const API_URL = import.meta.env.VITE_API_URL ?? "http://localhost:8000";
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      console.log("Tentative de connexion avec:", email);
+      const response = await fetch(`${API_URL}/login`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email, password }),
+      });
+
+      console.log("Status:", response.status);
+      
+      const data = await response.json();
+      console.log("Response data:", data);
+
+      if (!response.ok) {
+        throw new Error(data.detail || `Erreur ${response.status}`);
+      }
+      
+      const userResponse = await fetch(`${API_URL}/me?token=${data.access_token}`);
+      const userData = await userResponse.json();
+
+      onAuthSuccess(data.access_token, userData);
+    } catch (err) {
+      console.error("Error:", err);
+      setError(err instanceof Error ? err.message : "Erreur lors de la connexion");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSignup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      const response = await fetch(`${API_URL}/signup`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email,
+          password,
+          full_name: fullName,
+        }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.detail || "Erreur d'inscription");
+      }
+
+      const userData = await response.json();
+
+      // Automatiquement connecter après l'inscription
+      const loginResponse = await fetch(`${API_URL}/login`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const loginData = await loginResponse.json();
+      onAuthSuccess(loginData.access_token, userData);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Erreur lors de l'inscription");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = isLogin ? handleLogin : handleSignup;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.authCard}>
+        <h1 className={styles.title}>RegWatch</h1>
+        <p className={styles.subtitle}>Gestion des réglementations alimentaires</p>
+
+        <form onSubmit={handleSubmit} className={styles.form}>
+          {error && <div className={styles.error}>{error}</div>}
+
+          <div className={styles.formGroup}>
+            <label htmlFor="email">Email</label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              placeholder="votre@email.com"
+            />
+          </div>
+
+          {!isLogin && (
+            <div className={styles.formGroup}>
+              <label htmlFor="fullName">Nom complet</label>
+              <input
+                type="text"
+                id="fullName"
+                value={fullName}
+                onChange={(e) => setFullName(e.target.value)}
+                placeholder="Votre nom complet"
+              />
+            </div>
+          )}
+
+          <div className={styles.formGroup}>
+            <label htmlFor="password">Mot de passe</label>
+            <input
+              type="password"
+              id="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              placeholder="••••••••"
+            />
+          </div>
+
+          <button
+            type="submit"
+            className={styles.submitBtn}
+            disabled={loading}
+          >
+            {loading ? "Chargement..." : isLogin ? "Se connecter" : "S'inscrire"}
+          </button>
+        </form>
+
+        <div className={styles.toggleAuth}>
+          <p>
+            {isLogin ? "Pas encore de compte ?" : "Déjà inscrit ?"}
+            {" "}
+            <button
+              type="button"
+              onClick={() => {
+                setIsLogin(!isLogin);
+                setError("");
+              }}
+              className={styles.toggleBtn}
+            >
+              {isLogin ? "S'inscrire" : "Se connecter"}
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}