-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f019f29
commit 8ad7647
Showing
9 changed files
with
2,954 additions
and
70 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,38 +1,2 @@ | ||
.App { | ||
text-align: center; | ||
} | ||
|
||
.App-logo { | ||
height: 40vmin; | ||
pointer-events: none; | ||
} | ||
|
||
@media (prefers-reduced-motion: no-preference) { | ||
.App-logo { | ||
animation: App-logo-spin infinite 20s linear; | ||
} | ||
} | ||
|
||
.App-header { | ||
background-color: #282c34; | ||
min-height: 100vh; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
font-size: calc(10px + 2vmin); | ||
color: white; | ||
} | ||
|
||
.App-link { | ||
color: #61dafb; | ||
} | ||
|
||
@keyframes App-logo-spin { | ||
from { | ||
transform: rotate(0deg); | ||
} | ||
to { | ||
transform: rotate(360deg); | ||
} | ||
} | ||
@import './assets/app.css'; | ||
@import 'bootstrap/dist/css/bootstrap.min.css'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,25 +1,35 @@ | ||
import logo from './logo.svg'; | ||
import './App.css'; | ||
import "./App.css"; | ||
import Header from './components/common/Header'; | ||
import { Login as AdminLogin } from "./components/admin/login"; | ||
import { Login as CustomerLogin } from "./components/customer/login"; | ||
import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom'; | ||
|
||
function App() { | ||
return ( | ||
<div className="App"> | ||
<header className="App-header"> | ||
<img src={logo} className="App-logo" alt="logo" /> | ||
<p> | ||
Edit <code>src/App.js</code> and save to reload. | ||
</p> | ||
<a | ||
className="App-link" | ||
href="https://reactjs.org" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
Learn React | ||
</a> | ||
</header> | ||
</div> | ||
<Router> | ||
<div className="container"> | ||
<div className="box-container"> | ||
<Header /> | ||
|
||
<Switch> | ||
<Route path="/" exact component={Home} /> | ||
<Route path="/admin/login" component={AdminLogin} /> | ||
<Route path="/customer/login" component={CustomerLogin} /> | ||
</Switch> | ||
</div> | ||
</div> | ||
</Router> | ||
); | ||
} | ||
|
||
const Home = () => ( | ||
<div className="page-content home-page"> | ||
<p>Please login here</p> | ||
<ul className="login-links"> | ||
<Link to="/customer/login">As a customer</Link> | ||
<Link to="/admin/login">As a admin</Link> | ||
</ul> | ||
</div> | ||
) | ||
|
||
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
.box-container { | ||
display: grid; | ||
height: 100vh; | ||
align-items: center; | ||
justify-content: center; | ||
grid-template-rows: 10vh 90vh; | ||
} | ||
|
||
.box-container > .page-content { | ||
padding: 50px; | ||
min-width: 500px; | ||
margin-top: 20px; | ||
box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px; | ||
} | ||
|
||
.home-page .login-links { | ||
padding: 0; | ||
display: grid; | ||
grid-template-columns: auto auto; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import { useEffect, useState } from "react"; | ||
import Form from "react-bootstrap/Form"; | ||
import { Button } from "react-bootstrap"; | ||
|
||
export function Login() { | ||
const [validated, setValidated] = useState(false); | ||
|
||
useEffect(() => { | ||
}, [validated]); | ||
|
||
const handleSubmit = event => { | ||
event.preventDefault(); | ||
event.stopPropagation(); | ||
|
||
const form = event.currentTarget; | ||
|
||
if (form.checkValidity()) { | ||
setValidated(true); | ||
|
||
loginAdmin(event.currentTarget); | ||
} | ||
} | ||
|
||
const loginAdmin = () => { | ||
console.log(validated); | ||
} | ||
|
||
return ( | ||
<Form noValidate className="page-content" validated={validated} onSubmit={handleSubmit}> | ||
<Form.Group className="mb-3" controlId="formBasicEmail"> | ||
<Form.Label>Email address</Form.Label> | ||
<Form.Control type="email" placeholder="Enter email" defaultValue="admin@example.com" required /> | ||
<Form.Control.Feedback type="invalid"> | ||
Please enter email address. | ||
</Form.Control.Feedback> | ||
</Form.Group> | ||
|
||
<Form.Group className="mb-3" controlId="formBasicPassword"> | ||
<Form.Label>Password</Form.Label> | ||
<Form.Control type="password" placeholder="Password" defaultValue="admin123" required /> | ||
<Form.Control.Feedback type="invalid"> | ||
Please enter password. | ||
</Form.Control.Feedback> | ||
</Form.Group> | ||
|
||
<Button variant="primary" type="submit"> | ||
Submit | ||
</Button> | ||
</Form> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { Link } from "react-router-dom"; | ||
|
||
export default function Header() { | ||
return ( | ||
<div> | ||
<h1>Welcome to <Link to="/">e-commerce</Link> world!</h1> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import Form from "react-bootstrap/Form"; | ||
import { Button } from "react-bootstrap"; | ||
import { useEffect, useState } from "react"; | ||
|
||
export function Login() { | ||
const [validated, setValidated] = useState(false); | ||
|
||
useEffect(() => { | ||
}, [validated]); | ||
|
||
const handleSubmit = event => { | ||
event.preventDefault(); | ||
event.stopPropagation(); | ||
|
||
const form = event.currentTarget; | ||
|
||
if (form.checkValidity()) { | ||
setValidated(true); | ||
|
||
loginCustomer(form); | ||
} | ||
} | ||
|
||
const loginCustomer = form => { | ||
console.log(validated); | ||
} | ||
|
||
return ( | ||
<Form noValidate className="page-content" validated={validated} onSubmit={handleSubmit}> | ||
<Form.Group className="mb-3" controlId="formBasicEmail"> | ||
<Form.Label>Email address</Form.Label> | ||
<Form.Control type="email" placeholder="Enter email" defaultValue="admin@example.com" required /> | ||
<Form.Control.Feedback type="invalid"> | ||
Please enter email address. | ||
</Form.Control.Feedback> | ||
</Form.Group> | ||
|
||
<Form.Group className="mb-3" controlId="formBasicPassword"> | ||
<Form.Label>Password</Form.Label> | ||
<Form.Control type="password" placeholder="Password" defaultValue="admin123" required /> | ||
<Form.Control.Feedback type="invalid"> | ||
Please enter password. | ||
</Form.Control.Feedback> | ||
</Form.Group> | ||
|
||
<Button variant="primary" type="submit"> | ||
Submit | ||
</Button> | ||
</Form> | ||
); | ||
} |
This file was deleted.
Oops, something went wrong.