From ab0f65e2472faa3931cae28d8e38e1c3a6541214 Mon Sep 17 00:00:00 2001 From: Jonasz Bigda Date: Mon, 8 Feb 2021 15:48:21 +0100 Subject: [PATCH] fixes / register user --- src/actions/index.js | 50 ++++- src/actions/toggles.js | 6 +- src/components/Dialogs/RegisterDialog.js | 240 +++++++++++++++++++---- src/components/Dialogs/Settings.js | 50 ++++- src/components/Output/Footer.js | 2 +- src/components/TopBar.js | 8 +- src/components/UserMenu.js | 11 +- src/config.js | 4 +- src/reducers/data.js | 7 +- src/styles/Dialogs.scss | 4 + 10 files changed, 310 insertions(+), 72 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 4052206..57a1aa4 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -21,8 +21,15 @@ axios.interceptors.response.use( return axios(error.config); }) resolve(response) + } else { + if(error.response && error.response.status === 403){ + store.dispatch(logout("Podany użytkownik, lub hasło nie istnieje.", "error")); + } else if(error.response && error.response.status === 400) { + store.dispatch(logout("Dane nieprawidłowe.", "error")); + } else { + store.dispatch(logout("Sesja wygasła", "info")); + } } - store.dispatch(logout()); }) }); @@ -196,23 +203,47 @@ export const tryLogin = (username, password) => { axios .post(backend + "user/login", data) .then((response) => { - const jwt = response.headers["x-auth-token"]; - dispatch( + if(response.data.isRestaurant === true){ + const jwt = response.headers["x-auth-token"]; + dispatch( toggles.setLoggedIn( response.data.firstname, response.data.lastname, jwt, response.data.id, response.data.email, + "", response.data.NIP, response.data.adress, response.data.companyName, - response.data.restaurants + response.data.restaurants, + response.data.isRestaurant ) ); dispatch(toggles.hideBackdrop()); dispatch(notification(`Witaj ${response.data.firstname}!`, "success")); dispatch(push("/")); + } else { + const jwt = response.headers["x-auth-token"]; + dispatch( + toggles.setLoggedIn( + "", + "", + jwt, + response.data.id, + response.data.email, + response.data.login, + "", + "", + "", + [], + response.data.isRestaurant + ) + ); + dispatch(toggles.hideBackdrop()); + dispatch(notification(`Witaj ${response.data.login}!`, "success")); + dispatch(push("/")); + } }) .catch((err) => { if (!err.response) { @@ -220,7 +251,7 @@ export const tryLogin = (username, password) => { } else if (err.response.status === 404) { dispatch(toggles.hideBackdrop()); dispatch(notification("Użytkownik nie istnieje :(", "error")); - } else if (err.response.status === 401) { + } else if (err.response.status === 403) { dispatch(toggles.hideBackdrop()); dispatch(notification("Błędne dane logowania :(", "error")); } else { @@ -269,9 +300,13 @@ export const changePassword = (email, password, token) => { }; }; -export const logout = () => { +export const logout = (message, type) => { return function (dispatch) { - dispatch(notification("Wylogowano.", "info")); + if(message && type){ + dispatch(notification(message, type)); + } else { + dispatch(notification("Wylogowano.", "info")); + } dispatch(toggles.hideBackdrop()); dispatch(toggles.setLoggedOut()); dispatch(push("/")); @@ -292,6 +327,7 @@ export const tryRegister = (data) => { ) ); dispatch(toggles.hideBackdrop()); + dispatch(push("/")) } }) .catch((err) => { diff --git a/src/actions/toggles.js b/src/actions/toggles.js index 7a2540d..93ea2ad 100644 --- a/src/actions/toggles.js +++ b/src/actions/toggles.js @@ -16,10 +16,12 @@ export const setLoggedIn = ( jwt, userId, email, + login, NIP, adress, companyName, - restaurants + restaurants, + isRestaurant ) => { return { type: "SET_LOGGEDIN", @@ -29,10 +31,12 @@ export const setLoggedIn = ( jwt: jwt, userId: userId, email: email, + login: login, NIP: NIP, adress: adress, companyName: companyName, restaurants: restaurants, + isRestaurant: isRestaurant }, }; }; diff --git a/src/components/Dialogs/RegisterDialog.js b/src/components/Dialogs/RegisterDialog.js index 875ba49..18c6efb 100644 --- a/src/components/Dialogs/RegisterDialog.js +++ b/src/components/Dialogs/RegisterDialog.js @@ -19,8 +19,13 @@ import LockIcon from "@material-ui/icons/Lock"; import Link from "@material-ui/core/Link"; import validator from "validator"; import { useHistory } from "react-router-dom"; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; +import Checkbox from '@material-ui/core/Checkbox'; export default function RegisterDialog(props) { + const [currentTab, setTab] = useState(0); + const [termsAccepted, setTermsAccepted] = useState(0); const initialFormData = { firstname: "", lastname: "", @@ -28,8 +33,10 @@ export default function RegisterDialog(props) { adress: "", NIP: "", email: "", + login: "", password: "", repeatPassword: "", + isRestaurant: false, firstnameError: false, lastnameError: false, companyNameError: false, @@ -38,6 +45,7 @@ export default function RegisterDialog(props) { emailError: false, passwordError: false, repeatPasswordError: false, + loginError: false }; const [formData, setFormData] = useState(initialFormData); const dispatch = useDispatch(); @@ -92,44 +100,115 @@ export default function RegisterDialog(props) { const validateForm = () => { var valid; - 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, - max: 128, - }), - repeatPassword: formData.password === formData.repeatPassword, - }; - - setFormData({ - ...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, - }); - valid = - validations.firstname && - validations.lastname && - validations.email && - validations.password && - validations.repeatPassword && - validations.companyName && - validations.adress && - validations.NIP; - + if(currentTab === 1){ + 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, + max: 128, + }), + repeatPassword: formData.password === formData.repeatPassword, + }; + + setFormData({ + ...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, + }); + valid = + validations.firstname && + validations.lastname && + validations.email && + validations.password && + validations.repeatPassword && + validations.companyName && + validations.adress && + validations.NIP; + } else { + const validations = { + email: validator.isEmail(formData.email), + login: validator.isLength(formData.login), + password: validator.isLength(formData.password, { + min: 8, + max: 128, + }), + repeatPassword: formData.password === formData.repeatPassword, + }; + + setFormData({ + ...formData, + emailError: !validations.email, + loginError: !validations.login, + passwordError: !validations.password, + repeatPasswordError: !validations.repeatPassword, + }); + valid = + validations.email && + validations.password && + validations.repeatPassword && + validations.login + } return valid; }; + const handleTabChange = (event, newValue) => { + if(newValue === 0){ + setFormData({ + ...formData, + firstname: "", + lastname: "", + companyName: "", + adress: "", + NIP: "", + firstnameError: false, + lastnameError: false, + companyNameError: false, + adressError: false, + NIPError: false, + emailError: false, + passwordError: false, + repeatPasswordError: false, + loginError: false, + isRestaurant: false + }) + } else if(newValue === 1){ + setFormData({ + ...formData, + firstname: "", + lastname: "", + companyName: "", + adress: "", + NIP: "", + firstnameError: false, + lastnameError: false, + companyNameError: false, + adressError: false, + NIPError: false, + emailError: false, + passwordError: false, + repeatPasswordError: false, + loginError: false, + isRestaurant: true + }) + } + setTab(newValue) + } + + const handleCheckboxChange = () => { + setTermsAccepted(!termsAccepted); + } + const sendForm = (form) => { if (validateForm()) { dispatch(tryRegister(form)); @@ -158,7 +237,84 @@ export default function RegisterDialog(props) { -
+ + + + + + {currentTab === 0 && (
+ + + + ), + }} + error={formData.firstnameError} + onChange={(event) => (formData.login = event.target.value)} + /> + + + + ), + }} + error={formData.emailError} + onChange={(event) => (formData.email = event.target.value)} + /> + + + + ), + }} + error={formData.passwordError} + onChange={(event) => (formData.password = event.target.value)} + /> + + + + ), + }} + error={formData.repeatPasswordError} + onChange={(event) => + (formData.repeatPassword = event.target.value) + } + /> +
)} + {currentTab === 1 && (
-
+
)}
+
+

- Rejestracja oznacza akceptację{" "} + Przeczytałem i akceptuję postanowienia{" "} handleRegulaminClick(event)}> - regulaminu + regulaminu.

+
sendForm(formData)} text="Zarejestruj" /> @@ -319,4 +479,4 @@ export default function RegisterDialog(props) {
); -} +} \ No newline at end of file diff --git a/src/components/Dialogs/Settings.js b/src/components/Dialogs/Settings.js index b108909..60cdfee 100644 --- a/src/components/Dialogs/Settings.js +++ b/src/components/Dialogs/Settings.js @@ -83,15 +83,24 @@ export default function Settings() { }); const history = useHistory(); const style = useStyles(); + const isRestaurant = useSelector((store) => store.data.userData.isRestaurant) const data = useSelector((state) => state.data.userData); - const initialState = { - firstname: data.firstname, - lastname: data.lastname, - email: data.userEmail, - NIP: data.billing.NIP, - adress: data.billing.adress, - companyName: data.billing.companyName, - }; + let initialState; + if(isRestaurant === true) { + initialState = { + firstname: data.firstname, + lastname: data.lastname, + email: data.userEmail, + NIP: data.billing.NIP, + adress: data.billing.adress, + companyName: data.billing.companyName, + }; + } else { + initialState = { + email: data.userEmail, + login: data.login, + }; + } const [state, setState] = useState(initialState); return ( @@ -104,7 +113,7 @@ export default function Settings() { - + {isRestaurant && ( history.goBack()} text="Anuluj" /> - + )} + {!isRestaurant && ( + + setState({ ...state, email: event.target.value }) + } + label="Email" + variant="outlined" + InputProps={{ + startAdornment: ( + + + + ) + }} + /> + + history.goBack()} text="Anuluj" /> + + )} ); } diff --git a/src/components/Output/Footer.js b/src/components/Output/Footer.js index b9770e2..31424e8 100644 --- a/src/components/Output/Footer.js +++ b/src/components/Output/Footer.js @@ -4,7 +4,7 @@ export default class Footer extends React.Component { render() { return (
-

Menui (wersja testowa aplikacji)

+

Bankai Software @2021 | Menui (v0.6.0)

); } diff --git a/src/components/TopBar.js b/src/components/TopBar.js index ae3e6ed..e43b0ea 100644 --- a/src/components/TopBar.js +++ b/src/components/TopBar.js @@ -39,7 +39,9 @@ const useStyles = makeStyles((theme) => ({ export default function TopBar() { const classes = useStyles(); const loggedIn = useSelector((state) => state.data.loggedIn); - const username = useSelector((state) => state.data.userData.firstname); + const firstname = useSelector((state) => state.data.userData.firstname); + const login = useSelector((state) => state.data.userData.login); + const isRestaurant = useSelector((state) => state.data.userData.isRestaurant) const history = useHistory(); const dispatch = useDispatch(); const handleClick = (button) => { @@ -95,13 +97,13 @@ export default function TopBar() { onClick={() => history.push("/")} />
-
Food guide (wersja testowa)
+
Food guide
{loggedIn && (
{" "} -

Witaj {username}

{" "} +

Witaj {isRestaurant ? firstname : login}

{" "}
)} diff --git a/src/components/UserMenu.js b/src/components/UserMenu.js index d5eb8b7..b005d5d 100644 --- a/src/components/UserMenu.js +++ b/src/components/UserMenu.js @@ -32,6 +32,7 @@ const useStyles = makeStyles((theme) => ({ export default function UserMenu(props) { const restaurants = useSelector((state) => state.data.userData.restaurants); + const isRestaurant = useSelector((state) => state.data.userData.isRestaurant); const [open, setOpen] = useState(true); const classes = useStyles(); const handleClick = () => { @@ -74,14 +75,14 @@ export default function UserMenu(props) { - + {isRestaurant && {open ? : } - - + } + {isRestaurant && handleButtonClick("/newRestaurant")}> @@ -89,9 +90,9 @@ export default function UserMenu(props) { - {viewRestaurants} + {isRestaurant && viewRestaurants} - + } ); } diff --git a/src/config.js b/src/config.js index 3505d46..a34d20d 100644 --- a/src/config.js +++ b/src/config.js @@ -1,5 +1,5 @@ -export const backend = "https://api.menui.pl/"; -//export const backend = "http://localhost:4000/"; +//export const backend = "https://api.menui.pl/"; +export const backend = "http://localhost:4000/"; export const restaurantTypes = [ "afrykańska", diff --git a/src/reducers/data.js b/src/reducers/data.js index 51ada8a..71a86d7 100644 --- a/src/reducers/data.js +++ b/src/reducers/data.js @@ -1,9 +1,6 @@ const initialState = { showDishList: false, loggedIn: false, - username: "", - userId: "", - userEmail: "", userData: { jwt: "", firstname: "", @@ -16,6 +13,7 @@ const initialState = { companyName: "", }, restaurants: [], + isRestaurant: false }, dialogs: { regulamin: false, @@ -44,12 +42,14 @@ const data = (state = initialState, action) => { lastname: action.payload.lastname, userId: action.payload.userId, userEmail: action.payload.email, + login: action.payload.login, billing: { NIP: action.payload.NIP, adress: action.payload.adress, companyName: action.payload.companyName, }, restaurants: action.payload.restaurants, + isRestaurant: action.payload.isRestaurant }, }); case "SET_LOGGEDOUT": @@ -68,6 +68,7 @@ const data = (state = initialState, action) => { companyName: "", }, restaurants: [], + isRestaurant: false }, }); case "DIALOG_REGULAMIN_SHOW": diff --git a/src/styles/Dialogs.scss b/src/styles/Dialogs.scss index b5fdd54..9030892 100644 --- a/src/styles/Dialogs.scss +++ b/src/styles/Dialogs.scss @@ -23,4 +23,8 @@ p { font-size: 0.8rem; } +} + +.register-dialog-checkbox{ + display: flex; } \ No newline at end of file