Merge branch 'register-refactor' of selenaaasi/trampa-frontend into master

src/i18n/resources/rs.js

@@ -1,136 +1,145 @@
 export default {
-    app: {
-        title: 'Trampa'
-      },
-      refresh: {
-        title: 'Jel si aktivan?',
-        cta:
-          "You were registered as not active, please confirm that you are active in the next minute, if you don't you will be logged out.",
-      },
-      common: {
-        close: 'Zatvori',
-        send: "Pošalji",
-        sendAgain: "Pošalji ponovo.",
-        trademark: 'TM',
-        search: 'Pretraga',
-        error: 'Greška',
-        continue: 'Nastavi',
-        labelUsername: 'Username',
-        labelEmail: 'Email',
-        labelPassword: 'Lozinka',
-        labelFirm: "Ime Firme",
-        labelPIB: "PIB",
-        labelPhone: "Telefon",
-        labelLocation: "Lokacija",
-        labelWebsite: "Adresa Websajta",
-        next: 'Sledeće',
-        nextPage: 'Sledeća strana',
-        previousPage: 'Prethodna strana',
-        back: 'Nazad',
-        goBack: 'Idi nazad',
-        ok: 'Ok',
-        done: 'Gotovo',
-        confirm: 'Potvrdi',
-        printDownload: 'Print/Download',
-        cancel: 'Obustavi',
-        remove: 'Izbriši',
-        invite: 'Pozovi',
-        save: 'Sačuvaj',
-        complete: 'Završi',
-        download: 'Download',
-        yes: 'Da',
-        no: 'Ne',
-        to: 'do',
-        select: 'Izaberi...',
-        none: 'Ni jedan',
-        date: {
-          range: '{{start}} do {{end}}',
-        },
-      },
-    login: {
-        welcome: 'React template',
-        welcomeText: 'Trampa sa kolegama na dohvat ruke',
-        dontHaveAccount: "Nemate nalog? ",
-        emailFormat: 'Nevalidan format email adrese!',
-        emailRequired: 'Email adresa je obavezna!',
-        noUsers: 'Ne postoji korisnik sa zadatom email adresom.',
-        passwordStrength: 'Your password is {{strength}}.',
-        passwordLength: 'Lozinka mora imati najmanje 8 karaktera!',
-        signUpRecommendation: 'Registrujte se.',
-        email: 'Unesite email adresu kako biste se prijavili',
-        logInTitle: 'Uloguj se',
-        logIn: 'Uloguj se',
-        signUp: 'Registrujte se.',
-        usernameRequired: 'Username je obavezan!',
-        passwordRequired: 'Lozinka je obavezna!',
-        forgotYourPassword: 'Zaboravili ste lozinku?',
-        forgotPasswordEmail:'Email',
-        useDifferentEmail: 'Iskoristite drugačiju lozinku.',
-        wrongCredentials: 'Pogrešan mail ili lozinka!'
-      },
-      password: {
-        weak: 'slaba',
-        average: 'srednja',
-        good: 'dobra',
-        strong: 'jaka',
-      },
-      register: {
-        title: "Registruj se",
-        descriptionMain: "Trampa sa kolegama na dohvat ruke",
-        descriptionFirst: "Email i Lozinka biće Vam primarni način da se ulogujete u aplikaciju",
-        descriptionSecond: 'Ovaj korak nije obavezan za razgledanje artikla ali za proces trampe je obavezan. Uvek možete popuniti ova polja u podešavanjima naloga kasnije',
-        descriptionThird: 'Ovaj korak nije obavezan za razgledanje artikla ali za proces trampe je obavezan. Uvek možete popuniti ova polja u podešavanjima naloga kasnije',
-        loginText: "Već posedujete nalog?",
-        emailFormat: 'Nevalidan format email adrese!',
-        emailTaken: "E-mail je zauzet!",
-        login: "Ulogujte se.",
-        acceptTerms: `Pri klikom na dugme "Registruj se", prihvatate naše`,
-        terms: "Uslove Korišćenja",
-        success: 'Registracija Uspešna',
-        PIBTaken: "PIB je zauzet!",
-        PIBnoOfCharacters: "PIB mora imati 9 karaktera!",
-        welcome: 'Dobro došli na trampu, želimo vam uspešno trampovanje!',
-      },
-      forgotPassword: {
-        title: 'Povrati lozinku',
-        description: 'Molimo vas unesite email sa koji cemo vam poslati link za povratak lozinke',
-        label: 'Pošalji email',
-        emailRequired: 'Email je obavezan!',
-        emailFormat: 'Nevalidan format email adrese!',
-        mailSent: "E-Mail poslat!",
-        mailSentDescription: "Poslat vam je email sa instrukcijama kako da resetujete lozinku",
-        mailNotFound: "Mejl nije povezan ni sa jednim nalogom!",
-        notRecievedMail: "Niste dobili email?",
-        checkSpam: "U slučaju da Vam ne stigne email, pogledajte <strong>Spam</strong> folder email provajdera",
-        forgotPassword: {
-          title: 'Zaboravili ste lozinku',
-          subtitle:
-            'Odgovorite na tajno pitanje kako biste povratili svoj nalog: ',
-          label: 'Obnovite lozinku',
-        },
-      },
-      resetPassword: {
-        title: "Unesite novu lozinku",
-        description: "Poslali ste zahtev za promenu lozinke, molimo Vas da unesete novu željenu lozinku",
-        passwordLabel: "Nova Lozinka",
-        passwordConfirmLabel: "Potvrdite Lozinku",
-        buttonText: "Postavi lozinku"
-      },
-      filters: {
-        title: "Filteri",
-        cancel: "Poništi filtere",
-        usefilters: 'Primeni filtere',
-        categories: {
-          title: "Kategorija",
-          placeholder: 'Pretraži kategorije...'
-        },
-        subcategories: {
-          title: "Podkategorija",
-          placeholder: "Pretraži podkategorije..."
-        },
-        location: {
-          title: "Lokacija",
-          placeholder: "Pretraži gradove..."
-        }
-      }
-}
+  app: {
+    title: "Trampa",
+  },
+  refresh: {
+    title: "Jel si aktivan?",
+    cta: "You were registered as not active, please confirm that you are active in the next minute, if you don't you will be logged out.",
+  },
+  common: {
+    close: "Zatvori",
+    send: "Pošalji",
+    sendAgain: "Pošalji ponovo.",
+    trademark: "TM",
+    search: "Pretraga",
+    error: "Greška",
+    continue: "Nastavi",
+    labelUsername: "Username",
+    labelEmail: "Email",
+    labelPassword: "Lozinka",
+    labelFirm: "Ime Firme",
+    labelPIB: "PIB",
+    labelPhone: "Telefon",
+    labelLocation: "Lokacija",
+    labelWebsite: "Adresa Websajta",
+    next: "Sledeće",
+    nextPage: "Sledeća strana",
+    previousPage: "Prethodna strana",
+    back: "Nazad",
+    goBack: "Idi nazad",
+    ok: "Ok",
+    done: "Gotovo",
+    confirm: "Potvrdi",
+    printDownload: "Print/Download",
+    cancel: "Obustavi",
+    remove: "Izbriši",
+    invite: "Pozovi",
+    save: "Sačuvaj",
+    complete: "Završi",
+    download: "Download",
+    yes: "Da",
+    no: "Ne",
+    to: "do",
+    select: "Izaberi...",
+    none: "Ni jedan",
+    date: {
+      range: "{{start}} do {{end}}",
+    },
+  },
+  login: {
+    welcome: "React template",
+    welcomeText: "Trampa sa kolegama na dohvat ruke",
+    dontHaveAccount: "Nemate nalog? ",
+    emailFormat: "Nevalidan format email adrese!",
+    emailRequired: "Email adresa je obavezna!",
+    noUsers: "Ne postoji korisnik sa zadatom email adresom.",
+    passwordStrength: "Your password is {{strength}}.",
+    passwordLength: "Lozinka mora imati najmanje 8 karaktera!",
+    signUpRecommendation: "Registrujte se.",
+    email: "Unesite email adresu kako biste se prijavili",
+    logInTitle: "Uloguj se",
+    logIn: "Uloguj se",
+    signUp: "Registrujte se.",
+    usernameRequired: "Username je obavezan!",
+    passwordRequired: "Lozinka je obavezna!",
+    forgotYourPassword: "Zaboravili ste lozinku?",
+    forgotPasswordEmail: "Email",
+    useDifferentEmail: "Iskoristite drugačiju lozinku.",
+    wrongCredentials: "Pogrešan mail ili lozinka!",
+  },
+  password: {
+    weak: "slaba",
+    average: "srednja",
+    good: "dobra",
+    strong: "jaka",
+  },
+  register: {
+    title: "Registruj se",
+    descriptionMain: "Trampa sa kolegama na dohvat ruke",
+    descriptionFirst:
+      "Email i Lozinka biće Vam primarni način da se ulogujete u aplikaciju",
+    descriptionSecond:
+      "Ovaj korak nije obavezan za razgledanje artikla ali za proces trampe je obavezan. Uvek možete popuniti ova polja u podešavanjima naloga kasnije",
+    descriptionThird:
+      "Ovaj korak nije obavezan za razgledanje artikla ali za proces trampe je obavezan. Uvek možete popuniti ova polja u podešavanjima naloga kasnije",
+    loginText: "Već posedujete nalog?",
+    emailFormat: "Nevalidan format email adrese!",
+    emailTaken: "E-mail je zauzet!",
+    login: "Ulogujte se.",
+    acceptTerms: `Pri klikom na dugme "Registruj se", prihvatate naše`,
+    terms: "Uslove Korišćenja",
+    success: "Registracija Uspešna",
+    PIBTaken: "PIB je zauzet!",
+    PIBnoOfCharacters: "PIB mora imati 9 karaktera!",
+    welcome: "Dobro došli na trampu, želimo vam uspešno trampovanje!",
+    imageError: "Slika je obavezna!",
+  },
+  forgotPassword: {
+    title: "Povrati lozinku",
+    description:
+      "Molimo vas unesite email sa koji cemo vam poslati link za povratak lozinke",
+    label: "Pošalji email",
+    emailRequired: "Email je obavezan!",
+    emailFormat: "Nevalidan format email adrese!",
+    mailSent: "E-Mail poslat!",
+    mailSentDescription:
+      "Poslat vam je email sa instrukcijama kako da resetujete lozinku",
+    mailNotFound: "Mejl nije povezan ni sa jednim nalogom!",
+    notRecievedMail: "Niste dobili email?",
+    checkSpam:
+      "U slučaju da Vam ne stigne email, pogledajte <strong>Spam</strong> folder email provajdera",
+    forgotPassword: {
+      title: "Zaboravili ste lozinku",
+      subtitle: "Odgovorite na tajno pitanje kako biste povratili svoj nalog: ",
+      label: "Obnovite lozinku",
+    },
+  },
+  resetPassword: {
+    title: "Unesite novu lozinku",
+    description:
+      "Poslali ste zahtev za promenu lozinke, molimo Vas da unesete novu željenu lozinku",
+    passwordLabel: "Nova Lozinka",
+    passwordConfirmLabel: "Potvrdite Lozinku",
+    buttonText: "Postavi lozinku",
+  },
+  filters: {
+    title: "Filteri",
+    cancel: "Poništi filtere",
+    usefilters: "Primeni filtere",
+    categories: {
+      title: "Kategorija",
+      placeholder: "Pretraži kategorije...",
+    },
+    subcategories: {
+      title: "Podkategorija",
+      placeholder: "Pretraži podkategorije...",
+    },
+    location: {
+      title: "Lokacija",
+      placeholder: "Pretraži gradove...",
+    },
+  },
+  apiErrors: {
+    somethingWentWrong: "Greska sa serverom!"
+  }
+};

src/pages/ForgotPasswordPage/ForgotPassword.styled.js

@@ -51,4 +51,20 @@ export const ErrorMessage = styled(Typography)`
   position: relative;
   top: -7px;
   font-size: 14px;
-`
+`
+export const LoginAltText = styled(Typography)`
+  font-family: "Poppins";
+  color: ${selectedTheme.primaryText};
+  font-size: 14px;
+  padding-right: 6px;
+  line-height: 14px;
+`;
+export const LoginTextContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  margin-top: 36px;
+  justify-content: center;
+  @media (max-height: 800px) {
+    margin-top: 26px;
+  }
+`;

src/pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent.js

@@ -28,7 +28,11 @@ const MailSent = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    setEmail(location.state.email);
+    if (location.state.email) {
+      setEmail(location.state.email);
+    } else {
+      history.push("/login");
+    }
   }, []);
 
   const navigateLogin = () => {

src/pages/ForgotPasswordPage/ForgotPasswordPage.js

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { useFormik } from "formik";
 import { useTranslation } from "react-i18next";
-import * as Yup from "yup";
 // import i18next from "i18next";
 import { ReactComponent as Logo } from "../../assets/images/svg/logo-vertical.svg";
 import {
@@ -10,14 +9,19 @@ import {
   ForgotPasswordTitle,
   FormContainer,
   ErrorMessage,
+  LoginTextContainer,
+  LoginAltText,
 } from "./ForgotPassword.styled";
 import { TextField } from "../../components/TextFields/TextField/TextField";
 import { PrimaryButton } from "../../components/Buttons/PrimaryButton/PrimaryButton";
-import { useHistory } from "react-router-dom";
+import { NavLink, useHistory } from "react-router-dom";
 import { FORGOT_PASSWORD_MAIL_SENT } from "../../constants/pages";
 import selectedTheme from "../../themes";
 import { useDispatch } from "react-redux";
 import { forgotPassword } from "../../store/actions/user/userActions";
+import forgotPasswordValidation from "../../validations/forgotPasswordValidation";
+import forgotPasswordInitialValues from "../../initialValues/forgotPasswordInitialValues";
+import Link from "../../components/Link/Link";
 
 const ForgotPasswordPage = () => {
   const history = useHistory();
@@ -25,12 +29,6 @@ const ForgotPasswordPage = () => {
   const dispatch = useDispatch();
   const [emailNotFoundStatus, setEmailNotFoundStatus] = useState(false);
 
-  const forgotPasswordValidationSchema = Yup.object().shape({
-    email: Yup.string()
-      .required(t("forgotPassword.emailRequired"))
-      .email(t("forgotPassword.emailFormat")),
-  });
-
   const handleResponseSuccess = () => {
     history.push({
       pathname: FORGOT_PASSWORD_MAIL_SENT,
@@ -52,10 +50,8 @@ const ForgotPasswordPage = () => {
   };
 
   const formik = useFormik({
-    initialValues: {
-      email: "",
-    },
-    validationSchema: forgotPasswordValidationSchema,
+    initialValues: forgotPasswordInitialValues,
+    validationSchema: forgotPasswordValidation,
     onSubmit: handleSubmit,
     validateOnBlur: true,
     enableReinitialize: true,
@@ -109,6 +105,19 @@ const ForgotPasswordPage = () => {
         >
           {t("common.send")}
         </PrimaryButton>
+
+        <LoginTextContainer>
+          <LoginAltText>{t("register.loginText")}</LoginAltText>
+
+          <Link
+            to="/login"
+            component={NavLink}
+            underline="hover"
+            align="center"
+          >
+            {t("register.login")}
+          </Link>
+        </LoginTextContainer>
       </FormContainer>
     </ForgotPasswordPageContainer>
   );

src/pages/ForgotPasswordPage/ForgotPasswordPageMUI.js

@@ -1,96 +0,0 @@
-import React from 'react';
-import { useFormik } from 'formik';
-import { useTranslation } from 'react-i18next';
-import * as Yup from 'yup';
-import i18next from 'i18next';
-import {
-	Box,
-	Container,
-	Typography,
-	Button,
-	TextField,
-	Link,
-	Grid,
-} from '@mui/material';
-import Backdrop from '../../components/MUI/BackdropComponent';
-import { LOGIN_PAGE } from '../../constants/pages';
-import { NavLink } from 'react-router-dom';
-
-const forgotPasswordValidationSchema = Yup.object().shape({
-	email: Yup.string()
-		.required(i18next.t('forgotPassword.emailRequired'))
-		.email(i18next.t('forgotPassword.emailFormat')),
-});
-
-const ForgotPasswordPage = () => {
-	const { t } = useTranslation();
-
-	const handleSubmit = (values) => {
-		console.log('Values', values);
-	};
-
-	const formik = useFormik({
-		initialValues: {
-			email: '',
-		},
-		validationSchema: forgotPasswordValidationSchema,
-		onSubmit: handleSubmit,
-		validateOnBlur: true,
-		enableReinitialize: true,
-	});
-
-	return (
-		<Container component="main" maxWidth="md">
-			<Box
-				sx={{
-					marginTop: 32,
-					display: 'flex',
-					flexDirection: 'column',
-					alignItems: 'center',
-				}}
-			>
-				<Typography component="h1" variant="h5">
-					{t('forgotPassword.title')}
-				</Typography>
-				<Box
-					component="form"
-					onSubmit={formik.handleSubmit}
-					sx={{ position: 'relative', mt: 1, p: 1 }}
-				>
-					<Backdrop position="absolute" isLoading={false} />
-					<TextField
-						name="email"
-						label={t('login.forgotPasswordEmail')}
-						margin="normal"
-						value={formik.values.email}
-						onChange={formik.handleChange}
-						error={formik.touched.email && Boolean(formik.errors.email)}
-						helperText={formik.touched.email && formik.errors.email}
-						autoFocus
-						fullWidth
-					/>
-					<Button
-						type="submit"
-						variant="contained"
-						sx={{ mt: 3, mb: 2 }}
-						fullWidth
-					>
-						{t('forgotPassword.label')}
-					</Button>
-					<Grid container justifyContent="center">
-						<Link
-							to={LOGIN_PAGE}
-							component={NavLink}
-							variant="body2"
-							underline="hover"
-						>
-							{t('common.back')}
-						</Link>
-					</Grid>
-				</Box>
-			</Box>
-		</Container>
-	);
-};
-
-export default ForgotPasswordPage;

src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.js

@@ -83,7 +83,7 @@ const FirstPartOfRegistration = (props) => {
         InputProps={{
           endAdornment: (
             <IconButton onClick={handleClickShowPassword}>
-              {showPassword ? <VisibilityOn /> : <VisibilityOff />}
+              {showPassword ? <VisibilityOff /> : <VisibilityOn />}
             </IconButton>
           ),
         }}

src/pages/RegisterPages/Register/Register.js

@@ -9,6 +9,10 @@ import {
   ProgressContainer,
   RegisterDescription,
   RegisterTitle,
+  ProfileImagePicker,
+  ProfilePicture,
+  RegisterPageContent,
+  ErrorMessage,
 } from "./Register.styled";
 import { ReactComponent as Logo } from "../../../assets/images/svg/logo-vertical.svg";
 import { NavLink, useHistory } from "react-router-dom";
@@ -28,19 +32,21 @@ const Register = () => {
   const dispatch = useDispatch();
   const [currentStep, setCurrentStep] = useState(1);
   const [informations, setInformations] = useState({}); // Values of fields typed in all steps
-  const [mailError, setMailError] = useState("");   // Wrong mail typed
-  const [mailErrorMessage, setMailErrorMessage] = useState("");   // Error message caused by typing wrong mail
-  const [PIBError, setPIBError] = useState("");  // Wrong PIB typed
-  const [PIBErrorMessage, setPIBErrorMessage] = useState("");  // Error message caused by typing wrong PIB
+  const [mailError, setMailError] = useState(""); // Wrong mail typed
+  const [mailErrorMessage, setMailErrorMessage] = useState(""); // Error message caused by typing wrong mail
+  const [PIBError, setPIBError] = useState(""); // Wrong PIB typed
+  const [PIBErrorMessage, setPIBErrorMessage] = useState(""); // Error message caused by typing wrong PIB
+  const [imageError, setImageError] = useState(false); // Not picked image
 
   const handleResponseSuccess = () => {
     history.push(REGISTER_SUCCESSFUL_PAGE);
   };
 
   const handleResponseError = (error) => {
+    console.log(error);
+    const { mail, password, PIB, image } = informations;
     if (error.type === "mail") {
-      const { mail } = informations;
-      setInformations({});
+      setInformations({image});
       setCurrentStep(1);
       setMailError(mail);
       if (
@@ -52,8 +58,7 @@ const Register = () => {
         setMailErrorMessage(t("register.emailFormat"));
       }
     } else {
-      const { mail, password, PIB } = informations;
-      setInformations({ mail, password });
+      setInformations({ mail, password, image });
       setCurrentStep(2);
       setPIBError(PIB.toString());
       setPIBErrorMessage(t("register.PIBTaken"));
@@ -70,67 +75,93 @@ const Register = () => {
     if (currentStep !== 3) {
       setCurrentStep((prevState) => prevState + 1);
     } else {
-      registerUser({ ...informations, ...values });
+      if (!informations.image) {
+        setImageError(true);
+      } else {
+        registerUser({ ...informations, ...values });
+      }
     }
     setInformations({ ...informations, ...values });
   };
 
+  const setImage = (image) => {
+    setImageError(false);
+    setInformations(prevInfo => ({
+      ...prevInfo,
+      image
+    }))
+  }
+
   const goStepBack = (stepNumber) => {
     setCurrentStep(stepNumber);
+    const { mail, password, image } = informations;
     if (stepNumber === 1) {
-      setInformations({});
+      setInformations({image});
     }
     if (stepNumber === 2) {
-      const { mail, password } = informations;
-      setInformations({ mail, password });
+      
+      setInformations({ mail, password, image });
     }
   };
 
   return (
     <RegisterPageContainer currentstep={currentStep}>
-      <Logo />
-
-      <RegisterTitle component="h1" variant="h5">
-        {t("register.title")}
-      </RegisterTitle>
-
-      <RegisterDescription component="h1" variant="h6">
-        {t("register.descriptionMain")}
-      </RegisterDescription>
-
-      <ProgressContainer>
-        <StepProgress
-          functions={[() => goStepBack(1), () => goStepBack(2)]}
-          current={currentStep}
-          numberOfSteps={3}
-        />
-      </ProgressContainer>
-
-      {currentStep === 1 && (
-        <FirstPartOfRegistration
-          handleSubmit={handleSubmit}
-          error={mailError}
-          errorMessage={mailErrorMessage}
-        />
-      )}
-      {currentStep === 2 && (
-        <SecondPartOfRegistration
-          handleSubmit={handleSubmit}
-          error={PIBError}
-          errorMessage={PIBErrorMessage}
-        />
-      )}
-      {currentStep === 3 && (
-        <ThirdPartOfRegistration handleSubmit={handleSubmit} />
-      )}
-
-      <LoginTextContainer>
-        <LoginAltText>{t("register.loginText")}</LoginAltText>
-
-        <Link to="/login" component={NavLink} underline="hover" align="center">
-          {t("register.login")}
-        </Link>
-      </LoginTextContainer>
+      <RegisterPageContent>
+        <Logo />
+
+        <RegisterTitle component="h1" variant="h5">
+          {t("register.title")}
+        </RegisterTitle>
+
+        <RegisterDescription component="h1" variant="h6">
+          {t("register.descriptionMain")}
+        </RegisterDescription>
+
+        <ProgressContainer>
+          <StepProgress
+            functions={[() => goStepBack(1), () => goStepBack(2)]}
+            current={currentStep}
+            numberOfSteps={3}
+          />
+        </ProgressContainer>
+
+        <ProfileImagePicker setImage={setImage} >
+          <ProfilePicture />
+        </ProfileImagePicker>
+
+        {currentStep === 1 && (
+          <FirstPartOfRegistration
+            handleSubmit={handleSubmit}
+            error={mailError}
+            errorMessage={mailErrorMessage}
+          />
+        )}
+        {currentStep === 2 && (
+          <SecondPartOfRegistration
+            handleSubmit={handleSubmit}
+            error={PIBError}
+            errorMessage={PIBErrorMessage}
+          />
+        )}
+        {currentStep === 3 && (
+          <ThirdPartOfRegistration handleSubmit={handleSubmit} />
+        )}
+
+        {imageError && <ErrorMessage>{t("register.imageError")}</ErrorMessage>}
+
+        <LoginTextContainer>
+          <LoginAltText>{t("register.loginText")}</LoginAltText>
+
+          <Link
+            to="/login"
+            component={NavLink}
+            underline="hover"
+            align="center"
+          >
+            {t("register.login")}
+          </Link>
+        </LoginTextContainer>
+      </RegisterPageContent>
 
       <Footer>
         <FooterText>

src/pages/RegisterPages/Register/Register.styled.js

@@ -1,9 +1,11 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
+import ImagePicker from "../../../components/ImagePicker/ImagePicker";
 import selectedTheme from "../../../themes";
+import { ReactComponent as ProfilePictureSVG } from "../../../assets/images/profile-picture.svg";
 
 export const RegisterPageContainer = styled(Container)`
-  margin-top: 100px;
+  margin-top: 72px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -11,6 +13,8 @@ export const RegisterPageContainer = styled(Container)`
   padding: 0;
   flex: 1;
   position: relative;
+  transition: 1s all;
+  ${props => props.currentstep === 3 && `margin-top: 40px`};
   @media (max-height: 900px) {
     margin-top: 60px;
   }
@@ -18,8 +22,8 @@ export const RegisterPageContainer = styled(Container)`
     margin-top: 30px;
     flex: none;
     height: 95vh;
-    ${props => props.currentstep === 3 && `height: 105vh`};
-    ${props => props.currentstep === 2 && `height: 100vh`};
+    ${(props) => props.currentstep === 3 && `height: 105vh`};
+    ${(props) => props.currentstep === 2 && `height: 100vh`};
   }
 `;
 export const RegisterTitle = styled(Typography)`
@@ -34,7 +38,7 @@ export const RegisterTitle = styled(Typography)`
   color: ${selectedTheme.primaryPurple};
   margin-top: 34px;
   @media (max-height: 800px) {
-    margin-top: 26px;  
+    margin-top: 26px;
   }
 `;
 export const RegisterDescription = styled(Typography)`
@@ -51,8 +55,8 @@ export const RegisterDescription = styled(Typography)`
   color: ${selectedTheme.primaryGrayText};
   margin-bottom: 20px;
   @media (max-height: 800px) {
-   margin-bottom: 14px;
-   margin-top: 6px; 
+    margin-bottom: 14px;
+    margin-top: 6px;
   }
 `;
 export const FormContainer = styled(Box)`
@@ -64,7 +68,7 @@ export const LoginAltText = styled(Typography)`
   font-size: 14px;
   padding-right: 6px;
   line-height: 14px;
-`
+`;
 export const LoginTextContainer = styled(Box)`
   display: flex;
   flex-direction: row;
@@ -73,11 +77,11 @@ export const LoginTextContainer = styled(Box)`
   @media (max-height: 800px) {
     margin-top: 26px;
   }
-`
+`;
 export const ProgressContainer = styled(Container)`
-    width: 100%;
-    padding: 0;
-`
+  width: 100%;
+  padding: 0;
+`;
 export const Footer = styled(Box)`
   position: absolute;
   bottom: 36px;
@@ -88,7 +92,7 @@ export const Footer = styled(Box)`
   @media (max-height: 800px) {
     bottom: 10px;
   }
-`
+`;
 export const FooterText = styled(Typography)`
   font-family: "Open Sans";
   color: #505050;
@@ -98,4 +102,46 @@ export const FooterText = styled(Typography)`
   font-weight: 400;
   padding: 0;
   font-size: 12px;
+`;
+
+export const ProfileImagePicker = styled(ImagePicker)`
+  background: none;
+  margin: 36px;
+  background: ${selectedTheme.primaryIconBackgroundColor};
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%235A3984FF' stroke-width='2' stroke-dasharray='7%2c 12' stroke-dashoffset='44' stroke-linecap='square'/%3e%3c/svg%3e");
+  border-radius: 100px;
+  overflow: hidden;
+  position: relative;
+  margin-bottom: 5px;
+`;
+export const ProfilePicture = styled(ProfilePictureSVG)`
+  position: absolute;
+  left: 36px;
+  top: 24px;
+  z-index: 0;
+`;
+export const RegisterPageContent = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 335px;
+  padding: 0;
+  flex: 1;
+  position: relative;
+  margin-bottom: 100px;
+  @media (max-height: 800px) {
+    flex: none;
+    height: 95vh;
+    ${(props) => props.currentstep === 3 && `height: 105vh`};
+    ${(props) => props.currentstep === 2 && `height: 100vh`};
+  }
+`;
+export const ErrorMessage = styled(Box)`
+  color: red;
+  font-family: "Open Sans";
+  position: relative;
+  top: 5px;
+  text-align: left;
+  font-size: 14px;
+  width: 100%;
 `

src/request/index.js

@@ -2,7 +2,7 @@ import axios from "axios";
 import queryString from "qs";
 
 const request = axios.create({
-  baseURL: "http://192.168.88.175:3005/",
+  baseURL: "http://192.168.88.150:3001/",
   headers: {
     "Content-Type": "application/json",
   },

src/store/middleware/accessTokensMiddleware.js

@@ -13,7 +13,7 @@ import { logoutUser, refreshUserToken } from "../actions/login/loginActions";
 // import { setUserAccessToken } from "../actions/user/userActions";
 
 //Change URL with .env
-const baseURL = "http://192.168.88.175:3005/";
+const baseURL = "http://192.168.88.150:3001/";
 
 //Interceptor unique name
 export const accessTokensMiddlewareInterceptorName = "ACCESS_TOKEN_INTERCEPTOR";

src/store/saga/forgotPasswordSaga.js

@@ -4,8 +4,8 @@ import { FORGOT_PASSWORD, RESET_PASSWORD } from "../actions/user/userActionConst
 
 function* forgotPassword({payload}) {
     try {
-        console.log(payload)
         const data = yield call(forgotPasswordRequest, payload.email);
+        console.log(data);
         if (data) {
             if (payload.handleResponseSuccess) {
                 yield call(payload.handleResponseSuccess);
@@ -13,6 +13,7 @@ function* forgotPassword({payload}) {
         }
     }
     catch(e) {
+        console.log(e);
         if (payload.handleResponseError) {
             yield call(payload.handleResponseError);
         }

src/store/saga/loginSaga.js

@@ -63,8 +63,9 @@ function* fetchUser({ payload }) {
       if (payload.handleApiResponseError) {
         yield call(payload.handleApiResponseError, e.response.status);
       }
-      let errorMessage = yield call(rejectErrorCodeHelper, e);
-      if (e.response.status === 401) {
+      console.log(e.response.status);
+      let errorMessage = yield call(rejectErrorCodeHelper, e.response.status);
+      if (e.response.status === 400) {
         errorMessage = i18next.t("login.wrongCredentials", {
           lng: "rs"
         });

src/store/saga/registerSaga.js

@@ -7,7 +7,7 @@ function* fetchRegisterUser({ payload }) {
     const requestData = {
       email: payload.values.mail.toString(),
       password: payload.values.password.toString(),
-      roles: ["User"],
+      image: payload.values.image.replace("data:image/png;base64,", ""),
       company: {
         name: payload.values.nameOfFirm.toString(),
         PIB: payload.values.PIB.toString(),

src/util/helpers/rejectErrorCodeHelper.js

@@ -1,14 +1,9 @@
-import i18next from 'i18next';
+import i18next from "i18next";
 
-export const rejectErrorCodeHelper = (error) => {
-  if (error?.response?.data?.Errors) {
-    const errorCode = error?.response?.data?.Errors[0]?.Code;
-    const errorMessage = errorCode
-      ? i18next.t(`apiErrors.${errorCode}`)
-      : i18next.t('apiErrors.SomethingWentWrong');
+export const rejectErrorCodeHelper = (errorCode) => {
+  const errorMessage = errorCode
+    ? i18next.t(`apiErrors.${errorCode}`)
+    : i18next.t("apiErrors.SomethingWentWrong");
 
-    return errorMessage;
-  }
-
-  return i18next.t('apiErrors.SomethingWentWrong');
+  return errorMessage;
 };