selenaaasi
/
trampa-frontend
ウォッチ 1
スター 0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

Finished pages

pull/2/head^2
Djordje Mitrovic 4年前
親
dee77073a0
コミット
d0d2ed2f5d
18個のファイルの変更、439行の追加、289行の削除
ユニファイド表示 差分情報を表示
  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 ファイルの表示

<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <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="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta

+ 3
- 2
src/App.js ファイルの表示

import GlobalStyle from "./components/Styles/globalStyles"; import GlobalStyle from "./components/Styles/globalStyles";
import { StyledEngineProvider } from "@mui/material"; import { StyledEngineProvider } from "@mui/material";


const App = () => (
const App = () => {
return (
<> <>
<Router history={history}> <Router history={history}>
<Helmet> <Helmet>
</main> </main>
</Router> </Router>
</> </>
);
)};


export default App; export default App;

+ 2
- 2
src/components/Icon/Icon.js ファイルの表示

export const Icon = (props) => { export const Icon = (props) => {
return ( return (
<ComponentContainer style={props.containerStyle} className={props.className} onClick={props.onClick}> <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} {props.children}
</IconStyled> </IconStyled>
</ComponentContainer> </ComponentContainer>
style: PropTypes.any, style: PropTypes.any,
color: PropTypes.string, color: PropTypes.string,
size: PropTypes.string, size: PropTypes.string,
fontSize: PropTypes.string,
iconsize: PropTypes.string,
className: PropTypes.any, className: PropTypes.any,
onClick: PropTypes.func, onClick: PropTypes.func,
} }

+ 3
- 2
src/components/Link/Link.js ファイルの表示

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


export default Link export default Link

+ 1
- 1
src/components/Link/Link.styled.js ファイルの表示

font-family: ${(props) => props.font}; font-family: ${(props) => props.font};
font-style: normal; font-style: normal;
font-weight: 400; 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"}; line-height: ${props => props.lineheight ? props.lineheight : "14px"};
text-decoration-line: underline; text-decoration-line: underline;
display: block; display: block;

+ 1
- 1
src/components/StepProgress/StepProgress.js ファイルの表示

<ComponentContainer done> <ComponentContainer done>
{steps.map((item, index) => {steps.map((item, index) =>
index === 0 ? ( index === 0 ? (
<StepBar current={item.current} done={item.done}>
<StepBar current={item.current} done={item.done} key={index}>
{item.done ? <Checkmark /> : index+1} {item.done ? <Checkmark /> : index+1}
</StepBar> </StepBar>
) : ( ) : (

+ 1
- 1
src/components/StepProgress/StepProgress.styled.js ファイルの表示

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

+ 5
- 5
src/components/Styles/globalStyles.js ファイルの表示

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


export default GlobalStyle; export default GlobalStyle;

+ 20
- 7
src/components/TextFields/TextField/TextField.js ファイルの表示

export const TextField = (props) => { export const TextField = (props) => {
const [isFieldEmpty, setIsFieldEmpty] = useState(true); const [isFieldEmpty, setIsFieldEmpty] = useState(true);


//for italicPlaceholder
// for italicPlaceholder
useEffect(() => { useEffect(() => {
if (props.value.length === 0) { if (props.value.length === 0) {
setIsFieldEmpty(true); setIsFieldEmpty(true);


return ( return (
<ComponentContainer style={props.containerStyle} className={props.className}> <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} sx={props.style}
label={props.showAnimation ? props.placeholder : ""} label={props.showAnimation ? props.placeholder : ""}
italic={props.italicPlaceholder && isFieldEmpty} italic={props.italicPlaceholder && isFieldEmpty}
height: PropTypes.string, height: PropTypes.string,
name: PropTypes.string, name: PropTypes.string,
label: PropTypes.string, label: PropTypes.string,
value: PropTypes.string,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
onChange: PropTypes.func, onChange: PropTypes.func,
error: PropTypes.string,
error: PropTypes.bool,
helperText: PropTypes.string, helperText: PropTypes.string,
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,
fullWidth: PropTypes.bool, fullWidth: PropTypes.bool,
type: PropTypes.string, type: PropTypes.string,
textSize: PropTypes.string,
textsize: PropTypes.string,
font: PropTypes.string, font: PropTypes.string,
InputProps: PropTypes.shape({ InputProps: PropTypes.shape({
startAdornment: PropTypes.node, startAdornment: PropTypes.node,
TextField.defaultProps = { TextField.defaultProps = {
italicPlaceholder: false, italicPlaceholder: false,
showAnimation: false, showAnimation: false,
font: "Open Sans"
// font: "Open Sans"
}; };

+ 1
- 1
src/pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent.js ファイルの表示

{t("forgotPassword.notRecievedMail")} {t("forgotPassword.notRecievedMail")}
</StandardText> </StandardText>


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



+ 1
- 1
src/pages/LoginPage/LoginPageMUI.js ファイルの表示



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

+ 108
- 0
src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.js ファイルの表示

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 ファイルの表示

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 ファイルの表示

ComponentContainer, ComponentContainer,
Footer, Footer,
FooterText, FooterText,
FormContainer,
LoginAltText, LoginAltText,
LoginTextContainer, LoginTextContainer,
ProgressContainer, ProgressContainer,
RegisterDescription, RegisterDescription,
RegisterDescriptionPart,
RegisterTitle, RegisterTitle,
} from "./Register.styled"; } from "./Register.styled";
import { ReactComponent as Logo } from "../../../assets/images/svg/logo-vertical.svg"; import { ReactComponent as Logo } from "../../../assets/images/svg/logo-vertical.svg";
import { TextField } from "../../../components/TextFields/TextField/TextField";
import { useFormik } from "formik";
import { NavLink, useHistory } from "react-router-dom"; import { NavLink, useHistory } from "react-router-dom";
import * as Yup from "yup";
import { Trans, useTranslation } from "react-i18next"; 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 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 StepProgress from "../../../components/StepProgress/StepProgress";
import { REGISTER_SUCCESSFUL_PAGE } from "../../../constants/pages"; import { REGISTER_SUCCESSFUL_PAGE } from "../../../constants/pages";
import FirstPartOfRegistration from "./FirstPart/FirstPartOfRegistration";
import SecondPartOfRegistration from "./SecondPart/SecondPartOfRegistration";
import ThirdPartOfRegistration from "./ThirdPart/ThirdPartOfRegistration";


const Register = () => { const Register = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const history = useHistory(); const history = useHistory();
const [currentStep, setCurrentStep] = useState(1); const [currentStep, setCurrentStep] = useState(1);
const [informations, setInformations] = useState({}); const [informations, setInformations] = useState({});

const handleSubmit = (values) => { const handleSubmit = (values) => {
setInformations({...informations, ...values})
console.log({...informations, ...values})
setInformations({ ...informations, ...values });
console.log({ ...informations, ...values });
if (currentStep !== 3) { if (currentStep !== 3) {
setCurrentStep((prevState) => prevState + 1); setCurrentStep((prevState) => prevState + 1);
} else { } else {
history.push(REGISTER_SUCCESSFUL_PAGE); 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 ( return (
<ComponentContainer> <ComponentContainer>
<Logo /> <Logo />
<StepProgress current={currentStep} numberOfSteps={3} /> <StepProgress current={currentStep} numberOfSteps={3} />
</ProgressContainer> </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> <LoginTextContainer>

<LoginAltText>{t("register.loginText")}</LoginAltText> <LoginAltText>{t("register.loginText")}</LoginAltText>


<Link to="/login" component={NavLink} underline="hover" align="center"> <Link to="/login" component={NavLink} underline="hover" align="center">
{t("register.login")} {t("register.login")}
</Link> </Link>

</LoginTextContainer> </LoginTextContainer>


<Footer> <Footer>

<FooterText> <FooterText>

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

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

</FooterText> </FooterText>

</Footer> </Footer>

</ComponentContainer> </ComponentContainer>
); );
}; };

+ 83
- 0
src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.js ファイルの表示

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 ファイルの表示

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 ファイルの表示

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 ファイルの表示

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;
`;

書き込み プレビュー
読み込み中…
キャンセル
保存