|
@@ -9,7 +9,15 @@ import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
|
|
|
import { Button } from "react-bootstrap";
|
|
|
import { Router, Route, Link, Switch, withRouter } from "react-router-dom";
|
|
|
import { createBrowserHistory } from "history";
|
|
|
-import { Navbar, NavDropdown, Container, Nav } from "react-bootstrap";
|
|
|
+import {
|
|
|
+ Navbar,
|
|
|
+ NavDropdown,
|
|
|
+ Container,
|
|
|
+ Nav,
|
|
|
+ Form,
|
|
|
+ Row,
|
|
|
+ Col,
|
|
|
+} from "react-bootstrap";
|
|
|
|
|
|
const jwtDecode = (token) => {
|
|
|
try {
|
|
@@ -442,37 +450,53 @@ const LoginForm = ({ onLogin, onRegister }) => {
|
|
|
const [login, setLogin] = useState("");
|
|
|
const [password, setPassword] = useState("");
|
|
|
return (
|
|
|
- <div className="LoginForm">
|
|
|
- <input
|
|
|
- style={{ borderColor: login.length < 1 ? "red" : "" }}
|
|
|
- type="text"
|
|
|
- onChange={(e) => setLogin(e.target.value)}
|
|
|
- placeholder="Login"
|
|
|
- />
|
|
|
- <input
|
|
|
- style={{ borderColor: password.length < 1 ? "red" : "" }}
|
|
|
- type="password"
|
|
|
- onChange={(e) => setPassword(e.target.value)}
|
|
|
- placeholder="Password"
|
|
|
- />
|
|
|
- {
|
|
|
- <Button
|
|
|
- variant="success"
|
|
|
- disabled={login.length < 1 || password.length < 1 ? true : false}
|
|
|
- onClick={() => onLogin(login, password)}
|
|
|
- >
|
|
|
- Login
|
|
|
- </Button>
|
|
|
- }
|
|
|
- {
|
|
|
- <Button
|
|
|
- variant="secondary"
|
|
|
- disabled={login.length < 1 || password.length < 1 ? true : false}
|
|
|
- onClick={() => onRegister(login, password)}
|
|
|
- >
|
|
|
- Register
|
|
|
- </Button>
|
|
|
- }
|
|
|
+ <div className="LoginForm mx-auto mt-5">
|
|
|
+ <Form>
|
|
|
+ <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
|
|
|
+ <Form.Label column sm={2}>
|
|
|
+ Login
|
|
|
+ </Form.Label>
|
|
|
+ <Col sm={10}>
|
|
|
+ <Form.Control
|
|
|
+ type="text"
|
|
|
+ placeholder="Your login"
|
|
|
+ style={{ borderColor: login.length < 1 ? "red" : "" }}
|
|
|
+ onChange={(e) => setLogin(e.target.value)}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ </Form.Group>
|
|
|
+ <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
|
|
|
+ <Form.Label column sm={2}>
|
|
|
+ Password
|
|
|
+ </Form.Label>
|
|
|
+ <Col sm={10}>
|
|
|
+ <Form.Control
|
|
|
+ type="password"
|
|
|
+ placeholder="Your password"
|
|
|
+ style={{ borderColor: password.length < 1 ? "red" : "" }}
|
|
|
+ onChange={(e) => setPassword(e.target.value)}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ </Form.Group>
|
|
|
+ <Form.Group as={Row} className="mb-3">
|
|
|
+ <Col sm={{ span: 10, offset: 2 }}>
|
|
|
+ <Button
|
|
|
+ variant="success"
|
|
|
+ disabled={login.length < 1 || password.length < 1 ? true : false}
|
|
|
+ onClick={() => onLogin(login, password)}
|
|
|
+ >
|
|
|
+ Login
|
|
|
+ </Button>{" "}
|
|
|
+ <Button
|
|
|
+ variant="secondary"
|
|
|
+ disabled={login.length < 1 || password.length < 1 ? true : false}
|
|
|
+ onClick={() => onRegister(login, password)}
|
|
|
+ >
|
|
|
+ Register
|
|
|
+ </Button>
|
|
|
+ </Col>
|
|
|
+ </Form.Group>
|
|
|
+ </Form>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
@@ -512,10 +536,7 @@ const Good = ({
|
|
|
<p>
|
|
|
<strong>Описание:</strong> {description}
|
|
|
</p>
|
|
|
- <p>
|
|
|
- <strong>ID:</strong> {_id}
|
|
|
- </p>
|
|
|
- <strong>Цена: {price} USD</strong>
|
|
|
+ <strong>Цена: {price} грн.</strong>
|
|
|
<br />
|
|
|
<Button
|
|
|
variant="success"
|
|
@@ -547,7 +568,7 @@ const Authorizations = ({ auth, actionLogOut }) => {
|
|
|
if (auth.payload) {
|
|
|
return (
|
|
|
<div>
|
|
|
- <strong>Привет, {auth.payload.sub.login}</strong>
|
|
|
+ <strong>Добро пожаловать, {auth.payload.sub.login}</strong>
|
|
|
<Button variant="danger" onClick={() => actionLogOut()}>
|
|
|
Выйти
|
|
|
</Button>
|
|
@@ -556,7 +577,7 @@ const Authorizations = ({ auth, actionLogOut }) => {
|
|
|
} else {
|
|
|
return (
|
|
|
<Link className="nav-link" to={`/authorizations`}>
|
|
|
- Войти/Зарегистрироваться
|
|
|
+ Авторизоваться
|
|
|
</Link>
|
|
|
);
|
|
|
}
|