Login / Register / SideMenu / Fixes
This commit is contained in:
281
src/components/Dialogs/RegisterDialog.js
Normal file
281
src/components/Dialogs/RegisterDialog.js
Normal file
@@ -0,0 +1,281 @@
|
||||
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 {
|
||||
hideRegisterDialog,
|
||||
showRegulaminDialog,
|
||||
setRegisterResult,
|
||||
showLoginDialog,
|
||||
} from "../../actions/toggles";
|
||||
import { tryRegister } from "../../actions";
|
||||
import InputAdornment from "@material-ui/core/InputAdornment";
|
||||
import AccountCircle from "@material-ui/icons/AccountCircle";
|
||||
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";
|
||||
|
||||
export default function RegisterDialog(props) {
|
||||
// SETUP
|
||||
|
||||
const initialFormData = {
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
email: "",
|
||||
password: "",
|
||||
repeatPassword: "",
|
||||
firstnameError: false,
|
||||
lastnameError: 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
|
||||
);
|
||||
var registerForm = useSelector((state) => state.data.dialogs.registerForm);
|
||||
var registerResult = useSelector(
|
||||
(state) => state.data.dialogs.registerResult
|
||||
);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// STYLES
|
||||
|
||||
const loginStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
textAlign: "center",
|
||||
"& .MuiPaper-root": {
|
||||
backgroundColor: "#262626",
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
"& .MuiFormHelperText-root": {
|
||||
color: "#606060",
|
||||
textAlign: "center",
|
||||
},
|
||||
},
|
||||
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",
|
||||
},
|
||||
},
|
||||
}));
|
||||
const loginClass = loginStyles();
|
||||
|
||||
// HANDLERS
|
||||
|
||||
const handleRegulaminClick = (event) => {
|
||||
event.preventDefault();
|
||||
dispatch(showRegulaminDialog());
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
var valid;
|
||||
const validations = {
|
||||
firstname: !validator.isEmpty(formData.firstname),
|
||||
lastname: !validator.isEmpty(formData.lastname),
|
||||
email: validator.isEmail(formData.email),
|
||||
password: validator.isLength(formData.password, {
|
||||
min: 8,
|
||||
max: 128,
|
||||
}),
|
||||
repeatPassword: formData.password === formData.repeatPassword,
|
||||
};
|
||||
|
||||
setFormData({
|
||||
...formData,
|
||||
firstnameError: !validations.firstname,
|
||||
lastnameError: !validations.lastname,
|
||||
emailError: !validations.email,
|
||||
passwordError: !validations.password,
|
||||
repeatPasswordError: !validations.repeatPassword,
|
||||
});
|
||||
valid =
|
||||
validations.firstname &&
|
||||
validations.lastname &&
|
||||
validations.email &&
|
||||
validations.password &&
|
||||
validations.repeatPassword;
|
||||
|
||||
return valid;
|
||||
};
|
||||
|
||||
const sendForm = (form) => {
|
||||
if (validateForm()) {
|
||||
dispatch(tryRegister(form));
|
||||
} else {
|
||||
dispatch(setRegisterResult("Proszę poprawić poprawić formularz."));
|
||||
}
|
||||
};
|
||||
|
||||
const openLogin = () => {
|
||||
dispatch(hideRegisterDialog());
|
||||
dispatch(showLoginDialog());
|
||||
};
|
||||
|
||||
// CODE
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
className={loginClass.root}
|
||||
onClose={() => dispatch(hideRegisterDialog())}
|
||||
open={registerDialog}
|
||||
aria-labelledby="login-title"
|
||||
>
|
||||
<DialogTitle id="login-title">Rejestracja</DialogTitle>
|
||||
<IconButton
|
||||
className={loginClass.closeButton}
|
||||
onClick={() => dispatch(hideRegisterDialog())}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Divider />
|
||||
<DialogContent>
|
||||
{registerForm && (
|
||||
<div>
|
||||
<TextField
|
||||
className={loginClass.textInput}
|
||||
required
|
||||
id="firstname"
|
||||
label="Imię"
|
||||
type="name"
|
||||
variant="outlined"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<AccountCircle color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
error={formData.firstnameError}
|
||||
onChange={(event) => (formData.firstname = event.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
className={loginClass.textInput}
|
||||
required
|
||||
id="lastname"
|
||||
label="Nazwisko"
|
||||
type="name"
|
||||
variant="outlined"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<AccountCircle color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
error={formData.lastnameError}
|
||||
onChange={(event) => (formData.lastname = event.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
className={loginClass.textInput}
|
||||
required
|
||||
id="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
variant="outlined"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<EmailIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
error={formData.emailError}
|
||||
onChange={(event) => (formData.email = event.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
className={loginClass.textInput}
|
||||
required
|
||||
id="password"
|
||||
label="Hasło (min. 8 znaków)"
|
||||
type="password"
|
||||
variant="outlined"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<LockIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
error={formData.passwordError}
|
||||
onChange={(event) => (formData.password = event.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
className={loginClass.textInput}
|
||||
required
|
||||
id="repeat-password"
|
||||
label="Powtórz hasło"
|
||||
type="password"
|
||||
variant="outlined"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<LockIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
error={formData.repeatPasswordError}
|
||||
onChange={(event) =>
|
||||
(formData.repeatPassword = event.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<p>{registerResult}</p>
|
||||
<Divider />
|
||||
<div className="register-dialog-actions">
|
||||
{circularProgress && <CircularProgress />}
|
||||
{registerForm && (
|
||||
<p>
|
||||
Rejestracja oznacza akceptację{" "}
|
||||
<span>
|
||||
<Link
|
||||
href="#"
|
||||
onClick={(event) => handleRegulaminClick(event)}
|
||||
>
|
||||
regulaminu
|
||||
</Link>
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
<div className="register-dialog-button">
|
||||
{registerForm ? (
|
||||
<ButtonSecondary
|
||||
onClick={() => sendForm(formData)}
|
||||
text="Zarejestruj"
|
||||
/>
|
||||
) : (
|
||||
<ButtonSecondary onClick={() => openLogin()} text="Logowanie" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user