diff --git a/.env b/.env new file mode 100644 index 0000000..599f1d5 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +REACT_APP_SERVER_URL = 'http://localhost:5000/'; diff --git a/package-lock.json b/package-lock.json index 00a36f9..881f18f 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index f5555ac..755c8f6 100644 --- a/package.json +++ b/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" diff --git a/src/App.jsx b/src/App.jsx index 6b7653d..39f32cb 100644 --- a/src/App.jsx +++ b/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() {
-
+ +
+
diff --git a/src/components/Login/index.jsx b/src/components/Login/index.jsx new file mode 100644 index 0000000..de0e3f6 --- /dev/null +++ b/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 ; + } + + return ( +
+ + + }> + }> + {children}} /> + + +
+ ); +} + +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 ( +
+ + + + {ready ? Click here to go to the tool :
} + +
+ ); +} + +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 ( + + + + + + + ); +} + +const ProtectedRoute = ({ user, redirectPath = '/login', children }) => { + console.log('USER', user); + if (!user) { + return ; + } + + return children ? children : ; +};