web client v 0.1
This commit is contained in:
91
package-lock.json
generated
91
package-lock.json
generated
@@ -4010,6 +4010,14 @@
|
||||
"resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
|
||||
"integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg=="
|
||||
},
|
||||
"connected-react-router": {
|
||||
"version": "6.8.0",
|
||||
"resolved": "https://registry.npmjs.org/connected-react-router/-/connected-react-router-6.8.0.tgz",
|
||||
"integrity": "sha512-E64/6krdJM3Ag3MMmh2nKPtMbH15s3JQDuaYJvOVXzu6MbHbDyIvuwLOyhQIuP4Om9zqEfZYiVyflROibSsONg==",
|
||||
"requires": {
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"console-browserify": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
|
||||
@@ -6676,6 +6684,19 @@
|
||||
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
|
||||
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
|
||||
},
|
||||
"history": {
|
||||
"version": "4.10.1",
|
||||
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
|
||||
"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"loose-envify": "^1.2.0",
|
||||
"resolve-pathname": "^3.0.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0",
|
||||
"value-equal": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"hmac-drbg": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
||||
@@ -8804,6 +8825,15 @@
|
||||
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
|
||||
"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
|
||||
},
|
||||
"mini-create-react-context": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz",
|
||||
"integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"tiny-warning": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"mini-css-extract-plugin": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
|
||||
@@ -11357,6 +11387,52 @@
|
||||
"react-is": "^16.9.0"
|
||||
}
|
||||
},
|
||||
"react-router": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
|
||||
"integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"history": "^4.9.0",
|
||||
"hoist-non-react-statics": "^3.1.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"mini-create-react-context": "^0.4.0",
|
||||
"path-to-regexp": "^1.7.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-is": "^16.6.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"isarray": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
|
||||
},
|
||||
"path-to-regexp": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
|
||||
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
|
||||
"requires": {
|
||||
"isarray": "0.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
|
||||
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"history": "^4.9.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-router": "5.2.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz",
|
||||
@@ -11752,6 +11828,11 @@
|
||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
|
||||
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
|
||||
},
|
||||
"resolve-pathname": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
|
||||
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
|
||||
},
|
||||
"resolve-url": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
|
||||
@@ -13275,6 +13356,11 @@
|
||||
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
|
||||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
|
||||
},
|
||||
"tiny-invariant": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
|
||||
"integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
|
||||
},
|
||||
"tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
@@ -13669,6 +13755,11 @@
|
||||
"resolved": "https://registry.npmjs.org/validator/-/validator-13.1.1.tgz",
|
||||
"integrity": "sha512-8GfPiwzzRoWTg7OV1zva1KvrSemuMkv07MA9TTl91hfhe+wKrsrgVN4H2QSFd/U/FhiU3iWPYVgvbsOGwhyFWw=="
|
||||
},
|
||||
"value-equal": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
|
||||
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
|
||||
},
|
||||
"vary": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||
|
||||
@@ -11,11 +11,13 @@
|
||||
"@testing-library/react": "^9.5.0",
|
||||
"@testing-library/user-event": "^7.2.1",
|
||||
"axios": "^0.19.2",
|
||||
"connected-react-router": "^6.8.0",
|
||||
"node-sass": "^4.14.1",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-ga": "^3.1.2",
|
||||
"react-redux": "^7.2.0",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "^3.4.3",
|
||||
"redux": "^4.0.5",
|
||||
"redux-thunk": "^2.3.0",
|
||||
|
||||
49
src/App.js
49
src/App.js
@@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import { Router, Switch, Route } from "react-router-dom";
|
||||
import "./App.scss";
|
||||
import TopBar from "./components/TopBar";
|
||||
import LogoMain from "./components/Output/logoMain";
|
||||
@@ -8,7 +9,11 @@ import SearchResults from "./components/Output/SearchResults";
|
||||
import Restaurant from "./components/Output/Restaurant";
|
||||
import Dialogs from "./components/Dialogs";
|
||||
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
|
||||
import { useSelector } from "react-redux";
|
||||
import LoginDialog from "./components/Dialogs/LoginDialog";
|
||||
import NewRestaurant from "./components/Dialogs/NewRestaurant";
|
||||
import RegisterDialog from "./components/Dialogs/RegisterDialog";
|
||||
import ForgotPassword from "./components/Dialogs/ForgotPassword";
|
||||
import ResetPassword from "./components/Dialogs/ResetPassword";
|
||||
|
||||
const theme = createMuiTheme({
|
||||
palette: {
|
||||
@@ -24,30 +29,54 @@ const theme = createMuiTheme({
|
||||
},
|
||||
});
|
||||
|
||||
function App() {
|
||||
const appMode = useSelector((store) => store.appMode);
|
||||
|
||||
function App(props) {
|
||||
return (
|
||||
<Router history={props.history}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<div className="App">
|
||||
<TopBar />
|
||||
<div className="main-container">
|
||||
<Switch>
|
||||
<Route exact path="/">
|
||||
<LogoMain />
|
||||
{(appMode === "init" || appMode === "search results") && (
|
||||
<SearchPanel />
|
||||
)}
|
||||
{appMode === "init" && (
|
||||
<p className="darkParagraph">
|
||||
Sprawdź co serwuje Twoja ulubiona restauracja.
|
||||
</p>
|
||||
)}
|
||||
{appMode === "search results" && <SearchResults />}
|
||||
{appMode === "restaurant" && <Restaurant />}
|
||||
</Route>
|
||||
<Route path="/results">
|
||||
<LogoMain />
|
||||
<SearchPanel />
|
||||
<SearchResults />
|
||||
</Route>
|
||||
<Route path="/restaurant">
|
||||
<Restaurant />
|
||||
</Route>
|
||||
<Route path="/dish">
|
||||
<LogoMain />
|
||||
</Route>
|
||||
<Route path="/login">
|
||||
<LoginDialog />
|
||||
</Route>
|
||||
<Route path="/register">
|
||||
<RegisterDialog />
|
||||
</Route>
|
||||
<Route path="/newRestaurant">
|
||||
<NewRestaurant />
|
||||
</Route>
|
||||
<Route path="/forgotpassword">
|
||||
<ForgotPassword />
|
||||
</Route>
|
||||
<Route path="/resetpassword">
|
||||
<ResetPassword />
|
||||
</Route>
|
||||
</Switch>
|
||||
</div>
|
||||
<Dialogs />
|
||||
<Footer />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
const { getByText } = render(<App />);
|
||||
const linkElement = getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
@@ -1,5 +1,7 @@
|
||||
import axios from "axios";
|
||||
import * as toggles from "./toggles";
|
||||
import { push } from "connected-react-router";
|
||||
|
||||
const backend = "http://localhost:4000/";
|
||||
|
||||
const autocomplete = (input) => {
|
||||
@@ -23,7 +25,6 @@ export const fetchAutocomplete = (input) => {
|
||||
const cities = Array.from(response.data.cities);
|
||||
const restaurants = Array.from(response.data.restaurants);
|
||||
const options = cities.concat(restaurants);
|
||||
|
||||
dispatch(autocomplete(options));
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -40,7 +41,7 @@ export const fetchSearch = (input) => {
|
||||
const data = response.data;
|
||||
if (Object.keys(data).length > 0) {
|
||||
dispatch(setSearchResults(data));
|
||||
dispatch(setAppMode("APP_SEARCH_RESULTS"));
|
||||
dispatch(push("/results"));
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -63,12 +64,6 @@ export const setSearchQuery = (input) => {
|
||||
};
|
||||
};
|
||||
|
||||
export const setAppMode = (mode) => {
|
||||
return {
|
||||
type: mode,
|
||||
};
|
||||
};
|
||||
|
||||
export const setRestaurant = (restaurant) => {
|
||||
return {
|
||||
type: "SET_RESTAURANT",
|
||||
@@ -83,7 +78,7 @@ export const fetchRestaurant = (id) => {
|
||||
.then((response) => {
|
||||
dispatch(setRestaurant(response.data));
|
||||
dispatch(toggles.hideDishes());
|
||||
dispatch(setAppMode("APP_RESTAURANT"));
|
||||
dispatch(push("/restaurant"));
|
||||
dispatch(fetchAllDishes(id));
|
||||
})
|
||||
.catch((err) => console.log(err));
|
||||
@@ -112,11 +107,11 @@ export const tryLogin = (username, password) => {
|
||||
const data = { email: username, password: password };
|
||||
|
||||
return function (dispatch) {
|
||||
dispatch(toggles.setLoginResult(""));
|
||||
axios
|
||||
.post(backend + "user/login", data)
|
||||
.then((response) => {
|
||||
const jwt = response.headers["x-auth-token"];
|
||||
console.log(response.headers);
|
||||
dispatch(
|
||||
toggles.setLoggedIn(
|
||||
response.data.firstname,
|
||||
@@ -125,7 +120,7 @@ export const tryLogin = (username, password) => {
|
||||
response.data.email
|
||||
)
|
||||
);
|
||||
dispatch(toggles.hideLoginDialog());
|
||||
dispatch(push("/"));
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.response.status === 404) {
|
||||
@@ -143,6 +138,46 @@ export const tryLogin = (username, password) => {
|
||||
};
|
||||
};
|
||||
|
||||
export const remindPassword = (email) => {
|
||||
return function (dispatch) {
|
||||
const data = { email: email };
|
||||
dispatch(toggles.setReminderResult(""));
|
||||
dispatch(toggles.showReminderCircle());
|
||||
axios
|
||||
.post(backend + "user/forgotpassword", data)
|
||||
.then((response) => {
|
||||
dispatch(toggles.hideReminderCircle());
|
||||
dispatch(toggles.setReminderResult(response.data));
|
||||
})
|
||||
.catch((e) => {
|
||||
dispatch(toggles.hideReminderCircle());
|
||||
dispatch(toggles.setReminderResult(e.response.data));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export const changePassword = (email, password, token) => {
|
||||
return function (dispatch) {
|
||||
const data = {
|
||||
token: token,
|
||||
email: email,
|
||||
newPass: password,
|
||||
};
|
||||
dispatch(toggles.setResetResult(""));
|
||||
dispatch(toggles.showResetCircle());
|
||||
axios
|
||||
.post(backend + "user/resetpass", data)
|
||||
.then((response) => {
|
||||
dispatch(toggles.hideResetCircle());
|
||||
dispatch(toggles.setResetResult(response.data));
|
||||
})
|
||||
.catch((e) => {
|
||||
dispatch(toggles.hideResetCircle());
|
||||
dispatch(toggles.setResetResult(e.response.data));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export const logout = () => {
|
||||
return function (dispatch) {
|
||||
dispatch(toggles.setLoggedOut());
|
||||
@@ -151,6 +186,7 @@ export const logout = () => {
|
||||
|
||||
export const tryRegister = (data) => {
|
||||
return function (dispatch) {
|
||||
dispatch(toggles.setRegisterResult(""));
|
||||
dispatch(toggles.showRegisterCircle());
|
||||
axios
|
||||
.post(backend + "user/register", data)
|
||||
|
||||
@@ -10,18 +10,6 @@ export const hideDishes = () => {
|
||||
};
|
||||
};
|
||||
|
||||
export const showLoginDialog = () => {
|
||||
return {
|
||||
type: "DIALOG_LOGIN_VISIBLE",
|
||||
};
|
||||
};
|
||||
|
||||
export const hideLoginDialog = () => {
|
||||
return {
|
||||
type: "DIALOG_LOGIN_HIDDEN",
|
||||
};
|
||||
};
|
||||
|
||||
export const setLoggedIn = (username, jwt, id, email) => {
|
||||
return {
|
||||
type: "SET_LOGGEDIN",
|
||||
@@ -35,30 +23,6 @@ export const setLoggedOut = () => {
|
||||
};
|
||||
};
|
||||
|
||||
export const showRegisterDialog = () => {
|
||||
return {
|
||||
type: "DIALOG_REGISTER_VISIBLE",
|
||||
};
|
||||
};
|
||||
|
||||
export const hideRegisterDialog = () => {
|
||||
return {
|
||||
type: "DIALOG_REGISTER_HIDDEN",
|
||||
};
|
||||
};
|
||||
|
||||
export const showRegulaminDialog = () => {
|
||||
return {
|
||||
type: "DIALOG_REGULAMIN_VISIBLE",
|
||||
};
|
||||
};
|
||||
|
||||
export const hideRegulaminDialog = () => {
|
||||
return {
|
||||
type: "DIALOG_REGULAMIN_HIDDEN",
|
||||
};
|
||||
};
|
||||
|
||||
export const showRegisterCircle = () => {
|
||||
return {
|
||||
type: "DIALOG_REGISTER_CIRCLE_SHOW",
|
||||
@@ -91,14 +55,52 @@ export const setLoginResult = (text) => {
|
||||
};
|
||||
};
|
||||
|
||||
export const hideNewRestaurantDialog = () => {
|
||||
export const setReminderResult = (text) => {
|
||||
return {
|
||||
type: "DIALOG_NEWRESTAURANT_HIDE",
|
||||
type: "DIALOG_REMINDER_SET_RESULT",
|
||||
payload: text,
|
||||
};
|
||||
};
|
||||
|
||||
export const showNewRestaurantDialog = () => {
|
||||
export const setResetResult = (text) => {
|
||||
return {
|
||||
type: "DIALOG_NEWRESTAURANT_SHOW",
|
||||
type: "DIALOG_RESET_SET_RESULT",
|
||||
payload: text,
|
||||
};
|
||||
};
|
||||
|
||||
export const hideRegulamin = () => {
|
||||
return {
|
||||
type: "DIALOG_REGULAMIN_HIDE",
|
||||
};
|
||||
};
|
||||
|
||||
export const showRegulamin = () => {
|
||||
return {
|
||||
type: "DIALOG_REGULAMIN_SHOW",
|
||||
};
|
||||
};
|
||||
|
||||
export const showReminderCircle = () => {
|
||||
return {
|
||||
type: "DIALOG_REMINDER_CIRCLE_SHOW",
|
||||
};
|
||||
};
|
||||
|
||||
export const hideReminderCircle = () => {
|
||||
return {
|
||||
type: "DIALOG_REMINDER_CIRCLE_HIDE",
|
||||
};
|
||||
};
|
||||
|
||||
export const showResetCircle = () => {
|
||||
return {
|
||||
type: "DIALOG_RESET_CIRCLE_SHOW",
|
||||
};
|
||||
};
|
||||
|
||||
export const hideResetCircle = () => {
|
||||
return {
|
||||
type: "DIALOG_RESET_CIRCLE_HIDE",
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,16 +1,10 @@
|
||||
import React from "react";
|
||||
import LoginDialog from "./Dialogs/LoginDialog";
|
||||
import RegisterDialog from "./Dialogs/RegisterDialog";
|
||||
import RegulaminDialog from "./Dialogs/RegulaminDialog";
|
||||
import NewRestaurant from "./Dialogs/NewRestaurant";
|
||||
|
||||
export default function (props) {
|
||||
return (
|
||||
<div>
|
||||
<LoginDialog />
|
||||
<RegisterDialog />
|
||||
<RegulaminDialog />
|
||||
<NewRestaurant />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
154
src/components/Dialogs/ForgotPassword.js
Normal file
154
src/components/Dialogs/ForgotPassword.js
Normal file
@@ -0,0 +1,154 @@
|
||||
import React, { useState } from "react";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
import DialogContent from "@material-ui/core/DialogContent";
|
||||
import Dialog from "@material-ui/core/Dialog";
|
||||
import Divider from "@material-ui/core/Divider";
|
||||
import ButtonSecondary from "../Input/ButtonSecondary";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import CloseIcon from "@material-ui/icons/Close";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import Link from "@material-ui/core/Link";
|
||||
import validator from "validator";
|
||||
import InputAdornment from "@material-ui/core/InputAdornment";
|
||||
import AccountCircle from "@material-ui/icons/AccountCircle";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import { remindPassword } from "../../actions";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { setReminderResult } from "../../actions/toggles";
|
||||
|
||||
export default function ForgotPassword(props) {
|
||||
const initialData = {
|
||||
email: "",
|
||||
emailError: false,
|
||||
};
|
||||
const [data, setData] = useState(initialData);
|
||||
const reminderResult = useSelector(
|
||||
(state) => state.data.dialogs.reminderResult
|
||||
);
|
||||
const reminderCircle = useSelector(
|
||||
(state) => state.data.dialogs.reminderCircularProgress
|
||||
);
|
||||
const dispatch = useDispatch();
|
||||
const history = useHistory();
|
||||
|
||||
const loginStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
textAlign: "center",
|
||||
"& .MuiPaper-root": {
|
||||
backgroundColor: "#262626",
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
},
|
||||
closeButton: {
|
||||
color: "#bbbbbb",
|
||||
position: "absolute",
|
||||
right: theme.spacing(1),
|
||||
top: theme.spacing(1),
|
||||
},
|
||||
textInput: {
|
||||
marginTop: "20px",
|
||||
marginBottom: "10px",
|
||||
width: "90%",
|
||||
"& .MuiInputBase-root": {
|
||||
color: "#01c3a9",
|
||||
},
|
||||
"& .MuiInputLabel-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
},
|
||||
link: {
|
||||
fontSize: "0.9rem",
|
||||
},
|
||||
}));
|
||||
|
||||
const loginClass = loginStyles();
|
||||
|
||||
const validateLogin = () => {
|
||||
var valid;
|
||||
var validation = {
|
||||
email: validator.isEmail(data.email),
|
||||
};
|
||||
setData({
|
||||
...data,
|
||||
emailError: !validation.email,
|
||||
});
|
||||
valid = validation.email;
|
||||
return valid;
|
||||
};
|
||||
|
||||
const handleRemind = () => {
|
||||
if (validateLogin()) {
|
||||
dispatch(remindPassword(data.email));
|
||||
} else {
|
||||
dispatch(setReminderResult("Podaj poprawne dane."));
|
||||
}
|
||||
};
|
||||
|
||||
// CODE
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
className={loginClass.root}
|
||||
onClose={() => history.push("/")}
|
||||
open={true}
|
||||
aria-labelledby="login-title"
|
||||
>
|
||||
<DialogTitle id="login-title">Odzyskiwanie hasła</DialogTitle>
|
||||
<IconButton
|
||||
className={loginClass.closeButton}
|
||||
onClick={() => history.push("/")}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Divider />
|
||||
<DialogContent>
|
||||
<p>
|
||||
Podaj adres email do swojego konta. Link do zmiany hasła powinien
|
||||
dotrzeć do Ciebie w ciągu maksymalnie 15 minut (sprawdź również
|
||||
folder SPAM). Jeśli nie pamiętasz również adresu email, skontaktuj
|
||||
się z obsługą klienta.
|
||||
</p>
|
||||
<TextField
|
||||
className={loginClass.textInput}
|
||||
required
|
||||
id="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
variant="outlined"
|
||||
error={data.emailError}
|
||||
onChange={(event) => (data.email = event.target.value)}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<AccountCircle color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<p>
|
||||
{reminderResult}
|
||||
<span>{reminderCircle && <CircularProgress />}</span>
|
||||
</p>
|
||||
<div className="login-dialog-buttons">
|
||||
<ButtonSecondary
|
||||
onClick={() => handleRemind()}
|
||||
text="Wyślij email"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
Nie masz konta?{" "}
|
||||
<span>
|
||||
<Link href="#" onClick={() => history.push("/register")}>
|
||||
Zarejestruj się.
|
||||
</Link>
|
||||
</span>
|
||||
</p>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -9,17 +9,14 @@ import IconButton from "@material-ui/core/IconButton";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import CloseIcon from "@material-ui/icons/Close";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import {
|
||||
hideLoginDialog,
|
||||
showRegisterDialog,
|
||||
setLoginResult,
|
||||
} from "../../actions/toggles";
|
||||
import { setLoginResult } from "../../actions/toggles";
|
||||
import Link from "@material-ui/core/Link";
|
||||
import LockIcon from "@material-ui/icons/Lock";
|
||||
import validator from "validator";
|
||||
import InputAdornment from "@material-ui/core/InputAdornment";
|
||||
import AccountCircle from "@material-ui/icons/AccountCircle";
|
||||
import { tryLogin } from "../../actions";
|
||||
import { useHistory } from "react-router-dom";
|
||||
|
||||
export default function LoginDialog(props) {
|
||||
const initialData = {
|
||||
@@ -29,9 +26,9 @@ export default function LoginDialog(props) {
|
||||
passwordError: false,
|
||||
};
|
||||
const [loginData, setLoginData] = useState(initialData);
|
||||
const loginDialog = useSelector((state) => state.data.dialogs.logIn);
|
||||
const loginResult = useSelector((state) => state.data.dialogs.loginResult);
|
||||
const dispatch = useDispatch();
|
||||
const history = useHistory();
|
||||
|
||||
const loginStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
@@ -63,11 +60,6 @@ export default function LoginDialog(props) {
|
||||
},
|
||||
}));
|
||||
|
||||
const handleRegisterClick = () => {
|
||||
dispatch(hideLoginDialog());
|
||||
dispatch(showRegisterDialog());
|
||||
};
|
||||
|
||||
const loginClass = loginStyles();
|
||||
|
||||
const validateLogin = () => {
|
||||
@@ -100,14 +92,14 @@ export default function LoginDialog(props) {
|
||||
<div>
|
||||
<Dialog
|
||||
className={loginClass.root}
|
||||
onClose={() => dispatch(hideLoginDialog())}
|
||||
open={loginDialog}
|
||||
onClose={() => history.push("/")}
|
||||
open={true}
|
||||
aria-labelledby="login-title"
|
||||
>
|
||||
<DialogTitle id="login-title">Logowanie</DialogTitle>
|
||||
<IconButton
|
||||
className={loginClass.closeButton}
|
||||
onClick={() => dispatch(hideLoginDialog())}
|
||||
onClick={() => history.push("/")}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon />
|
||||
@@ -155,14 +147,14 @@ export default function LoginDialog(props) {
|
||||
<Link
|
||||
className={loginClass.link}
|
||||
href="#"
|
||||
onClick={() => handleRegisterClick()}
|
||||
onClick={() => history.push("/forgotpassword")}
|
||||
>
|
||||
Nie pamiętam hasła.
|
||||
</Link>
|
||||
<p>
|
||||
Nie masz konta?{" "}
|
||||
<span>
|
||||
<Link href="#" onClick={() => handleRegisterClick()}>
|
||||
<Link href="#" onClick={() => history.push("/register")}>
|
||||
Zarejestruj się.
|
||||
</Link>
|
||||
</span>
|
||||
|
||||
@@ -8,8 +8,6 @@ import ButtonSecondary from "../Input/ButtonSecondary";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import CloseIcon from "@material-ui/icons/Close";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { hideNewRestaurantDialog } from "../../actions/toggles";
|
||||
import Stepper from "@material-ui/core/Stepper";
|
||||
import Step from "@material-ui/core/Step";
|
||||
import StepLabel from "@material-ui/core/StepLabel";
|
||||
@@ -18,6 +16,7 @@ import Autocomplete from "@material-ui/lab/Autocomplete";
|
||||
import InputAdornment from "@material-ui/core/InputAdornment";
|
||||
import ImageUpload from "../Input/ImageUpload";
|
||||
import validator from "validator";
|
||||
import { useHistory } from "react-router-dom";
|
||||
// ICONS
|
||||
import FastfoodIcon from "@material-ui/icons/Fastfood";
|
||||
import LocationCityIcon from "@material-ui/icons/LocationCity";
|
||||
@@ -62,6 +61,9 @@ const useStyles = makeStyles((theme) => ({
|
||||
"& .MuiInputLabel-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
"$ .MuiFormHelperText-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
},
|
||||
timePicker: {
|
||||
margin: theme.spacing(2),
|
||||
@@ -98,13 +100,13 @@ export default function NewRestaurant() {
|
||||
nameError: false,
|
||||
cityError: false,
|
||||
adressError: false,
|
||||
descriptionError: false,
|
||||
charLeft: 400,
|
||||
};
|
||||
const steps = ["Informacje", "Zdjęcie", "Lokalizacja"];
|
||||
const [state, setState] = useState(initialState);
|
||||
const [activeStep, setActiveStep] = React.useState(0);
|
||||
const styles = useStyles();
|
||||
const dialogOpen = useSelector((state) => state.data.dialogs.newRestaurant);
|
||||
const dispatch = useDispatch();
|
||||
const availableTags = [
|
||||
"Płatność kartą",
|
||||
"Lubimy zwierzaki",
|
||||
@@ -114,6 +116,7 @@ export default function NewRestaurant() {
|
||||
"Podajemy alkohol",
|
||||
"Dowozimy",
|
||||
];
|
||||
const history = useHistory();
|
||||
|
||||
// HANDLERS
|
||||
|
||||
@@ -125,9 +128,14 @@ export default function NewRestaurant() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
let stringLength = event.target.value.length;
|
||||
let charleft = 400 - stringLength;
|
||||
setState({ ...state, description: event.target.value, charLeft: charleft });
|
||||
};
|
||||
|
||||
const handlePreviousButton = () => {
|
||||
setActiveStep(activeStep - 1);
|
||||
console.log(activeStep);
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
@@ -135,16 +143,24 @@ export default function NewRestaurant() {
|
||||
nameValid: validator.isLength(state.name, { min: 1, max: 40 }),
|
||||
cityValid: validator.isLength(state.city, { min: 1, max: 40 }),
|
||||
adressValid: validator.isLength(state.name, { min: 1, max: 40 }),
|
||||
descriptionValid: validator.isLength(state.description, {
|
||||
min: 1,
|
||||
max: 400,
|
||||
}),
|
||||
};
|
||||
setState({
|
||||
...state,
|
||||
nameError: !validation.nameValid,
|
||||
cityError: !validation.cityValid,
|
||||
adressError: !validation.adressValid,
|
||||
descriptionError: !validation.descriptionValid,
|
||||
});
|
||||
|
||||
return (
|
||||
validation.nameValid && validation.cityValid && validation.adressValid
|
||||
validation.nameValid &&
|
||||
validation.cityValid &&
|
||||
validation.adressValid &&
|
||||
validation.descriptionValid
|
||||
);
|
||||
};
|
||||
|
||||
@@ -154,13 +170,13 @@ export default function NewRestaurant() {
|
||||
<div>
|
||||
<Dialog
|
||||
className={styles.root}
|
||||
open={dialogOpen}
|
||||
open={true}
|
||||
aria-labelledby="newRestaurant-title"
|
||||
>
|
||||
<DialogTitle id="newRestaurant-title">Dodaj Lokal</DialogTitle>
|
||||
<IconButton
|
||||
className={styles.closeButton}
|
||||
onClick={() => dispatch(hideNewRestaurantDialog())}
|
||||
onClick={() => history.goBack()}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon />
|
||||
@@ -273,12 +289,17 @@ export default function NewRestaurant() {
|
||||
fullWidth
|
||||
label="Opis"
|
||||
value={state.description}
|
||||
onChange={(event) =>
|
||||
setState({ ...state, description: event.target.value })
|
||||
}
|
||||
onChange={(event) => handleDescriptionChange(event)}
|
||||
multiline
|
||||
error={state.descriptionError}
|
||||
rows={3}
|
||||
rowsMax={8}
|
||||
variant="outlined"
|
||||
helperText={"Pozostałe znaki: " + state.charLeft}
|
||||
FormHelperTextProps={{
|
||||
style: { color: "#bbbbbb" },
|
||||
}}
|
||||
required
|
||||
/>
|
||||
<Autocomplete
|
||||
multiple
|
||||
|
||||
@@ -9,20 +9,17 @@ import IconButton from "@material-ui/core/IconButton";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import CloseIcon from "@material-ui/icons/Close";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import {
|
||||
hideRegisterDialog,
|
||||
showRegulaminDialog,
|
||||
setRegisterResult,
|
||||
showLoginDialog,
|
||||
} from "../../actions/toggles";
|
||||
import { setRegisterResult, showRegulamin } from "../../actions/toggles";
|
||||
import { tryRegister } from "../../actions";
|
||||
import InputAdornment from "@material-ui/core/InputAdornment";
|
||||
import AccountCircle from "@material-ui/icons/AccountCircle";
|
||||
import BusinessIcon from "@material-ui/icons/Business";
|
||||
import EmailIcon from "@material-ui/icons/Email";
|
||||
import LockIcon from "@material-ui/icons/Lock";
|
||||
import Link from "@material-ui/core/Link";
|
||||
import validator from "validator";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import { useHistory } from "react-router-dom";
|
||||
|
||||
export default function RegisterDialog(props) {
|
||||
// SETUP
|
||||
@@ -30,17 +27,22 @@ export default function RegisterDialog(props) {
|
||||
const initialFormData = {
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
companyName: "",
|
||||
adress: "",
|
||||
NIP: "",
|
||||
email: "",
|
||||
password: "",
|
||||
repeatPassword: "",
|
||||
firstnameError: false,
|
||||
lastnameError: false,
|
||||
companyNameError: false,
|
||||
adressError: false,
|
||||
NIPError: false,
|
||||
emailError: false,
|
||||
passwordError: false,
|
||||
repeatPasswordError: false,
|
||||
};
|
||||
const [formData, setFormData] = useState(initialFormData);
|
||||
var registerDialog = useSelector((state) => state.data.dialogs.register);
|
||||
var circularProgress = useSelector(
|
||||
(state) => state.data.dialogs.registerCircularProgress
|
||||
);
|
||||
@@ -49,6 +51,7 @@ export default function RegisterDialog(props) {
|
||||
(state) => state.data.dialogs.registerResult
|
||||
);
|
||||
const dispatch = useDispatch();
|
||||
const history = useHistory();
|
||||
|
||||
// STYLES
|
||||
|
||||
@@ -88,7 +91,7 @@ export default function RegisterDialog(props) {
|
||||
|
||||
const handleRegulaminClick = (event) => {
|
||||
event.preventDefault();
|
||||
dispatch(showRegulaminDialog());
|
||||
dispatch(showRegulamin());
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
@@ -96,6 +99,9 @@ export default function RegisterDialog(props) {
|
||||
const validations = {
|
||||
firstname: !validator.isEmpty(formData.firstname),
|
||||
lastname: !validator.isEmpty(formData.lastname),
|
||||
companyName: !validator.isEmpty(formData.companyName),
|
||||
adress: !validator.isEmpty(formData.adress),
|
||||
NIP: !validator.isEmpty(formData.NIP),
|
||||
email: validator.isEmail(formData.email),
|
||||
password: validator.isLength(formData.password, {
|
||||
min: 8,
|
||||
@@ -108,6 +114,9 @@ export default function RegisterDialog(props) {
|
||||
...formData,
|
||||
firstnameError: !validations.firstname,
|
||||
lastnameError: !validations.lastname,
|
||||
companyNameError: !validations.companyName,
|
||||
adressError: !validations.adress,
|
||||
NIPError: !validations.NIP,
|
||||
emailError: !validations.email,
|
||||
passwordError: !validations.password,
|
||||
repeatPasswordError: !validations.repeatPassword,
|
||||
@@ -117,7 +126,10 @@ export default function RegisterDialog(props) {
|
||||
validations.lastname &&
|
||||
validations.email &&
|
||||
validations.password &&
|
||||
validations.repeatPassword;
|
||||
validations.repeatPassword &&
|
||||
validations.companyName &&
|
||||
validations.adress &&
|
||||
validations.NIP;
|
||||
|
||||
return valid;
|
||||
};
|
||||
@@ -126,29 +138,24 @@ export default function RegisterDialog(props) {
|
||||
if (validateForm()) {
|
||||
dispatch(tryRegister(form));
|
||||
} else {
|
||||
dispatch(setRegisterResult("Proszę poprawić poprawić formularz."));
|
||||
dispatch(setRegisterResult("Proszę poprawić formularz."));
|
||||
}
|
||||
};
|
||||
|
||||
const openLogin = () => {
|
||||
dispatch(hideRegisterDialog());
|
||||
dispatch(showLoginDialog());
|
||||
};
|
||||
|
||||
// CODE
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
className={loginClass.root}
|
||||
onClose={() => dispatch(hideRegisterDialog())}
|
||||
open={registerDialog}
|
||||
onClose={() => history.goBack()}
|
||||
open={true}
|
||||
aria-labelledby="login-title"
|
||||
>
|
||||
<DialogTitle id="login-title">Rejestracja</DialogTitle>
|
||||
<IconButton
|
||||
className={loginClass.closeButton}
|
||||
onClick={() => dispatch(hideRegisterDialog())}
|
||||
onClick={() => history.goBack()}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon />
|
||||
@@ -191,6 +198,59 @@ export default function RegisterDialog(props) {
|
||||
error={formData.lastnameError}
|
||||
onChange={(event) => (formData.lastname = event.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
className={loginClass.textInput}
|
||||
required
|
||||
id="companyName"
|
||||
label="Nazwa firmy"
|
||||
type="name"
|
||||
variant="outlined"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<BusinessIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
error={formData.companyNameError}
|
||||
onChange={(event) =>
|
||||
(formData.companyName = event.target.value)
|
||||
}
|
||||
/>
|
||||
<TextField
|
||||
className={loginClass.textInput}
|
||||
required
|
||||
id="adress"
|
||||
label="Adres firmy"
|
||||
type="name"
|
||||
variant="outlined"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<BusinessIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
error={formData.adressError}
|
||||
onChange={(event) => (formData.adress = event.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
className={loginClass.textInput}
|
||||
required
|
||||
id="NIP"
|
||||
label="NIP"
|
||||
type="name"
|
||||
variant="outlined"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<BusinessIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
error={formData.NIPError}
|
||||
onChange={(event) => (formData.NIP = event.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
className={loginClass.textInput}
|
||||
required
|
||||
@@ -270,7 +330,10 @@ export default function RegisterDialog(props) {
|
||||
text="Zarejestruj"
|
||||
/>
|
||||
) : (
|
||||
<ButtonSecondary onClick={() => openLogin()} text="Logowanie" />
|
||||
<ButtonSecondary
|
||||
onClick={() => history.push("/login")}
|
||||
text="Logowanie"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,13 +7,13 @@ import Divider from "@material-ui/core/Divider";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import CloseIcon from "@material-ui/icons/Close";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { hideRegulaminDialog } from "../../actions/toggles";
|
||||
import Regulamin from "./Regulamin";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { hideRegulamin } from "../../actions/toggles";
|
||||
|
||||
export default function RegulaminDialog(props) {
|
||||
var regulaminDialog = useSelector((state) => state.data.dialogs.regulamin);
|
||||
const dispatch = useDispatch();
|
||||
const open = useSelector((state) => state.data.dialogs.regulamin);
|
||||
|
||||
const loginStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
@@ -47,14 +47,14 @@ export default function RegulaminDialog(props) {
|
||||
<div>
|
||||
<Dialog
|
||||
className={styles.root}
|
||||
open={regulaminDialog}
|
||||
onClose={() => dispatch(hideRegulaminDialog())}
|
||||
open={open}
|
||||
onClose={() => dispatch(hideRegulamin())}
|
||||
aria-labelledby="regulamin-title"
|
||||
>
|
||||
<DialogTitle id="regulamin-title">Regulamin</DialogTitle>
|
||||
<IconButton
|
||||
className={styles.closeButton}
|
||||
onClick={() => dispatch(hideRegulaminDialog())}
|
||||
onClick={() => dispatch(hideRegulamin())}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon />
|
||||
|
||||
184
src/components/Dialogs/ResetPassword.js
Normal file
184
src/components/Dialogs/ResetPassword.js
Normal file
@@ -0,0 +1,184 @@
|
||||
import React, { useState } from "react";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
import DialogContent from "@material-ui/core/DialogContent";
|
||||
import Dialog from "@material-ui/core/Dialog";
|
||||
import Divider from "@material-ui/core/Divider";
|
||||
import ButtonSecondary from "../Input/ButtonSecondary";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import CloseIcon from "@material-ui/icons/Close";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import validator from "validator";
|
||||
import InputAdornment from "@material-ui/core/InputAdornment";
|
||||
import AccountCircle from "@material-ui/icons/AccountCircle";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import { useHistory, useLocation } from "react-router-dom";
|
||||
import { changePassword } from "../../actions/index";
|
||||
import { setResetResult } from "../../actions/toggles";
|
||||
|
||||
function useQuery() {
|
||||
return new URLSearchParams(useLocation().search);
|
||||
}
|
||||
|
||||
export default function ResetPassword(props) {
|
||||
const initialData = {
|
||||
email: "",
|
||||
emailError: false,
|
||||
password: "",
|
||||
passwordError: false,
|
||||
passwordRepeat: "",
|
||||
passwordRepeatError: false,
|
||||
};
|
||||
const [data, setData] = useState(initialData);
|
||||
const resetResult = useSelector((state) => state.data.dialogs.resetResult);
|
||||
const resetCircle = useSelector(
|
||||
(state) => state.data.dialogs.resetCircularProgress
|
||||
);
|
||||
const dispatch = useDispatch();
|
||||
const history = useHistory();
|
||||
const query = useQuery();
|
||||
const token = query.get("token");
|
||||
|
||||
const loginStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
textAlign: "center",
|
||||
"& .MuiPaper-root": {
|
||||
backgroundColor: "#262626",
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
},
|
||||
closeButton: {
|
||||
color: "#bbbbbb",
|
||||
position: "absolute",
|
||||
right: theme.spacing(1),
|
||||
top: theme.spacing(1),
|
||||
},
|
||||
textInput: {
|
||||
marginTop: "20px",
|
||||
marginBottom: "10px",
|
||||
width: "90%",
|
||||
"& .MuiInputBase-root": {
|
||||
color: "#01c3a9",
|
||||
},
|
||||
"& .MuiInputLabel-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
},
|
||||
link: {
|
||||
fontSize: "0.9rem",
|
||||
},
|
||||
}));
|
||||
|
||||
const loginClass = loginStyles();
|
||||
|
||||
const validateLogin = () => {
|
||||
var valid;
|
||||
var validation = {
|
||||
email: validator.isEmail(data.email),
|
||||
password: validator.isLength(data.password, { min: 6 }),
|
||||
passwordRepeat: data.passwordRepeat === data.password,
|
||||
};
|
||||
setData({
|
||||
...data,
|
||||
emailError: !validation.email,
|
||||
passwordError: !validation.password,
|
||||
passwordRepeatError: !validation.passwordRepeat,
|
||||
});
|
||||
valid =
|
||||
validation.password && validation.passwordRepeat && validation.email;
|
||||
return valid;
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
if (validateLogin()) {
|
||||
dispatch(changePassword(data.email, data.password, token));
|
||||
} else {
|
||||
dispatch(setResetResult("Popraw dane."));
|
||||
}
|
||||
};
|
||||
|
||||
// CODE
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
className={loginClass.root}
|
||||
onClose={() => history.push("/")}
|
||||
open={true}
|
||||
aria-labelledby="login-title"
|
||||
>
|
||||
<DialogTitle id="login-title">Ustaw nowe hasło</DialogTitle>
|
||||
<IconButton
|
||||
className={loginClass.closeButton}
|
||||
onClick={() => history.push("/")}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Divider />
|
||||
<DialogContent>
|
||||
<p>Podaj nowe bezpieczne hasło do konta.</p>
|
||||
<TextField
|
||||
className={loginClass.textInput}
|
||||
required
|
||||
id="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
variant="outlined"
|
||||
error={data.emailError}
|
||||
onChange={(event) => (data.email = event.target.value)}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<AccountCircle color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
className={loginClass.textInput}
|
||||
required
|
||||
id="password"
|
||||
label="Nowe hasło"
|
||||
type="password"
|
||||
variant="outlined"
|
||||
error={data.passwordError}
|
||||
onChange={(event) => (data.password = event.target.value)}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<AccountCircle color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
className={loginClass.textInput}
|
||||
required
|
||||
id="passwordRepeat"
|
||||
label="Powtórz nowe hasło"
|
||||
type="password"
|
||||
variant="outlined"
|
||||
error={data.passwordRepeatError}
|
||||
onChange={(event) => (data.passwordRepeat = event.target.value)}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<AccountCircle color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
{resetCircle && <CircularProgress />}
|
||||
<p>{resetResult}</p>
|
||||
</div>
|
||||
<div className="login-dialog-buttons">
|
||||
<ButtonSecondary onClick={() => handleReset()} text="Zmień hasło" />
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,10 @@
|
||||
import React, { useState } from "react";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import axios from "axios";
|
||||
|
||||
export default function ImageUpload() {
|
||||
const [imagePreviewURL, setPreviewURL] = useState("");
|
||||
let showCircle = false;
|
||||
|
||||
const handleInputChange = (event) => {
|
||||
let data = new FormData();
|
||||
@@ -31,7 +33,11 @@ export default function ImageUpload() {
|
||||
reader.readAsDataURL(event.target.files[0]);
|
||||
};
|
||||
|
||||
let imagePreview = <div className="image-preview">Proszę wybrać obraz.</div>;
|
||||
let imagePreview = (
|
||||
<div className="image-preview">
|
||||
{showCircle ? <CircularProgress /> : "Proszę wybrać obraz."}
|
||||
</div>
|
||||
);
|
||||
if (imagePreviewURL) {
|
||||
imagePreview = (
|
||||
<div
|
||||
|
||||
@@ -5,6 +5,7 @@ import { useDispatch } from "react-redux";
|
||||
|
||||
function extractTags(tags) {
|
||||
var results = [];
|
||||
if (!tags) return results;
|
||||
for (let [key, value] of Object.entries(tags)) {
|
||||
if (value === true) {
|
||||
results.push(key);
|
||||
|
||||
@@ -5,7 +5,6 @@ import logo from "../public/logo_white.svg";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import MenuIcon from "@material-ui/icons/Menu";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { setAppMode } from "../actions";
|
||||
import Drawer from "@material-ui/core/Drawer";
|
||||
import List from "@material-ui/core/List";
|
||||
import ListItem from "@material-ui/core/ListItem";
|
||||
@@ -15,11 +14,11 @@ import ListItemIcon from "@material-ui/core/ListItemIcon";
|
||||
import HomeIcon from "@material-ui/icons/Home";
|
||||
import MailIcon from "@material-ui/icons/Mail";
|
||||
import PaymentIcon from "@material-ui/icons/Payment";
|
||||
import { showLoginDialog, showRegisterDialog } from "../actions/toggles";
|
||||
import { logout } from "../actions";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import ButtonSecondary from "./Input/ButtonSecondary";
|
||||
import ListSubheader from "@material-ui/core/ListSubheader";
|
||||
import { useHistory } from "react-router-dom";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
paper: {
|
||||
@@ -40,30 +39,28 @@ export default function TopBar() {
|
||||
const classes = useStyles();
|
||||
const loggedIn = useSelector((state) => state.data.loggedIn);
|
||||
const username = useSelector((state) => state.data.username);
|
||||
const history = useHistory();
|
||||
const dispatch = useDispatch();
|
||||
const imgClick = () => {
|
||||
dispatch(setAppMode("APP_INIT"));
|
||||
};
|
||||
const handleClick = (button) => {
|
||||
setState((state.menuOpen = false));
|
||||
switch (button) {
|
||||
case "menui":
|
||||
dispatch(setAppMode("APP_INIT"));
|
||||
history.push("/");
|
||||
break;
|
||||
case "logIn":
|
||||
dispatch(showLoginDialog());
|
||||
history.push("/login");
|
||||
break;
|
||||
case "register":
|
||||
dispatch(showRegisterDialog());
|
||||
history.push("/register");
|
||||
break;
|
||||
case "logOut":
|
||||
dispatch(logout());
|
||||
break;
|
||||
case "myRestaurant":
|
||||
dispatch(setAppMode("APP_RESTAURANT"));
|
||||
history.push("/restaurant");
|
||||
break;
|
||||
case "addDish":
|
||||
dispatch(setAppMode("APP_ADD_DISH"));
|
||||
history.push("/");
|
||||
break;
|
||||
default:
|
||||
return true;
|
||||
@@ -73,6 +70,9 @@ export default function TopBar() {
|
||||
menuOpen: false,
|
||||
});
|
||||
|
||||
const closeDrawer = () => {
|
||||
setState({ menuOpen: false });
|
||||
};
|
||||
const toggleDrawer = (open) => (event) => {
|
||||
if (
|
||||
event.type === "keydown" &&
|
||||
@@ -91,7 +91,7 @@ export default function TopBar() {
|
||||
src={logo}
|
||||
className="topBarLogo"
|
||||
alt="Menui logo"
|
||||
onClick={() => imgClick()}
|
||||
onClick={() => history.push("/")}
|
||||
/>
|
||||
<div className="vertical-divider"></div>
|
||||
<h5>Food guide</h5>
|
||||
@@ -141,7 +141,9 @@ export default function TopBar() {
|
||||
<ListItemText primary="Cennik" />
|
||||
</ListItem>
|
||||
<Divider />
|
||||
<ListItem>{loggedIn && <UserMenu />}</ListItem>
|
||||
<ListItem>
|
||||
{loggedIn && <UserMenu closeMenu={closeDrawer} />}
|
||||
</ListItem>
|
||||
</List>
|
||||
<div className="drawer-bottom">
|
||||
<div className="drawer-buttons">
|
||||
|
||||
@@ -11,6 +11,7 @@ import ExpandMore from "@material-ui/icons/ExpandMore";
|
||||
import FastfoodIcon from "@material-ui/icons/Fastfood";
|
||||
import AddIcon from "@material-ui/icons/Add";
|
||||
import SettingsIcon from "@material-ui/icons/Settings";
|
||||
import { useHistory } from "react-router-dom";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
@@ -33,6 +34,11 @@ export default function UserMenu(props) {
|
||||
const handleClick = () => {
|
||||
setOpen(!open);
|
||||
};
|
||||
const handleAddRestaurant = () => {
|
||||
props.closeMenu();
|
||||
history.push("/newRestaurant");
|
||||
};
|
||||
const history = useHistory();
|
||||
|
||||
return (
|
||||
<List
|
||||
@@ -58,7 +64,7 @@ export default function UserMenu(props) {
|
||||
</ListItem>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<List component="div" disablePadding>
|
||||
<ListItem>
|
||||
<ListItem button onClick={handleAddRestaurant}>
|
||||
<ListItemIcon>
|
||||
<AddIcon />
|
||||
</ListItemIcon>
|
||||
|
||||
15
src/index.js
15
src/index.js
@@ -5,23 +5,30 @@ import { Provider } from "react-redux";
|
||||
import "./index.scss";
|
||||
import App from "./App";
|
||||
import * as serviceWorker from "./serviceWorker";
|
||||
import rootReducer from "./reducers";
|
||||
import thunk from "redux-thunk";
|
||||
import { createBrowserHistory } from "history";
|
||||
import { createStore, applyMiddleware, compose } from "redux";
|
||||
import { routerMiddleware, ConnectedRouter } from "connected-react-router";
|
||||
import rootReducer from "./reducers";
|
||||
|
||||
const history = createBrowserHistory();
|
||||
|
||||
ReactGA.initialize("G-SHB9LXPWWM");
|
||||
ReactGA.pageview("/");
|
||||
|
||||
const store = createStore(
|
||||
rootReducer,
|
||||
rootReducer(history),
|
||||
compose(
|
||||
applyMiddleware(thunk),
|
||||
applyMiddleware(routerMiddleware(history), thunk),
|
||||
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
|
||||
)
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
<Provider store={store}>
|
||||
<App />
|
||||
<ConnectedRouter history={history}>
|
||||
<App history={history} />
|
||||
</ConnectedRouter>
|
||||
</Provider>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
@@ -6,16 +6,15 @@ const initialState = {
|
||||
userId: "",
|
||||
userEmail: "",
|
||||
dialogs: {
|
||||
logIn: false,
|
||||
register: false,
|
||||
newRestaurant: true,
|
||||
contact: false,
|
||||
pricing: false,
|
||||
regulamin: false,
|
||||
registerCircularProgress: false,
|
||||
registerForm: true,
|
||||
registerResult: "",
|
||||
loginResult: "",
|
||||
regulamin: false,
|
||||
reminderResult: "",
|
||||
reminderCircularProgress: false,
|
||||
resetResult: "",
|
||||
resetCircularProgress: false,
|
||||
},
|
||||
tempData: {},
|
||||
};
|
||||
@@ -26,8 +25,6 @@ const data = (state = initialState, action) => {
|
||||
return (state = { ...state, showDishList: true });
|
||||
case "SET_DISHLIST_HIDDEN":
|
||||
return (state = { ...state, showDishList: false });
|
||||
case "DIALOG_LOGIN_VISIBLE":
|
||||
return (state = { ...state, dialogs: { ...state.dialogs, logIn: true } });
|
||||
case "SET_LOGGEDIN":
|
||||
return (state = {
|
||||
...state,
|
||||
@@ -46,36 +43,21 @@ const data = (state = initialState, action) => {
|
||||
userEmail: "",
|
||||
userId: "",
|
||||
});
|
||||
case "DIALOG_LOGIN_HIDDEN":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, logIn: false },
|
||||
});
|
||||
case "DIALOG_REGISTER_VISIBLE":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, register: true },
|
||||
});
|
||||
case "DIALOG_REGISTER_HIDDEN":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, register: false },
|
||||
});
|
||||
case "DIALOG_REGULAMIN_VISIBLE":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, regulamin: true },
|
||||
});
|
||||
case "DIALOG_REGULAMIN_HIDDEN":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, regulamin: false },
|
||||
});
|
||||
case "DIALOG_REGISTER_CIRCLE_SHOW":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, registerCircularProgress: true },
|
||||
});
|
||||
case "DIALOG_REGULAMIN_SHOW":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, regulamin: true },
|
||||
});
|
||||
case "DIALOG_REGULAMIN_HIDE":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, regulamin: false },
|
||||
});
|
||||
case "DIALOG_REGISTER_CIRCLE_HIDE":
|
||||
return (state = {
|
||||
...state,
|
||||
@@ -91,20 +73,40 @@ const data = (state = initialState, action) => {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, registerResult: action.payload },
|
||||
});
|
||||
case "DIALOG_REMINDER_SET_RESULT":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, reminderResult: action.payload },
|
||||
});
|
||||
case "DIALOG_REMINDER_CIRCLE_SHOW":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, reminderCircularProgress: true },
|
||||
});
|
||||
case "DIALOG_REMINDER_CIRCLE_HIDE":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, reminderCircularProgress: false },
|
||||
});
|
||||
case "DIALOG_RESET_CIRCLE_SHOW":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, resetCircularProgress: true },
|
||||
});
|
||||
case "DIALOG_RESET_CIRCLE_HIDE":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, resetCircularProgress: false },
|
||||
});
|
||||
case "DIALOG_LOGIN_SET_RESULT":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, loginResult: action.payload },
|
||||
});
|
||||
case "DIALOG_NEWRESTAURANT_HIDE":
|
||||
case "DIALOG_RESET_SET_RESULT":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, newRestaurant: false },
|
||||
});
|
||||
case "DIALOG_NEWRESTAURANT_SHOW":
|
||||
return (state = {
|
||||
...state,
|
||||
dialogs: { ...state.dialogs, newRestaurant: true },
|
||||
dialogs: { ...state.dialogs, resetResult: action.payload },
|
||||
});
|
||||
case "SET_TEMP_DATA":
|
||||
return (state = { ...state, tempData: action.payload });
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { combineReducers } from "redux";
|
||||
import { connectRouter } from "connected-react-router";
|
||||
import autoCompleteReducer from "./autoComplete";
|
||||
import searchResults from "./searchResults";
|
||||
import appMode from "./appMode";
|
||||
@@ -7,7 +8,9 @@ import restaurant from "./restaurant";
|
||||
import dishes from "./dishes";
|
||||
import data from "./data";
|
||||
|
||||
const rootReducer = combineReducers({
|
||||
const rootReducer = (history) =>
|
||||
combineReducers({
|
||||
router: connectRouter(history),
|
||||
autocomplete: autoCompleteReducer,
|
||||
appMode: appMode,
|
||||
searchResults: searchResults,
|
||||
|
||||
Reference in New Issue
Block a user