From e09a5af1f8717eb4398535cf04eeacfb9846fd2d Mon Sep 17 00:00:00 2001
From: cinyecai <cinyecai@gmail.com>
Date: Tue, 5 Nov 2024 09:50:27 -0500
Subject: [PATCH 1/4] Unsupported browser banner

---
 package-lock.json               | 47 +++++++++++++++++++++++++++++++++
 package.json                    |  1 +
 public/index.html               |  1 +
 src/index.tsx                   |  1 +
 src/outdated-browser-message.js | 30 +++++++++++++++++++++
 5 files changed, 80 insertions(+)
 create mode 100644 src/outdated-browser-message.js

diff --git a/package-lock.json b/package-lock.json
index 748a25d6c..bfec433cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "moment": "2.30.1",
         "noty": "3.2.0-beta",
         "oidc-client-ts": "3.1.0",
+        "outdated-browser-rework": "^3.0.1",
         "query-string": "9.1.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -16301,6 +16302,14 @@
       "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
       "dev": true
     },
+    "node_modules/outdated-browser-rework": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/outdated-browser-rework/-/outdated-browser-rework-3.0.1.tgz",
+      "integrity": "sha512-IihV162fBItDBfRI8yNq/+I8qkuKofV8m8s0YCP8ZXaeTjPPBXO6QsbPLckwBUoqe4ZNIHfgj0PaNBHVYKxeaw==",
+      "dependencies": {
+        "ua-parser-js": "^0.7.22"
+      }
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -21549,6 +21558,31 @@
         "node": ">=10"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "0.7.39",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
+      "integrity": "sha512-IZ6acm6RhQHNibSt7+c09hhvsKy9WUr4DVbeq9U8o71qxyYtJpQeDxQnMrVqnIFMLcQjHO0I9wgfO2vIahht4w==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "bin": {
+        "ua-parser-js": "script/cli.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -34728,6 +34762,14 @@
       "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
       "dev": true
     },
+    "outdated-browser-rework": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/outdated-browser-rework/-/outdated-browser-rework-3.0.1.tgz",
+      "integrity": "sha512-IihV162fBItDBfRI8yNq/+I8qkuKofV8m8s0YCP8ZXaeTjPPBXO6QsbPLckwBUoqe4ZNIHfgj0PaNBHVYKxeaw==",
+      "requires": {
+        "ua-parser-js": "^0.7.22"
+      }
+    },
     "p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -38436,6 +38478,11 @@
         }
       }
     },
+    "ua-parser-js": {
+      "version": "0.7.39",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
+      "integrity": "sha512-IZ6acm6RhQHNibSt7+c09hhvsKy9WUr4DVbeq9U8o71qxyYtJpQeDxQnMrVqnIFMLcQjHO0I9wgfO2vIahht4w=="
+    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index f68723d3e..09114d53d 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "moment": "2.30.1",
     "noty": "3.2.0-beta",
     "oidc-client-ts": "3.1.0",
+    "outdated-browser-rework": "^3.0.1",
     "query-string": "9.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
diff --git a/public/index.html b/public/index.html
index b5fcc0215..c810e47d0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,6 +40,7 @@
     You need to enable JavaScript to run this app.
   </noscript>
   <div id="root"></div>
+  <div id="outdated"></div>
 
   <!--
       This HTML file is a template.
diff --git a/src/index.tsx b/src/index.tsx
index fdd9d1b24..44bd6419c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,6 +7,7 @@ import {Auth} from './libs/auth/auth';
 import {OidcBroker} from './libs/auth/oidcBroker';
 import {unregister} from './registerServiceWorker';
 import {BrowserRouter} from 'react-router-dom';
+import './outdated-browser-message.js';
 
 const load = async () => {
   unregister();
diff --git a/src/outdated-browser-message.js b/src/outdated-browser-message.js
new file mode 100644
index 000000000..4c04ebd4e
--- /dev/null
+++ b/src/outdated-browser-message.js
@@ -0,0 +1,30 @@
+import 'outdated-browser-rework/dist/style.css';
+
+import outdatedBrowserRework from 'outdated-browser-rework';
+
+outdatedBrowserRework({
+  browserSupport: {
+    Chrome: 67, // Includes Chrome for mobile devices
+    Edge: 40,
+    Safari: false,
+    'Mobile Safari': 10,
+    Opera: 54,
+    Firefox: 60,
+    Vivaldi: 1,
+    IE: false,
+  },
+  isUnknownBrowserOK: true,
+  messages: {
+    en: {
+      outOfDate: 'DUOS may not function correctly in this browser.',
+      update: {
+        web: `If you experience issues, please try ${window.chrome ? 'updating' : 'using'} Google Chrome.`,
+        googlePlay: 'Please install Chrome from Google Play',
+        appStore: 'Please update iOS from the Settings App',
+      },
+      url: 'https://www.google.com/chrome/',
+      callToAction: `${window.chrome ? 'Update' : 'Download'} Chrome now`,
+      close: 'Close',
+    },
+  },
+});

From 171572fad54f0cd538091c4a5a6438db7b57218c Mon Sep 17 00:00:00 2001
From: cinyecai <cinyecai@gmail.com>
Date: Tue, 5 Nov 2024 09:54:05 -0500
Subject: [PATCH 2/4] Not chrome or firefox

---
 src/outdated-browser-message.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/outdated-browser-message.js b/src/outdated-browser-message.js
index 4c04ebd4e..561fe8537 100644
--- a/src/outdated-browser-message.js
+++ b/src/outdated-browser-message.js
@@ -5,12 +5,12 @@ import outdatedBrowserRework from 'outdated-browser-rework';
 outdatedBrowserRework({
   browserSupport: {
     Chrome: 67, // Includes Chrome for mobile devices
-    Edge: 40,
+    Edge: false,
     Safari: false,
-    'Mobile Safari': 10,
-    Opera: 54,
+    'Mobile Safari': false,
+    Opera: false,
     Firefox: 60,
-    Vivaldi: 1,
+    Vivaldi: false,
     IE: false,
   },
   isUnknownBrowserOK: true,

From cdad4467f1ab183b634e612709edfbc556d3901c Mon Sep 17 00:00:00 2001
From: cinyecai <cinyecai@gmail.com>
Date: Wed, 13 Nov 2024 16:50:50 -0500
Subject: [PATCH 3/4] Unsupported browser alert

---
 package-lock.json                  | 58 ++++++------------------------
 package.json                       |  2 +-
 public/index.html                  |  1 -
 src/components/ActionableAlert.tsx | 35 ++++++++++++++++++
 src/components/SignInButton.tsx    | 39 ++++++++++++++------
 src/index.tsx                      |  1 -
 src/outdated-browser-message.js    | 30 ----------------
 tsconfig.json                      |  3 +-
 types/index.d.ts                   |  3 ++
 9 files changed, 80 insertions(+), 92 deletions(-)
 create mode 100644 src/components/ActionableAlert.tsx
 delete mode 100644 src/outdated-browser-message.js
 create mode 100644 types/index.d.ts

diff --git a/package-lock.json b/package-lock.json
index bfec433cc..985245ff0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "ajv": "8.17.1",
         "ajv-formats": "3.0.1",
         "axios": "1.7.7",
+        "browser-version-detection": "^2.1.8",
         "dompurify": "3.1.7",
         "js-file-download": "0.4.12",
         "lodash": "4.17.21",
@@ -26,7 +27,6 @@
         "moment": "2.30.1",
         "noty": "3.2.0-beta",
         "oidc-client-ts": "3.1.0",
-        "outdated-browser-rework": "^3.0.1",
         "query-string": "9.1.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -6648,6 +6648,11 @@
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
       "dev": true
     },
+    "node_modules/browser-version-detection": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/browser-version-detection/-/browser-version-detection-2.1.8.tgz",
+      "integrity": "sha512-dEUls/BcR+sxrqJAhd2561ijc3fFeHMJ0FvR2kwOD3aym3DMFkCelQ2LI3nIX3PneHijPYvaG7PnhwghcUkqHA=="
+    },
     "node_modules/browserslist": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.0.tgz",
@@ -16302,14 +16307,6 @@
       "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
       "dev": true
     },
-    "node_modules/outdated-browser-rework": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/outdated-browser-rework/-/outdated-browser-rework-3.0.1.tgz",
-      "integrity": "sha512-IihV162fBItDBfRI8yNq/+I8qkuKofV8m8s0YCP8ZXaeTjPPBXO6QsbPLckwBUoqe4ZNIHfgj0PaNBHVYKxeaw==",
-      "dependencies": {
-        "ua-parser-js": "^0.7.22"
-      }
-    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -21558,31 +21555,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/ua-parser-js": {
-      "version": "0.7.39",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
-      "integrity": "sha512-IZ6acm6RhQHNibSt7+c09hhvsKy9WUr4DVbeq9U8o71qxyYtJpQeDxQnMrVqnIFMLcQjHO0I9wgfO2vIahht4w==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/ua-parser-js"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/faisalman"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/faisalman"
-        }
-      ],
-      "bin": {
-        "ua-parser-js": "script/cli.js"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -27771,6 +27743,11 @@
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
       "dev": true
     },
+    "browser-version-detection": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/browser-version-detection/-/browser-version-detection-2.1.8.tgz",
+      "integrity": "sha512-dEUls/BcR+sxrqJAhd2561ijc3fFeHMJ0FvR2kwOD3aym3DMFkCelQ2LI3nIX3PneHijPYvaG7PnhwghcUkqHA=="
+    },
     "browserslist": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.0.tgz",
@@ -34762,14 +34739,6 @@
       "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
       "dev": true
     },
-    "outdated-browser-rework": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/outdated-browser-rework/-/outdated-browser-rework-3.0.1.tgz",
-      "integrity": "sha512-IihV162fBItDBfRI8yNq/+I8qkuKofV8m8s0YCP8ZXaeTjPPBXO6QsbPLckwBUoqe4ZNIHfgj0PaNBHVYKxeaw==",
-      "requires": {
-        "ua-parser-js": "^0.7.22"
-      }
-    },
     "p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -38478,11 +38447,6 @@
         }
       }
     },
-    "ua-parser-js": {
-      "version": "0.7.39",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
-      "integrity": "sha512-IZ6acm6RhQHNibSt7+c09hhvsKy9WUr4DVbeq9U8o71qxyYtJpQeDxQnMrVqnIFMLcQjHO0I9wgfO2vIahht4w=="
-    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index 09114d53d..fc036a5fb 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "ajv": "8.17.1",
     "ajv-formats": "3.0.1",
     "axios": "1.7.7",
+    "browser-version-detection": "^2.1.8",
     "dompurify": "3.1.7",
     "js-file-download": "0.4.12",
     "lodash": "4.17.21",
@@ -21,7 +22,6 @@
     "moment": "2.30.1",
     "noty": "3.2.0-beta",
     "oidc-client-ts": "3.1.0",
-    "outdated-browser-rework": "^3.0.1",
     "query-string": "9.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
diff --git a/public/index.html b/public/index.html
index c810e47d0..b5fcc0215 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,6 @@
     You need to enable JavaScript to run this app.
   </noscript>
   <div id="root"></div>
-  <div id="outdated"></div>
 
   <!--
       This HTML file is a template.
diff --git a/src/components/ActionableAlert.tsx b/src/components/ActionableAlert.tsx
new file mode 100644
index 000000000..c75578bab
--- /dev/null
+++ b/src/components/ActionableAlert.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import './Alert.css';
+import CloseIcon from '@mui/icons-material/Close';
+import { Button } from '@mui/material';
+
+export interface ActionableAlertProps {
+    id: string;
+    type: string;
+    title: string;
+    description: string;
+    onClose?: () => void;
+    actionText: string;
+    onClick?: () => void;
+}
+
+export const ActionableAlert = (props: ActionableAlertProps) => {
+  const {id, type, title, description, onClose, actionText, onClick} = props;
+  return (
+    <div id={`${id}_alert`} className={`alert-wrapper ${type}`} style={{border: '1px solid red', borderRadius: '5px'}}>
+      {onClose && <span
+        style={{float: 'right', fontWeight: 'bolder', fontSize: 24, cursor: 'pointer'}}
+        onClick={onClose} ><CloseIcon/></span> }
+      {title && <h4 id={`${id}_title`} className="alert-title">{title}</h4>}
+      {description && <span id={`${id}_description`} className="alert-description">{description}</span>}
+      {actionText && <Button
+        variant='outlined'
+        color='error'
+        onClick={onClick}
+        sx={{fontSize: 10, marginTop: 2}}
+      >
+        {actionText}
+      </Button>}
+    </div>
+  );
+};
diff --git a/src/components/SignInButton.tsx b/src/components/SignInButton.tsx
index 8e762a8a8..366bc5e59 100644
--- a/src/components/SignInButton.tsx
+++ b/src/components/SignInButton.tsx
@@ -15,6 +15,8 @@ import {History} from 'history';
 import {OidcUser} from '../libs/auth/oidcBroker';
 import {DuosUser} from '../types/model';
 import {DuosUserResponse} from '../types/responseTypes';
+import {ActionableAlert} from '../components/ActionableAlert';
+import {detectBrowser} from 'browser-version-detection/src/browser-detection';
 
 interface SignInButtonProps {
   history: History;
@@ -39,6 +41,13 @@ export const SignInButton = (props: SignInButtonProps) => {
   const {history} = props;
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
+  const browser = detectBrowser(window.navigator);
+  const browserName = browser.name;
+  const checkBrowser = () => {
+    return (!isEmpty(browserName) && browserName !== 'Chrome' && browserName !== 'Firefox');
+  };
+  const [showUnsupported, setShowUnsupported] = useState<boolean>(checkBrowser());
+
   // Utility function called in the normal success case and in the undocumented 409 case
   // Check for ToS Acceptance - redirect user if not set.
   const checkToSAndRedirect = async (redirectPath: string | null) => {
@@ -205,19 +214,27 @@ export const SignInButton = (props: SignInButtonProps) => {
 
   return (
     <div>
-      {isEmpty(errorDisplay)
-        ? <div>
+      {showUnsupported ?
+        <ActionableAlert
+          id="dialog"
+          type="danger"
+          title={'DUOS may not function correctly in this browser.'}
+          description={'If you are experiencing issues, please try using Google Chrome.'}
+          onClose={() => setShowUnsupported(false)}
+          actionText={'Download Chrome now'}
+          onClick={() => window.open('https://www.google.com/chrome/')}/> :
+        isEmpty(errorDisplay) ? <div>
           {signInElement()}
         </div>
-        : <div className="dialog-alert">
-          <Alert
-            id="dialog"
-            type="danger"
-            title={(errorDisplay as ErrorInfo).title || 'Error'}
-            description={(errorDisplay as ErrorInfo).description || ''}
-            onClose={() => setErrorDisplay({})}
-          />
-        </div>
+          : <div className="dialog-alert">
+            <Alert
+              id="dialog"
+              type="danger"
+              title={(errorDisplay as ErrorInfo).title || 'Error'}
+              description={(errorDisplay as ErrorInfo).description || ''}
+              onClose={() => setErrorDisplay({})}
+            />
+          </div>
       }
     </div>
   );
diff --git a/src/index.tsx b/src/index.tsx
index 44bd6419c..fdd9d1b24 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,7 +7,6 @@ import {Auth} from './libs/auth/auth';
 import {OidcBroker} from './libs/auth/oidcBroker';
 import {unregister} from './registerServiceWorker';
 import {BrowserRouter} from 'react-router-dom';
-import './outdated-browser-message.js';
 
 const load = async () => {
   unregister();
diff --git a/src/outdated-browser-message.js b/src/outdated-browser-message.js
deleted file mode 100644
index 561fe8537..000000000
--- a/src/outdated-browser-message.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import 'outdated-browser-rework/dist/style.css';
-
-import outdatedBrowserRework from 'outdated-browser-rework';
-
-outdatedBrowserRework({
-  browserSupport: {
-    Chrome: 67, // Includes Chrome for mobile devices
-    Edge: false,
-    Safari: false,
-    'Mobile Safari': false,
-    Opera: false,
-    Firefox: 60,
-    Vivaldi: false,
-    IE: false,
-  },
-  isUnknownBrowserOK: true,
-  messages: {
-    en: {
-      outOfDate: 'DUOS may not function correctly in this browser.',
-      update: {
-        web: `If you experience issues, please try ${window.chrome ? 'updating' : 'using'} Google Chrome.`,
-        googlePlay: 'Please install Chrome from Google Play',
-        appStore: 'Please update iOS from the Settings App',
-      },
-      url: 'https://www.google.com/chrome/',
-      callToAction: `${window.chrome ? 'Update' : 'Download'} Chrome now`,
-      close: 'Close',
-    },
-  },
-});
diff --git a/tsconfig.json b/tsconfig.json
index 1575a684d..72037372f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,7 +20,8 @@
     }
   },
   "include": [
-    "src"
+    "src",
+    "types/index.d.ts"
   ],
   "plugins": ["@typescript-eslint", "import"]
 }
diff --git a/types/index.d.ts b/types/index.d.ts
new file mode 100644
index 000000000..27e3ae80a
--- /dev/null
+++ b/types/index.d.ts
@@ -0,0 +1,3 @@
+declare module "browser-version-detection/src/browser-detection" {
+    export function detectBrowser(nav: { userAgent: string }): any
+}

From 136049c90d709bb23b980b425c495142323220e7 Mon Sep 17 00:00:00 2001
From: cinyecai <cinyecai@gmail.com>
Date: Wed, 13 Nov 2024 17:10:42 -0500
Subject: [PATCH 4/4] Update dockerfile

---
 Dockerfile | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Dockerfile b/Dockerfile
index 41ce0894b..4f3282e5b 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -11,6 +11,7 @@ ENV PATH /usr/src/app/node_modules/.bin:$PATH
 
 # install and cache app dependencies
 COPY src /usr/src/app/src
+COPY types /usr/src/app/types
 COPY public /usr/src/app/public
 COPY package.json /usr/src/app/package.json
 COPY package-lock.json /usr/src/app/package-lock.json