update frontend
This commit is contained in:
Your Name
parent
7ea3b2c4fa
commit
555342d377
|
|
@ -1,28 +1,25 @@
|
||||||
// src/pwaInstall.js
|
// src/pwaInstall.js
|
||||||
let deferredPrompt = null;
|
let deferredPrompt = null;
|
||||||
|
|
||||||
// Écoute l'événement natif PWA (se déclenche quand Chrome pense que l'app est installable)
|
// Stocke l'événement natif quand Chrome le déclenche
|
||||||
window.addEventListener('beforeinstallprompt', (e) => {
|
window.addEventListener('beforeinstallprompt', (e) => {
|
||||||
// Empêche le prompt auto (on veut le contrôler avec le bouton)
|
// Empêche le prompt auto (on veut le contrôler)
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
deferredPrompt = e;
|
deferredPrompt = e;
|
||||||
console.log('PWA install prompt ready - waiting for user click');
|
console.log('PWA: Install prompt ready - ready to trigger on button click');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Fonction appelée quand on clique sur le bouton "Install"
|
// Fonction appelée par le bouton "Install"
|
||||||
export function promptInstall() {
|
export function promptInstall() {
|
||||||
if (deferredPrompt) {
|
if (deferredPrompt) {
|
||||||
deferredPrompt.prompt(); // Affiche le prompt natif "Add to home screen"
|
console.log('PWA: Triggering native install prompt');
|
||||||
|
deferredPrompt.prompt();
|
||||||
deferredPrompt.userChoice.then((choiceResult) => {
|
deferredPrompt.userChoice.then((choiceResult) => {
|
||||||
if (choiceResult.outcome === 'accepted') {
|
console.log('PWA Install outcome:', choiceResult.outcome);
|
||||||
console.log('User accepted PWA install');
|
|
||||||
} else {
|
|
||||||
console.log('User dismissed PWA install');
|
|
||||||
}
|
|
||||||
deferredPrompt = null;
|
deferredPrompt = null;
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
console.log('No install prompt available yet - try again later');
|
console.log('PWA: No prompt ready yet - wait for beforeinstallprompt event');
|
||||||
alert('PWA installation not ready yet. Try again in a few seconds.');
|
alert('PWA not ready yet. Try scrolling or interacting more with the site.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,268 +0,0 @@
|
||||||
import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
|
|
||||||
import { clearAuth, guessUsernameFromToken, jwtExpSeconds, loadAuth, saveAuth } from "./authStorage";
|
|
||||||
|
|
||||||
const AuthCtx = createContext(null);
|
|
||||||
|
|
||||||
function apiBase() {
|
|
||||||
return (import.meta?.env?.VITE_API_BASE_URL || "").replace(/\/+$/, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
async function apiFetch(path, opts = {}) {
|
|
||||||
const url = apiBase() + path;
|
|
||||||
const res = await fetch(url, {
|
|
||||||
credentials: "include",
|
|
||||||
...opts,
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
...(opts.headers || {}),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
return res;
|
|
||||||
}
|
|
||||||
|
|
||||||
// tolerant whoami: accepts {authenticated:true} OR {username:""} OR {user:""} OR just ok+token
|
|
||||||
async function whoami(accessToken) {
|
|
||||||
const res = await apiFetch("/api/whoami", {
|
|
||||||
method: "GET",
|
|
||||||
headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : {},
|
|
||||||
});
|
|
||||||
|
|
||||||
const text = await res.text().catch(() => "");
|
|
||||||
let json = null;
|
|
||||||
try {
|
|
||||||
json = text ? JSON.parse(text) : null;
|
|
||||||
} catch {
|
|
||||||
json = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const uname =
|
|
||||||
(json && (json.username || json.user || json.preferred_username)) ||
|
|
||||||
guessUsernameFromToken(accessToken) ||
|
|
||||||
"";
|
|
||||||
|
|
||||||
const authed =
|
|
||||||
!!res.ok &&
|
|
||||||
(json?.authenticated === true || json?.ok === true || !!json?.username || !!json?.user || !!uname);
|
|
||||||
|
|
||||||
return { ok: !!res.ok, status: res.status, json, text, authenticated: authed, username: uname };
|
|
||||||
}
|
|
||||||
|
|
||||||
async function refreshTokens(refreshToken) {
|
|
||||||
const res = await apiFetch("/api/refresh", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify({ refresh_token: refreshToken }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const text = await res.text().catch(() => "");
|
|
||||||
let json = null;
|
|
||||||
try {
|
|
||||||
json = text ? JSON.parse(text) : null;
|
|
||||||
} catch {
|
|
||||||
json = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return { ok: res.ok, status: res.status, json, text };
|
|
||||||
}
|
|
||||||
|
|
||||||
function nowSec() {
|
|
||||||
return Math.floor(Date.now() / 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AuthProvider({ children }) {
|
|
||||||
const [status, setStatus] = useState("loading"); // loading | anon | auth
|
|
||||||
const [user, setUser] = useState(null); // { username }
|
|
||||||
const [tokens, setTokens] = useState(null); // { access_token, refresh_token, ... }
|
|
||||||
const [error, setError] = useState("");
|
|
||||||
const refreshTimer = useRef(null);
|
|
||||||
|
|
||||||
function setAnon(msg = "") {
|
|
||||||
setStatus("anon");
|
|
||||||
setUser(null);
|
|
||||||
setTokens(null);
|
|
||||||
setError(msg || "");
|
|
||||||
clearAuth();
|
|
||||||
}
|
|
||||||
|
|
||||||
function setAuthFromTokens(t, usernameGuess = "") {
|
|
||||||
setTokens(t);
|
|
||||||
saveAuth({ ...t, obtained_at: Date.now() });
|
|
||||||
const u = usernameGuess || guessUsernameFromToken(t?.access_token) || "";
|
|
||||||
setUser(u ? { username: u } : null);
|
|
||||||
setStatus("auth");
|
|
||||||
setError("");
|
|
||||||
}
|
|
||||||
|
|
||||||
async function ensureFreshSession(existing) {
|
|
||||||
if (!existing?.access_token) return { ok: false, reason: "no_access_token" };
|
|
||||||
|
|
||||||
const exp = jwtExpSeconds(existing.access_token);
|
|
||||||
const skew = 60;
|
|
||||||
const isExpiredOrSoon = !exp || exp <= nowSec() + skew;
|
|
||||||
|
|
||||||
if (isExpiredOrSoon) {
|
|
||||||
if (!existing.refresh_token) return { ok: false, reason: "expired_no_refresh" };
|
|
||||||
|
|
||||||
const rr = await refreshTokens(existing.refresh_token);
|
|
||||||
if (!rr.ok || !rr.json?.access_token) {
|
|
||||||
return { ok: false, reason: `refresh_failed_${rr.status}`, detail: rr.text };
|
|
||||||
}
|
|
||||||
|
|
||||||
const merged = { ...existing, ...rr.json };
|
|
||||||
if (!merged.refresh_token) merged.refresh_token = existing.refresh_token;
|
|
||||||
|
|
||||||
setAuthFromTokens(merged);
|
|
||||||
existing = merged;
|
|
||||||
} else {
|
|
||||||
setAuthFromTokens(existing);
|
|
||||||
}
|
|
||||||
|
|
||||||
const w = await whoami(existing.access_token);
|
|
||||||
if (w.ok && w.authenticated) {
|
|
||||||
setUser(w.username ? { username: w.username } : null);
|
|
||||||
setStatus("auth");
|
|
||||||
setError("");
|
|
||||||
return { ok: true };
|
|
||||||
}
|
|
||||||
|
|
||||||
return { ok: false, reason: `whoami_${w.status}`, detail: w.text || "" };
|
|
||||||
}
|
|
||||||
|
|
||||||
function scheduleAutoRefresh() {
|
|
||||||
if (refreshTimer.current) {
|
|
||||||
clearInterval(refreshTimer.current);
|
|
||||||
refreshTimer.current = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
refreshTimer.current = setInterval(async () => {
|
|
||||||
const cur = loadAuth();
|
|
||||||
if (!cur?.access_token) return;
|
|
||||||
|
|
||||||
const exp = jwtExpSeconds(cur.access_token);
|
|
||||||
if (!exp) return;
|
|
||||||
|
|
||||||
if (exp <= nowSec() + 90) {
|
|
||||||
if (!cur.refresh_token) {
|
|
||||||
setAnon("Session expirée (pas de refresh_token).");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const rr = await refreshTokens(cur.refresh_token);
|
|
||||||
if (!rr.ok || !rr.json?.access_token) {
|
|
||||||
setAnon("Session expirée. Please login again.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const merged = { ...cur, ...rr.json };
|
|
||||||
if (!merged.refresh_token) merged.refresh_token = cur.refresh_token;
|
|
||||||
setAuthFromTokens(merged);
|
|
||||||
}
|
|
||||||
}, 30000);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function restore() {
|
|
||||||
setStatus("loading");
|
|
||||||
setError("");
|
|
||||||
const saved = loadAuth();
|
|
||||||
if (!saved?.access_token) {
|
|
||||||
setAnon("");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const r = await ensureFreshSession(saved);
|
|
||||||
if (!r.ok) {
|
|
||||||
setAnon("Login desynced. Please login again.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
scheduleAutoRefresh();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function login(username, password) {
|
|
||||||
setError("");
|
|
||||||
setStatus("loading");
|
|
||||||
|
|
||||||
const res = await apiFetch("/api/login", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify({ username, password }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const text = await res.text().catch(() => "");
|
|
||||||
let j = null;
|
|
||||||
try {
|
|
||||||
j = text ? JSON.parse(text) : null;
|
|
||||||
} catch {
|
|
||||||
j = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!res.ok || !j?.access_token) {
|
|
||||||
setAnon(j?.error_description || j?.error || text || "Login failed");
|
|
||||||
return { ok: false, status: res.status, json: j, text };
|
|
||||||
}
|
|
||||||
|
|
||||||
const t = { ...j, obtained_at: Date.now() };
|
|
||||||
setAuthFromTokens(t);
|
|
||||||
scheduleAutoRefresh();
|
|
||||||
|
|
||||||
const w = await whoami(t.access_token);
|
|
||||||
if (!w.ok || !w.authenticated) {
|
|
||||||
setAnon("Login desynced. Please login again.");
|
|
||||||
return { ok: false, status: w.status, json: w.json, text: w.text };
|
|
||||||
}
|
|
||||||
|
|
||||||
setUser(w.username ? { username: w.username } : null);
|
|
||||||
setStatus("auth");
|
|
||||||
return { ok: true };
|
|
||||||
}
|
|
||||||
|
|
||||||
function logout() {
|
|
||||||
if (refreshTimer.current) clearInterval(refreshTimer.current);
|
|
||||||
refreshTimer.current = null;
|
|
||||||
setAnon("");
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
restore();
|
|
||||||
const onStorage = (e) => {
|
|
||||||
if (e.key === "sociowire:auth") restore();
|
|
||||||
};
|
|
||||||
window.addEventListener("storage", onStorage);
|
|
||||||
return () => window.removeEventListener("storage", onStorage);
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Backward-compatible fields expected by TopBar/MapView
|
|
||||||
const value = useMemo(() => {
|
|
||||||
const loading = status === "loading";
|
|
||||||
const authenticated = status === "auth";
|
|
||||||
const username = user?.username || "";
|
|
||||||
const token = tokens?.access_token || "";
|
|
||||||
|
|
||||||
return {
|
|
||||||
// internal
|
|
||||||
status,
|
|
||||||
user,
|
|
||||||
tokens,
|
|
||||||
error,
|
|
||||||
|
|
||||||
// expected by UI
|
|
||||||
loading,
|
|
||||||
authenticated,
|
|
||||||
username,
|
|
||||||
token,
|
|
||||||
|
|
||||||
lastError: error || "",
|
|
||||||
lastInfo: "",
|
|
||||||
needsEmailVerification: false,
|
|
||||||
resendVerificationEmail: async () => {},
|
|
||||||
|
|
||||||
login,
|
|
||||||
logout,
|
|
||||||
restore,
|
|
||||||
setError,
|
|
||||||
};
|
|
||||||
}, [status, user, tokens, error]);
|
|
||||||
|
|
||||||
return <AuthCtx.Provider value={value}>{children}</AuthCtx.Provider>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useAuth() {
|
|
||||||
return useContext(AuthCtx);
|
|
||||||
}
|
|
||||||
|
|
@ -1,379 +0,0 @@
|
||||||
import React, { useState, useEffect, useMemo } from "react";
|
|
||||||
import { useAuth } from "../../auth/AuthContext";
|
|
||||||
import { registerUser } from "../../api/client";
|
|
||||||
|
|
||||||
const THEME_LABELS = { dark: "Dark", blue: "Blue", light: "Light" };
|
|
||||||
const LAST_SIGNUP_USER_KEY = "sociowire:lastSignupUser";
|
|
||||||
|
|
||||||
const KC_BASE =
|
|
||||||
(import.meta?.env?.VITE_KEYCLOAK_BASE_URL) || "https://auth.sociowire.com";
|
|
||||||
const KC_REALM =
|
|
||||||
(import.meta?.env?.VITE_KEYCLOAK_REALM) || "sociowire";
|
|
||||||
const KC_CLIENT =
|
|
||||||
(import.meta?.env?.VITE_KEYCLOAK_CLIENT_ID) || "sociowire";
|
|
||||||
|
|
||||||
function isEmailVerifyError(raw) {
|
|
||||||
const msg = String(raw || "").toLowerCase();
|
|
||||||
return (
|
|
||||||
msg.includes("not fully set up") ||
|
|
||||||
msg.includes("verify") ||
|
|
||||||
msg.includes("verification") ||
|
|
||||||
msg.includes("required action") ||
|
|
||||||
(msg.includes("email") && msg.includes("verified"))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeAuthMessage(raw) {
|
|
||||||
const msg = String(raw || "").trim();
|
|
||||||
if (!msg) return "";
|
|
||||||
|
|
||||||
const lower = msg.toLowerCase();
|
|
||||||
|
|
||||||
if (isEmailVerifyError(lower)) {
|
|
||||||
return "Ton compte est créé, mais l’email n’est pas confirmé. Clique “Vérifier mon email” (Keycloak), puis utilise le lien reçu par email.";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
lower.includes("invalid user credentials") ||
|
|
||||||
lower.includes("bad credentials") ||
|
|
||||||
lower.includes("invalid_grant")
|
|
||||||
) {
|
|
||||||
return "Mauvais username ou mot de passe.";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (msg.length > 220) return msg.slice(0, 220) + "…";
|
|
||||||
return msg;
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildKeycloakAuthUrl() {
|
|
||||||
const redirectUri = `${window.location.origin}/auth/verified`;
|
|
||||||
const url =
|
|
||||||
`${KC_BASE}/realms/${encodeURIComponent(KC_REALM)}` +
|
|
||||||
`/protocol/openid-connect/auth` +
|
|
||||||
`?client_id=${encodeURIComponent(KC_CLIENT)}` +
|
|
||||||
`&redirect_uri=${encodeURIComponent(redirectUri)}` +
|
|
||||||
`&response_type=code&scope=openid`;
|
|
||||||
return url;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function TopBar({ theme = "dark", onChangeTheme }) {
|
|
||||||
const {
|
|
||||||
loading,
|
|
||||||
authenticated,
|
|
||||||
username,
|
|
||||||
login,
|
|
||||||
logout,
|
|
||||||
resendVerificationEmail,
|
|
||||||
lastError,
|
|
||||||
lastInfo,
|
|
||||||
} = useAuth();
|
|
||||||
|
|
||||||
const [showAuth, setShowAuth] = useState(false);
|
|
||||||
const [mode, setMode] = useState("login");
|
|
||||||
|
|
||||||
const [loginUser, setLoginUser] = useState("");
|
|
||||||
const [loginPass, setLoginPass] = useState("");
|
|
||||||
|
|
||||||
const [firstName, setFirstName] = useState("");
|
|
||||||
const [lastName, setLastName] = useState("");
|
|
||||||
const [regUser, setRegUser] = useState("");
|
|
||||||
const [regEmail, setRegEmail] = useState("");
|
|
||||||
const [regPass, setRegPass] = useState("");
|
|
||||||
const [signupError, setSignupError] = useState("");
|
|
||||||
const [signupInfo, setSignupInfo] = useState("");
|
|
||||||
const [signupLoading, setSignupLoading] = useState(false);
|
|
||||||
|
|
||||||
const prettyError = useMemo(() => normalizeAuthMessage(lastError), [lastError]);
|
|
||||||
const showVerifyHelp = useMemo(() => isEmailVerifyError(lastError), [lastError]);
|
|
||||||
|
|
||||||
const isVerifiedPage =
|
|
||||||
typeof window !== "undefined" && window.location?.pathname === "/auth/verified";
|
|
||||||
|
|
||||||
const openModal = (nextMode) => {
|
|
||||||
setMode(nextMode);
|
|
||||||
setShowAuth(true);
|
|
||||||
setSignupError("");
|
|
||||||
setSignupInfo("");
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeModal = () => {
|
|
||||||
setShowAuth(false);
|
|
||||||
setLoginPass("");
|
|
||||||
setSignupError("");
|
|
||||||
setSignupInfo("");
|
|
||||||
};
|
|
||||||
|
|
||||||
// ✅ If error happens, open modal so errors are not in topbar
|
|
||||||
useEffect(() => {
|
|
||||||
if (prettyError) {
|
|
||||||
setMode("login");
|
|
||||||
setShowAuth(true);
|
|
||||||
}
|
|
||||||
}, [prettyError]);
|
|
||||||
|
|
||||||
// ✅ On /auth/verified: open login + prefill username
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isVerifiedPage) return;
|
|
||||||
setMode("login");
|
|
||||||
setShowAuth(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const lastU = localStorage.getItem(LAST_SIGNUP_USER_KEY) || "";
|
|
||||||
if (lastU && !loginUser) setLoginUser(lastU);
|
|
||||||
} catch {}
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [isVerifiedPage]);
|
|
||||||
|
|
||||||
// ✅ After login on /auth/verified, go home
|
|
||||||
useEffect(() => {
|
|
||||||
if (!authenticated) return;
|
|
||||||
if (typeof window === "undefined") return;
|
|
||||||
const path = window.location?.pathname || "";
|
|
||||||
if (path === "/auth/verified") {
|
|
||||||
try { window.history.replaceState({}, "", "/"); } catch {}
|
|
||||||
}
|
|
||||||
}, [authenticated]);
|
|
||||||
|
|
||||||
const handleLoginSubmit = async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
await login(loginUser, loginPass);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSignupSubmit = async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setSignupError("");
|
|
||||||
setSignupInfo("");
|
|
||||||
|
|
||||||
if (!firstName.trim() || !lastName.trim() || !regUser.trim() || !regEmail.trim() || !regPass) {
|
|
||||||
setSignupError("First name, last name, username, email and password are required.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
setSignupLoading(true);
|
|
||||||
|
|
||||||
await registerUser({
|
|
||||||
username: regUser.trim(),
|
|
||||||
email: regEmail.trim(),
|
|
||||||
password: regPass,
|
|
||||||
firstName: firstName.trim(),
|
|
||||||
lastName: lastName.trim(),
|
|
||||||
});
|
|
||||||
|
|
||||||
try { localStorage.setItem(LAST_SIGNUP_USER_KEY, regUser.trim()); } catch {}
|
|
||||||
|
|
||||||
// ✅ Do NOT auto-login (verify email flow)
|
|
||||||
setSignupInfo("Compte créé ✅ Vérifie ton email (spam inclus), puis connecte-toi.");
|
|
||||||
setMode("login");
|
|
||||||
setLoginUser(regUser.trim());
|
|
||||||
setLoginPass("");
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
setSignupError(err.message || "Registration error.");
|
|
||||||
} finally {
|
|
||||||
setSignupLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const NoticeBox = ({ variant, children }) => (
|
|
||||||
<div className={"sw-notice sw-notice--" + variant}>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<header className="topbar">
|
|
||||||
<div style={{ display: "flex", alignItems: "center", gap: "0.6rem" }}>
|
|
||||||
<div className="logo-circle">SW</div>
|
|
||||||
|
|
||||||
<div className="title-block">
|
|
||||||
<div className="main-title">SOCIOWIRE.com</div>
|
|
||||||
<div className="sub-title">Wired to life</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="topbar-right">
|
|
||||||
<div className="theme-switch">
|
|
||||||
{["dark", "blue", "light"].map((t) => (
|
|
||||||
<button
|
|
||||||
key={t}
|
|
||||||
type="button"
|
|
||||||
className={"theme-dot" + (theme === t ? " theme-dot-active" : "")}
|
|
||||||
title={THEME_LABELS[t]}
|
|
||||||
onClick={() => onChangeTheme && onChangeTheme(t)}
|
|
||||||
>
|
|
||||||
{THEME_LABELS[t][0]}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{authenticated ? (
|
|
||||||
<div style={{ display: "flex", alignItems: "center", gap: "0.45rem" }}>
|
|
||||||
{/* ✅ one single user chip */}
|
|
||||||
<div className="user-chip" title={username || ""}>
|
|
||||||
<span className="user-avatar">
|
|
||||||
<i className="fa-solid fa-user-astronaut" />
|
|
||||||
</span>
|
|
||||||
<span className="user-name">{username || "user"}</span>
|
|
||||||
<span className="user-badge">
|
|
||||||
<i className="fa-solid fa-circle-check" />
|
|
||||||
Connecté
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button className="btn-primary" onClick={logout}>
|
|
||||||
Logout
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div style={{ display: "flex", gap: "0.3rem" }}>
|
|
||||||
<button type="button" className="btn-primary" onClick={() => openModal("login")}>
|
|
||||||
Login
|
|
||||||
</button>
|
|
||||||
<button type="button" className="btn-secondary" onClick={() => openModal("signup")}>
|
|
||||||
Sign up
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{showAuth && (
|
|
||||||
<div className="auth-modal-backdrop" onClick={closeModal}>
|
|
||||||
<div className="auth-modal" onClick={(e) => e.stopPropagation()}>
|
|
||||||
<div className="auth-modal-header">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={"auth-tab" + (mode === "login" ? " auth-tab-active" : "")}
|
|
||||||
onClick={() => setMode("login")}
|
|
||||||
>
|
|
||||||
Login
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={"auth-tab" + (mode === "signup" ? " auth-tab-active" : "")}
|
|
||||||
onClick={() => setMode("signup")}
|
|
||||||
>
|
|
||||||
Sign up
|
|
||||||
</button>
|
|
||||||
<button type="button" className="auth-close" onClick={closeModal}>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ✅ Verified page success message */}
|
|
||||||
{isVerifiedPage && !authenticated && (
|
|
||||||
<NoticeBox variant="success">
|
|
||||||
<b>✅ Email confirmé.</b> Connecte-toi pour continuer.
|
|
||||||
</NoticeBox>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ✅ Any error/info now lives INSIDE modal */}
|
|
||||||
{prettyError && (
|
|
||||||
<NoticeBox variant="error">
|
|
||||||
<i className="fa-solid fa-circle-xmark" style={{ marginRight: 8 }} />
|
|
||||||
{prettyError}
|
|
||||||
</NoticeBox>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!prettyError && lastInfo && (
|
|
||||||
<NoticeBox variant="info">
|
|
||||||
<i className="fa-solid fa-circle-info" style={{ marginRight: 8 }} />
|
|
||||||
{lastInfo}
|
|
||||||
</NoticeBox>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ✅ Email verify helper buttons */}
|
|
||||||
{showVerifyHelp && (
|
|
||||||
<NoticeBox variant="warn">
|
|
||||||
<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
|
|
||||||
<div style={{ fontWeight: 900 }}>
|
|
||||||
<i className="fa-solid fa-triangle-exclamation" style={{ marginRight: 8 }} />
|
|
||||||
Vérification email requise
|
|
||||||
</div>
|
|
||||||
<div style={{ opacity: 0.92, lineHeight: 1.25 }}>
|
|
||||||
Ton login “modal” ne peut pas compléter l’action Keycloak. Ouvre la page Keycloak,
|
|
||||||
clique “proceed”, puis clique le lien reçu par email.
|
|
||||||
</div>
|
|
||||||
<div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
|
|
||||||
<a className="btn-secondary" href={buildKeycloakAuthUrl()}>
|
|
||||||
Vérifier mon email (Keycloak)
|
|
||||||
</a>
|
|
||||||
{typeof resendVerificationEmail === "function" && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn-secondary"
|
|
||||||
onClick={resendVerificationEmail}
|
|
||||||
>
|
|
||||||
Renvoyer l’email
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</NoticeBox>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{mode === "login" ? (
|
|
||||||
<form className="auth-form" onSubmit={handleLoginSubmit}>
|
|
||||||
<label>
|
|
||||||
Username
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={loginUser}
|
|
||||||
onChange={(e) => setLoginUser(e.target.value)}
|
|
||||||
autoComplete="username"
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Password
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
value={loginPass}
|
|
||||||
onChange={(e) => setLoginPass(e.target.value)}
|
|
||||||
autoComplete="current-password"
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<button type="submit" className="btn-primary btn-full" disabled={loading}>
|
|
||||||
{loading ? "..." : "Sign in"}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
) : (
|
|
||||||
<form className="auth-form" onSubmit={handleSignupSubmit}>
|
|
||||||
<div className="auth-row">
|
|
||||||
<label>
|
|
||||||
First name
|
|
||||||
<input type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Last name
|
|
||||||
<input type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} />
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<label>
|
|
||||||
Username
|
|
||||||
<input type="text" value={regUser} onChange={(e) => setRegUser(e.target.value)} />
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Email
|
|
||||||
<input type="email" value={regEmail} onChange={(e) => setRegEmail(e.target.value)} />
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Password
|
|
||||||
<input type="password" value={regPass} onChange={(e) => setRegPass(e.target.value)} />
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{signupError && <NoticeBox variant="error">{signupError}</NoticeBox>}
|
|
||||||
{signupInfo && <NoticeBox variant="success">{signupInfo}</NoticeBox>}
|
|
||||||
|
|
||||||
<button type="submit" className="btn-primary btn-full" disabled={signupLoading}>
|
|
||||||
{signupLoading ? "..." : "Create account"}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue