@@ -174,63 +170,72 @@ export default function Orders() {
@@ -239,6 +244,6 @@ export default function Orders() {
)
return (
-
+
)
}
diff --git a/front/src/pages/Registration.jsx b/front/src/pages/Registration.jsx
index 543c1f3..60628dc 100644
--- a/front/src/pages/Registration.jsx
+++ b/front/src/pages/Registration.jsx
@@ -1,36 +1,23 @@
-import { React, useState, useEffect } from 'react'
+import {useState, useEffect} from 'react'
import ContentBlock from './components/ContentBlock'
-import Service from './services/Service';
-import ModalEdit from './components/ModalEdit';
-import MyButton from './components/MyButton';
-import UserItem from './components/UserItem';
+import {useNavigate} from "react-router-dom";
export default function Registration() {
+ const hostURL = "http://localhost:8080";
+ const navigate = useNavigate();
const [login, setLogin] = useState('');
const [password, setPassword] = useState('');
- const [loginEdit, setLoginEdit] = useState('');
- const [passwordEdit, setPasswordEdit] = useState('');
- const [users, setUsers] = useState([]);
+ const [passwordConfirm, setPasswordConfirm] = useState('');
const [error, setError] = useState(false);
- const [modalTable, setModalTable] = useState(false);
- // хук для запоминания индекса элемента, вызвавшего модальное окно
- const [currEditItem, setCurrEditItem] = useState(0);
useEffect(() => {
setError(false)
- getAll()
}, [])
- async function getAll() {
- const requestUrl = "http://localhost:8080/customer"
- const response = await fetch(requestUrl)
- const temp = await response.json()
- setUsers(temp)
- }
-
function handleSubmit(e) {
e.preventDefault();
- if (login.length <= 0 || password.length <= 0) {
+ if (login.length <= 0 || password.length <= 0 ||
+ window.location.pathname === '/registration' && passwordConfirm.length <= 0) {
setError(true)
throw 'Form not submit'
}
@@ -39,131 +26,93 @@ export default function Registration() {
setError(false)
setLogin('')
setPassword('')
+ setPasswordConfirm('')
}
// принимаем событие от кнопки "добавить"
const handleSubmitCreate = async (e) => {
e.preventDefault()
- console.info('Try to add item');
+ console.info('Try to signup/login');
+ let requestURL = "/jwt/login"
+ let requestData = JSON.stringify({login: login, password: password})
+ if (window.location.pathname === '/registration') {
+ requestURL = "/signup"
+ requestData = JSON.stringify({login: login, password: password, passwordConfirm: passwordConfirm})
+ }
const requestParams = {
method: "POST",
headers: {
- "Content-Type": "application/json"
- }
+ "Content-Type": "application/json",
+ },
+ body: requestData,
};
- await fetch(`http://localhost:8080/customer?login=${login}&password=${password}`, requestParams)
- .then(() => {
- getAll()
- })
+ const response = await fetch(hostURL + requestURL, requestParams);
+ const result = await response.text();
+ if (response.status === 200 && window.location.pathname === '/entry') {
+ localStorage.setItem("token", result);
+ localStorage.setItem("user", login);
+ getRole(result);
+ } else {
+ localStorage.removeItem("token");
+ localStorage.removeItem("user");
+ localStorage.removeItem("role");
+ }
+ alert(result);
};
- function handleEdit(id) {
- console.info(`Start edit script`);
-
- Service.read(`customer/${id}`)
- .then(function (data) {
- setLoginEdit(data.login);
- setPasswordEdit(data.password);
- setCurrEditItem(data.id);
- setModalTable(true)
- console.info('End edit script');
- })
- };
-
- const handleSubmitEdit = async (e, id) => {
- console.info('Start synchronize edit');
- e.preventDefault(); // страница перестает перезагружаться
+ async function getRole(token) {
+ // вызываем поиск пользователя по токену
const requestParams = {
- method: "PUT",
+ method: "GET",
headers: {
- "Content-Type": "application/json"
- }
+ "Content-Type": "application/json",
+ },
};
- const requestUrl = `http://localhost:8080/customer/${id}?login=${loginEdit}&password=${passwordEdit}`
- const response = await fetch(requestUrl, requestParams)
- const temp = await response.json()
- .then((data) => {
- setUsers(
- users.map(item =>
- item.id === id ? {
- ...item,
- login: data.login,
- password: data.password
- } : item)
- )
- console.info('End synchronize edit');
- setModalTable(false)
- })
- .catch((error) => {
- console.error('Error:', error);
- });
- };
-
- function handleDelete(id) {
- console.info('Try to remove item');
- Service.delete(`customer/${id}`)
- .then(() => {
- setUsers(users.filter(elem => elem.id !== id))
- console.log("Removed")
- });
- };
+ const response = await fetch(hostURL + `/get-role?token=${token}`, requestParams);
+ const result = await response.text();
+ localStorage.setItem("role", result);
+ // вызвали событие
+ window.dispatchEvent(new Event("storage"));
+ navigate('/orders')
+ navigate('/orders')
+ }
const Content = (
<>
-
-
-
-
- | # |
- Login |
- Password |
- |
-
-
-
- {users.map((user) => (
-
- ))}
-
-
-
-
-
)
return (
-
+
)
}
diff --git a/front/src/pages/Sessions.jsx b/front/src/pages/Sessions.jsx
index 20986cc..e505816 100644
--- a/front/src/pages/Sessions.jsx
+++ b/front/src/pages/Sessions.jsx
@@ -1,4 +1,4 @@
-import { React, useState, useEffect } from 'react'
+import {React, useState, useEffect} from 'react'
import ContentBlock from './components/ContentBlock'
import Service from './services/Service';
import ModalEdit from './components/ModalEdit';
@@ -18,7 +18,9 @@ export default function Sessions() {
// для выпадающих значений
const [cinemaName, setCinemaName] = useState('');
const [cinema, setCinema] = useState([]);
-
+ const getTokenForHeader = function () {
+ return "Bearer " + localStorage.getItem("token");
+ }
useEffect(() => {
setError(false)
getAll('cinema').then((data) => setCinema(data))
@@ -26,10 +28,12 @@ export default function Sessions() {
}, [])
async function getAll(elem) {
+ const requestParams = {
+ method: "GET"
+ };
const requestUrl = `http://localhost:8080/${elem}`
- const response = await fetch(requestUrl)
- const result = await response.json()
- return result
+ const response = await fetch(requestUrl, requestParams)
+ return await response.json()
}
function handleSubmit(e) {
@@ -66,17 +70,24 @@ export default function Sessions() {
});
};
- function handleEdit(id) {
+ async function handleEdit(id) {
console.info(`Start edit script`);
-
- Service.read(`session/${id}`)
+ const requestParams = {
+ method: "GET",
+ headers: {
+ "Authorization": getTokenForHeader(),
+ }
+ };
+ const requestUrl = `http://localhost:8080/session/${id}`
+ const response = await fetch(requestUrl, requestParams)
+ return await response.json()
.then(function (data) {
setPriceEdit(data.price);
setCurrEditItem(data.id);
setModalTable(true)
console.info('End edit script');
})
- };
+ }
const handleSubmitEdit = async (e, id) => {
console.info('Start synchronize edit');
@@ -84,6 +95,7 @@ export default function Sessions() {
const requestParams = {
method: "PUT",
headers: {
+ "Authorization": getTokenForHeader(),
"Content-Type": "application/json"
}
};
@@ -106,86 +118,113 @@ export default function Sessions() {
});
};
- function handleDelete(id) {
+ async function handleDelete(id) {
console.info('Try to remove item');
- Service.delete(`session/${id}`)
+ const requestParams = {
+ method: "DELETE",
+ headers: {
+ "Authorization": getTokenForHeader(),
+ "Content-Type": "application/json"
+ }
+ };
+ const response = await fetch(`session/${id}`, requestParams)
+ await response.json()
.then(() => {
setUsers(users.filter(elem => elem.id !== id))
console.log("Removed")
+ })
+ .catch((error) => {
+ console.error('Error:', error);
});
- };
+ }
const Content = (
<>
-
+ {(localStorage.getItem("role") === 'ADMIN') &&
+ }
-
- | # |
- Price |
- Cinema |
- Timestamp |
- Capacity |
- MaxCount |
- |
-
+
+ | # |
+ Price |
+ Cinema |
+ Timestamp |
+ Capacity |
+ MaxCount |
+ |
+
- {users.map((user) => (
-
- ))}
+ {users.map((user) => (
+
+ ))}
-
- }
)
return (
-
+
)
}
diff --git a/front/src/pages/Users.jsx b/front/src/pages/Users.jsx
new file mode 100644
index 0000000..a858b07
--- /dev/null
+++ b/front/src/pages/Users.jsx
@@ -0,0 +1,181 @@
+import {useState, useEffect} from 'react'
+import ContentBlock from './components/ContentBlock'
+import ModalEdit from './components/ModalEdit';
+import UserItem from './components/UserItem';
+import axios from "axios";
+
+export default function Users() {
+ const [loginEdit, setLoginEdit] = useState('');
+ const [passwordEdit, setPasswordEdit] = useState('');
+ const [users, setUsers] = useState([]);
+ const [modalTable, setModalTable] = useState(false);
+ // хук для запоминания индекса элемента, вызвавшего модальное окно
+ const [currEditItem, setCurrEditItem] = useState(0);
+
+ const [pageNumbers, setPageNumbers] = useState([]);
+ const [currPage, setCurrPage] = useState(1);
+ const url = 'http://localhost:8080/api/1.0/customer'
+
+ useEffect(() => {
+ axios
+ .get(`${url}?page=${currPage}`, {
+ headers:{
+ "Authorization": "Bearer " + localStorage.getItem("token")
+ }
+ })
+ .then((response) => {
+ setUsers(response.data.content)
+ setPageNumbers(response.data.totalPages);
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+ }, [currPage, pageNumbers]);
+ const getTokenForHeader = function () {
+ return "Bearer " + localStorage.getItem("token");
+ }
+
+ async function handleEdit(id) {
+ console.info(`Start edit script`);
+ const requestParams = {
+ method: "GET",
+ headers: {
+ "Authorization": getTokenForHeader(),
+ }
+ };
+ const requestUrl = `customer/${id}`
+ const response = await fetch(requestUrl, requestParams)
+ return await response.json()
+ .then(function (data) {
+ setLoginEdit(data.login);
+ setPasswordEdit(data.password);
+ setCurrEditItem(data.id);
+ setModalTable(true)
+ console.info('End edit script');
+ })
+ }
+
+ const handleSubmitEdit = async (e, id) => {
+ console.info('Start synchronize edit');
+ e.preventDefault(); // страница перестает перезагружаться
+ const requestParams = {
+ method: "PUT",
+ headers: {
+ "Authorization": getTokenForHeader(),
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify({login: loginEdit, password: passwordEdit})
+ };
+ const requestUrl = `http://localhost:8080/customer/${id}`
+ const response = await fetch(requestUrl, requestParams)
+ const temp = await response.json()
+ .then((data) => {
+ setUsers(
+ users.map(item =>
+ item.id === id ? {
+ ...item,
+ login: data.login,
+ password: data.password
+ } : item)
+ )
+ console.info('End synchronize edit');
+ setModalTable(false)
+ })
+ .catch((error) => {
+ console.error('Error:', error);
+ });
+ };
+
+ async function handleDelete(id) {
+ console.info('Try to remove item');
+ const requestParams = {
+ method: "DELETE",
+ headers: {
+ "Authorization": getTokenForHeader(),
+ "Content-Type": "application/json"
+ }
+ };
+ const response = await fetch(`customer/${id}`, requestParams)
+ await response.json()
+ .then(() => {
+ setUsers(users.filter(elem => elem.id !== id))
+ console.log("Removed")
+ })
+ .catch((error) => {
+ console.error('Error:', error);
+ });
+ }
+
+ const pageOnClick = function (page) {
+ setCurrPage(page);
+ }
+
+ const renderPageNumbers = () => {
+ const pageNumbersRender = [];
+ for (let i = 0; i < pageNumbers; i++) {
+ pageNumbersRender.push(
+ pageOnClick(i+1)}>
+ {i+1}
+
+ );
+ }
+ return pageNumbersRender;
+ };
+
+ const Content = (
+ <>
+
+
+
+ | # |
+ Login |
+ Password |
+ |
+
+
+
+ {users.map((user) => (
+
+ ))}
+
+
+
+ Страницы:
+ {renderPageNumbers()}
+
+
+
+
+
+ )
+
+ return (
+
+ )
+}
diff --git a/front/src/pages/components/Header.jsx b/front/src/pages/components/Header.jsx
index e3740ff..842d2f1 100644
--- a/front/src/pages/components/Header.jsx
+++ b/front/src/pages/components/Header.jsx
@@ -1,12 +1,64 @@
-import { React, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import searchImage from '../../images/search.jpg'
+import {useEffect, useState} from 'react'
+import {useNavigate, Link} from 'react-router-dom'
import '../../styles/styleHeader.css'
+import searchImage from '../../images/search.jpg'
-export default function Header() {
+export default function Header(props) {
const navigate = useNavigate();
-
const [searchName, setSearchName] = useState('');
+ const [userRole, setUserRole] = useState('');
+
+ useEffect(() => {
+ console.log('im here')
+ window.addEventListener("storage", () => {
+ const token = localStorage.getItem("token");
+ const user = localStorage.getItem("user");
+ if (token) {
+ getRole(token)
+ .then((role) => {
+ if (localStorage.getItem("role") !== role) {
+ localStorage.removeItem("token");
+ localStorage.removeItem("user");
+ localStorage.removeItem("role");
+ // вызвали событие
+ window.dispatchEvent(new Event("storage"));
+ navigate("/entry");
+ }
+ });
+ }
+ if (!token || !user) {
+ localStorage.removeItem("token");
+ localStorage.removeItem("user");
+ localStorage.removeItem("role");
+ navigate("/entry");
+ }
+ getUserRole();
+ });
+ getUserRole();
+ }, [])
+
+ async function getRole(token) {
+ // вызываем поиск пользователя по токену
+ const requestParams = {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json"
+ }
+ };
+ const response = await fetch(`http://localhost:8080/get-role?token=${token}`, requestParams);
+ return await response.text();
+ }
+
+ const getUserRole = function () {
+ const role = localStorage.getItem("role") || "";
+ setUserRole(role);
+ }
+
+ const validate = function (userAccess) {
+ if (userAccess === 'NONE')
+ return true;
+ return userAccess === 'USER' && userRole !== '' || userAccess === userRole;
+ }
function handleSubmit(e) {
console.info('Try to search data');
@@ -15,25 +67,62 @@ export default function Header() {
setSearchName('');
}
+ const handleSubmitLogout = function () {
+ localStorage.removeItem("token");
+ localStorage.removeItem("user");
+ localStorage.removeItem("role");
+ // вызвали событие
+ window.dispatchEvent(new Event("storage"));
+ }
+
return (
-