Add Login Page

This commit is contained in:
Ceda EI 2021-04-09 19:15:30 +05:30
parent 3959f39de5
commit 88ee030db9
2 changed files with 80 additions and 1 deletions

View File

@ -7,6 +7,7 @@ import {
} from "react-router-dom"; } from "react-router-dom";
import Home from "./pages/Home"; import Home from "./pages/Home";
import Login from "./pages/Login";
function App() { function App() {
return ( return (
@ -16,7 +17,7 @@ function App() {
<div>Main Page</div> <div>Main Page</div>
</Route> </Route>
<Route path="/login"> <Route path="/login">
<div>Login Page</div> <Login />
</Route> </Route>
<Route path="/home"> <Route path="/home">
<Home /> <Home />

78
src/pages/Login.js Normal file
View File

@ -0,0 +1,78 @@
import React, { useState } from "react";
import {
Input,
InputLabel,
Button,
FormControl,
Paper,
Typography,
Avatar,
} from "@material-ui/core";
import { LockOutlined } from "@material-ui/icons";
import NavBar from "./shared/NavBar";
import {useHistory} from "react-router-dom";
function Login() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const history = useHistory();
function login(e) {
setUsername("");
setPassword("");
history.push("/home");
e.preventDefault();
}
return (
<>
<NavBar>
<div></div>
</NavBar>
<Paper style={{maxWidth: 350, margin: "auto", marginTop: 100, padding: 20}}>
<Avatar style={{margin: "auto"}}>
<LockOutlined />
</Avatar>
<Typography component="h1" variant="h5" style={{margin: "auto", textAlign: "center"}}>
Sign In
</Typography>
<form
onSubmit={login}>
<FormControl margin="normal" required fullWidth>
<InputLabel
htmlFor="username"
>Username</InputLabel>
<Input
type="text"
id="username"
value={username}
onChange={evt => setUsername(evt.target.value)}
/>
</FormControl>
<FormControl margin="normal" required fullWidth>
<InputLabel
htmlFor="password"
>Password</InputLabel>
<Input
type="password"
id="password"
value={password}
onChange={evt => setPassword(evt.target.value)}
/>
</FormControl>
<Button
type="submit"
variant="contained"
color="primary"
fullWidth
style={{
marginTop: 40
}}
>Submit</Button>
</form>
</Paper>
</>
);
}
export default Login;