web client v 0.1

2020-09-17 19:01:01 +02:00
parent 2b378fab25
commit 1c9d9e2021
20 changed files with 794 additions and 208 deletions
--- a/src/components/Dialogs/ForgotPassword.js
+++ b/src/components/Dialogs/ForgotPassword.js
@@ -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>
+  );
+}
--- a/src/components/Dialogs/LoginDialog.js
+++ b/src/components/Dialogs/LoginDialog.js
@@ -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>
--- a/src/components/Dialogs/NewRestaurant.js
+++ b/src/components/Dialogs/NewRestaurant.js
@@ -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
--- a/src/components/Dialogs/RegisterDialog.js
+++ b/src/components/Dialogs/RegisterDialog.js
@@ -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>
--- a/src/components/Dialogs/RegulaminDialog.js
+++ b/src/components/Dialogs/RegulaminDialog.js
@@ -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 />
--- a/src/components/Dialogs/ResetPassword.js
+++ b/src/components/Dialogs/ResetPassword.js
@@ -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>
+  );
+}