Login / Register / SideMenu / Fixes

2020-08-09 17:50:53 +02:00
parent e5a68f4b85
commit 769be397e5
19 changed files with 960 additions and 160 deletions
--- a/src/components/Dialogs/LoginDialog.js
+++ b/src/components/Dialogs/LoginDialog.js
@@ -0,0 +1,174 @@
+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 ".././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 {
+  hideLoginDialog,
+  showRegisterDialog,
+  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";
+
+export default function LoginDialog(props) {
+  const initialData = {
+    email: "",
+    password: "",
+    emailError: false,
+    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 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 handleRegisterClick = () => {
+    dispatch(hideLoginDialog());
+    dispatch(showRegisterDialog());
+  };
+
+  const loginClass = loginStyles();
+
+  const validateLogin = () => {
+    var valid;
+    var validation = {
+      email: validator.isEmail(loginData.email),
+      password: !validator.isEmpty(loginData.password),
+    };
+    setLoginData({
+      ...loginData,
+      emailError: !validation.email,
+      passwordError: !validation.password,
+    });
+    valid = validation.email && validation.password;
+
+    return valid;
+  };
+
+  const handleLogin = () => {
+    if (validateLogin()) {
+      dispatch(tryLogin(loginData.email, loginData.password));
+    } else {
+      dispatch(setLoginResult("Podaj poprawne dane logowania."));
+    }
+  };
+
+  // CODE
+
+  return (
+    <div>
+      <Dialog
+        className={loginClass.root}
+        onClose={() => dispatch(hideLoginDialog())}
+        open={loginDialog}
+        aria-labelledby="login-title"
+      >
+        <DialogTitle id="login-title">Logowanie</DialogTitle>
+        <IconButton
+          className={loginClass.closeButton}
+          onClick={() => dispatch(hideLoginDialog())}
+          aria-label="close"
+        >
+          <CloseIcon />
+        </IconButton>
+        <Divider />
+        <DialogContent>
+          <TextField
+            className={loginClass.textInput}
+            required
+            id="email"
+            label="Email"
+            type="email"
+            variant="outlined"
+            error={loginData.emailError}
+            onChange={(event) => (loginData.email = event.target.value)}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <AccountCircle color="primary" />
+                </InputAdornment>
+              ),
+            }}
+          />
+          <TextField
+            className={loginClass.textInput}
+            required
+            id="password"
+            label="Hasło"
+            type="password"
+            variant="outlined"
+            error={loginData.passwordError}
+            onChange={(event) => (loginData.password = event.target.value)}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <LockIcon color="primary" />
+                </InputAdornment>
+              ),
+            }}
+          />
+          <p>{loginResult}</p>
+          <div className="login-dialog-buttons">
+            <ButtonSecondary onClick={() => handleLogin()} text="Zaloguj" />
+          </div>
+          <Link
+            className={loginClass.link}
+            href="#"
+            onClick={() => handleRegisterClick()}
+          >
+            Nie pamiętam hasła.
+          </Link>
+          <p>
+            Nie masz konta?{" "}
+            <span>
+              <Link href="#" onClick={() => handleRegisterClick()}>
+                Zarejestruj się.
+              </Link>
+            </span>
+          </p>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}