Add routing to dashboard and create a basic Auth page

package.json

@@ -31,6 +31,7 @@
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.11.0",
+    "react-router-dom": "^6.3.0",
     "resolve": "^1.20.0",
     "resolve-url-loader": "^4.0.0",
     "sass-loader": "^12.3.0",

src/components/pages/Auth/Auth.tsx

@@ -0,0 +1,50 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+*
+* This software is licensed under the Apache License, Version 2.0 (the
+* "License") as published by the Apache Software Foundation.
+*
+* You may not use this file except in compliance with the License. You may
+* obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations
+* under the License.
+*/
+
+import React, { useCallback, useEffect, useState } from "react";
+import { Navigate } from "react-router-dom";
+
+import { clearValueInStorage, setValueToStorage } from "../../../storageService";
+import { apiKeyLocalStorageKey } from "../../../constants";
+
+const Auth: React.FC = () => {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  const promptForApiKey = useCallback(() => {
+    clearValueInStorage(apiKeyLocalStorageKey);
+
+    const apiKey = prompt("Please enter your API key");
+
+    if (apiKey !== null && apiKey.length !== 0) {
+      // TODO: verify the api key from backend before saving to localstorage
+      setValueToStorage(apiKeyLocalStorageKey, apiKey);
+      setIsAuthenticated(true);
+    } else {
+      promptForApiKey();
+    }
+  }, []);
+
+  useEffect(() => {
+    promptForApiKey();
+  }, [promptForApiKey]);
+
+  if (isAuthenticated) {
+    return <Navigate to="/home" />
+  }
+
+  return <></>
+};
+
+export default Auth;

src/components/pages/Home/Home.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Home = () => {
+  return (
+    <h1>Dashboard home</h1>
+  );
+};
+
+export default Home;

src/components/utils/ProtectedComponent.tsx

@@ -0,0 +1,43 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+*
+* This software is licensed under the Apache License, Version 2.0 (the
+* "License") as published by the Apache Software Foundation.
+*
+* You may not use this file except in compliance with the License. You may
+* obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations
+* under the License.
+*/
+
+import React, { useEffect, useState } from "react";
+
+import { Navigate } from "react-router-dom";
+
+import { apiKeyLocalStorageKey } from "../../constants";
+import { getValueFromStorage } from "../../storageService";
+
+type PropTypes = React.PropsWithChildren;
+
+const ProtectedComponent: React.FC<PropTypes> = (props) => {
+  const [isAuthenticated, setIsAuthenticated] = useState(true);
+
+  useEffect(() => {
+    const apiKeyInStorage = getValueFromStorage(apiKeyLocalStorageKey);
+
+    if (apiKeyInStorage === null || apiKeyInStorage.length === 0) {
+      setIsAuthenticated(false);
+    }
+  }, []);
+
+  if (!isAuthenticated) {
+    return <Navigate to="/" />
+  }
+
+  return <>{props.children}</>;
+}
+
+export default ProtectedComponent;

src/constants.ts

@@ -0,0 +1,16 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+*
+* This software is licensed under the Apache License, Version 2.0 (the
+* "License") as published by the Apache Software Foundation.
+*
+* You may not use this file except in compliance with the License. You may
+* obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations
+* under the License.
+*/
+
+export const apiKeyLocalStorageKey = "dashboard-api-key";

src/index.tsx

@@ -1,15 +1,34 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+
+import Auth from "./components/pages/Auth/Auth";
+import Home from './components/pages/Home/Home';
+import { getDashboardAppPath } from './utils';
+import ProtectedComponent from './components/utils/ProtectedComponent';
+
+import './index.css';
+
+const dashboardAppPath = getDashboardAppPath();
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
+
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter basename={dashboardAppPath}>
+      <Routes>
+        <Route path="/" element={<Auth />} />
+        <Route path="/home" element={
+          <ProtectedComponent>
+            <Home />
+          </ProtectedComponent>
+        } />
+        <Route path="*" element={<Navigate to="/home" />} />
+      </Routes>
+    </BrowserRouter>
   </React.StrictMode>
 );
 

src/storageService/index.ts

@@ -0,0 +1,28 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+*
+* This software is licensed under the Apache License, Version 2.0 (the
+* "License") as published by the Apache Software Foundation.
+*
+* You may not use this file except in compliance with the License. You may
+* obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations
+* under the License.
+*/
+
+export const getValueFromStorage = (key: string): string | null => {
+  const value = localStorage.getItem(key);
+  return value;
+}
+
+export const setValueToStorage = (key: string, value: string): string => {
+  localStorage.setItem(key, value);
+  return value;
+}
+
+export const clearValueInStorage = (key: string) => {
+  localStorage.removeItem(key);
+}

src/utils.ts

@@ -19,4 +19,8 @@ export function getStaticBasePath(): string {
 
 export function getImageUrl(imageName: string): string {
     return getStaticBasePath() + "/media/" + imageName;
-}
+}
+
+export function getDashboardAppPath(): string {
+    return (window as any).dashboardAppPath;
+}