auto detect browser

Author: Sorosliu1029

package.json

@@ -61,7 +61,8 @@
         "@jupyterlab/apputils": "^4.5.3",
         "@jupyterlab/coreutils": "^6.0.0",
         "@jupyterlab/services": "^7.0.0",
-        "@jupyterlab/settingregistry": "^4.0.0"
+        "@jupyterlab/settingregistry": "^4.0.0",
+        "bowser": "^2.11.0"
     },
     "devDependencies": {
         "@jupyterlab/builder": "^4.0.0",

src/components/BrowserCookie.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { getCookie } from '../services/cookie';
+import Bowser from 'bowser';
 
-const BrowserCookie = () => {
+const BrowserCookie = ({ onSuccess }: { onSuccess: () => void }) => {
   const browsers = [
     'Chrome',
     'Firefox',
@@ -16,10 +17,35 @@ const BrowserCookie = () => {
     'Opera GX'
   ];
 
+  const normalizeBrowserName = (name: string) =>
+    name.toLowerCase().replace(/\s+/g, '_');
+
   const [browser, setBrowser] = useState('');
   const [checked, setChecked] = useState(false);
 
+  // set browser value by detecting current browser
+  useEffect(() => {
+    const browserName = Bowser.getParser(
+      window.navigator.userAgent
+    ).getBrowserName(true);
+    if (browserName) {
+      const firstMatch = browsers.find(b =>
+        new RegExp(b, 'i').test(browserName)
+      );
+      if (firstMatch) {
+        setBrowser(normalizeBrowserName(firstMatch));
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (checked) {
+      onSuccess();
+    }
+  }, [checked, onSuccess]);
+
   const loadCookies = () => {
+    // TODO: change alert
     if (!browser) {
       alert('Please select a browser.');
       return;
@@ -55,7 +81,7 @@ const BrowserCookie = () => {
         {browsers.map(browser => (
           <option
             key={browser.toLowerCase()}
-            value={browser.toLowerCase().replace(/\s+/g, '_')}
+            value={normalizeBrowserName(browser)}
           >
             {browser}
           </option>

src/components/LandingPage.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import BrowserCookie from './BrowserCookie';
+
+const LandingPage = ({ onLoginSuccess }: { onLoginSuccess: () => void }) => {
+  const options: JSX.Element[] = [<BrowserCookie onSuccess={onLoginSuccess} />];
+  return (
+    <div>
+      <p>Welcome to JupyterLab LeetCode Widget.</p>
+      <p>
+        For this plugin to work, you may choose one of these {options.length}{' '}
+        methods to allow this plugin to log into LeetCode.
+      </p>
+      {...options}
+    </div>
+  );
+};
+
+export default LandingPage;

src/widget.tsx

@@ -1,18 +1,13 @@
 import { ReactWidget } from '@jupyterlab/ui-components';
-import React from 'react';
-import BrowserCookie from './components/BrowserCookie';
+import React, { StrictMode, useState } from 'react';
+import LandingPage from './components/LandingPage';
 
 const LeetCodeComponent = (): JSX.Element => {
-  const options: JSX.Element[] = [<BrowserCookie />];
-  return (
-    <div>
-      <p>Welcome to JupyterLab LeetCode Widget.</p>
-      <p>
-        For this plugin to work, you may choose one of these {options.length}{' '}
-        methods to allow this plugin to log into LeetCode.
-      </p>
-      {...options}
-    </div>
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  return isLoggedIn ? (
+    <div></div>
+  ) : (
+    <LandingPage onLoginSuccess={() => setIsLoggedIn(true)} />
   );
 };
 
@@ -24,7 +19,11 @@ class LeetCodeWidget extends ReactWidget {
   }
 
   protected render(): JSX.Element {
-    return <LeetCodeComponent />;
+    return (
+      <StrictMode>
+        <LeetCodeComponent />
+      </StrictMode>
+    );
   }
 }
 

yarn.lock

@@ -254,12 +254,12 @@ __metadata:
   linkType: hard
 
 "@babel/helpers@npm:^7.27.4":
-  version: 7.27.4
-  resolution: "@babel/helpers@npm:7.27.4"
+  version: 7.27.6
+  resolution: "@babel/helpers@npm:7.27.6"
   dependencies:
     "@babel/template": ^7.27.2
-    "@babel/types": ^7.27.3
-  checksum: a50ce7ff92d9a7235f68e72274c1c3aaa57e53439d8656fce5119e7d75fe383377634b2ebddf2e8b795af2b010a32808fe34834ba7e2f7fc49bf031a239c83a7
+    "@babel/types": ^7.27.6
+  checksum: 12f96a5800ff677481dbc0a022c617303e945210cac4821ad5377a31201ffd8d9c4d00f039ed1487cf2a3d15868fb2d6cabecdb1aba334bd40a846f1938053a2
   languageName: node
   linkType: hard
 
@@ -1257,13 +1257,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
-  version: 7.27.3
-  resolution: "@babel/types@npm:7.27.3"
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.27.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
+  version: 7.27.6
+  resolution: "@babel/types@npm:7.27.6"
   dependencies:
     "@babel/helper-string-parser": ^7.27.1
     "@babel/helper-validator-identifier": ^7.27.1
-  checksum: f0d43c0231f3ebc118480e149292dcd92ea128e2650285ced99ff2e5610db2171305f59aa07406ba0cb36af8e4331a53a69576d6b0c3f3176144dd3ad514b9ae
+  checksum: c3bd0984d892b0edec38fd12cf63f620bb52fba8187ec7cbe2d1aff5bee5e185e0fd86a3fb90b4d8f18b072113d07901476d0e39f58d5c988db14b231a6ea735
   languageName: node
   linkType: hard
 
@@ -3051,8 +3051,8 @@ __metadata:
   linkType: hard
 
 "@rjsf/core@npm:^5.13.4":
-  version: 5.24.10
-  resolution: "@rjsf/core@npm:5.24.10"
+  version: 5.24.11
+  resolution: "@rjsf/core@npm:5.24.11"
   dependencies:
     lodash: ^4.17.21
     lodash-es: ^4.17.21
@@ -3062,13 +3062,13 @@ __metadata:
   peerDependencies:
     "@rjsf/utils": ^5.24.x
     react: ^16.14.0 || >=17
-  checksum: 90316d9dd90ae58805fc4f6fa2bb14dfd9a361abebb75bd3b1b7ed55b554e9a7d5145fc09ee5906bc91d362fc8f8c24619d4d4c432bae782da5cebb0a5b9cddf
+  checksum: 7bceac697e7a289fb88c6e88e78a6fc50628ebb3064d63fa7e3244a1189c6a42c582a779c52b828e8b60fdc9ff81b5468c5e60a28392061fa2eab022e6a3c2d4
   languageName: node
   linkType: hard
 
 "@rjsf/utils@npm:^5.13.4":
-  version: 5.24.10
-  resolution: "@rjsf/utils@npm:5.24.10"
+  version: 5.24.11
+  resolution: "@rjsf/utils@npm:5.24.11"
   dependencies:
     json-schema-merge-allof: ^0.8.1
     jsonpointer: ^5.0.1
@@ -3077,7 +3077,7 @@ __metadata:
     react-is: ^18.2.0
   peerDependencies:
     react: ^16.14.0 || >=17
-  checksum: 64d9bcfea100c4b89128c20473982d316e960c01f9887fb3613bc0ecdaa9fdf8804f96ff99b0b415c2cbc7b4f7d5de941328a1a1a5d53148489d395a1f07a78e
+  checksum: 81e716c5e34b5f194a384c75059aff2cb7c7f639f7998179c7648c280bf9c76b6e97ef22e3a99d4afaf8228f48acc499e39eca8574872ed75a97337c0e6072f6
   languageName: node
   linkType: hard
 
@@ -4071,6 +4071,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bowser@npm:^2.11.0":
+  version: 2.11.0
+  resolution: "bowser@npm:2.11.0"
+  checksum: 29c3f01f22e703fa6644fc3b684307442df4240b6e10f6cfe1b61c6ca5721073189ca97cdeedb376081148c8518e33b1d818a57f781d70b0b70e1f31fb48814f
+  languageName: node
+  linkType: hard
+
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -4202,9 +4209,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001718":
-  version: 1.0.30001720
-  resolution: "caniuse-lite@npm:1.0.30001720"
-  checksum: 97b9f9de842595ff9674001abb9c5bc093c03bb985d481ed97617ea48fc248bfb2cc1f1afe19da2bf20016f28793e495fa2f339e22080d8da3c9714fb7950926
+  version: 1.0.30001721
+  resolution: "caniuse-lite@npm:1.0.30001721"
+  checksum: 1f1e1f5f070f97ee83a08601709413300957be624790a8f7b3aebd5746d648e8d50be4ef9572a50281198b2f7acc63fdfc1a0bc04c23bbffba0ab4b3c69d4b76
   languageName: node
   linkType: hard
 
@@ -4780,9 +4787,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.5.160":
-  version: 1.5.162
-  resolution: "electron-to-chromium@npm:1.5.162"
-  checksum: 777bd278da53730a280166237a9458d6e00bb5c55014146d44fceb74d75fab2149b5484be6f857e3943ba0f6162618c1a028c362950730eeced6921e5c158f6a
+  version: 1.5.165
+  resolution: "electron-to-chromium@npm:1.5.165"
+  checksum: 49725e9c02fcc2b1a89aa2624603d151b1da1ac7a9c017d9ab91f894f463466fea210785b46dea184bbaf3871893b2dac8e062fe05b94348d8e2853e91737e63
   languageName: node
   linkType: hard
 
@@ -6823,6 +6830,7 @@ __metadata:
     "@types/react-addons-linked-state-mixin": ^0.14.22
     "@typescript-eslint/eslint-plugin": ^6.1.0
     "@typescript-eslint/parser": ^6.1.0
+    bowser: ^2.11.0
     css-loader: ^6.7.1
     eslint: ^8.36.0
     eslint-config-prettier: ^8.8.0