refactor(EdpUnblock): better exception management, improving transpar…

…ency and clarity of EDP-Unblock related information, fix(GithubLink): fix Login link
Magic-Fishes · Apr 2, 2024 · c9d74ff · c9d74ff
1 parent ff4d4b6
commit c9d74ff
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 23 deletions.
diff --git a/src/components/EdpUnblock/EdpUnblock.css b/src/components/EdpUnblock/EdpUnblock.css
@@ -29,11 +29,13 @@
 }
 
 #edpu-page {
-    height: 100%;
+    position: fixed;
+    width: 100%;
+    height: max(100%, 850px);
     overflow-y: auto;
     scroll-padding-top: 20px;
-    -webkit-backdrop-filter: blur(10px) brightness(0.7)!important;
-    backdrop-filter: blur(10px) brightness(0.7)!important;
+    -webkit-backdrop-filter: blur(10px) brightness(0.6) !important;
+    backdrop-filter: blur(10px) brightness(0.6) !important;
 }
 
 .edpu-page main {
@@ -111,7 +113,7 @@
 .edpu-download-link.disabled {
     pointer-events: none;
     opacity: 0.8;
-    filter: brightness(0.8);
+    filter: brightness(0.8) grayscale(.5);
 }
 
 .edpu-download-link svg:first-child {
@@ -155,6 +157,12 @@
     transform: translateY(10px);
 }
 
+.edpu-download-link .download-unavailable {
+    font-size: 30px;
+    font-weight: 800;
+    margin-right: 10px;
+}
+
 .edpu-about {
     position: absolute;
     left: 50%;
@@ -174,7 +182,7 @@
     margin-bottom: 20px;
 }
 
-.edpu-about-explanation, .edpu-about-explanation > a {
+.edpu-about-explanation, .edpu-about-explanation > a, .edpu-page a.suggested-browser {
     color: rgb(var(--text-color-alt));
 }
 

diff --git a/src/components/EdpUnblock/EdpUnblock.jsx b/src/components/EdpUnblock/EdpUnblock.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { useLocation, Link } from "react-router-dom";
-import { getBrowser } from "../../utils/utils";
+import { getBrowser, getOS } from "../../utils/utils";
 import GoBackArrow from "../generic/buttons/GoBackArrow";
 import DiscordLink from "../generic/buttons/DiscordLink";
 import GithubLink from "../generic/buttons/GithubLink";
@@ -38,7 +38,7 @@ const browserLogosInfos = {
     },
     Chromium: {
         logo: <ChromeLogo />,
-        available: false,
+        available: true,
         url: "https://chromewebstore.google.com/detail/ecole-directe-plus-unbloc/jglboadggdgnaicfaejjgmnfhfdnflkb?hl=fr",
     },
     Safari: {
@@ -48,8 +48,15 @@ const browserLogosInfos = {
     },
 }
 
-const userBrowser = getBrowser()
-// const userBrowser = "Safari"
+const userOS = getOS();
+const userBrowser = getBrowser();
+// const userOS = "Android";
+// const userBrowser = "Edge";
+const nonCompatibleIOSBrowsers = ["Safari", "Chromium", "Chrome", "Edge", "Opera", "Firefox"]
+const nonCompatibleAndroidBrowsers = ["Safari", "Chromium", "Chrome", "Edge", "Opera"] // le safari est franchement improbable mais edge case on sait jamais
+console.log("userOS:", userOS, "userBrowser:", userBrowser);
+
+const compatibilityCondition = ((userOS === "iOS" && nonCompatibleIOSBrowsers.includes(userBrowser)) || (userOS === "Android" && nonCompatibleAndroidBrowsers.includes(userBrowser)) || (userOS === "MacOS" && userBrowser === "Safari"));
 
 export default function EdpUnblock() {
     const location = useLocation();
@@ -97,7 +104,7 @@ export default function EdpUnblock() {
         </span>
         <span className="edpu-social">
             <DiscordLink />
-            <GithubLink />
+            <GithubLink githubRepoHref={"https://github.com/Magic-Fishes/Ecole-Directe-Plus-Unblock"} />
         </span>
         <Link to="/feedback" className="edpu-feedback-link">Besoin d’aide ? </Link>
         <div id="edpu-page" className="edpu-page">
@@ -108,16 +115,16 @@ export default function EdpUnblock() {
                             <EdpuLogo />
                         </div>
                         <div>
-                            <h1>Installez</h1>
+                            <h1>Installez l'extension</h1>
                             <h2>Ecole Directe Plus Unblock</h2>
                         </div>
                     </div>
-                    {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"}`}>
+                    {compatibilityCondition ? <><p>Malheureusement, l'extension Ecole Directe Plus Unblock n'est pas disponible sur votre navigateur. 😥</p><p>S'il vous plaît considérez l'usage d'un autre navigateur comme <a href={userOS === "iOS" ? "https://apps.apple.com/app/id1484498200" : "https://play.google.com/store/apps/details?id=org.mozilla.firefox"} className="suggested-browser" target="_blank">{userOS === "iOS" ? "Orion" : "Firefox"}</a>.</p></>
+                    : <p>Ecole Directe Plus a besoin de cette extension de navigateur pour accéder au contenu fourni par l’API d’EcoleDirecte</p>}
+                    <a href={browserLogosInfos[userBrowser].url} target="_blank" className={`edpu-download-link ${compatibilityCondition ? "disabled" : ""} ${browserLogosInfos[userBrowser].available ? "available" : "unavailable"}`}>
                         {browserLogosInfos[userBrowser].logo}
-                        <span>Ajouter l’extension</span>
-                        <DownloadIcon />
+                        {compatibilityCondition ? <span>Navigateur incompatible</span> : <span>Ajouter l’extension</span>}
+                        {compatibilityCondition ? <div className="download-unavailable">✕</div> : <DownloadIcon />}
                     </a>
                 </div>
                 <Link ref={aboutButtonRef} to="#about" className="edpu-about-link" replace onClick={() => { location.hash === "#about" && scrollToAbout() }}>
@@ -126,12 +133,12 @@ export default function EdpUnblock() {
                 </Link>
             </main>
             <div className="edpu-about" ref={aboutRef}>
-                <h2 className="edpu-about-h2">Pourquoi ai-je besoin d'installer Ecole Directe Plus Unblock ?</h2>
-                <p className="edpu-about-explanation">EDP Unblock offre un accès ininterrompu à Ecole Directe Plus en donnant l'accès en continu aux données fournies par l'API d'EcoleDirecte. Cette extension est nécessaire au bon fonctionnement d'Ecole Directe Plus.</p>
+                <h2 className="edpu-about-h2">Qu'est-ce qu'Ecole Directe Plus Unblock ?</h2>
+                <p className="edpu-about-explanation">EDP Unblock est une extension de navigateur qui offre un accès ininterrompu à Ecole Directe Plus en donnant l'accès en continu aux données fournies par l'API d'EcoleDirecte. Cette extension est nécessaire au bon fonctionnement d'Ecole Directe Plus.</p>
                 <h2 className="edpu-about-h2">Où et comment installer EDP Unblock ?</h2>
-                <p className="edpu-about-explanation">EDP Unblock est une extension de navigateur, elle est compatible avec les navigateurs basés sur Chromium (Chrome, Edge, Brave, Opera, ...) ainsi que Firefox. En fonction de votre navigateur, la source d'installation diffère. Cliquez sur le bouton "Ajouter l'extension" ci-dessus et vous devriez être redirigé vers la boutique d'extensions compatible avec votre navigateur. Mise en garde : EDP Unblock n'est pas disponible sur toutes les plateformes, notamment sur iOS et iPadOS, ainsi que le navigateur Safari sur MacOS. Si vous êtes sur l'une de ces plateformes, considérez l'usage d'un ordinateur ou d'un appareil android. Toutefois, même sur android, tous les navigateurs ne supportent pas les extensions, considérez alors l'installation des navigateurs KiwiBrowser (basé sur Chromium) ou Firefox.</p>
+                <p className="edpu-about-explanation">EDP Unblock étant une extension de navigateur, la source d'installation diffère en fonction de votre navigateur et votre OS. Cliquez sur le bouton "Ajouter l'extension" ci-dessus et vous devriez être redirigé automatiquement vers la boutique d'extensions compatible avec votre navigateur. Mise en garde : EDP Unblock n'est pas disponible sur tous les navigateurs suivant les plateformes. Sur iOS et iPadOS, Apple restreint fortement la distribution d'extensions, EDP Unblock sera donc uniquement disponible sur le <a href="https://apps.apple.com/app/id1484498200" className="suggested-browser" target="_blank">navigateur Orion</a>. Si vous êtes sur un appareil Android, considérez l'usage du <a href="https://play.google.com/store/apps/details?id=org.mozilla.firefox" className="suggested-browser" target="_blank">navigateur Firefox</a> ou <a href="https://play.google.com/store/apps/details?id=com.kiwibrowser.browser" className="suggested-browser" target="_blank">KiwiBrowser</a>. Si vous êtes sur MacOS, tous les navigateurs hormis Safari devrait être compatibles avec EDP Unblock. Enfin, si vous utilisez un ordinateur sous Windows ou Linux, la grande majorité des navigateurs devraient être compatibles avec l'extension (basé Chromium : Chrome, Edge, Brave, Opera, ... ; basé Gecko : Firefox)</p>
                 <h2 className="edpu-about-h2">Vie privée et confidentialité</h2>
-                <p className="edpu-about-explanation">EDP Unblock est exclusivement active sur les domaines `ecole-directe.plus` ainsi que `ecoledirecte.com`. L'extension ne peut pas accéder aux informations provenant de n'importe quel autre site web. De plus, EDP Unblock ne lit aucune donnée : l'extension sert simplement de passerelle aux requêtes pour "arriver correctement à destination", mais n'a pas accès à leur contenu.</p>
+                <p className="edpu-about-explanation">EDP Unblock est exclusivement active sur les domaines `ecole-directe.plus` ainsi que `ecoledirecte.com`. L'extension ne peut pas accéder aux informations provenant de n'importe quel autre site web. De plus, EDP Unblock ne lit aucune donnée : l'extension sert simplement de passerelle aux requêtes pour "arriver correctement à destination", mais n'a pas accès à leur contenu. Ainsi, EDP Unblock ne collecte aucune donnée et effectue toutes ces opérations en local sur l'appareil du client.</p>
                 <h2 className="edpu-about-h2">Divers</h2>
                 <p className="edpu-about-explanation">L'extension Ecole Directe Plus Unblock, tout comme le site Ecole Directe Plus, est un projet open-source sous license MIT, le code source est donc disponible en ligne : <a href="https://github.com/Magic-Fishes/Ecole-Directe-Plus-Unblock">dépôt Github</a>.</p>
             </div>

diff --git a/src/components/generic/buttons/GithubLink.jsx b/src/components/generic/buttons/GithubLink.jsx
@@ -1,10 +1,10 @@
 import GithubLogo from "../../graphics/GithubLogo";
 import "./SocialButtonLink.css";
 
-export default function GithubLink({ ...props }) {
+export default function GithubLink({ githubRepoHref="https://github.com/Magic-Fishes/Ecole-Directe-Plus", ...props }) {
     return (
         <>
-            <a className="social-button-link" href="https://github.com/Magic-Fishes/Ecole-Directe-Plus-Unblock" target="_blank" {...props} ><GithubLogo /></a>
+            <a className="social-button-link" href={githubRepoHref} target="_blank" {...props} ><GithubLogo /></a>
         </>
     )
 }
diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -114,4 +114,27 @@ export function getBrowser() { // I didn't check all browsers, see : https://dev
         (UA.includes("Chrome/")) ? "Chrome" : // verified on my computer
         "Safari" // not verified
     )
-}
+}
+
+export function getOS() {
+    const userAgent = window.navigator.userAgent,
+        platform = window.navigator?.userAgentData?.platform || window.navigator.platform,
+        macosPlatforms = ['macOS', 'Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
+        windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
+        iosPlatforms = ['iPhone', 'iPad', 'iPod'];
+    let os = null;
+
+    if (macosPlatforms.indexOf(platform) !== -1) {
+        os = 'MacOS';
+    } else if (iosPlatforms.indexOf(platform) !== -1) {
+        os = 'iOS';
+    } else if (windowsPlatforms.indexOf(platform) !== -1) {
+        os = 'Windows';
+    } else if (/Android/.test(userAgent)) {
+        os = 'Android';
+    } else if (/Linux/.test(platform)) {
+        os = 'Linux';
+    }
+
+    return os;
+}