From 3d58684b87da47177db42b653eab55d76b233eb2 Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 17 Dec 2025 13:52:59 -0500 Subject: [PATCH] cleanup frontend auth, remove keycloak remnants, local fontawesome --- src/App.css | 42 ----- src/auth/authUtils.js | 57 ------ src/auth/keycloak.js | 9 - src/components/Map/mapMarkers.css | 185 ------------------- src/components/TopBar/TopBar.jsx | 39 ---- src/components/TopBar/topbar.css | 45 ----- src/index.css | 68 ------- src/main.jsx | 6 +- src/styles/game-filters.css | 1 - src/styles/global.css | 284 ------------------------------ src/styles/mapLayout.css | 19 -- src/styles/markers.css | 1 - src/styles/popup.css | 1 - 13 files changed, 2 insertions(+), 755 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/auth/authUtils.js delete mode 100644 src/auth/keycloak.js delete mode 100644 src/components/Map/mapMarkers.css delete mode 100644 src/components/TopBar/TopBar.jsx delete mode 100644 src/components/TopBar/topbar.css delete mode 100644 src/index.css delete mode 100644 src/styles/game-filters.css delete mode 100644 src/styles/global.css delete mode 100644 src/styles/mapLayout.css delete mode 100644 src/styles/markers.css delete mode 100644 src/styles/popup.css diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/auth/authUtils.js b/src/auth/authUtils.js deleted file mode 100644 index a908834..0000000 --- a/src/auth/authUtils.js +++ /dev/null @@ -1,57 +0,0 @@ -import keycloak from "./keycloak"; - -/** - * Initialise Keycloak sans forcer le login. - * - onLoad: "check-sso" => ne redirige pas si user non loggé - */ -export function initAuth() { - return keycloak.init({ - onLoad: "check-sso", - checkLoginIframe: false, - }); -} - -/** - * Appelle une action qui nécessite d'être authentifié. - * Si non loggé => ouvre la page de login Keycloak, puis revient sur la même page. - */ -export function requireAuth(action) { - if (keycloak.authenticated) { - return action(); - } - - keycloak.login({ - redirectUri: window.location.href, - }); -} - -/** - * Retourne le token JWT actuel (ou null) - */ -export function getToken() { - return keycloak.token || null; -} - -/** - * Retourne le username depuis le token (si présent) - */ -export function getUsername() { - const profile = keycloak.tokenParsed || {}; - return ( - profile.preferred_username || - profile.email || - profile.name || - null - ); -} - -/** - * Logout et revient sur la même page. - */ -export function logout() { - keycloak.logout({ - redirectUri: window.location.origin, - }); -} - -export default keycloak; diff --git a/src/auth/keycloak.js b/src/auth/keycloak.js deleted file mode 100644 index 30afe2f..0000000 --- a/src/auth/keycloak.js +++ /dev/null @@ -1,9 +0,0 @@ -import Keycloak from "keycloak-js"; - -const keycloak = new Keycloak({ - url: "https://web.sociowire.com:8443", - realm: "sociowire", - clientId: "sociowire-frontend", -}); - -export default keycloak; diff --git a/src/components/Map/mapMarkers.css b/src/components/Map/mapMarkers.css deleted file mode 100644 index 00d62b2..0000000 --- a/src/components/Map/mapMarkers.css +++ /dev/null @@ -1,185 +0,0 @@ -/* MapLibre: on stabilise l'ancrage en gardant l'élément root à 0x0 - et tout le UI en absolute au-dessus d'une pointe FIXE. */ - -/* Root du marker = ancre stable */ -.post-pin { - position: relative; - width: 0; - height: 0; - pointer-events: none; /* on active sur les enfants */ - transform: translate3d(0,0,0); -} - -/* Conteneurs cliquables */ -.post-pin * { - pointer-events: auto; - box-sizing: border-box; -} - -/* Pointe fixe (tip) — le bas du marker */ -.post-pin-tip { - position: absolute; - left: 0; - top: 0; - transform: translate(-50%, -100%); /* remonte le tip au-dessus du point d'ancre */ - width: 0; - height: 0; - border-left: 10px solid transparent; - border-right: 10px solid transparent; - border-top: 11px solid rgba(8, 20, 40, 0.97); - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)); -} - -/* Wrapper commun (compact/expanded) positionné AU-DESSUS du tip */ -.post-pin-layer { - position: absolute; - left: 0; - top: 0; - transform: translate(-50%, calc(-100% - 12px)); /* 12px = hauteur tip approx */ - display: flex; - flex-direction: column; - align-items: center; -} - -/* ========================= - COMPACT - ========================= */ -.post-pin-compact { - display: inline-flex; - align-items: center; - padding: 4px 8px; - border-radius: 999px; - background: rgba(6, 40, 80, 0.95); - border: 1px solid rgba(80, 180, 255, 0.9); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); - max-width: 180px; -} - -.post-pin-dot { - width: 10px; - height: 10px; - border-radius: 999px; - background: #ff8a00; - margin-right: 6px; - flex-shrink: 0; -} - -.post-pin-text { - color: #e8f5ff; - font-size: 11px; - font-weight: 500; - max-width: 160px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* ========================= - EXPANDED - ========================= */ -.post-pin-expanded { - min-width: 260px; - max-width: 320px; - background: rgba(8, 20, 40, 0.97); - border-radius: 14px; - padding: 10px 12px; - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.8); - border: 1px solid rgba(90, 190, 255, 0.9); - color: #e8f5ff; -} - -/* header : catégorie + heure/date */ -.post-card-header { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 11px; - margin-bottom: 6px; -} - -.post-card-cat { - font-weight: 600; - color: #8fc5ff; -} - -.post-card-time { - color: #9eb7ff; -} - -/* corps : media + texte */ -.post-card-main { - display: flex; - flex-direction: row; - gap: 8px; - margin-bottom: 6px; -} - -.post-card-media { - width: 72px; - height: 72px; - border-radius: 10px; - background: radial-gradient(circle at 30% 30%, #4a9dff, #07152b); - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -.post-card-media-label { - font-size: 9px; - text-align: center; - color: #e8f5ff; -} - -.post-card-info { - flex: 1; - min-width: 0; -} - -.post-card-title { - font-size: 13px; - font-weight: 600; - margin-bottom: 2px; -} - -.post-card-meta { - font-size: 10px; - color: #9eb7ff; - margin-bottom: 4px; -} - -.post-card-body { - font-size: 11px; - color: #c7e3ff; - max-height: 70px; - overflow: hidden; -} - -/* footer boutons */ -.post-card-footer { - display: flex; - gap: 6px; - margin-bottom: 6px; - flex-wrap: wrap; -} - -.post-card-btn { - border: none; - border-radius: 999px; - padding: 3px 8px; - font-size: 10px; - background: rgba(5, 35, 70, 0.95); - color: #e8f5ff; - cursor: pointer; -} - -.post-card-comments { - font-size: 10px; - color: #9eb7ff; - padding: 4px 6px; - border-radius: 8px; - background: rgba(3, 14, 32, 0.95); -} - -/* Helpers */ -.post-hidden { display: none !important; } diff --git a/src/components/TopBar/TopBar.jsx b/src/components/TopBar/TopBar.jsx deleted file mode 100644 index 4491334..0000000 --- a/src/components/TopBar/TopBar.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -import "./topbar.css"; - -export default function TopBar({ username, theme, setTheme, onLoginClick, onSignupClick }) { - return ( -
- -
- SocioWire Logo - -
-
SocioWire
-
Wired to life
-
-
- -
-
- - - -
- - {username ? ( -
{username}
- ) : ( - <> - - - - )} -
-
- ); -} diff --git a/src/components/TopBar/topbar.css b/src/components/TopBar/topbar.css deleted file mode 100644 index efa5461..0000000 --- a/src/components/TopBar/topbar.css +++ /dev/null @@ -1,45 +0,0 @@ -.topbar { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.45rem 0.75rem; - background: #0b1020; - border-bottom: 1px solid #1f2937; -} - -.topbar-left { - display: flex; - align-items: center; - gap: 0.55rem; -} - -.sw-logo { - width: 38px; - height: 38px; - border-radius: 50%; - object-fit: cover; - background: #020617; - border: 1px solid rgba(148,163,184,0.5); - box-shadow: 0 0 12px rgba(56,189,248,0.35); -} - -.main-title { - font-size: 1.05rem; - font-weight: 700; - color: #e5e7eb; -} - -.sub-title { - font-size: 0.72rem; - opacity: 0.7; - color: #93c5fd; -} - -.username-chip { - background: rgba(15,23,42,.96); - padding: 0.25rem 0.7rem; - border-radius: 999px; - border: 1px solid rgba(148,163,184,0.85); - font-size: 0.75rem; - color: #e5e7eb; -} diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 08a3ac9..0000000 --- a/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/main.jsx b/src/main.jsx index ebce1bc..63d1419 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,4 +1,5 @@ -import "@fortawesome/fontawesome-free/css/all.min.css"; +import "@fortawesome/fontawesome-free/css/all.min.css"; // local via npm (no CDN) + import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.jsx"; @@ -7,13 +8,10 @@ import "./styles/base.css"; import "./styles/layout.css"; import "./styles/topbar.css"; import "./styles/map.css"; -import "./styles/markers.css"; -import "./styles/popup.css"; import "./styles/overlays.css"; import "./styles/posts.css"; import "./styles/theme.css"; import "./styles/auth-modal.css"; -import "./styles/game-filters.css"; import "./styles/filters.css"; import "./styles/mapMarkers.css"; diff --git a/src/styles/game-filters.css b/src/styles/game-filters.css deleted file mode 100644 index a2f2f26..0000000 --- a/src/styles/game-filters.css +++ /dev/null @@ -1 +0,0 @@ -/* legacy placeholder (kept if imported) */ diff --git a/src/styles/global.css b/src/styles/global.css deleted file mode 100644 index 6c76094..0000000 --- a/src/styles/global.css +++ /dev/null @@ -1,284 +0,0 @@ -/* RESET */ -* { box-sizing: border-box; } -body { - margin: 0; - background: #050816; - color: #fff; - font-family: system-ui, sans-serif; -} - -/* TOPBAR */ -.topbar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.6rem; - padding: 0.4rem 0.8rem; - background: #0b1020; - border-bottom: 1px solid #1f2937; -} -.logo-circle { - width: 32px; - height: 32px; - background: radial-gradient(circle, #38bdf8, #1d4ed8, #020617); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-weight: 700; -} -.title-block { - display: flex; - flex-direction: column; -} -.main-title { font-size: 1rem; font-weight: 700; } -.sub-title { font-size: 0.75rem; opacity: 0.7; } - -.btn-primary { - padding: 0.25rem 0.7rem; - font-size: 0.75rem; - border-radius: 999px; - border: 1px solid #22c55e; - background: #16a34a; - color: #f9fafb; - cursor: pointer; -} - -/* ROOT & LAYOUT */ -.app-root { - height: 100vh; - display: flex; - flex-direction: column; -} -.main-shell { - flex: 1; - display: flex; - padding: 0.6rem; -} - -/* MAP FULLSCREEN */ -.map-shell { - position: relative; - flex: 1; - border-radius: 1rem; - overflow: hidden; - border: 1px solid #1f2937; - background: #020617; -} - -.map-view { - position: relative; - width: 100%; - height: 100%; -} - -.maplibre-container { - position: absolute; - inset: 0; - width: 100%; - height: 100%; -} - -/* Overlays autour de la map */ -.map-overlay { - position: absolute; - pointer-events: none; -} -.map-overlay * { - pointer-events: auto; -} - -/* Haut */ -.top-bar { - top: 0.4rem; - left: 0; - right: 0; - padding: 0 0.6rem; - display: flex; - justify-content: space-between; - align-items: center; -} -.lookat-box { - padding: 0.25rem 0.6rem; - background: rgba(0,0,0,0.6); - border-radius: 999px; - font-size: 0.75rem; -} -.wire-title { font-size: 0.7rem; opacity: 0.7; } -.zoom-buttons { display: flex; gap: 0.3rem; } - -/* Gauche */ -.left-bar { - left: 0.4rem; - top: 50%; - transform: translateY(-50%); - display: flex; - flex-direction: column; - gap: 0.4rem; -} - -/* Droite */ -.right-bar { - right: 0.4rem; - top: 50%; - transform: translateY(-50%); - display: flex; - flex-direction: column; - gap: 0.4rem; -} - -/* Bas */ -.bottom-bar { - bottom: 0.4rem; - left: 50%; - transform: translateX(-50%); - display: flex; - gap: 0.3rem; -} - -/* Chips */ -.chip-round, -.chip-pill, -.chip-egg, -.chip-hex { - background: rgba(20,25,50,0.9); - border: 1px solid #1d4ed8; - padding: 0.35rem 0.6rem; - color: #fff; - font-size: 0.75rem; - cursor: pointer; - border-radius: 999px; - box-shadow: 0 4px 10px rgba(0,0,0,0.6); -} -.chip-egg { border-radius: 999px; } -.chip-hex { border-radius: 0.4rem; } -.chip-pill { border-radius: 999px; } - -/* Status en bas à gauche */ -.map-status { - position: absolute; - left: 0.5rem; - bottom: 0.5rem; - font-size: 0.7rem; - padding: 0.2rem 0.4rem; - background: rgba(0,0,0,0.6); - border-radius: 0.5rem; -} - -/* === MARKERS (petits posts) === */ -.post-marker { - position: relative; - background: rgba(15, 23, 42, 0.96); - border-radius: 999px; - padding: 4px 6px; - border: 1px solid rgba(148, 163, 184, 0.9); - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7); - cursor: pointer; -} -.post-marker::after { - content: ""; - position: absolute; - left: 50%; - bottom: -7px; - transform: translateX(-50%); - width: 0; - height: 0; - border-width: 7px 7px 0 7px; - border-style: solid; - border-color: rgba(15, 23, 42, 0.96) transparent transparent transparent; -} -.post-marker-inner { - display: flex; - align-items: center; - gap: 6px; -} -.post-marker-text { - display: flex; - flex-direction: column; - max-width: 140px; -} -.post-marker-title { - font-size: 0.7rem; - font-weight: 600; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.post-marker-snippet { - font-size: 0.65rem; - opacity: 0.8; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.post-marker-image { - width: 26px; - height: 26px; - border-radius: 999px; - overflow: hidden; - flex-shrink: 0; - border: 1px solid rgba(148, 163, 184, 0.8); -} -.post-marker-image img { - width: 100%; - height: 100%; - object-fit: cover; -} -.post-marker-image-placeholder { - width: 100%; - height: 100%; - background: radial-gradient(circle at 30% 30%, #38bdf8, #1d4ed8, #020617); -} - -/* === POPUP GROS POST === */ -.maplibregl-popup-content { - padding: 0; - border-radius: 1rem; - overflow: hidden; - background: transparent; - border: none; - box-shadow: none; -} -.popup-post-card { - background: rgba(15, 23, 42, 0.97); - border-radius: 1rem; - border: 1px solid rgba(148, 163, 184, 0.9); - box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85); - color: #e5e7eb; -} -.popup-post-inner { - padding: 0.65rem 0.75rem 0.75rem 0.75rem; -} -.popup-post-header { - display: flex; - align-items: center; - gap: 0.6rem; - margin-bottom: 0.4rem; -} -.popup-post-image { - width: 40px; - height: 40px; - border-radius: 999px; - overflow: hidden; - flex-shrink: 0; - border: 1px solid rgba(148, 163, 184, 0.9); -} -.popup-post-image img { - width: 100%; - height: 100%; - object-fit: cover; -} -.popup-post-image-placeholder { - background: radial-gradient(circle at 30% 30%, #38bdf8, #1d4ed8, #020617); -} -.popup-post-title { - font-size: 0.9rem; - font-weight: 600; -} -.popup-post-body { - font-size: 0.8rem; - line-height: 1.35; - color: #cbd5f5; - max-height: 190px; - overflow-y: auto; -} diff --git a/src/styles/mapLayout.css b/src/styles/mapLayout.css deleted file mode 100644 index cafec5f..0000000 --- a/src/styles/mapLayout.css +++ /dev/null @@ -1,19 +0,0 @@ -/* ========== MAP LAYOUT MINIMAL ========== */ -/* Ce fichier gère seulement la taille de la map. - Les overlays + boutons sont stylés dans overlays.css */ - -.map-view { - position: relative; - width: 100%; - height: 100%; /* avant: 100vh → provoquait un double scroll */ - background: #020814; -} - -/* La carte MapLibre remplit tout l'espace de la vue */ -.map-container { - position: absolute; - inset: 0; - border-radius: 12px; - overflow: hidden; - background: #000; -} diff --git a/src/styles/markers.css b/src/styles/markers.css deleted file mode 100644 index a2f2f26..0000000 --- a/src/styles/markers.css +++ /dev/null @@ -1 +0,0 @@ -/* legacy placeholder (kept if imported) */ diff --git a/src/styles/popup.css b/src/styles/popup.css deleted file mode 100644 index a2f2f26..0000000 --- a/src/styles/popup.css +++ /dev/null @@ -1 +0,0 @@ -/* legacy placeholder (kept if imported) */