selenaaasi
/
trampa-frontend
Прати 1
Волим 0
Креирај огранак 0
Код Дискусије 0 Захтеви за спајање 0 Издања 0 Вики Activity
Преглед изворни кода

Finished pages

pull/2/head^2
Djordje Mitrovic пре 3 година
родитељ
dee77073a0
комит
d0d2ed2f5d
18 измењених фајлова са 439 додато и 289 уклоњено
Подељен поглед Покажи статистику Diff
  1. 3
    0
      public/index.html
  2. 3
    2
      src/App.js
  3. 2
    2
      src/components/Icon/Icon.js
  4. 3
    2
      src/components/Link/Link.js
  5. 1
    1
      src/components/Link/Link.styled.js
  6. 1
    1
      src/components/StepProgress/StepProgress.js
  7. 1
    1
      src/components/StepProgress/StepProgress.styled.js
  8. 5
    5
      src/components/Styles/globalStyles.js
  9. 20
    7
      src/components/TextFields/TextField/TextField.js
  10. 1
    1
      src/pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent.js
  11. 1
    1
      src/pages/LoginPage/LoginPageMUI.js
  12. 108
    0
      src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.js
  13. 30
    0
      src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.styled.js
  14. 15
    266
      src/pages/RegisterPages/Register/Register.js
  15. 83
    0
      src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.js
  16. 30
    0
      src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.styled.js
  17. 102
    0
      src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.js
  18. 30
    0
      src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.styled.js

+ 3
- 0
public/index.html Прегледај датотеку

@@ -3,6 +3,9 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Mulish">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta

+ 3
- 2
src/App.js Прегледај датотеку

@@ -7,7 +7,8 @@ import AppRoutes from "./AppRoutes";
import GlobalStyle from "./components/Styles/globalStyles";
import { StyledEngineProvider } from "@mui/material";

const App = () => (
const App = () => {
return (
<>
<Router history={history}>
<Helmet>
@@ -21,6 +22,6 @@ const App = () => (
</main>
</Router>
</>
);
)};

export default App;

+ 2
- 2
src/components/Icon/Icon.js Прегледај датотеку

@@ -6,7 +6,7 @@ import PropTypes from "prop-types";
export const Icon = (props) => {
return (
<ComponentContainer style={props.containerStyle} className={props.className} onClick={props.onClick}>
<IconStyled sx={props.style} color={props.color} size={props.size} fontSize={props.fontSize}>
<IconStyled sx={props.style} color={props.color} size={props.size} fontSize={props.iconsize}>
{props.children}
</IconStyled>
</ComponentContainer>
@@ -19,7 +19,7 @@ Icon.propTypes = {
style: PropTypes.any,
color: PropTypes.string,
size: PropTypes.string,
fontSize: PropTypes.string,
iconsize: PropTypes.string,
className: PropTypes.any,
onClick: PropTypes.func,
}

+ 3
- 2
src/components/Link/Link.js Прегледај датотеку

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

export default Link

+ 1
- 1
src/components/Link/Link.styled.js Прегледај датотеку

@@ -7,7 +7,7 @@ export const LinkStyled = styled(Link)`
font-family: ${(props) => props.font};
font-style: normal;
font-weight: 400;
font-size: ${props => props.fontsize ? props.fontsize : "14px"};
font-size: ${props => props.textsize ? props.textsize : "14px"};
line-height: ${props => props.lineheight ? props.lineheight : "14px"};
text-decoration-line: underline;
display: block;

+ 1
- 1
src/components/StepProgress/StepProgress.js Прегледај датотеку

@@ -15,7 +15,7 @@ const StepProgress = (props) => {
<ComponentContainer done>
{steps.map((item, index) =>
index === 0 ? (
<StepBar current={item.current} done={item.done}>
<StepBar current={item.current} done={item.done} key={index}>
{item.done ? <Checkmark /> : index+1}
</StepBar>
) : (

+ 1
- 1
src/components/StepProgress/StepProgress.styled.js Прегледај датотеку

@@ -41,7 +41,7 @@ export const StepBar = styled(Box)`
`;
export const Progress = styled(Box)`
height: 9px;
width: ${props => props.done ? "100%" : "0"};
width: ${(props) => (props.done ? "100%" : "0")};
background-color: ${PRIMARY_PURPLE_COLOR};
transition: width 1s;
`;

+ 5
- 5
src/components/Styles/globalStyles.js Прегледај датотеку

@@ -1,9 +1,9 @@
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"
// 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-face {
font-family: 'Open Sans';
src: url(${OpenSans}) format('truetype');
font-weight: 400;
@@ -23,7 +23,7 @@ const GlobalStyle = createGlobalStyle`
font-weight: 400;
font-style: normal;
font-display: auto;
}
} */}
`;

export default GlobalStyle;

+ 20
- 7
src/components/TextFields/TextField/TextField.js Прегледај датотеку

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
export const TextField = (props) => {
const [isFieldEmpty, setIsFieldEmpty] = useState(true);

//for italicPlaceholder
// for italicPlaceholder
useEffect(() => {
if (props.value.length === 0) {
setIsFieldEmpty(true);
@@ -16,8 +16,21 @@ export const TextField = (props) => {

return (
<ComponentContainer style={props.containerStyle} className={props.className}>
<TextFieldStyled
{...props}
<TextFieldStyled
placeholder={props.placeholder}
width={props.width}
height={props.height}
name={props.name}
value={props.value}
onChange={props.onChange}
error={props.error}
// helperText={props.helperText}
autoFocus={props.autoFocus}
fullWidth={props.fullWidth}
type={props.type}
textsize={props.textsize}
font={props.font}
InputProps={props.InputProps}
sx={props.style}
label={props.showAnimation ? props.placeholder : ""}
italic={props.italicPlaceholder && isFieldEmpty}
@@ -47,14 +60,14 @@ TextField.propTypes = {
height: PropTypes.string,
name: PropTypes.string,
label: PropTypes.string,
value: PropTypes.string,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
onChange: PropTypes.func,
error: PropTypes.string,
error: PropTypes.bool,
helperText: PropTypes.string,
autoFocus: PropTypes.bool,
fullWidth: PropTypes.bool,
type: PropTypes.string,
textSize: PropTypes.string,
textsize: PropTypes.string,
font: PropTypes.string,
InputProps: PropTypes.shape({
startAdornment: PropTypes.node,
@@ -66,5 +79,5 @@ TextField.propTypes = {
TextField.defaultProps = {
italicPlaceholder: false,
showAnimation: false,
font: "Open Sans"
// font: "Open Sans"
};

+ 1
- 1
src/pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent.js Прегледај датотеку

@@ -59,7 +59,7 @@ const MailSent = () => {
{t("forgotPassword.notRecievedMail")}
</StandardText>

<Link to="#" component={NavLink} underline="hover" align="center" fontsize="16px">
<Link to="#" component={NavLink} underline="hover" align="center" textsize="16px">
{t("common.sendAgain")}
</Link>


+ 1
- 1
src/pages/LoginPage/LoginPageMUI.js Прегледај датотеку

@@ -142,7 +142,7 @@ const LoginPage = ({ history }) => {

<Link
to={FORGOT_PASSWORD_PAGE}
fontsize="12px"
textsize="12px"
component={NavLink}
underline="hover"
align="right"

+ 108
- 0
src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.js Прегледај датотеку

@@ -0,0 +1,108 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import {
FormContainer,
RegisterDescription,
} from "./FirstPartOfRegistration.styled";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useTranslation } from "react-i18next";
import { TextField } from "../../../../components/TextFields/TextField/TextField";
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 { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
import { PRIMARY_PURPLE_COLOR } from "../../../../constants/stylesConstants";

const FirstPartOfRegistration = (props) => {
const [showPassword, setShowPassword] = useState(false);
const { t } = useTranslation();

const formik = useFormik({
initialValues: {
mail: "",
password: "",
},
validationSchema: Yup.object().shape({
mail: Yup.string().email().required(t("login.usernameRequired")),
password: Yup.string().required(t("login.passwordRequired")),
}),
onSubmit: props.handleSubmit,
validateOnBlur: true,
enableReinitialize: true,
});

const handleClickShowPassword = () => {
setShowPassword((prevState) => !prevState);
};
return (
<FormContainer component="form" onSubmit={formik.handleSubmit}>
<RegisterDescription component="p" variant="p">
{t("register.descriptionFirst")}
</RegisterDescription>

<TextField
name="mail"
placeholder={t("common.labelEmail")}
margin="normal"
value={formik.values.mail}
onChange={(value) =>
formik.setFieldValue("mail", value.target.value)
}
error={formik.touched.mail && Boolean(formik.errors.mail)}
helperText={formik.touched.mail && formik.errors.mail}
autoFocus
fullWidth
/>

<TextField
name="password"
placeholder={t("common.labelPassword")}
margin="normal"
type={showPassword ? "text" : "password"}
value={formik.values.password}
onChange={(value) =>
formik.setFieldValue("password", value.target.value)
}
error={
formik.touched.passwordRegistration &&
Boolean(formik.errors.passwordRegistration)
}
helperText={
formik.touched.passwordRegistration &&
formik.errors.passwordRegistration
}
fullWidth
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={
formik.values.mail.length === 0 ||
formik.values.password.length === 0
}
>
{t("common.continue")}
</PrimaryButton>
</FormContainer>
);
};

FirstPartOfRegistration.propTypes = {
children: PropTypes.node,
handleSubmit: PropTypes.func,
};

export default FirstPartOfRegistration;

+ 30
- 0
src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.styled.js Прегледај датотеку

@@ -0,0 +1,30 @@
import { Container, Typography } from "@mui/material";
import styled from "styled-components";
import { PRIMARY_GRAY_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 FormContainer = styled.form`
width: 335px;
`;
export const RegisterDescription = styled(Typography)`
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
display: flex;
align-items: center;
color: ${PRIMARY_GRAY_TEXT_COLOR};
font-size: 12px;
width: 100%;
text-align: left;
line-height: 16px;
margin-top: 31px;
margin-bottom: 2px;
letter-spacing: 0.02em;
`;

+ 15
- 266
src/pages/RegisterPages/Register/Register.js Прегледај датотеку

@@ -4,286 +4,37 @@ 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";
import FirstPartOfRegistration from "./FirstPart/FirstPartOfRegistration";
import SecondPartOfRegistration from "./SecondPart/SecondPartOfRegistration";
import ThirdPartOfRegistration from "./ThirdPart/ThirdPartOfRegistration";

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})
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 />
@@ -300,37 +51,35 @@ const Register = () => {
<StepProgress current={currentStep} numberOfSteps={3} />
</ProgressContainer>

{currentStep === 1 && firstPartOfRegistration}
{currentStep === 2 && secondPartOfRegistration}
{currentStep === 3 && thirdPartOfRegistration}
{currentStep === 1 && (
<FirstPartOfRegistration handleSubmit={handleSubmit} />
)}
{currentStep === 2 && (
<SecondPartOfRegistration handleSubmit={handleSubmit} />
)}
{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>

<Footer>

<FooterText>

<Trans i18nKey="register.acceptTerms" />{" "}

<NavLink
to="#"
style={{ color: "black", fontWeight: "500", cursor: "pointer" }}
>
<Trans i18nKey="register.terms" />
</NavLink>

</FooterText>

</Footer>

</ComponentContainer>
);
};

+ 83
- 0
src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.js Прегледај датотеку

@@ -0,0 +1,83 @@
import React from "react";
import PropTypes from "prop-types";
import {
FormContainer,
RegisterDescription,
} from "./SecondPartOfRegistration.styled";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useTranslation } from "react-i18next";
import { TextField } from "../../../../components/TextFields/TextField/TextField";
import { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
import { PRIMARY_PURPLE_COLOR } from "../../../../constants/stylesConstants";

const SecondPartOfRegistration = (props) => {
const { t } = useTranslation();

const formik = useFormik({
initialValues: {
nameOfFirm: "",
PIB: "",
},
validationSchema: Yup.object().shape({
nameOfFirm: Yup.string().required(t("login.usernameRequired")),
PIB: Yup.number().required(t("login.passwordRequired")),
}),
onSubmit: props.handleSubmit,
validateOnBlur: true,
enableReinitialize: true,
});
return (
<FormContainer component="form" onSubmit={formik.handleSubmit}>
<RegisterDescription component="p" variant="p">
{t("register.descriptionSecond")}
</RegisterDescription>

<TextField
name="nameOfFirm"
placeholder={t("common.labelFirm")}
margin="normal"
value={formik.values.nameOfFirm}
onChange={formik.handleChange}
error={formik.touched.nameOfFirm && Boolean(formik.errors.nameOfFirm)}
helperText={formik.touched.nameOfFirm && formik.errors.nameOfFirm}
autoFocus
fullWidth
/>

<TextField
name="PIB"
placeholder={t("common.labelPIB")}
margin="normal"
type="number"
value={formik.values.PIB}
onChange={formik.handleChange}
error={formik.touched.PIB && Boolean(formik.errors.PIB)}
helperText={formik.touched.PIB && formik.errors.PIB}
fullWidth={true}
/>

<PrimaryButton
type="submit"
variant="contained"
height="48px"
fullWidth={true}
buttoncolor={PRIMARY_PURPLE_COLOR}
textcolor="white"
disabled={
formik.values.PIB.length === 0 ||
formik.values.nameOfFirm.length === 0
}
>
{t("common.continue")}
</PrimaryButton>
</FormContainer>
);
};

SecondPartOfRegistration.propTypes = {
children: PropTypes.node,
handleSubmit: PropTypes.func,
};

export default SecondPartOfRegistration;

+ 30
- 0
src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.styled.js Прегледај датотеку

@@ -0,0 +1,30 @@
import { Container, Typography } from "@mui/material";
import styled from "styled-components";
import { PRIMARY_GRAY_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 FormContainer = styled.form`
width: 335px;
`;
export const RegisterDescription = styled(Typography)`
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
display: flex;
align-items: center;
color: ${PRIMARY_GRAY_TEXT_COLOR};
font-size: 12px;
width: 100%;
text-align: left;
line-height: 16px;
margin-top: 31px;
margin-bottom: 2px;
letter-spacing: 0.02em;
`;

+ 102
- 0
src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.js Прегледај датотеку

@@ -0,0 +1,102 @@
import React from "react";
import PropTypes from "prop-types";
import {
FormContainer,
RegisterDescription,
} from "./ThirdPartOfRegistration.styled";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useTranslation } from "react-i18next";
import { TextField } from "../../../../components/TextFields/TextField/TextField";
import { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
import { PRIMARY_PURPLE_COLOR } from "../../../../constants/stylesConstants";

const ThirdPartOfRegistration = (props) => {
const { t } = useTranslation();

const formik = 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: props.handleSubmit,
validateOnBlur: true,
enableReinitialize: true,
});

return (
<FormContainer component="form" onSubmit={formik.handleSubmit}>
<RegisterDescription component="p" variant="p">
{t("register.descriptionThird")}
</RegisterDescription>

<TextField
name="phoneNumber"
placeholder={t("common.labelPhone")}
margin="normal"
type="number"
value={formik.values.phoneNumber}
onChange={formik.handleChange}
error={formik.touched.phoneNumber && Boolean(formik.errors.phoneNumber)}
helperText={formik.touched.phoneNumber && formik.errors.phoneNumber}
autoFocus
fullWidth
/>

<TextField
name="location"
placeholder={t("common.labelLocation")}
margin="normal"
type="text"
value={formik.values.location}
onChange={formik.handleChange}
error={formik.touched.location && Boolean(formik.errors.location)}
helperText={formik.touched.location && formik.errors.location}
fullWidth={true}
/>

<TextField
name="website"
placeholder={t("common.labelWebsite")}
margin="normal"
type="text"
value={formik.values.website}
onChange={formik.handleChange}
error={formik.touched.website && Boolean(formik.errors.website)}
helperText={formik.touched.website && formik.errors.website}
fullWidth={true}
/>

<PrimaryButton
type="submit"
variant="contained"
height="48px"
fullWidth={true}
buttoncolor={PRIMARY_PURPLE_COLOR}
textcolor="white"
disabled={
formik.values.location.length === 0 &&
formik.values.phoneNumber.length === 0 &&
formik.values.website.length === 0
}
>
{t("common.continue")}
</PrimaryButton>
</FormContainer>
);
};

ThirdPartOfRegistration.propTypes = {
children: PropTypes.node,
handleSubmit: PropTypes.func,
};

export default ThirdPartOfRegistration;

+ 30
- 0
src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.styled.js Прегледај датотеку

@@ -0,0 +1,30 @@
import { Container, Typography } from "@mui/material";
import styled from "styled-components";
import { PRIMARY_GRAY_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 FormContainer = styled.form`
width: 335px;
`;
export const RegisterDescription = styled(Typography)`
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
display: flex;
align-items: center;
color: ${PRIMARY_GRAY_TEXT_COLOR};
font-size: 12px;
width: 100%;
text-align: left;
line-height: 16px;
margin-top: 31px;
margin-bottom: 2px;
letter-spacing: 0.02em;
`;

Write Preview
Loading…
Откажи
Сачувај