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