Login, Register, Forgot password page finished

src/App.js

@@ -1,26 +1,26 @@
-import React from 'react';
-import { Router } from 'react-router-dom';
-import { Helmet } from 'react-helmet-async';
-import i18next from 'i18next';
-import history from './store/utils/history';
-import AppRoutes from './AppRoutes';
-import GlobalStyle from './components/Styles/globalStyles';
+import React from "react";
+import { Router } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
+import i18next from "i18next";
+import history from "./store/utils/history";
+import AppRoutes from "./AppRoutes";
+import GlobalStyle from "./components/Styles/globalStyles";
+import { StyledEngineProvider } from "@mui/material";
 
 const App = () => (
-    <>
-      <Router history={history}>
-        <Helmet>
-          <title>
-            {i18next.t('app.title')}
-          </title>
-        </Helmet>
-            <main className="l-page">
-                <GlobalStyle/>
-                <AppRoutes />
-            </main>
-      </Router>
+  <>
+    <Router history={history}>
+      <Helmet>
+        <title>{i18next.t("app.title")}</title>
+      </Helmet>
+      <main className="l-page">
+        <StyledEngineProvider injectFirst>
+          <GlobalStyle />
+          <AppRoutes />
+        </StyledEngineProvider>
+      </main>
+    </Router>
+  </>
+);
 
-    </>
-  );
-
-export default App;
+export default App;

src/AppRoutes.js

@@ -8,6 +8,9 @@ import {
   NOT_FOUND_PAGE,
   ERROR_PAGE,
   BASE_PAGE,
+  FORGOT_PASSWORD_MAIL_SENT,
+  REGISTER_PAGE,
+  REGISTER_SUCCESSFUL_PAGE,
 } from './constants/pages';
 
 // import LoginPage from './pages/LoginPage/LoginPage';
@@ -19,16 +22,37 @@ import ErrorPage from './pages/ErrorPages/ErrorPage';
 // import ForgotPasswordPage from './pages/ForgotPasswordPage/ForgotPasswordPage';
 import ForgotPasswordPage from './pages/ForgotPasswordPage/ForgotPasswordPageMUI';
 import PrivateRoute from './components/Router/PrivateRoute';
-import LoginT from './pages/LoginPage/LoginT';
+import MailSent from './pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent';
+import Register from './pages/RegisterPages/Register/Register';
+import RegisterSuccessful from './pages/RegisterPages/RegisterSuccessful.js/RegisterSuccessful';
+// import { useDispatch, useSelector } from 'react-redux';
+// import {ReactComponent as Logo} from "./assets/images/svg/big-logo-vertical.svg";
+// import FullPageLoader from './components/Loader/FullPageLoader';
+// import { APP_LOADING } from './store/actions/app/appActionConstants';
+// import { setAppReady } from './store/actions/app/appActions';
 
-const AppRoutes = () => (
+const AppRoutes = () => {
+  //  const dispatch = useDispatch();
+  // const isLoading = useSelector(state => state.loading.[APP_LOADING]);
+  // if (isLoading) {
+  //   setTimeout(() => {
+  //     dispatch(setAppReady(true))
+  //   }, 0)
+  //   return (
+  //     <FullPageLoader />
+  //   )
+  // }
+  return (
   <Switch>
     <Route exact path={BASE_PAGE} component={LoginPage} />
     <Route exact path={LOGIN_PAGE} component={LoginPage} />
-    <Route exact path="/l"><LoginT/></Route>
     <Route path={NOT_FOUND_PAGE} component={NotFoundPage} />
+    <Route path={REGISTER_SUCCESSFUL_PAGE} component={RegisterSuccessful} />
+    <Route path={REGISTER_PAGE} component={Register} />
     <Route path={ERROR_PAGE} component={ErrorPage} />
+    <Route path={FORGOT_PASSWORD_MAIL_SENT} component={MailSent} />
     <Route path={FORGOT_PASSWORD_PAGE} component={ForgotPasswordPage} />
+    
     <PrivateRoute
       exact
       path={HOME_PAGE}
@@ -36,7 +60,7 @@ const AppRoutes = () => (
     />
     <Redirect from="*" to={NOT_FOUND_PAGE} />
   </Switch>
-);
+)};
 
 
 export default AppRoutes;

src/assets/images/svg/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 5.2L3.85714 8L11 1" stroke="#FEB005" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Buttons/PrimaryButton/PrimaryButton.styled.js

@@ -1,15 +1,16 @@
 import { Box, Button } from "@mui/material";
 import styled from "styled-components";
-import { PRIMARY_PURPLE_DISABLED } from "../../../constants/stylesConstants";
+import { PRIMARY_PURPLE_DISABLED, PRIMARY_TEXT_DISABLED_COLOR } from "../../../constants/stylesConstants";
 
 export const ComponentContainer = styled(Box)``;
 
 export const PrimaryButtonStyled = styled(Button)`
-  background-color: ${(props) =>
-    props.variant === "contained" ? props.buttoncolor : "transparent"};
-  border-color: ${(props) =>
+  background-color: ${(props) => props.disabled ? PRIMARY_PURPLE_DISABLED : (
+    props.variant === "contained" ? props.buttoncolor : "transparent")} !important;
+  border-color: ${(props) => 
     props.variant === "outlined" ? props.buttoncolor : "transparent"};
-  color: ${(props) => props.textcolor};
+  color: ${(props) => props.disabled ? PRIMARY_TEXT_DISABLED_COLOR : (
+  props.textcolor)} !important;
   box-shadow: 0 0 0 0;
   font-size: 12px;
   letter-spacing: 1px;
@@ -25,6 +26,5 @@ export const PrimaryButtonStyled = styled(Button)`
   }
   &:disabled {
     background-color: ${PRIMARY_PURPLE_DISABLED};
-    color: ${(props) => props.textcolor};
   }
 `;

src/components/Link/Link.js

@@ -12,11 +12,13 @@ Link.propTypes = {
     href: PropTypes.string,
     children: PropTypes.node,
     font: PropTypes.string,
-    align: PropTypes.oneOf(["left", "right", "center"])
+    align: PropTypes.oneOf(["left", "right", "center"]),
+    fontsize: PropTypes.string
 }
 Link.defaultProps = {
     font: "Poppins",
-    align: "left"
+    align: "left",
+    fontsize: "14px"
 }
 
 export default Link

src/components/Loader/FullPageLoader.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import {ReactComponent as Logo} from "../../assets/images/svg/big-logo-vertical.svg";
+import { ComponentContainer } from './FullPageLoader.styled';
 
 const FullPageLoader = () => {
   return (
-    <div className="c-loader c-loader--page">
-      <div className="c-loader__icon" />
-    </div>
+    <ComponentContainer>
+      <Logo />
+    </ComponentContainer>
   );
 };
 

src/components/Loader/FullPageLoader.styled.js

@@ -0,0 +1,10 @@
+
+import { Container } from "@mui/material";
+import styled from "styled-components";
+
+export const ComponentContainer = styled(Container)`
+    height: 100%;
+    width: 100vw;
+    padding-top: 250px;
+    text-align: center;
+`

src/components/StepProgress/StepProgress.js

@@ -0,0 +1,43 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { ComponentContainer, Progress, StepBar, StepLine } from "./StepProgress.styled";
+import { ReactComponent as Checkmark } from "../../assets/images/svg/checkmark.svg";
+
+const StepProgress = (props) => {
+  const steps = [];
+  for (let i = 1; i <= props.numberOfSteps; i++) {
+    steps.push({
+      done: i < props.current,
+      current: i === props.current,
+    });
+  }
+  return (
+    <ComponentContainer done>
+      {steps.map((item, index) =>
+        index === 0 ? (
+          <StepBar current={item.current} done={item.done}>
+            {item.done ? <Checkmark /> : index+1}
+          </StepBar>
+        ) : (
+          <React.Fragment key={index}>
+            <StepLine done={item.done || item.current} >
+              <Progress done={item.done || item.current} />
+            </StepLine>
+            <StepBar current={item.current} done={item.done}>
+              {item.done ? <Checkmark /> : index+1}
+            </StepBar>
+          </React.Fragment>
+        )
+      )}
+    </ComponentContainer>
+  );
+};
+
+StepProgress.propTypes = {
+  children: PropTypes.node,
+  handleNext: PropTypes.node,
+  current: PropTypes.number,
+  numberOfSteps: PropTypes.number,
+};
+
+export default StepProgress;

src/components/StepProgress/StepProgress.styled.js

@@ -0,0 +1,47 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import {
+  PRIMARY_DARK_GRAY_COLOR,
+  PRIMARY_PURPLE_COLOR,
+} from "../../constants/stylesConstants";
+
+export const ComponentContainer = styled(Box)`
+  display: flex;
+  height: 35px;
+  flex-direction: row;
+  position: relative;
+  left: 2px;
+  width: 100%;
+`;
+
+export const StepLine = styled(Box)`
+  margin-top: 13px;
+  background-color: white;
+  width: 100%;
+  margin-left: -1px;
+  height: 9px;
+`;
+
+export const StepBar = styled(Box)`
+  flex: 0 0 35px;
+  background-color: ${(props) =>
+    props.done ? PRIMARY_PURPLE_COLOR : PRIMARY_DARK_GRAY_COLOR};
+  border-radius: 100%;
+  font-family: "Open Sans";
+  text-align: center;
+  border: 5px solid
+    ${(props) => (props.current || props.done ? PRIMARY_PURPLE_COLOR : "white")};
+  padding-top: 2px;
+  line-height: 19px;
+  margin-left: -2px;
+  font-size: 14px;
+  color: #1d1d1d;
+  z-index: 1;
+  transition: background-color 1s ease;
+`;
+export const Progress = styled(Box)`
+  height: 9px;
+  width: ${props => props.done ? "100%" : "0"};
+  background-color: ${PRIMARY_PURPLE_COLOR};
+  transition: width 1s;
+`;

src/components/Styles/globalStyles.js

@@ -1,6 +1,7 @@
 import { createGlobalStyle } from 'styled-components';
 import OpenSans from "./fonts/OpenSans-Regular.ttf"
 import Poppins from "./fonts/Poppins-Regular.ttf"
+import Mulish from "./fonts/Mulish-Regular.ttf"
 const GlobalStyle = createGlobalStyle`
   @font-face {
     font-family: 'Open Sans';
@@ -16,6 +17,13 @@ const GlobalStyle = createGlobalStyle`
     font-style: normal;
     font-display: auto;
   }
+  @font-face {
+    font-family: "Mulish";
+    src: url(${Mulish}) format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: auto;
+  }
 `;
 
 export default GlobalStyle;

src/constants/pages.js

@@ -3,4 +3,7 @@ export const LOGIN_PAGE = '/login';
 export const FORGOT_PASSWORD_PAGE = '/forgot-password';
 export const HOME_PAGE = '/home';
 export const ERROR_PAGE = '/error-page';
-export const NOT_FOUND_PAGE = '/not-found';
+export const NOT_FOUND_PAGE = '/not-found';
+export const FORGOT_PASSWORD_MAIL_SENT = '/forgot-password/mail-sent'
+export const REGISTER_PAGE = "/register"
+export const REGISTER_SUCCESSFUL_PAGE = "/register/success";

src/constants/stylesConstants.js

@@ -1,4 +1,8 @@
-export const PRIMARY_PURPLE_COLOR = `rgb(90, 57, 132)`;
-export const PRIMARY_YELLOW_COLOR = `rgb(247, 178, 38)`;
-export const PRIMARY_PURPLE_DISABLED = `rgb(75, 92, 100)`;
-export const PRIMARY_BACKGROUND_COLOR = '#F1F1F1';
+export const PRIMARY_PURPLE_COLOR = `#5A3984`;
+export const PRIMARY_YELLOW_COLOR = `#f7b126`;
+export const PRIMARY_PURPLE_DISABLED = `#4D4D4D`;
+export const PRIMARY_BACKGROUND_COLOR = '#F1F1F1';
+export const PRIMARY_TEXT_DISABLED_COLOR = "#F1F1F1";
+export const PRIMARY_TEXT_COLOR = "#4D4D4D";
+export const PRIMARY_GRAY_TEXT_COLOR = "#818181";
+export const PRIMARY_DARK_GRAY_COLOR = "#DCDCDC";

src/i18n/resources/rs.js

@@ -9,6 +9,8 @@ export default {
       },
       common: {
         close: 'Zatvori',
+        send: "Pošalji",
+        sendAgain: "Pošalji ponovo.",
         trademark: 'TM',
         search: 'Pretraga',
         error: 'Greška',
@@ -16,6 +18,11 @@ export default {
         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',
@@ -66,11 +73,29 @@ export default {
         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?",
+        login: "Ulogujte se.",
+        acceptTerms: `Pri klikom na dugme "Registruj se", prihvatate naše`,
+        terms: "Uslove Korišćenja",
+        success: 'Registracija Uspešna',
+        welcome: 'Dobro došli na trampu, želimo vam uspešno trampovanje!'
+      },
       forgotPassword: {
-        title: 'Zaboravili ste lozinku',
+        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",
+        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:

src/pages/ForgotPasswordPage/ForgotPassword.styled.js

@@ -0,0 +1,41 @@
+import { Box, Container, Typography } from "@mui/material";
+import styled from "styled-components";
+import { PRIMARY_GRAY_TEXT_COLOR, PRIMARY_PURPLE_COLOR} from "../../constants/stylesConstants";
+
+export const ComponentContainer = styled(Container)`
+  margin-top: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export const ForgotPasswordTitle = styled(Typography)`
+  font-family: "Open Sans";
+  width: 328px;
+  height: 33px;
+  text-align: center;
+  flex: 1;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 33px;
+  color: ${PRIMARY_PURPLE_COLOR};
+  margin-top: 36px;
+`;
+export const ForgotPasswordDescription = styled(Typography)`
+  font-family: "Open Sans";
+  margin-top: 9px;
+  width: 221px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: ${PRIMARY_GRAY_TEXT_COLOR};
+  margin-bottom: 20px;
+`;
+export const FormContainer = styled(Box)`
+  width: 335px;
+  height: 216px;
+`;

src/pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent.js

@@ -0,0 +1,86 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  ComponentContainer,
+  Description,
+  Footer,
+  FooterText,
+  FormContainer,
+  SendAgainTextContainer,
+  StandardText,
+  Title,
+} from "./MailSent.styled";
+import { ReactComponent as MailSentImage } from "../../../assets/images/svg/mail-sent.svg";
+import { PrimaryButton } from "../../../components/Buttons/PrimaryButton/PrimaryButton";
+import { NavLink, useHistory } from "react-router-dom";
+import Link from "../../../components/Link/Link";
+import { PRIMARY_PURPLE_COLOR } from "../../../constants/stylesConstants";
+import { Trans, useTranslation } from "react-i18next";
+import { LOGIN_PAGE } from "../../../constants/pages";
+
+const MailSent = () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+
+  const navigateLogin = () => {
+    history.replace(LOGIN_PAGE);
+  };
+
+  return (
+    <ComponentContainer>
+
+      <MailSentImage />
+
+      <Title component="h1" variant="h5">
+        {t("forgotPassword.mailSent")}
+      </Title>
+
+      <Description component="h1" variant="h6">
+        {t("forgotPassword.mailSentDescription")}
+      </Description>
+
+      <FormContainer>
+
+        <PrimaryButton
+          type="submit"
+          variant="contained"
+          height="48px"
+          fullWidth={true}
+          buttoncolor={PRIMARY_PURPLE_COLOR}
+          textcolor="white"
+          onClick={navigateLogin}
+        >
+          {t("login.logIn")}
+        </PrimaryButton>
+
+        <SendAgainTextContainer>
+
+          <StandardText>
+            {t("forgotPassword.notRecievedMail")}
+          </StandardText>
+
+          <Link to="#" component={NavLink} underline="hover" align="center" fontsize="16px">
+            {t("common.sendAgain")}
+          </Link>
+
+        </SendAgainTextContainer>
+
+      </FormContainer>
+
+      <Footer>
+
+        <FooterText>
+        <Trans i18nKey="forgotPassword.checkSpam" />
+        </FooterText>
+
+      </Footer>
+      
+    </ComponentContainer>
+  );
+};
+
+MailSent.propTypes = {
+  children: PropTypes.node,
+};
+
+export default MailSent;

src/pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent.styled.js

@@ -0,0 +1,71 @@
+import { Box, Container, Typography } from "@mui/material";
+import styled from "styled-components";
+import { PRIMARY_GRAY_TEXT_COLOR, PRIMARY_PURPLE_COLOR, PRIMARY_TEXT_COLOR } from "../../../constants/stylesConstants";
+
+export const ComponentContainer = styled(Container)`
+  margin-top: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export const Title = styled(Typography)`
+  font-family: "Open Sans";
+  color: ${PRIMARY_TEXT_COLOR};
+  width: 328px;
+  height: 33px;
+  text-align: center;
+  flex: 1;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 33px;
+  color: ${PRIMARY_PURPLE_COLOR};
+  margin-top: 6px;
+`;
+export const Description = styled(Typography)`
+  font-family: "Open Sans";
+  margin-top: 9px;
+  width: 279px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: ${PRIMARY_GRAY_TEXT_COLOR};
+  margin-bottom: 36px;
+`;
+export const FormContainer = styled(Box)`
+  width: 335px;
+  height: 216px;
+`;
+export const StandardText = styled(Typography)`
+  font-family: "Open Sans";
+  color: ${PRIMARY_TEXT_COLOR};
+  font-size: 16px;
+  padding-right: 6px;
+  line-height: 14px;
+  text-align: center;
+`
+export const SendAgainTextContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  margin-top: 36px;
+  justify-content: center;
+`
+export const Footer = styled(Box)`
+  position: absolute;
+  bottom: 36px;
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: center;
+`
+export const FooterText = styled(StandardText)`
+  width: 340px;
+  line-height: 22px;
+  font-weight: 400;
+  padding: 0;
+  font-size: 16px;
+`

src/pages/ForgotPasswordPage/ForgotPasswordPageMUI.js

@@ -1,96 +1,87 @@
-import React from 'react';
-import { useFormik } from 'formik';
-import { useTranslation } from 'react-i18next';
-import * as Yup from 'yup';
-import i18next from 'i18next';
+import React 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 {
-	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';
+  ComponentContainer,
+  ForgotPasswordDescription,
+  ForgotPasswordTitle,
+  FormContainer,
+} from "./ForgotPassword.styled";
+import { TextField } from "../../components/TextFields/TextField/TextField";
+import { PrimaryButton } from "../../components/Buttons/PrimaryButton/PrimaryButton";
+import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants";
+import { useHistory } from "react-router-dom";
+import { FORGOT_PASSWORD_MAIL_SENT } from "../../constants/pages";
 
 const forgotPasswordValidationSchema = Yup.object().shape({
-	email: Yup.string()
-		.required(i18next.t('forgotPassword.emailRequired'))
-		.email(i18next.t('forgotPassword.emailFormat')),
+  email: Yup.string()
+    .required(i18next.t("forgotPassword.emailRequired"))
+    .email(i18next.t("forgotPassword.emailFormat")),
 });
 
 const ForgotPasswordPage = () => {
-	const { t } = useTranslation();
+  const history = useHistory();
+  const { t } = useTranslation();
 
-	const handleSubmit = (values) => {
-		console.log('Values', values);
-	};
+  const handleSubmit = (values) => {
+    console.log("Values", values);
+    history.push(FORGOT_PASSWORD_MAIL_SENT);
+  };
 
-	const formik = useFormik({
-		initialValues: {
-			email: '',
-		},
-		validationSchema: forgotPasswordValidationSchema,
-		onSubmit: handleSubmit,
-		validateOnBlur: true,
-		enableReinitialize: true,
-	});
+  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>
-	);
+  return (
+    <ComponentContainer>
+      <Logo />
+
+      <ForgotPasswordTitle component="h1" variant="h5">
+        {t("forgotPassword.title")}
+      </ForgotPasswordTitle>
+
+      <ForgotPasswordDescription component="h1" variant="h6">
+        {t("forgotPassword.description")}
+      </ForgotPasswordDescription>
+
+      <FormContainer component="form" onSubmit={formik.handleSubmit}>
+        {/* <Backdrop position="absolute" isLoading={isLoading} /> */}
+
+        <TextField
+          name="email"
+          placeholder={t("common.labelEmail")}
+          margin="normal"
+          value={formik.values.email}
+          error={formik.touched.email && Boolean(formik.errors.email)}
+          helperText={formik.touched.email && formik.errors.email}
+          onChange={formik.handleChange}
+          autoFocus
+          fullWidth
+        />
+
+        <PrimaryButton
+          type="submit"
+          variant="contained"
+          height="48px"
+          fullWidth={true}
+          buttoncolor={PRIMARY_PURPLE_COLOR}
+          textcolor="white"
+          disabled={formik.values.email?.length === 0}
+        >
+          {t("common.send")}
+        </PrimaryButton>
+      </FormContainer>
+    </ComponentContainer>
+  );
 };
 
 export default ForgotPasswordPage;

src/pages/LoginPage/Login.styled.js

@@ -1,9 +1,9 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
-import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants";
+import { PRIMARY_GRAY_TEXT_COLOR, PRIMARY_PURPLE_COLOR, PRIMARY_TEXT_COLOR } from "../../constants/stylesConstants";
 
 export const ComponentContainer = styled(Container)`
-  margin-top: 100px;
+  margin-top: 150px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -32,10 +32,23 @@ export const LoginDescription = styled(Typography)`
   display: flex;
   align-items: center;
   text-align: center;
-  color: #818181;
+  color: ${PRIMARY_GRAY_TEXT_COLOR};
   margin-bottom: 20px;
 `;
 export const LoginFormContainer = styled(Box)`
   width: 335px;
   height: 216px;
 `;
+export const RegisterAltText = styled(Typography)`
+  font-family: "Poppins";
+  color: ${PRIMARY_TEXT_COLOR};
+  font-size: 14px;
+  padding-right: 6px;
+  line-height: 14px;
+`
+export const RegisterTextContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  margin-top: 36px;
+  justify-content: center;
+`

src/pages/LoginPage/LoginPageMUI.js

@@ -6,45 +6,30 @@ import { useDispatch, useSelector } from "react-redux";
 import { NavLink } from "react-router-dom";
 import * as Yup from "yup";
 import { useTranslation } from "react-i18next";
-import i18next from "i18next";
 import {
   clearLoginErrors,
   fetchUser,
 } from "../../store/actions/login/loginActions";
 import { selectLoginError } from "../../store/selectors/loginSelectors";
 import { FORGOT_PASSWORD_PAGE, HOME_PAGE } from "../../constants/pages";
-import {
-  Box,
-  Button,
-  Container,
-  Grid,
-  InputAdornment,
-  Typography,
-} from "@mui/material";
-import { LocationOn, LocationOnOutlined } from "@mui/icons-material";
 import { ReactComponent as VisibilityOn } from "../../assets/images/svg/VisibilityOn.svg";
 import { ReactComponent as VisibilityOff } from "../../assets/images/svg/VisibilityOff.svg";
 import Backdrop from "../../components/MUI/BackdropComponent";
-import ErrorMessage from "../../components/MUI/ErrorMessageComponent";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import { LOGIN_USER_LOADING } from "../../store/actions/login/loginActionConstants";
 import { TextField } from "../../components/TextFields/TextField/TextField";
 import { PrimaryButton } from "../../components/Buttons/PrimaryButton/PrimaryButton";
 import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants";
 import { IconButton } from "../../components/Buttons/IconButton/IconButton";
-import { Icon } from "../../components/Icon/Icon";
-import PrimaryButtonWithIcon from "../../components/Buttons/PrimaryButtonWithIcon/PrimaryButtonWithIcon";
-import TextFieldWithIcon from "../../components/TextFields/TextFieldWithIcon/TextFieldWithIcon";
-import DropdownList from "../../components/Dropdown/DropdownList/DropdownList";
-import DropdownItem from "../../components/Dropdown/DropdownItem/DropdownItem";
 import Link from "../../components/Link/Link";
-import { CheckBox } from "../../components/CheckBox/CheckBox";
 import { ReactComponent as Logo } from "../../assets/images/svg/logo-vertical.svg";
 import {
   ComponentContainer,
   LoginTitle,
   LoginDescription,
   LoginFormContainer,
+  RegisterAltText,
+  RegisterTextContainer,
 } from "./Login.styled";
 
 const LoginPage = ({ history }) => {
@@ -107,125 +92,100 @@ const LoginPage = ({ history }) => {
   });
 
   return (
-    <Container component="main" maxWidth="md">
-      <ComponentContainer>
-        <Logo />
-        <LoginTitle component="h1" variant="h5">
-          {t("login.logInTitle")}
-        </LoginTitle>
-        <LoginDescription component="h1" variant="h6">
-          {t("login.welcomeText")}
-        </LoginDescription>
-        <LoginFormContainer component="form" onSubmit={formik.handleSubmit}>
-          <Backdrop position="absolute" isLoading={isLoading} />
-          <TextField
-            name="username"
-            placeholder={t("common.labelEmail")}
-            margin="normal"
-            value={formik.values.username}
-            onChange={formik.handleChange}
-            error={formik.touched.username && Boolean(formik.errors.username)}
-            helperText={formik.touched.username && formik.errors.username}
-            autoFocus
-            fullWidth
-          />
-          <TextField
-            name="password"
-            placeholder={t("common.labelPassword")}
-            margin="normal"
-            type={showPassword ? "text" : "password"}
-            value={formik.values.password}
-            onChange={formik.handleChange}
-            error={formik.touched.password && Boolean(formik.errors.password)}
-            helperText={formik.touched.password && formik.errors.password}
-            fullWidth={true}
-            InputProps={{
-              endAdornment: (
-                <IconButton
-                  onClick={handleClickShowPassword}
-                  onMouseDown={handleMouseDownPassword}
-                >
-                  {showPassword ? <VisibilityOn /> : <VisibilityOff />}
-                </IconButton>
-              ),
-            }}
-          />
-
-          {/* <DropdownList
-            title="Naslov"
-            toggleIconOpened={<Visibility />}
-            toggleIconClosed={<VisibilityOff />}
-            dropdownIcon={<LocationOnOutlined />}
-            fullWidth
-            defaultOpen={false}
+    <ComponentContainer>
+      <Logo />
+
+      <LoginTitle component="h1" variant="h5">
+        {t("login.logInTitle")}
+      </LoginTitle>
+
+      <LoginDescription component="h1" variant="h6">
+        {t("login.welcomeText")}
+      </LoginDescription>
+
+      <LoginFormContainer component="form" onSubmit={formik.handleSubmit}>
+        <Backdrop position="absolute" isLoading={isLoading} />
+
+        <TextField
+          name="username"
+          placeholder={t("common.labelEmail")}
+          margin="normal"
+          value={formik.values.username}
+          onChange={formik.handleChange}
+          error={formik.touched.username && Boolean(formik.errors.username)}
+          helperText={formik.touched.username && formik.errors.username}
+          autoFocus
+          fullWidth
+        />
+
+        <TextField
+          name="password"
+          placeholder={t("common.labelPassword")}
+          margin="normal"
+          type={showPassword ? "text" : "password"}
+          value={formik.values.password}
+          onChange={formik.handleChange}
+          error={formik.touched.password && Boolean(formik.errors.password)}
+          helperText={formik.touched.password && formik.errors.password}
+          fullWidth={true}
+          InputProps={{
+            endAdornment: (
+              <IconButton
+                onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
+              >
+                {showPassword ? <VisibilityOn /> : <VisibilityOff />}
+              </IconButton>
+            ),
+          }}
+        />
+
+        <Link
+          to={FORGOT_PASSWORD_PAGE}
+          fontsize="12px"
+          component={NavLink}
+          underline="hover"
+          align="right"
+          style={{ marginTop: "18px", marginBottom: "18px" }}
+        >
+          {t("login.forgotYourPassword")}
+        </Link>
+
+        <PrimaryButton
+          type="submit"
+          variant="contained"
+          height="48px"
+          fullWidth={true}
+          buttoncolor={PRIMARY_PURPLE_COLOR}
+          textcolor="white"
+          disabled={
+            formik.values.username.length === 0 ||
+            formik.values.password.length === 0
+          }
+        >
+          {t("login.logIn")}
+        </PrimaryButton>
+
+        <RegisterTextContainer>
+
+          <RegisterAltText>
+            {t("login.dontHaveAccount").padEnd(2, " ")}
+          </RegisterAltText>
+
+          <Link
+            to="/register"
+            component={NavLink}
+            underline="hover"
+            align="center"
           >
-            <DropdownItem>
-              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
-            </DropdownItem>
-            <DropdownItem>
-              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
-            </DropdownItem>
-            <DropdownItem>
-              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
-            </DropdownItem>
-            <DropdownItem>
-              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
-            </DropdownItem>
-            <DropdownItem>
-              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
-            </DropdownItem>
-            <DropdownItem>
-              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
-            </DropdownItem>
-            <DropdownItem>
-              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
-            </DropdownItem>
-          </DropdownList> */}
-
-          <Link to={FORGOT_PASSWORD_PAGE} component={NavLink} underline="hover" align="right">
-            {t("login.forgotYourPassword")}
+            {t("login.signUp")}
           </Link>
 
-          <PrimaryButton
-            type="submit"
-            variant="contained"
-            height="48px"
-            fullWidth={true}
-            buttoncolor={PRIMARY_PURPLE_COLOR}
-            textcolor="white"
-            style={{marginTop: "16px"}}
-          >
-             {t("login.logIn")}
-          </PrimaryButton>
-          <Grid container>
-            <Grid
-              item
-              xs={12}
-              md={6}
-              sx={{ textAlign: { xs: "center", md: "left" } }}
-            ></Grid>
-            <Grid
-              item
-              xs={12}
-              md={6}
-              sx={{ textAlign: { xs: "center", md: "right" } }}
-            >
-              <Link
-                to="#"
-                component={NavLink}
-                variant="body2"
-                underline="hover"
-                align="center"
-                style={{marginTop: "36px"}}
-              >
-                {t("login.dontHaveAccount")}
-                {t("login.signUp")}
-              </Link>
-            </Grid>
-          </Grid>
-        </LoginFormContainer>
-      </ComponentContainer>
-    </Container>
+        </RegisterTextContainer>
+
+      </LoginFormContainer>
+
+    </ComponentContainer>
   );
 };
 

src/pages/LoginPage/LoginT.js

@@ -1,15 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { ReactComponent as Logo } from "../../assets/images/svg/logo-vertical.svg";
-
-const LoginT = () => {
-  return (
-    <Logo />
-  )
-}
-
-LoginT.propTypes = {
-    children: PropTypes.node,
-}
-
-export default LoginT

src/pages/RegisterPages/Register/Register.js

@@ -0,0 +1,342 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import {
+  ComponentContainer,
+  Footer,
+  FooterText,
+  FormContainer,
+  LoginAltText,
+  LoginTextContainer,
+  ProgressContainer,
+  RegisterDescription,
+  RegisterDescriptionPart,
+  RegisterTitle,
+} from "./Register.styled";
+import { ReactComponent as Logo } from "../../../assets/images/svg/logo-vertical.svg";
+import { TextField } from "../../../components/TextFields/TextField/TextField";
+import { useFormik } from "formik";
+import { NavLink, useHistory } from "react-router-dom";
+import * as Yup from "yup";
+import { Trans, useTranslation } from "react-i18next";
+import { IconButton } from "../../../components/Buttons/IconButton/IconButton";
+import { ReactComponent as VisibilityOn } from "../../../assets/images/svg/VisibilityOn.svg";
+import { ReactComponent as VisibilityOff } from "../../../assets/images/svg/VisibilityOff.svg";
+import Link from "../../../components/Link/Link";
+import { PrimaryButton } from "../../../components/Buttons/PrimaryButton/PrimaryButton";
+import { PRIMARY_PURPLE_COLOR } from "../../../constants/stylesConstants";
+import StepProgress from "../../../components/StepProgress/StepProgress";
+import { REGISTER_SUCCESSFUL_PAGE } from "../../../constants/pages";
+
+const Register = () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const [currentStep, setCurrentStep] = useState(1);
+  const [informations, setInformations] = useState({});
+  const handleSubmit = (values) => {
+    setInformations({...informations, ...values})
+    console.log({...informations, ...values})
+    if (currentStep !== 3) {
+      setCurrentStep((prevState) => prevState + 1);
+    } else {
+      history.push(REGISTER_SUCCESSFUL_PAGE);
+    }
+  };
+
+  //
+  //Formik for fist step
+  //
+  const formikFirst = useFormik({
+    initialValues: {
+      mail: "",
+      password: "",
+    },
+    validationSchema: Yup.object().shape({
+      mail: Yup.string().email().required(t("login.usernameRequired")),
+      password: Yup.string().required(t("login.passwordRequired")),
+    }),
+    onSubmit: handleSubmit,
+    validateOnBlur: true,
+    enableReinitialize: true,
+  });
+
+  //
+  //Formik for second step
+  //
+  const formikSecond = useFormik({
+    initialValues: {
+      nameOfFirm: "",
+      PIB: "",
+    },
+    validationSchema: Yup.object().shape({
+      nameOfFirm: Yup.string().required(t("login.usernameRequired")),
+      PIB: Yup.number().required(t("login.passwordRequired")),
+    }),
+    onSubmit: handleSubmit,
+    validateOnBlur: true,
+    enableReinitialize: true,
+  });
+
+  //
+  //Formik for third step
+  //
+  const formikThird = useFormik({
+    initialValues: {
+      phoneNumber: "",
+      location: "",
+      website: "",
+    },
+    validationSchema: Yup.object().shape({
+      phoneNumber: Yup.number().required(t("login.usernameRequired")),
+      location: Yup.string().required(t("login.passwordRequired")),
+      website: Yup.string().matches(
+        /^((ftp|http|https):\/\/)?(www.)?(?!.*(ftp|http|https|www.))[a-zA-Z0-9_-]+(\.[a-zA-Z]+)+((\/)[\w#]+)*(\/\w+\?[a-zA-Z0-9_]+=\w+(&[a-zA-Z0-9_]+=\w+)*)?$/gm
+      ),
+    }),
+    onSubmit: handleSubmit,
+    validateOnBlur: true,
+    enableReinitialize: true,
+  });
+
+  const [showPassword, setShowPassword] = useState(false);
+  const handleClickShowPassword = () => setShowPassword(!showPassword);
+
+
+  //
+  // First step
+  //
+  const firstPartOfRegistration = (
+    <FormContainer component="form" onSubmit={formikFirst.handleSubmit}>
+
+      <RegisterDescriptionPart component="p" variant="p">
+        {t("register.descriptionFirst")}
+      </RegisterDescriptionPart>
+
+      <TextField
+        name="mail"
+        placeholder={t("common.labelEmail")}
+        margin="normal"
+        value={formikFirst.values.mail}
+        onChange={formikFirst.handleChange}
+        error={formikFirst.touched.mail && Boolean(formikFirst.errors.mail)}
+        helperText={formikFirst.touched.mail && formikFirst.errors.mail}
+        autoFocus
+        fullWidth
+      />
+
+      <TextField
+        name="password"
+        placeholder={t("common.labelPassword")}
+        margin="normal"
+        type={showPassword ? "text" : "password"}
+        value={formikFirst.values.password}
+        onChange={formikFirst.handleChange}
+        error={
+          formikFirst.touched.password && Boolean(formikFirst.errors.password)
+        }
+        helperText={formikFirst.touched.password && formikFirst.errors.password}
+        fullWidth={true}
+        InputProps={{
+          endAdornment: (
+            <IconButton onClick={handleClickShowPassword}>
+              {showPassword ? <VisibilityOn /> : <VisibilityOff />}
+            </IconButton>
+          ),
+        }}
+      />
+
+      <PrimaryButton
+        type="submit"
+        variant="contained"
+        height="48px"
+        fullWidth={true}
+        buttoncolor={PRIMARY_PURPLE_COLOR}
+        textcolor="white"
+        disabled={formikFirst.values.mail.length === 0 || formikFirst.values.password.length === 0}
+      >
+        {t("common.continue")}
+      </PrimaryButton>
+
+    </FormContainer>
+  );
+
+  //
+  // Second step
+  //
+  const secondPartOfRegistration = (
+    <FormContainer component="form" onSubmit={formikSecond.handleSubmit}>
+
+      <RegisterDescriptionPart component="p" variant="p">
+        {t("register.descriptionSecond")}
+      </RegisterDescriptionPart>
+
+      <TextField
+        name="nameOfFirm"
+        placeholder={t("common.labelFirm")}
+        margin="normal"
+        value={formikSecond.values.nameOfFirm}
+        onChange={formikSecond.handleChange}
+        error={
+          formikSecond.touched.nameOfFirm &&
+          Boolean(formikSecond.errors.nameOfFirm)
+        }
+        helperText={
+          formikSecond.touched.nameOfFirm && formikSecond.errors.nameOfFirm
+        }
+        autoFocus
+        fullWidth
+      />
+
+      <TextField
+        name="PIB"
+        placeholder={t("common.labelPIB")}
+        margin="normal"
+        type="number"
+        value={formikSecond.values.PIB}
+        onChange={formikSecond.handleChange}
+        error={formikSecond.touched.PIB && Boolean(formikSecond.errors.PIB)}
+        helperText={formikSecond.touched.PIB && formikSecond.errors.PIB}
+        fullWidth={true}
+      />
+
+      <PrimaryButton
+        type="submit"
+        variant="contained"
+        height="48px"
+        fullWidth={true}
+        buttoncolor={PRIMARY_PURPLE_COLOR}
+        textcolor="white"
+        disabled={formikSecond.values.PIB.length === 0 || formikSecond.values.nameOfFirm.length === 0}
+      >
+        {t("common.continue")}
+      </PrimaryButton>
+
+    </FormContainer>
+  );
+
+  //
+  //Third step
+  //
+  const thirdPartOfRegistration = (
+    <FormContainer component="form" onSubmit={formikThird.handleSubmit}>
+
+      <RegisterDescriptionPart component="p" variant="p">
+        {t("register.descriptionThird")}
+      </RegisterDescriptionPart>
+
+      <TextField
+        name="phoneNumber"
+        placeholder={t("common.labelPhone")}
+        margin="normal"
+        type="number"
+        value={formikThird.values.phoneNumber}
+        onChange={formikThird.handleChange}
+        error={
+          formikThird.touched.phoneNumber &&
+          Boolean(formikThird.errors.phoneNumber)
+        }
+        helperText={
+          formikThird.touched.phoneNumber && formikThird.errors.phoneNumber
+        }
+        autoFocus
+        fullWidth
+      />
+
+      <TextField
+        name="location"
+        placeholder={t("common.labelLocation")}
+        margin="normal"
+        type="text"
+        value={formikThird.values.location}
+        onChange={formikThird.handleChange}
+        error={
+          formikThird.touched.location && Boolean(formikThird.errors.location)
+        }
+        helperText={formikThird.touched.location && formikThird.errors.location}
+        fullWidth={true}
+      />
+
+      <TextField
+        name="website"
+        placeholder={t("common.labelWebsite")}
+        margin="normal"
+        type="text"
+        value={formikThird.values.website}
+        onChange={formikThird.handleChange}
+        error={
+          formikThird.touched.website && Boolean(formikThird.errors.website)
+        }
+        helperText={formikThird.touched.website && formikThird.errors.website}
+        fullWidth={true}
+      />
+
+      <PrimaryButton
+        type="submit"
+        variant="contained"
+        height="48px"
+        fullWidth={true}
+        buttoncolor={PRIMARY_PURPLE_COLOR}
+        textcolor="white"
+        disabled={formikThird.values.location.length === 0 && formikThird.values.phoneNumber.length === 0 && formikThird.values.website.length === 0}
+      >
+        {t("common.continue")}
+      </PrimaryButton>
+
+    </FormContainer>
+  );
+
+  return (
+    <ComponentContainer>
+      <Logo />
+
+      <RegisterTitle component="h1" variant="h5">
+        {t("register.title")}
+      </RegisterTitle>
+
+      <RegisterDescription component="h1" variant="h6">
+        {t("register.descriptionMain")}
+      </RegisterDescription>
+
+      <ProgressContainer>
+        <StepProgress current={currentStep} numberOfSteps={3} />
+      </ProgressContainer>
+
+      {currentStep === 1 && firstPartOfRegistration}
+      {currentStep === 2 && secondPartOfRegistration}
+      {currentStep === 3 && thirdPartOfRegistration}
+
+      <LoginTextContainer>
+
+        <LoginAltText>{t("register.loginText")}</LoginAltText>
+
+        <Link to="/login" component={NavLink} underline="hover" align="center">
+          {t("register.login")}
+        </Link>
+
+      </LoginTextContainer>
+
+      <Footer>
+
+        <FooterText>
+
+          <Trans i18nKey="register.acceptTerms" />{" "}
+
+          <NavLink
+            to="#"
+            style={{ color: "black", fontWeight: "500", cursor: "pointer" }}
+          >
+            <Trans i18nKey="register.terms" />
+          </NavLink>
+
+        </FooterText>
+
+      </Footer>
+
+    </ComponentContainer>
+  );
+};
+
+Register.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Register;

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

@@ -0,0 +1,86 @@
+import { Box, Container, Typography } from "@mui/material";
+import styled from "styled-components";
+import { PRIMARY_GRAY_TEXT_COLOR, PRIMARY_PURPLE_COLOR, PRIMARY_TEXT_COLOR } from "../../../constants/stylesConstants";
+
+export const ComponentContainer = styled(Container)`
+  margin-top: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 335px;
+  padding: 0;
+`;
+export const RegisterTitle = styled(Typography)`
+  font-family: "Open Sans";
+  width: 328px;
+  height: 33px;
+  text-align: center;
+  flex: 1;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 33px;
+  color: ${PRIMARY_PURPLE_COLOR};
+  margin-top: 34px;
+`;
+export const RegisterDescription = styled(Typography)`
+  font-family: "Open Sans";
+  margin-top: 9px;
+  width: 221px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: ${PRIMARY_GRAY_TEXT_COLOR};
+  margin-bottom: 20px;
+`;
+export const FormContainer = styled(Box)`
+  width: 335px;
+`;
+export const LoginAltText = styled(Typography)`
+  font-family: "Poppins";
+  color: ${PRIMARY_TEXT_COLOR};
+  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;
+`
+export const ProgressContainer = styled(Container)`
+    width: 100%;
+    padding: 0;
+`
+export const Footer = styled(Box)`
+  position: absolute;
+  bottom: 36px;
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: center;
+`
+export const FooterText = styled(Typography)`
+  font-family: "Open Sans";
+  color: #505050;
+  text-align: center;
+  width: 330px;
+  line-height: 16px;
+  font-weight: 400;
+  padding: 0;
+  font-size: 12px;
+`
+export const RegisterDescriptionPart = styled(RegisterDescription)`
+    font-size: 12px;
+    width: 100%;
+    text-align: left;
+    line-height: 16px;
+    margin-top: 31px;
+    margin-bottom: 2px;
+    letter-spacing: 0.02em;
+`

src/pages/RegisterPages/RegisterSuccessful.js/RegisterSuccessful.js

@@ -0,0 +1,43 @@
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import {
+  ComponentContainer,
+  RegisterDescription,
+  RegisterTitle,
+} from "./RegisterSuccessful.styled";
+import { ReactComponent as Success } from "../../../assets/images/svg/register-success.svg";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import { LOGIN_PAGE } from "../../../constants/pages";
+
+const RegisterSuccessful = () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+
+  //Redirect to Login page when registration is successful
+  useEffect(() => {
+    setTimeout(() => {
+      history.replace(LOGIN_PAGE);
+    }, 2500);
+  }, []);
+
+  return (
+    <ComponentContainer>
+      <Success />
+
+      <RegisterTitle component="h1" variant="h5">
+        {t("register.success")}
+      </RegisterTitle>
+
+      <RegisterDescription component="h1" variant="h6">
+        {t("register.welcome")}
+      </RegisterDescription>
+    </ComponentContainer>
+  );
+};
+
+RegisterSuccessful.propTypes = {
+  children: PropTypes.node,
+};
+
+export default RegisterSuccessful;

src/pages/RegisterPages/RegisterSuccessful.js/RegisterSuccessful.styled.js

@@ -0,0 +1,38 @@
+import { Container, Typography } from "@mui/material";
+import styled from "styled-components";
+import { PRIMARY_GRAY_TEXT_COLOR, PRIMARY_PURPLE_COLOR } from "../../../constants/stylesConstants";
+
+export const ComponentContainer = styled(Container)`
+  margin-top: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 536px;
+  padding: 0;
+`;
+export const RegisterTitle = styled(Typography)`
+  font-family: "Mulish";
+  width: 430px;
+  text-align: center;
+  flex: 1;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 39px;
+  line-height: 48px;
+  color: ${PRIMARY_PURPLE_COLOR};
+  margin-top: 32px;
+`;
+export const RegisterDescription = styled(Typography)`
+  font-family: "Open Sans";
+  margin-top: 36px;
+  width: 430px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 25px;
+  line-height: 36px;
+  display: block;
+  align-items: center;
+  text-align: center;
+  color: ${PRIMARY_GRAY_TEXT_COLOR};
+  margin-bottom: 20px;
+`;

src/store/actions/app/appActions.js

@@ -1,5 +1,6 @@
 import { APP_LOADING } from './appActionConstants';
 
-export const setAppReady = () => ({
+export const setAppReady = (payload) => ({
   type: APP_LOADING,
+  payload: payload
 });