Merge branch 'working' into dev-channel

src/App.jsx

@@ -1056,7 +1056,7 @@ export default function App() {
                 <a href="/edp-unblock#about">En savoir plus</a>
                 <a href={browserExtensionDownloadLink[userBrowser]} target={(userBrowser !== "Safari" ? "_blank" : "")}>Télécharger</a>
             </div>
-        </>, "extension-warning")
+        </>, {customClass: "extension-warning", timer: "infinite"})
     }
 
     async function fetchLogin(username, password, keepLoggedIn, callback, controller = (new AbortController())) {

src/components/EdpUnblock/EdpUnblock.css

@@ -90,7 +90,7 @@
     text-align: center;
 }
 
-.edpu-dowload-link {
+.edpu-download-link {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -104,44 +104,54 @@
     transition: .2s;
 }
 
-.edpu-dowload-link svg:first-child {
+.edpu-download-link .sad-emoji {
+    font-size: 2em;
+}
+
+.edpu-download-link.disabled {
+    pointer-events: none;
+    opacity: 0.8;
+    filter: brightness(0.8);
+}
+
+.edpu-download-link svg:first-child {
     height: 40px;
     min-height: 40px;
 }
 
-.edpu-dowload-link svg:last-child {
+.edpu-download-link svg:last-child {
     height: 30px;
     min-height: 30px;
     transform: translateX(-5px);
     overflow: visible;
 }
 
-.edpu-dowload-link svg:last-child path {
+.edpu-download-link svg:last-child path {
     stroke: white;
 }
 
-.edpu-dowload-link span {
+.edpu-download-link span {
     font-size: var(--font-size-20);
     font-weight: var(--font-weight-extra-bold);
     color: white;
     text-align: center;
 }
 
-.edpu-dowload-link svg:last-child path:first-child {
+.edpu-download-link svg:last-child path:first-child {
     transition: .3s;
 }
 
-.edpu-dowload-link:is(:hover, :focus-visible) {
+.edpu-download-link:not(.disabled):is(:hover, :focus-visible) {
     background-color: #FFF7;
     filter: drop-shadow(0 0 20px #FFFFFF88);
     outline: none;
 }
 
-.edpu-dowload-link:is(:hover, :focus-visible) svg:last-child path:first-child {
+.edpu-download-link:not(.disabled):is(:hover, :focus-visible) svg:last-child path:first-child {
     transform: translateY(-10px);
 }
 
-.edpu-dowload-link:is(:active) svg:last-child path:first-child {
+.edpu-download-link:not(.disabled):is(:active) svg:last-child path:first-child {
     transform: translateY(10px);
 }
 

src/components/EdpUnblock/EdpUnblock.jsx

@@ -24,42 +24,36 @@ const browserLogosInfos = {
     Chrome: {
         logo: <ChromeLogo />,
         available: true,
-        url: "#CHROME_EXTENSION",
+        url: "https://chromewebstore.google.com/detail/ecole-directe-plus-unbloc/jglboadggdgnaicfaejjgmnfhfdnflkb?hl=fr",
     },
     Opera: {
         logo: <ChromeLogo />,
         available: true,
-        url: "#CHROME_EXTENSION",
+        url: "https://chromewebstore.google.com/detail/ecole-directe-plus-unbloc/jglboadggdgnaicfaejjgmnfhfdnflkb?hl=fr",
     },
     Edge: {
         logo: <EdgeLogo />,
         available: true,
-        url: "#EDGE_EXTENSION",
-    },
-    Seamonkey: {
-        logo: <FirefoxLogo />,
-        available: false,
-        url: "",
+        url: "https://microsoftedge.microsoft.com/addons/detail/ecole-directe-plus-unbloc/bghggiemmicjhglgnilchjfnlbcmehgg",
     },
     Chromium: {
         logo: <ChromeLogo />,
         available: false,
-        url: "",
+        url: "https://chromewebstore.google.com/detail/ecole-directe-plus-unbloc/jglboadggdgnaicfaejjgmnfhfdnflkb?hl=fr",
     },
     Safari: {
-        logo: <FirefoxLogo />,
+        logo: <span className="sad-emoji">😥</span>,
         available: false,
         url: "",
     },
 }
 
 const userBrowser = getBrowser()
+// const userBrowser = "Safari"
 
 export default function EdpUnblock() {
     const location = useLocation();
 
-    const [arrowText, setArrowText] = useState("En savoir plus")
-
     const aboutRef = useRef(null);
     const aboutButtonRef = useRef(null);
     const heroBannerRef = useRef(null);
@@ -118,8 +112,9 @@ export default function EdpUnblock() {
                             <h2>Ecole Directe Plus Unblock</h2>
                         </div>
                     </div>
-                    <p>Ecole Directe Plus a besoin de son extension pour accéder au contenu fourni par l’API d’EcoleDirecte</p>
-                    <a href={browserLogosInfos[userBrowser].url} target="_blank" className={`edpu-dowload-link ${browserLogosInfos[userBrowser].available ? "available" : "unavailable"}`}>
+                    {userBrowser !== "Safari" ? <p>Ecole Directe Plus a besoin de son extension pour accéder au contenu fourni par l’API d’EcoleDirecte</p>
+                    : <p>Malheureusement, l'extension Ecole Directe PLus Unblock n'est pas disponible sur votre navigateur.😥</p>}
+                    <a href={browserLogosInfos[userBrowser].url} target="_blank" className={`edpu-download-link ${userBrowser === "Safari" ? "disabled" : ""} ${browserLogosInfos[userBrowser].available ? "available" : "unavailable"}`}>
                         {browserLogosInfos[userBrowser].logo}
                         <span>Ajouter l’extension</span>
                         <DownloadIcon />

src/components/Login/Login.css

@@ -184,6 +184,10 @@ p.policy {
         background-color: rgb(var(--background-color-1)) !important;
     }
 
+    #edp-unblock-ad .edpu-explanation {
+        display: none;
+    }
+
     .login-social {
         z-index: 1;
         position: fixed;

src/components/Login/Login.jsx

@@ -37,7 +37,7 @@ export default function Login({ keepLoggedIn, setKeepLoggedIn, A2FInfo, setRequi
             <EDPLogoFullWidth className="login-logo" id="outside-container" alt="Logo Ecole Directe Plus" />
             <Link to="/edp-unblock" className="temp-disclaimer" id="edp-unblock-ad">
                 <ExtensionIcon className="extension-icon" />
-                <span>Installez l'extension EDP Unblock pour accéder en continu à Ecole Directe Plus ! Ecole Directe Plus a besoin de son extension pour accéder au contenu fourni par l’API d’EcoleDirecte.</span>
+                <span>Installez l'extension EDP Unblock pour accéder en continu à Ecole Directe Plus ! <span className="edpu-explanation">Ecole Directe Plus a besoin de son extension pour accéder au contenu fourni par l’API d’EcoleDirecte.</span></span>
                 <Link to="/edp-unblock#about">En savoir plus</Link>
             </Link>
             <span className="login-social">

src/components/generic/PopUps/Notification.jsx

@@ -42,20 +42,30 @@ export default function DOMNotification({ children }) {
         }, delay)
     }
 
-    function addNotification(newNotificationContent, customClass = "") {
+    function addNotification(newNotificationContent, {customClass = "", timer = 3000}) {
+        /** This function will summon a notification
+         * @param newNotificationContent content (in jsx) of the notification
+         * @param customClass class you can add to the notification pop-up to change the default style
+         * @param timer time in ms before the notification start closing OR infinite to make the notification stay forever 
+         * WARNING : the notification context being outside of the router, <Link/> component and hooks like useNavigate from react-router-dom will not work. (It would for useNavigate if the function called is declared in the router)
+         */
         const newNotification = {
-            key: currentNotificationId.current,
-            content: newNotificationContent,
-            isClosing: 0,
-            creationTime: new Date().getTime(),
+            key: currentNotificationId.current, // key for react list handling (should be different for each notification but sometime isn't for strange reasons)
+            content: newNotificationContent, // content of the notification
+            isClosing: 0, // 0 if the notification isn't closing, 1 is if it is a classic closing and 2 if it is a fat-closing (when the user manually clic on the arrow)
+            creationTime: new Date().getTime(), // timer of creation of the notification, used to delete it at the right time
             customClass,
-            hoverred: false,
+            timer,
+            hoverred: false, // boolean indicating if the notification is hover or not
         }
+
         currentNotificationId.current++;
         setNotificationList(() => [newNotification].concat(...notificationList))
-        setTimeout(() => {
-            closeNotification(newNotification)
-        }, 3000);
+        if (timer !== "infinite") {
+            setTimeout(() => {
+                closeNotification(newNotification)
+            }, timer);
+        }
     }
 
     let notificationToRemove = []
@@ -71,7 +81,7 @@ export default function DOMNotification({ children }) {
 
     function handleMouseLeave(notification) {
         notification.hovered = false;
-        if (notification.creationTime < new Date().getTime() - 3500) {
+        if (notification.timer !== "infinite" || notification.creationTime < new Date().getTime() - (notification.timer + 500)) {
             closeNotification(notification, false, 1000)
             notification.creationTime = new Date().getTime() - 1500
         }
@@ -85,7 +95,7 @@ export default function DOMNotification({ children }) {
         <notificationContext.Provider value={addNotification} >
             <div id="notifications-container">
                 {notificationList.map((el, i) => {
-                    if (el.creationTime > new Date().getTime() - 3500 || el.hovered) {
+                    if (el.timer === "infinite" || el.creationTime > new Date().getTime() - (el.timer + 500) || el.hovered) {
                         return (
                             <div className={`pop-up-notification ${el.isClosing === 1 ? " closing" : (el.isClosing === 2 ? " fast-closing" : "")} ${el.customClass}`} key={el.key} onMouseEnter={() => handleMouseEnter(el)} onMouseLeave={() => handleMouseLeave(el)} >
                                 <DropDownArrow className="notification-close-arrow" onClick={() => { closeNotification(el, true) }} />

src/components/graphics/ChromeLogo.jsx

@@ -3,7 +3,7 @@ import "./graphics.css"
 export default function ChromeLogo({ className = "", id = "", alt, ...props }) {
     return (
         <svg aria-label={alt} className={className} id={id} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none" {...props}>
-            <circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="23" stroke-width="5" className="fill-1A73E8 stroke-white"/>
+            <circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="23" strokeWidth="5" className="fill-1A73E8 stroke-white"/>
             <path d="M27.9819 61.9548L6.48191 24.9547C28.4819 -10.0453 73.9819 -6.54523 93.3579 24.9547L50.4819 24.9548C33.4819 24.9547 18.9819 40.9548 27.9819 61.9548Z" className="fill-E1392C" />
             <path d="M50.4819 24.9548L93.3619 24.9547C112.158 59.0588 88.8131 99.5072 49.9819 99.9548L70.9819 63.4548C80.4819 48.4548 72.4818 26.4548 50.4819 24.9548Z" className="fill-FBBD07" />
             <path d="M70.9819 63.4548L49.9819 99.9548C11.8584 99.9913 -12.2467 58.5224 6.48191 24.9547L27.9819 61.9548C35.9818 76.9547 58.9818 80.9547 70.9819 63.4548Z" className="fill-229342" />