Browser Check Override

tuftsceeo · Sep 4, 2022 · 841af77 · 841af77
1 parent f64ff89
commit 841af77
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -33,16 +33,13 @@ function App() {
      * @param {number} version - Version number of the browser in use
      * @returns A boolean indicating if the site can suppport the user's browser
      */
-    function isValidBrowser(browser, version) {
-        if ((browser === "Chrome" || browser === "Edge") && version > 89) {
-            return true;
-        }
-        else if (browser === "Opera" && version > 75) {
+    function isValidBrowser() {
+        if (navigator.serial !== undefined) {
             return true;
         }
         return false;
     }
-    const validBrowser = isValidBrowser(browserName, browserVersion);
+    const [validBrowser, setValidBrowser] = useState(isValidBrowser());
 
     // Initialization Code
     // Calls saved editor data from LocalStorage, if avaliable
@@ -215,6 +212,7 @@ function App() {
             an unsupported browser */}
             <ChromeCheck
                 className={validBrowser ? "hidden" : ""}
+                override={() => {setValidBrowser(true)}}
             />
 
             {/* Shows a welcome message if the user hasn't 

diff --git a/src/components/ChromeCheck.js b/src/components/ChromeCheck.js
@@ -7,20 +7,26 @@
  * 
  */ 
 
+import { Button } from "@mui/material"
+
 function ChromeCheck(props) {
     return (
         <div className={props.className + " z-20"}>
             <div className="background-white bg-full">
                 <h1 className="text-center text-3xl">Your browser is not supported</h1>
                 <div className="text-center my-8">
-                    <p>Please use a supported browser to acess Web PyREPL!</p>
+                    <p>Please use a supported browser to access Web PyREPL!</p>
                     <ul>
                         <li>Google Chrome (89+)</li>
                         <li>Microsoft Edge (89+)</li>
                         <li>Opera (75+)</li>
                     </ul>
                 </div>
             </div>
+
+            <div className="flex justify-center">
+                <Button variant="contained" onClick={() => {props.override()}}>Continue Anyway</Button>
+            </div>
 
         </div>