Web: LoginMobile: added RegistrationForm
This commit is contained in:
parent
feba30cb34
commit
993384c781
@ -1,12 +1,13 @@
|
||||
import React, { useEffect } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import styled from "styled-components";
|
||||
import { withTranslation } from "react-i18next";
|
||||
|
||||
import { Box } from "ASC.Web.Components";
|
||||
import i18n from "../../../i18n";
|
||||
|
||||
import Header from "../../Header";
|
||||
import { RegistrationTitle } from "./sub-components";
|
||||
import { fakeApi } from "LoginMobileApi";
|
||||
|
||||
import { RegistrationTitle, RegistrationForm } from "./sub-components";
|
||||
|
||||
const StyledRegistration = styled(Box)`
|
||||
display: grid;
|
||||
@ -15,14 +16,22 @@ const StyledRegistration = styled(Box)`
|
||||
align-items: center;
|
||||
margin: 33px 32px 0 32px;
|
||||
height: min-content;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const RegistrationComponent = ({ t }) => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const onJoinHandler = (portalName, email, FirstName, LastName, pass) => {
|
||||
setIsLoading(true);
|
||||
fakeApi.join( portalName, email, FirstName, LastName, pass);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledRegistration>
|
||||
<RegistrationTitle t={t} />
|
||||
Registration
|
||||
<RegistrationForm isLoading={isLoading} t={t} onJoin={onJoinHandler} />
|
||||
</StyledRegistration>
|
||||
</>
|
||||
);
|
||||
|
@ -1 +1,2 @@
|
||||
export { default as RegistrationTitle } from "./registration-title";
|
||||
export { default as RegistrationForm } from "./registration-form";
|
||||
|
@ -0,0 +1,143 @@
|
||||
import React, { useState } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Button } from "ASC.Web.Components";
|
||||
|
||||
import { EmailField, PasswordField, TextField } from "../../../fields";
|
||||
|
||||
const StyledRegistrationForm = styled("form")`
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
margin-top: 6px;
|
||||
|
||||
.registration-button {
|
||||
margin-top: 28px;
|
||||
}
|
||||
`;
|
||||
|
||||
const RegistrationForm = ({ t, isLoading, onJoin }) => {
|
||||
const [portalName, setPortalName] = useState({
|
||||
val: "",
|
||||
isValid: false,
|
||||
});
|
||||
|
||||
const [email, setEmail] = useState({ val: "", isValid: false });
|
||||
|
||||
const [firstName, setFirstName] = useState({
|
||||
val: "",
|
||||
isValid: false,
|
||||
});
|
||||
|
||||
const [lastName, setLastName] = useState({
|
||||
val: "",
|
||||
isValid: false,
|
||||
});
|
||||
|
||||
const [password, setPassword] = useState({
|
||||
val: "",
|
||||
isValid: false,
|
||||
});
|
||||
|
||||
const [hasError, setHasError] = useState(false);
|
||||
|
||||
const onChangePortalNameHandler = (val, isValid) => {
|
||||
setPortalName({ val, isValid });
|
||||
};
|
||||
|
||||
const onChangeEmailHandler = (val, isValid) => {
|
||||
setEmail({ val, isValid });
|
||||
};
|
||||
|
||||
const onChangeFirstNameHandler = (val, isValid) => {
|
||||
setFirstName({ val, isValid });
|
||||
};
|
||||
|
||||
const onChangeLastNameHandler = (val, isValid) => {
|
||||
setLastName({ val, isValid });
|
||||
};
|
||||
|
||||
const onChangePasswordHandler = (val, isValid) => {
|
||||
setPassword({ val, isValid });
|
||||
};
|
||||
|
||||
const onSubmitHandler = () => {
|
||||
const isValid = checkingValid();
|
||||
if (!isValid) return;
|
||||
onJoin(
|
||||
portalName.val,
|
||||
email.val,
|
||||
firstName.val,
|
||||
lastName.val,
|
||||
password.val
|
||||
);
|
||||
};
|
||||
|
||||
const checkingValid = () => {
|
||||
let isValid = false;
|
||||
if (
|
||||
portalName.isValid &&
|
||||
email.isValid &&
|
||||
firstName.isValid &&
|
||||
lastName.isValid &&
|
||||
password.isValid
|
||||
) {
|
||||
isValid = true;
|
||||
}
|
||||
setHasError(!isValid);
|
||||
return isValid;
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledRegistrationForm onSubmit={onSubmitHandler}>
|
||||
<TextField
|
||||
id="portal-name"
|
||||
className="fields"
|
||||
t={t}
|
||||
placeholder={t('PlaceholderPortalName')}
|
||||
isAutoFocussed
|
||||
value={portalName.val}
|
||||
hasError={!portalName.isValid && hasError}
|
||||
onChangeValue={onChangePortalNameHandler}
|
||||
/>
|
||||
<EmailField
|
||||
className="fields"
|
||||
t={t}
|
||||
value={email.val}
|
||||
hasError={!email.isValid && hasError}
|
||||
onChangeEmail={onChangeEmailHandler}
|
||||
/>
|
||||
<TextField
|
||||
id="first-name"
|
||||
className="fields"
|
||||
t={t}
|
||||
placeholder={t('PlaceholderFirstName')}
|
||||
value={firstName.val}
|
||||
hasError={!firstName.isValid && hasError}
|
||||
onChangeValue={onChangeFirstNameHandler}
|
||||
/>
|
||||
<TextField
|
||||
id="last-name"
|
||||
className="fields"
|
||||
t={t}
|
||||
placeholder={t('PlaceholderLastName')}
|
||||
value={lastName.val}
|
||||
hasError={!lastName.isValid && hasError}
|
||||
onChangeValue={onChangeLastNameHandler}
|
||||
/>
|
||||
<PasswordField t={t} onChangePassword={onChangePasswordHandler} />
|
||||
<Button
|
||||
className="registration-button"
|
||||
primary
|
||||
scale={true}
|
||||
size="large"
|
||||
label={isLoading ? t("LoadingProcessing") : t("JoinBtn")}
|
||||
isDisabled={isLoading}
|
||||
isLoading={isLoading}
|
||||
onClick={onSubmitHandler}
|
||||
/>
|
||||
</StyledRegistrationForm>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegistrationForm;
|
@ -23,5 +23,11 @@
|
||||
"RegistrationTitle": "Cloud office applications",
|
||||
"RegistrationDesc": "Create portal",
|
||||
"IncorrectEmail": "Incorrect email",
|
||||
"LengthPassLess": "Add {{lengthSetting}} characters"
|
||||
"LengthPassLess": "Add {{lengthSetting}} characters",
|
||||
"JoinBtn": "Join",
|
||||
"PlaceholderPortalName": "portalname",
|
||||
"PlaceholderFirstName": "First name",
|
||||
"PlaceholderLastName": "Last name",
|
||||
"LocalDomain": "Incorrect local domain",
|
||||
"IncorrectDomain": "Incorrect domain"
|
||||
}
|
@ -23,5 +23,11 @@
|
||||
"RegistrationTitle": "Облачные офисные приложения",
|
||||
"RegistrationDesc": "Создать портал",
|
||||
"IncorrectEmail": "Неверный email",
|
||||
"LengthPassLess": "Добавьте {{lengthSetting}} символов"
|
||||
"LengthPassLess": "Добавьте {{lengthSetting}} символов",
|
||||
"JoinBtn": "Присоединиться",
|
||||
"PlaceholderPortalName": "portalname",
|
||||
"PlaceholderFirstName": "Имя",
|
||||
"PlaceholderLastName": "Фамилия",
|
||||
"LocalDomain": "Некорректный локальный домен",
|
||||
"IncorrectDomain": "Некорректный домен"
|
||||
}
|
Loading…
Reference in New Issue
Block a user