diff options
| -rw-r--r-- | package-lock.json | 59 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/App.js | 1 | ||||
| -rw-r--r-- | src/Login.css | 0 | ||||
| -rw-r--r-- | src/Login.js | 62 | ||||
| -rw-r--r-- | src/Router.js | 21 | ||||
| -rw-r--r-- | src/index.js | 7 |
7 files changed, 150 insertions, 2 deletions
diff --git a/package-lock.json b/package-lock.json index dcfad24..372538f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,8 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-resize-observer": "^1.1.1", + "react-router": "^6.3.0", + "react-router-dom": "^6.3.0", "react-scripts": "5.0.0", "react-toggle-slider": "^0.4.0", "reactstrap": "^9.0.1", @@ -8132,6 +8134,14 @@ "he": "bin/he" } }, + "node_modules/history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -13468,6 +13478,30 @@ "react": ">=0.14" } }, + "node_modules/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==", + "dependencies": { + "history": "^5.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/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==", + "dependencies": { + "history": "^5.2.0", + "react-router": "6.3.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz", @@ -22207,6 +22241,14 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "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" + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -25930,6 +25972,23 @@ "integrity": "sha512-3R+90Hou90Mr3wJYc+unsySC8Pn91V4nmjO32NKvUvjphRUbq9HisyLg7bDyGBE7xlMrrM6Fax7iNQaFdc/FYA==", "requires": {} }, + "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": "5.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz", diff --git a/package.json b/package.json index fee99b6..cde9203 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,8 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-resize-observer": "^1.1.1", + "react-router": "^6.3.0", + "react-router-dom": "^6.3.0", "react-scripts": "5.0.0", "react-toggle-slider": "^0.4.0", "reactstrap": "^9.0.1", @@ -155,6 +155,7 @@ class Sidebar extends React.Component { logOut() { // location.replace("index.html"); + window.location.replace("/"); console.log("log out"); } diff --git a/src/Login.css b/src/Login.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/Login.css diff --git a/src/Login.js b/src/Login.js new file mode 100644 index 0000000..51a306f --- /dev/null +++ b/src/Login.js @@ -0,0 +1,62 @@ +//a simple login page, with a username and password field +import React from 'react'; +import { InputGroup } from 'reactstrap'; +// import ResizeObserver from "react-resize-observer"; +import { ToggleSlider } from 'react-toggle-slider'; +import { ThemeContext, themes } from './theme'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons'; +import './Login.css'; + +function Login(){ + const [darkMode, setDarkMode] = React.useState(true); + + return ( + <div className='Login'> + <header className='Login-header'> + <InputGroup> + <ThemeContext.Consumer> + {({ changeTheme }) => ( + <div className='toggle-slider'> + <FontAwesomeIcon icon={faSun} size='xl' /> + <ToggleSlider + onToggle={() => { + setDarkMode(!darkMode); + changeTheme(darkMode ? themes.light : themes.dark); + }} + /> + <FontAwesomeIcon icon={faMoon} size='xl' /> + </div> + )} + </ThemeContext.Consumer> + </InputGroup> + <LoginComponent /> + </header> + </div> + ); + +} +class LoginComponent extends React.Component{ + // render a login page, with a username and password field, pressing the login button will log in the user and redirect to the home page + loginButton(){ + console.log('login button pressed'); + // document.location.href = 'http://localhost:3000/terminal' + window.location.replace('http://localhost:3000/terminal'); + } + render(){ + return( + <div className='login'> + <h1>Login</h1> + <form> + <label>Username</label> + <input type='text'/> + <label>Password</label> + <input type='password'/> + <a href='http://localhost:3000/terminal'>Login</a> + {/* <button onClick={() => this.loginButton()}>Login</button> */} + </form> + </div> + ); + } +} +export default Login; diff --git a/src/Router.js b/src/Router.js new file mode 100644 index 0000000..110021a --- /dev/null +++ b/src/Router.js @@ -0,0 +1,21 @@ +import React from "react"; +import App from "./App"; +import Login from "./Login"; + +import { + Routes, + Route, + // Link, + // useNavigate, + // useLocation, + // Navigate, + } from 'react-router-dom'; + + export default function RouterApp() { + return ( + <Routes> + <Route path="/" element={<Login />} /> + <Route path="/terminal" element={<App />} /> + </Routes> + ); + } diff --git a/src/index.js b/src/index.js index 8026e8e..d36c893 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,17 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import App from './App'; +import RouterApp from './Router'; import reportWebVitals from './reportWebVitals'; import ThemeContextWrapper from './theme'; +import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <ThemeContextWrapper> <React.StrictMode> - <App /> + <BrowserRouter> + <RouterApp /> + </BrowserRouter> </React.StrictMode> </ThemeContextWrapper>, document.getElementById('root') |