web client v 0.1
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user