From f081795ffac10ffe6ac201efeacd5f17a8d684ef Mon Sep 17 00:00:00 2001 From: elisa Date: Tue, 26 May 2026 07:50:08 +0000 Subject: [PATCH 1/2] feat: add svg logo and animation (wip) --- front/public/assets/logo.svg | 39 ++++++++++++++ front/src/pages/Loader/LoaderPage.css | 37 ++++++++++++++ front/src/pages/Loader/LoaderPage.tsx | 73 +++++++++++++++++++++++++++ 3 files changed, 149 insertions(+) create mode 100644 front/public/assets/logo.svg create mode 100644 front/src/pages/Loader/LoaderPage.css create mode 100644 front/src/pages/Loader/LoaderPage.tsx diff --git a/front/public/assets/logo.svg b/front/public/assets/logo.svg new file mode 100644 index 000000000..283dde2ef --- /dev/null +++ b/front/public/assets/logo.svg @@ -0,0 +1,39 @@ + + + + + + + + diff --git a/front/src/pages/Loader/LoaderPage.css b/front/src/pages/Loader/LoaderPage.css new file mode 100644 index 000000000..81f8cf504 --- /dev/null +++ b/front/src/pages/Loader/LoaderPage.css @@ -0,0 +1,37 @@ +.container { + display: flex; + justify-content: center; + align-items: center; +} + +/* Classe pour le loader SVG */ +.svg-loader { + width: 300px; /* Ajustez la taille selon vos besoins */ + height: auto; +} + +/* --- Adaptation du CSS de cssloader --- */ +.animated-path { + /* 1. Transparence de base et Contour */ + stroke: #000000; + stroke-width: 20px; /* Augmenté car la viewBox du SVG est immense (5335px) */ + fill: none; /* Ajustez l'épaisseur du contour */ + + /* 2. Application du Masque (pour l'effet de remplissage) */ + mask: url(#wave-mask); +} + +/* Définition de l'onde dans le masque (équivalent du gradient CSS) */ +#wave-rect { + animation: wave-animation 2s linear infinite; +} + +/* 3. L'Animation (adaptée pour SVG) */ +@keyframes wave-animation { + from { + x: -320px; /* Commence décalé à gauche (taille du motif) */ + } + to { + x: 0; /* Revient à la position initiale */ + } +} diff --git a/front/src/pages/Loader/LoaderPage.tsx b/front/src/pages/Loader/LoaderPage.tsx new file mode 100644 index 000000000..39ac5efa1 --- /dev/null +++ b/front/src/pages/Loader/LoaderPage.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import './LoaderPage.css'; + +const LoaderPage: React.FC = () => { + return ( +
+
+ + + {/* Votre superbe dégradé */} + + + + + + + {/* Masque corrigé avec une vraie vague animée */} + + {/* Un groupe qui contient la vague et qui monte de bas en haut */} + + + {/* La forme de la vague elle-même, qui ondule à l'horizontale */} + + + + + + + + {/* Arrière-plan fixe sombre */} + + + {/* Premier plan coloré appliqué sur le masque de vague */} + + +
+
+ ); +}; + +export default LoaderPage; From 20af53582601879b931386ee2ab375346f3502a8 Mon Sep 17 00:00:00 2001 From: elisa Date: Tue, 7 Jul 2026 12:53:05 +0000 Subject: [PATCH 2/2] fix: animation and implement loaderpage to isAuthenticated --- .../AuthenticationProtection.tsx | 36 +++++++++++++------ front/src/pages/Loader/LoaderPage.tsx | 25 ++++++------- 2 files changed, 37 insertions(+), 24 deletions(-) diff --git a/front/src/components/AuthenticationProtection/AuthenticationProtection.tsx b/front/src/components/AuthenticationProtection/AuthenticationProtection.tsx index ea2a32910..7b422462b 100644 --- a/front/src/components/AuthenticationProtection/AuthenticationProtection.tsx +++ b/front/src/components/AuthenticationProtection/AuthenticationProtection.tsx @@ -1,34 +1,50 @@ -import { useAuthenticationContext } from '@Front/hooks/useAuthenticationContext'; -import { appRoutes } from '@Front/routing/appRoutes'; -import { useMemo, type ReactNode } from 'react'; -import { Navigate, useLocation, useMatches, type UIMatch } from 'react-router'; +import { useAuthenticationContext } from "@Front/hooks/useAuthenticationContext"; +import LoaderPage from "@Front/pages/Loader/LoaderPage"; +import { appRoutes } from "@Front/routing/appRoutes"; +import { useMemo, type ReactNode } from "react"; +import { Navigate, useLocation, useMatches, type UIMatch } from "react-router"; type AuthenticationProtectionProps = { children: ReactNode; }; export const AuthenticationProtection = ({ children }: AuthenticationProtectionProps) => { - const { isAuthenticated, postAuthRedirectPath, setPostAuthRedirectPath, resetPostAuthRedirectPath } = - useAuthenticationContext(); + const { + isAuthenticated, + postAuthRedirectPath, + setPostAuthRedirectPath, + resetPostAuthRedirectPath, + } = useAuthenticationContext(); const { pathname } = useLocation(); const matches = useMatches() as UIMatch[]; const mustBeAuthenticate = useMemo(() => { - const currentMatch = matches.find(match => match.pathname === pathname); + const currentMatch = matches.find((match) => match.pathname === pathname); if (currentMatch?.handle?.mustBeAuthenticate === true && !isAuthenticated) { setPostAuthRedirectPath(pathname); } - if (currentMatch?.handle?.mustBeAuthenticate === false && isAuthenticated && postAuthRedirectPath) { + if ( + currentMatch?.handle?.mustBeAuthenticate === false && + isAuthenticated && + postAuthRedirectPath + ) { resetPostAuthRedirectPath(); } return currentMatch?.handle?.mustBeAuthenticate; - }, [pathname, matches, isAuthenticated, postAuthRedirectPath, setPostAuthRedirectPath, resetPostAuthRedirectPath]); + }, [ + pathname, + matches, + isAuthenticated, + postAuthRedirectPath, + setPostAuthRedirectPath, + resetPostAuthRedirectPath, + ]); if (isAuthenticated === undefined) { - return null; + return ; } if (mustBeAuthenticate && !isAuthenticated) { diff --git a/front/src/pages/Loader/LoaderPage.tsx b/front/src/pages/Loader/LoaderPage.tsx index 39ac5efa1..cd4abfe2a 100644 --- a/front/src/pages/Loader/LoaderPage.tsx +++ b/front/src/pages/Loader/LoaderPage.tsx @@ -14,16 +14,13 @@ const LoaderPage: React.FC = () => { aria-label="Chargement…" > - {/* Votre superbe dégradé */} - {/* Masque corrigé avec une vraie vague animée */} - {/* Un groupe qui contient la vague et qui monte de bas en haut */} { dur="6s" repeatCount="indefinite" calcMode="spline" - keySplines="0.4 0 0.2 1; 0 0 1 1; 0.4 0 0.2 1" - keyTimes="0; 0.45; 0.8; 1" - values="0,4800; 0,-600; 0,-600; 0,4800" + keySplines="0.4 0 0.2 1; 0.4 0 0.2 1" + keyTimes="0; 0.5; 1" + values="0,4800; 0,-600; 0,4800" /> - {/* La forme de la vague elle-même, qui ondule à l'horizontale */} @@ -52,13 +51,11 @@ const LoaderPage: React.FC = () => { - {/* Arrière-plan fixe sombre */} - {/* Premier plan coloré appliqué sur le masque de vague */} { ); }; -export default LoaderPage; +export default LoaderPage; \ No newline at end of file