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>
+  );
+}