diff options
| -rw-r--r-- | src/Login.css | 40 | ||||
| -rw-r--r-- | src/Login.js | 111 |
2 files changed, 96 insertions, 55 deletions
diff --git a/src/Login.css b/src/Login.css index e69de29..895a48f 100644 --- a/src/Login.css +++ b/src/Login.css @@ -0,0 +1,40 @@ +.login{ + width: 30%; + height: 30%; + position: fixed; + z-index: 1; + top: 35%; + left: 35%; + background-color: #333333; + border: #BB86fc; + border-radius: 5px; + overflow: auto; +} + +.loginButton{ + background-color: #BB86fc; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + border-radius: 5px; +} + +.loginText{ + color: #BB86fc; + font-size: 20px; + font-weight: bold; + text-align: center; +} + +.fieldText{ + color: #BB86fc; + font-size: 20px; + font-weight: bold; + text-align: center; +}
\ No newline at end of file diff --git a/src/Login.js b/src/Login.js index 51a306f..025a54d 100644 --- a/src/Login.js +++ b/src/Login.js @@ -1,62 +1,63 @@ //a simple login page, with a username and password field -import React from 'react'; -import { InputGroup } from 'reactstrap'; +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'; +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); - +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'> - <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> + <div className="login"> + <h1 class="loginText">Login</h1> + <form class="form"> + <label class="fieldText">Username </label> + <input type="text" /> + <br></br> + <label class="fieldText">Password </label> + <input type="password" /> + <br></br> + <a href="http://localhost:3000/terminal" class="loginButton">Login</a> + {/* <button onClick={() => this.loginButton()}>Login</button> */} + </form> + </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; |