| const OfferCard = (props) => { | const OfferCard = (props) => { | ||||
| return ( | return ( | ||||
| <OfferCardContainer sponsored={props.sponsored ? 1 : 0} halfwidth={props.halfwidth ? 1 : 0}> | |||||
| <OfferCardContainer sponsored={props.sponsored.toString()} halfwidth={props.halfwidth ? 1 : 0}> | |||||
| <OfferImage>{props.image}</OfferImage> | <OfferImage>{props.image}</OfferImage> | ||||
| <OfferInfo> | <OfferInfo> | ||||
| <OfferTitle>{props.title}</OfferTitle> | <OfferTitle>{props.title}</OfferTitle> | ||||
| }; | }; | ||||
| OfferCard.defaultProps = { | OfferCard.defaultProps = { | ||||
| halfwidth: false, | halfwidth: false, | ||||
| sponsored: true, | |||||
| sponsored: false, | |||||
| }; | }; | ||||
| export default OfferCard; | export default OfferCard; |
| box-sizing: border-box; | box-sizing: border-box; | ||||
| margin: 10px 0; | margin: 10px 0; | ||||
| background-color: ${(props) => | background-color: ${(props) => | ||||
| props.sponsored ? selectedTheme.backgroundSponsoredColor : "white"}; | |||||
| props.sponsored === 'true' ? selectedTheme.backgroundSponsoredColor : "white"}; | |||||
| border-radius: 4px; | border-radius: 4px; | ||||
| ${(props) => | ${(props) => | ||||
| props.sponsored && | |||||
| props.sponsored === 'true' && | |||||
| `border: 1px solid ${selectedTheme.borderSponsoredColor};`} | `border: 1px solid ${selectedTheme.borderSponsoredColor};`} | ||||
| padding: 16px; | padding: 16px; | ||||
| max-width: 2000px; | max-width: 2000px; |
| placeholder={props.placeholder} | placeholder={props.placeholder} | ||||
| width={props.width} | width={props.width} | ||||
| height={props.height} | height={props.height} | ||||
| id={props.id} | |||||
| name={props.name} | name={props.name} | ||||
| value={props.value} | value={props.value} | ||||
| onChange={props.onChange} | onChange={props.onChange} | ||||
| label: PropTypes.string, | label: PropTypes.string, | ||||
| value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), | value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), | ||||
| onChange: PropTypes.func, | onChange: PropTypes.func, | ||||
| id: PropTypes.number, | |||||
| error: PropTypes.bool, | error: PropTypes.bool, | ||||
| helperText: PropTypes.string, | helperText: PropTypes.string, | ||||
| autoFocus: PropTypes.bool, | autoFocus: PropTypes.bool, |
| import React, { useState } from "react"; | |||||
| import React, { useEffect, useState } from "react"; | |||||
| import PropTypes from "prop-types"; | import PropTypes from "prop-types"; | ||||
| import { | import { | ||||
| FormContainer, | FormContainer, | ||||
| const [emailTakenStatus, setEmailTakenStatus] = useState(false); | const [emailTakenStatus, setEmailTakenStatus] = useState(false); | ||||
| const { t } = useTranslation(); | const { t } = useTranslation(); | ||||
| const handleForm = (values) => { | |||||
| // validate email | |||||
| if (true) { // eslint-disable-line | |||||
| props.handleSubmit(values) | |||||
| } else { | |||||
| useEffect(() => { | |||||
| if (props.mailError?.length > 0) { | |||||
| setEmailTakenStatus(true); | setEmailTakenStatus(true); | ||||
| } | } | ||||
| } | |||||
| }, [props.mailError]); | |||||
| const formik = useFormik({ | const formik = useFormik({ | ||||
| initialValues: { | initialValues: { | ||||
| mail: Yup.string().email().required(t("login.usernameRequired")), | mail: Yup.string().email().required(t("login.usernameRequired")), | ||||
| password: Yup.string().required(t("login.passwordRequired")).min(8), | password: Yup.string().required(t("login.passwordRequired")).min(8), | ||||
| }), | }), | ||||
| onSubmit: handleForm, | |||||
| onSubmit: props.handleSubmit, | |||||
| validateOnBlur: true, | validateOnBlur: true, | ||||
| enableReinitialize: true, | enableReinitialize: true, | ||||
| }); | }); | ||||
| FirstPartOfRegistration.propTypes = { | FirstPartOfRegistration.propTypes = { | ||||
| children: PropTypes.node, | children: PropTypes.node, | ||||
| handleSubmit: PropTypes.func, | handleSubmit: PropTypes.func, | ||||
| mailError: PropTypes.string, | |||||
| }; | }; | ||||
| export default FirstPartOfRegistration; | export default FirstPartOfRegistration; |
| RegisterTitle, | RegisterTitle, | ||||
| } from "./Register.styled"; | } from "./Register.styled"; | ||||
| import { ReactComponent as Logo } from "../../../assets/images/svg/logo-vertical.svg"; | import { ReactComponent as Logo } from "../../../assets/images/svg/logo-vertical.svg"; | ||||
| import { NavLink } from "react-router-dom"; | |||||
| import { NavLink, useHistory } from "react-router-dom"; | |||||
| import { Trans, useTranslation } from "react-i18next"; | import { Trans, useTranslation } from "react-i18next"; | ||||
| import Link from "../../../components/Link/Link"; | import Link from "../../../components/Link/Link"; | ||||
| import StepProgress from "../../../components/StepProgress/StepProgress"; | import StepProgress from "../../../components/StepProgress/StepProgress"; | ||||
| // import { REGISTER_SUCCESSFUL_PAGE } from "../../../constants/pages"; | |||||
| import { REGISTER_SUCCESSFUL_PAGE } from "../../../constants/pages"; | |||||
| import FirstPartOfRegistration from "./FirstPart/FirstPartOfRegistration"; | import FirstPartOfRegistration from "./FirstPart/FirstPartOfRegistration"; | ||||
| import SecondPartOfRegistration from "./SecondPart/SecondPartOfRegistration"; | import SecondPartOfRegistration from "./SecondPart/SecondPartOfRegistration"; | ||||
| import ThirdPartOfRegistration from "./ThirdPart/ThirdPartOfRegistration"; | import ThirdPartOfRegistration from "./ThirdPart/ThirdPartOfRegistration"; | ||||
| const Register = () => { | const Register = () => { | ||||
| const { t } = useTranslation(); | const { t } = useTranslation(); | ||||
| // const history = useHistory(); | |||||
| const history = useHistory(); | |||||
| const dispatch = useDispatch(); | const dispatch = useDispatch(); | ||||
| const [currentStep, setCurrentStep] = useState(1); | const [currentStep, setCurrentStep] = useState(1); | ||||
| const [informations, setInformations] = useState({}); | const [informations, setInformations] = useState({}); | ||||
| const [mailError, setMailError] = useState(""); | |||||
| const [PIBError, setPIBError] = useState(""); | |||||
| const handleResponseSuccess = () => { | |||||
| history.push(REGISTER_SUCCESSFUL_PAGE); | |||||
| }; | |||||
| const handleResponseError = (error) => { | |||||
| console.log(error); | |||||
| if (error.type === "email") { | |||||
| const { mail } = informations; | |||||
| setInformations({}); | |||||
| setCurrentStep(1); | |||||
| setMailError(mail); | |||||
| } else { | |||||
| const { mail, password, PIB } = informations; | |||||
| setInformations({ mail, password }); | |||||
| setCurrentStep(2); | |||||
| setPIBError(PIB); | |||||
| } | |||||
| }; | |||||
| const registerUser = (values) => { | const registerUser = (values) => { | ||||
| dispatch(fetchRegisterUser(values)); | |||||
| } | |||||
| dispatch( | |||||
| fetchRegisterUser(values), | |||||
| handleResponseSuccess, | |||||
| handleResponseError | |||||
| ); | |||||
| }; | |||||
| const handleSubmit = (values) => { | const handleSubmit = (values) => { | ||||
| if (currentStep !== 3) { | if (currentStep !== 3) { | ||||
| setCurrentStep((prevState) => prevState + 1); | setCurrentStep((prevState) => prevState + 1); | ||||
| } else { | } else { | ||||
| registerUser({...informations, ...values}); | |||||
| registerUser({ ...informations, ...values }); | |||||
| } | } | ||||
| setInformations({ ...informations, ...values }); | setInformations({ ...informations, ...values }); | ||||
| }; | }; | ||||
| </ProgressContainer> | </ProgressContainer> | ||||
| {currentStep === 1 && ( | {currentStep === 1 && ( | ||||
| <FirstPartOfRegistration handleSubmit={handleSubmit} /> | |||||
| <FirstPartOfRegistration | |||||
| handleSubmit={handleSubmit} | |||||
| error={mailError} | |||||
| /> | |||||
| )} | )} | ||||
| {currentStep === 2 && ( | {currentStep === 2 && ( | ||||
| <SecondPartOfRegistration handleSubmit={handleSubmit} /> | |||||
| <SecondPartOfRegistration | |||||
| handleSubmit={handleSubmit} | |||||
| error={PIBError} | |||||
| /> | |||||
| )} | )} | ||||
| {currentStep === 3 && ( | {currentStep === 3 && ( | ||||
| <ThirdPartOfRegistration handleSubmit={handleSubmit} /> | <ThirdPartOfRegistration handleSubmit={handleSubmit} /> |
| export default { | export default { | ||||
| accounts: { | accounts: { | ||||
| get: 'accounts/{accountUid}', | get: 'accounts/{accountUid}', | ||||
| forgotPassword: 'forgotPassword', | |||||
| forgotPassword: 'forgot-password', | |||||
| resetPassword: 'resetPassword', | resetPassword: 'resetPassword', | ||||
| getCurrentUserPermissions: | getCurrentUserPermissions: | ||||
| 'accounts/{currentAccountUid}/users/{currentUserUid}/permissions', | 'accounts/{currentAccountUid}/users/{currentUserUid}/permissions', |
| import queryString from 'qs'; | import queryString from 'qs'; | ||||
| const request = axios.create({ | const request = axios.create({ | ||||
| baseURL: "http://192.168.88.175:3001/", | |||||
| baseURL: "http://192.168.88.175:3005/", | |||||
| headers: { | headers: { | ||||
| 'Content-Type': 'application/json', | 'Content-Type': 'application/json', | ||||
| }, | }, |
| function* fetchRegisterUser({payload}) { | function* fetchRegisterUser({payload}) { | ||||
| try { | try { | ||||
| const requestData = { | const requestData = { | ||||
| name: "Djordje Mitrovic", | |||||
| email: payload.mail.toString(), | email: payload.mail.toString(), | ||||
| password: payload.password.toString(), | password: payload.password.toString(), | ||||
| roles: [ | |||||
| { | |||||
| role: "User" | |||||
| } | |||||
| ], | |||||
| company: { | company: { | ||||
| name: payload.nameOfFirm.toString(), | name: payload.nameOfFirm.toString(), | ||||
| PIB: payload.PIB.toString(), | PIB: payload.PIB.toString(), | ||||
| console.log(requestData); | console.log(requestData); | ||||
| const data = yield call(attemptRegister, requestData); | const data = yield call(attemptRegister, requestData); | ||||
| console.log(data); | console.log(data); | ||||
| if (payload.handleResponseSuccess) { | |||||
| yield call(payload.handleResponseSuccess); | |||||
| } | |||||
| } catch (e) { | } catch (e) { | ||||
| console.log(e); | |||||
| console.log(e.response); | |||||
| if (payload.handleResponseError) { | |||||
| yield call(payload.handleResponseError); | |||||
| } | |||||
| } | } | ||||
| } | } | ||||