add login panel

.env

@@ -0,0 +1 @@
+REACT_APP_SERVER_URL = 'http://localhost:5000/';

package-lock.json

@@ -3831,6 +3831,32 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.1.1.tgz",
       "integrity": "sha512-5Kgy8Cz6LPC9DJcNb3yjAXTu3XihQgEdnIg50c//zOC/MyLP0Clg+Y8Sh9ZjjnvBrDZU4DgXS9C3T9r4/scGZQ=="
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "follow-redirects": {
+          "version": "1.15.1",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+          "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
+        },
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -6020,9 +6046,9 @@
       }
     },
     "dotenv": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
-      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.1.tgz",
+      "integrity": "sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ=="
     },
     "dotenv-expand": {
       "version": "5.1.0",
@@ -8083,6 +8109,14 @@
       "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
       "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -13820,6 +13854,23 @@
         "tslib": "^1.0.0"
       }
     },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
     "react-scripts": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.1.tgz",
@@ -13884,6 +13935,13 @@
         "webpack-dev-server": "3.11.0",
         "webpack-manifest-plugin": "2.2.0",
         "workbox-webpack-plugin": "5.1.4"
+      },
+      "dependencies": {
+        "dotenv": {
+          "version": "8.2.0",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+          "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
+        }
       }
     },
     "react-select-search": {

package.json

@@ -10,20 +10,23 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.0",
+    "axios": "^0.27.2",
     "csv-parse": "^4.14.2",
+    "dotenv": "^16.0.1",
     "framer-motion": "^3.2.1",
     "node-sass": "^4.14.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-file-reader": "^1.1.4",
     "react-icons": "^4.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "4.0.1",
     "react-select-search": "^2.2.4",
     "react-table": "^7.6.3",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "set PORT=3000 && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/App.jsx

@@ -5,6 +5,7 @@ import Main from './components/Main';
 import { ChakraProvider, CSSReset, extendTheme } from '@chakra-ui/react';
 import theme from './theme';
 import { LoadingProvider } from './contexts/LoadingContext';
+import Login from './components/Login';
 
 const themes = extendTheme({ ...theme });
 
@@ -14,7 +15,9 @@ function App() {
       <CSSReset />
       <LoadingProvider>
         <div id="app" className="App">
-          <Main></Main>
+          <Login>
+            <Main></Main>
+          </Login>
         </div>
       </LoadingProvider>
     </ChakraProvider>

src/components/Login/index.jsx

@@ -0,0 +1,113 @@
+import { ArrowForwardIcon } from '@chakra-ui/icons';
+import { InputGroup, Input, InputRightElement, Button, Flex } from '@chakra-ui/react';
+import Axios from 'axios';
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter, Link, Navigate, Outlet, Route, Routes } from 'react-router-dom';
+import * as dotenv from 'dotenv'; // see https://github.com/motdotla/dotenv#how-do-i-use-dotenv-with-import
+dotenv.config();
+
+function Login({ children }) {
+  const [user, setUser] = useState(null);
+
+  function handleLogin(e) {
+    console.log(e);
+    setUser({ auth: e });
+    if (e) return <Navigate to="/tree" replace={true} />;
+  }
+
+  return (
+    <div>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<LoginForm login={handleLogin} />}></Route>
+          <Route path="/login" element={<LoginForm login={handleLogin} />}></Route>
+          <Route path="/tree" element={<ProtectedRoute user={user}>{children}</ProtectedRoute>} />
+        </Routes>
+      </BrowserRouter>
+    </div>
+  );
+}
+
+export default Login;
+
+function LoginForm({ login }) {
+  const [pswd, setPswd] = useState('');
+  const [ready, setready] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  function handlePswd(e) {
+    console.log(e);
+    setPswd(e);
+  }
+
+  function getLogin() {
+    console.log(process.env.REACT_APP_SERVER_URL);
+    setIsLoading(true);
+    Axios.post('http://localhost:5000/gate', {
+      password: pswd,
+    })
+      .then(response => {
+        console.log(response);
+        login(response.data.auth);
+        setready(response.data.auth);
+        setIsLoading(false);
+      })
+      .finally(() => setIsLoading(false));
+  }
+
+  return (
+    <div>
+      <Flex alignItems={'center'} justifyContent={'center'} marginTop={100}>
+        <PasswordInput handleChange={handlePswd} />
+        <Button
+          onClick={getLogin}
+          isLoading={isLoading}
+          rightIcon={<ArrowForwardIcon />}
+          colorScheme="teal"
+          variant="outline"
+          marginRight={15}
+        >
+          Log in
+        </Button>
+        {ready ? <Link to="/tree"> Click here to go to the tool </Link> : <div></div>}
+      </Flex>
+    </div>
+  );
+}
+
+function PasswordInput({ handleChange }) {
+  const [show, setShow] = React.useState(false);
+  const [p, setP] = React.useState('');
+  const handleClick = () => setShow(!show);
+
+  function changeText(e) {
+    setP(e.target.value);
+    handleChange(e.target.value);
+  }
+
+  return (
+    <InputGroup size="md" width={400}>
+      <Input
+        onChange={changeText}
+        pr="4.5rem"
+        type={show ? 'text' : 'password'}
+        placeholder="Enter password"
+        value={p}
+      />
+      <InputRightElement width="4.5rem">
+        <Button h="1.75rem" size="sm" onClick={handleClick}>
+          {show ? 'Hide' : 'Show'}
+        </Button>
+      </InputRightElement>
+    </InputGroup>
+  );
+}
+
+const ProtectedRoute = ({ user, redirectPath = '/login', children }) => {
+  console.log('USER', user);
+  if (!user) {
+    return <Navigate to={redirectPath} replace />;
+  }
+
+  return children ? children : <Outlet />;
+};