Web: Client: refactoring translate Wizard
This commit is contained in:
Artem Tarasov
parent
1328eec01b
commit
5426089bdb
@ -9,7 +9,7 @@ import {
|
||||
PageLayout,
|
||||
ErrorContainer,
|
||||
history,
|
||||
utils as commonUtils
|
||||
utils as commonUtils,
|
||||
} from "asc-web-common";
|
||||
import { Loader, utils } from "asc-web-components";
|
||||
|
||||
@ -28,7 +28,7 @@ import {
|
||||
getIsRequiredLicense,
|
||||
setPortalOwner,
|
||||
setLicense,
|
||||
resetLicenseUploaded
|
||||
resetLicenseUploaded,
|
||||
} from "../../../store/wizard/actions";
|
||||
|
||||
import { createI18N } from "../../../helpers/i18n";
|
||||
@ -36,7 +36,7 @@ import { setDocumentTitle } from "../../../helpers/utils";
|
||||
|
||||
const i18n = createI18N({
|
||||
page: "Wizard",
|
||||
localesPath: "pages/Wizard"
|
||||
localesPath: "pages/Wizard",
|
||||
});
|
||||
|
||||
const { tablet } = utils.device;
|
||||
@ -99,10 +99,10 @@ class Body extends Component {
|
||||
hasErrorPass: false,
|
||||
hasErrorLicense: false,
|
||||
|
||||
checkingMessages: []
|
||||
checkingMessages: [],
|
||||
};
|
||||
|
||||
setDocumentTitle(t("wizardTitle"));
|
||||
setDocumentTitle(t("WizardTitle"));
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
@ -115,7 +115,7 @@ class Body extends Component {
|
||||
setIsWizardLoaded,
|
||||
getMachineName,
|
||||
getIsRequiredLicense,
|
||||
history
|
||||
history,
|
||||
} = this.props;
|
||||
|
||||
window.addEventListener("keyup", this.onKeyPressHandler);
|
||||
@ -130,34 +130,34 @@ class Body extends Component {
|
||||
getPortalTimezones(wizardToken).then(() => {
|
||||
const { timezones, timezone } = this.props;
|
||||
const zones = this.mapTimezonesToArray(timezones);
|
||||
const select = zones.filter(zone => zone.key === timezone);
|
||||
const select = zones.filter((zone) => zone.key === timezone);
|
||||
this.setState({
|
||||
timezones: zones,
|
||||
selectTimezone: {
|
||||
key: select[0].key,
|
||||
label: select[0].label
|
||||
}
|
||||
label: select[0].label,
|
||||
},
|
||||
});
|
||||
}),
|
||||
getPortalCultures().then(() => {
|
||||
const { cultures, culture } = this.props;
|
||||
const languages = this.mapCulturesToArray(cultures, t);
|
||||
let select = languages.filter(lang => lang.key === culture);
|
||||
let select = languages.filter((lang) => lang.key === culture);
|
||||
if (!select.length)
|
||||
select = languages.filter(lang => lang.key === "en-US");
|
||||
select = languages.filter((lang) => lang.key === "en-US");
|
||||
this.setState({
|
||||
languages: languages,
|
||||
selectLanguage: {
|
||||
key: select[0].key,
|
||||
label: select[0].label
|
||||
}
|
||||
label: select[0].label,
|
||||
},
|
||||
});
|
||||
})
|
||||
}),
|
||||
])
|
||||
.then(() => setIsWizardLoaded(true))
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.setState({
|
||||
errorInitWizard: e
|
||||
errorInitWizard: e,
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -178,41 +178,41 @@ class Body extends Component {
|
||||
window.removeEventListener("keyup", this.onKeyPressHandler);
|
||||
}
|
||||
|
||||
mapTimezonesToArray = timezones => {
|
||||
return timezones.map(timezone => {
|
||||
mapTimezonesToArray = (timezones) => {
|
||||
return timezones.map((timezone) => {
|
||||
return { key: timezone.id, label: timezone.displayName };
|
||||
});
|
||||
};
|
||||
|
||||
mapCulturesToArray = (cultures, t) => {
|
||||
return cultures.map(culture => {
|
||||
return cultures.map((culture) => {
|
||||
return { key: culture, label: t(`Culture_${culture}`) };
|
||||
});
|
||||
};
|
||||
|
||||
onKeyPressHandler = e => {
|
||||
onKeyPressHandler = (e) => {
|
||||
if (e.key === "Enter") this.onContinueHandler();
|
||||
};
|
||||
|
||||
isValidPassHandler = val => this.setState({ isValidPass: val });
|
||||
isValidPassHandler = (val) => this.setState({ isValidPass: val });
|
||||
|
||||
onChangePassword = e =>
|
||||
onChangePassword = (e) =>
|
||||
this.setState({ password: e.target.value, hasErrorPass: false });
|
||||
|
||||
onClickChangeEmail = () => this.setState({ visibleModal: true });
|
||||
|
||||
onEmailChangeHandler = result => {
|
||||
onEmailChangeHandler = (result) => {
|
||||
const { emailNeeded } = this.state;
|
||||
|
||||
emailNeeded
|
||||
? this.setState({
|
||||
emailValid: result.isValid,
|
||||
email: result.value,
|
||||
hasErrorEmail: false
|
||||
hasErrorEmail: false,
|
||||
})
|
||||
: this.setState({
|
||||
emailValid: result.isValid,
|
||||
changeEmail: result.value
|
||||
changeEmail: result.value,
|
||||
});
|
||||
};
|
||||
|
||||
@ -229,7 +229,7 @@ class Body extends Component {
|
||||
email,
|
||||
selectLanguage,
|
||||
selectTimezone,
|
||||
emailOwner
|
||||
emailOwner,
|
||||
} = this.state;
|
||||
|
||||
this.setState({ sending: true });
|
||||
@ -248,11 +248,11 @@ class Body extends Component {
|
||||
analytics
|
||||
)
|
||||
.then(() => history.push("/login"))
|
||||
.catch(e =>
|
||||
.catch((e) =>
|
||||
this.setState({
|
||||
errorLoading: true,
|
||||
sending: false,
|
||||
errorMessage: e
|
||||
errorMessage: e,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
@ -266,20 +266,20 @@ class Body extends Component {
|
||||
|
||||
let checkingMessages = [];
|
||||
if (!isValidPass) {
|
||||
checkingMessages.push(t("errorPassword"));
|
||||
checkingMessages.push(t("ErrorPassword"));
|
||||
this.setState({ hasErrorPass: true, checkingMessages: checkingMessages });
|
||||
}
|
||||
if (!license) {
|
||||
checkingMessages.push(t("errorLicenseRead"));
|
||||
checkingMessages.push(t("ErrorLicenseRead"));
|
||||
this.setState({ checkingMessages: checkingMessages });
|
||||
}
|
||||
|
||||
if (emailNeeded && !isLicenseRequired) {
|
||||
if (!emailValid) {
|
||||
checkingMessages.push(t("errorEmail"));
|
||||
checkingMessages.push(t("ErrorEmail"));
|
||||
this.setState({
|
||||
hasErrorEmail: true,
|
||||
checkingMessages: checkingMessages
|
||||
checkingMessages: checkingMessages,
|
||||
});
|
||||
}
|
||||
|
||||
@ -290,18 +290,18 @@ class Body extends Component {
|
||||
|
||||
if (emailNeeded && isLicenseRequired) {
|
||||
if (!emailValid) {
|
||||
checkingMessages.push(t("errorEmail"));
|
||||
checkingMessages.push(t("ErrorEmail"));
|
||||
this.setState({
|
||||
hasErrorEmail: true,
|
||||
checkingMessages: checkingMessages
|
||||
checkingMessages: checkingMessages,
|
||||
});
|
||||
}
|
||||
|
||||
if (!licenseUpload) {
|
||||
checkingMessages.push(t("errorUploadLicenseFile"));
|
||||
checkingMessages.push(t("ErrorUploadLicenseFile"));
|
||||
this.setState({
|
||||
hasErrorLicense: true,
|
||||
checkingMessages: checkingMessages
|
||||
checkingMessages: checkingMessages,
|
||||
});
|
||||
}
|
||||
|
||||
@ -312,10 +312,10 @@ class Body extends Component {
|
||||
|
||||
if (!emailNeeded && isLicenseRequired) {
|
||||
if (!licenseUpload) {
|
||||
checkingMessages.push(t("errorUploadLicenseFile"));
|
||||
checkingMessages.push(t("ErrorUploadLicenseFile"));
|
||||
this.setState({
|
||||
hasErrorLicense: true,
|
||||
checkingMessages: checkingMessages
|
||||
checkingMessages: checkingMessages,
|
||||
});
|
||||
}
|
||||
|
||||
@ -339,26 +339,26 @@ class Body extends Component {
|
||||
this.setState({
|
||||
visibleModal: false,
|
||||
errorLoading: false,
|
||||
errorMessage: null
|
||||
errorMessage: null,
|
||||
});
|
||||
};
|
||||
|
||||
onSelectTimezoneHandler = el => this.setState({ selectTimezone: el });
|
||||
onSelectTimezoneHandler = (el) => this.setState({ selectTimezone: el });
|
||||
|
||||
onSelectLanguageHandler = lang =>
|
||||
onSelectLanguageHandler = (lang) =>
|
||||
this.setState({
|
||||
selectLanguage: {
|
||||
key: lang.key,
|
||||
label: lang.label
|
||||
}
|
||||
label: lang.label,
|
||||
},
|
||||
});
|
||||
|
||||
onInputFileHandler = file => {
|
||||
onInputFileHandler = (file) => {
|
||||
const {
|
||||
setLicense,
|
||||
wizardToken,
|
||||
licenseUpload,
|
||||
resetLicenseUploaded
|
||||
resetLicenseUploaded,
|
||||
} = this.props;
|
||||
|
||||
if (licenseUpload) resetLicenseUploaded();
|
||||
@ -368,11 +368,11 @@ class Body extends Component {
|
||||
let fd = new FormData();
|
||||
fd.append("files", file);
|
||||
|
||||
setLicense(wizardToken, fd).catch(e =>
|
||||
setLicense(wizardToken, fd).catch((e) =>
|
||||
this.setState({
|
||||
errorLoading: true,
|
||||
errorMessage: e,
|
||||
hasErrorLicense: true
|
||||
hasErrorLicense: true,
|
||||
})
|
||||
);
|
||||
};
|
||||
@ -385,7 +385,7 @@ class Body extends Component {
|
||||
passwordSettings,
|
||||
culture,
|
||||
isLicenseRequired,
|
||||
urlLicense
|
||||
urlLicense,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
@ -407,7 +407,7 @@ class Body extends Component {
|
||||
hasErrorEmail,
|
||||
hasErrorPass,
|
||||
hasErrorLicense,
|
||||
checkingMessages
|
||||
checkingMessages,
|
||||
} = this.state;
|
||||
|
||||
console.log("wizard render");
|
||||
@ -415,9 +415,9 @@ class Body extends Component {
|
||||
if (errorInitWizard) {
|
||||
return (
|
||||
<ErrorContainer
|
||||
headerText={t("errorInitWizardHeader")}
|
||||
bodyText={t("errorInitWizard")}
|
||||
buttonText={t("errorInitWizardButton")}
|
||||
headerText={t("ErrorInitWizardHeader")}
|
||||
bodyText={t("ErrorInitWizard")}
|
||||
buttonText={t("ErrorInitWizardButton")}
|
||||
buttonUrl="/"
|
||||
/>
|
||||
);
|
||||
@ -499,12 +499,12 @@ Body.propTypes = {
|
||||
cultures: PropTypes.array.isRequired,
|
||||
timezones: PropTypes.array.isRequired,
|
||||
timezone: PropTypes.string.isRequired,
|
||||
licenseUpload: PropTypes.string
|
||||
licenseUpload: PropTypes.string,
|
||||
};
|
||||
|
||||
const WizardWrapper = withTranslation()(Body);
|
||||
|
||||
const WizardPage = props => {
|
||||
const WizardPage = (props) => {
|
||||
const { isLoaded } = props;
|
||||
|
||||
useEffect(() => {
|
||||
@ -524,7 +524,7 @@ const WizardPage = props => {
|
||||
|
||||
WizardPage.propTypes = {
|
||||
culture: PropTypes.string.isRequired,
|
||||
isLoaded: PropTypes.bool
|
||||
isLoaded: PropTypes.bool,
|
||||
};
|
||||
|
||||
function mapStateToProps({ wizard, auth }) {
|
||||
@ -532,7 +532,7 @@ function mapStateToProps({ wizard, auth }) {
|
||||
isWizardLoaded,
|
||||
machineName,
|
||||
isLicenseRequired,
|
||||
licenseUpload
|
||||
licenseUpload,
|
||||
} = wizard;
|
||||
|
||||
const {
|
||||
@ -542,7 +542,7 @@ function mapStateToProps({ wizard, auth }) {
|
||||
cultures,
|
||||
timezones,
|
||||
timezone,
|
||||
urlLicense
|
||||
urlLicense,
|
||||
} = auth.settings;
|
||||
|
||||
return {
|
||||
@ -557,21 +557,18 @@ function mapStateToProps({ wizard, auth }) {
|
||||
timezone,
|
||||
urlLicense,
|
||||
isLicenseRequired,
|
||||
licenseUpload
|
||||
licenseUpload,
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
{
|
||||
getPortalPasswordSettings,
|
||||
getPortalCultures,
|
||||
getPortalTimezones,
|
||||
setIsWizardLoaded,
|
||||
getMachineName,
|
||||
getIsRequiredLicense,
|
||||
setPortalOwner,
|
||||
setLicense,
|
||||
resetLicenseUploaded
|
||||
}
|
||||
)(withRouter(WizardPage));
|
||||
export default connect(mapStateToProps, {
|
||||
getPortalPasswordSettings,
|
||||
getPortalCultures,
|
||||
getPortalTimezones,
|
||||
setIsWizardLoaded,
|
||||
getMachineName,
|
||||
getIsRequiredLicense,
|
||||
setPortalOwner,
|
||||
setLicense,
|
||||
resetLicenseUploaded,
|
||||
})(withRouter(WizardPage));
|
||||
|
||||
@ -1,45 +1,45 @@
|
||||
{
|
||||
"wizardTitle": " Portal Setup - Go through these easy steps to start your web office easily",
|
||||
"welcomeTitle": "Welcome to your portal!",
|
||||
"desc": "Please setup the portal registration data.",
|
||||
"placeholderEmail": "E-mail",
|
||||
"placeholderPass": "Password",
|
||||
"placeholderLicense": "Your license file",
|
||||
"license": "Accept the terms of the ",
|
||||
"licenseLink": "License agreements",
|
||||
"domain": "Domain:",
|
||||
"email": "E-mail:",
|
||||
"language": "Language:",
|
||||
"timezone": "Time zone:",
|
||||
"buttonContinue": "Continue",
|
||||
"errorLicenseTitle": "Loading error",
|
||||
"errorLicenseBody": "The license is not valid. Make sure you select the correct file",
|
||||
"changeEmailTitle": "Change e-mail",
|
||||
"changeEmailBtn": "Save",
|
||||
"WizardTitle": " Portal Setup - Go through these easy steps to start your web office easily",
|
||||
"WelcomeTitle": "Welcome to your portal!",
|
||||
"Desc": "Please setup the portal registration data.",
|
||||
"PlaceholderEmail": "E-mail",
|
||||
"PlaceholderPass": "Password",
|
||||
"PlaceholderLicense": "Your license file",
|
||||
"License": "Accept the terms of the ",
|
||||
"LicenseLink": "License agreements",
|
||||
"Domain": "Domain:",
|
||||
"Email": "E-mail:",
|
||||
"Language": "Language:",
|
||||
"Timezone": "Time zone:",
|
||||
"ButtonContinue": "Continue",
|
||||
"ErrorLicenseTitle": "Loading error",
|
||||
"ErrorLicenseBody": "The license is not valid. Make sure you select the correct file",
|
||||
"ChangeEmailTitle": "Change e-mail",
|
||||
"ChangeEmailBtn": "Save",
|
||||
|
||||
"closeModalButton": "Close",
|
||||
"CloseModalButton": "Close",
|
||||
|
||||
"tooltipPasswordTitle": "Password must contain:",
|
||||
"tooltipPasswordLength": "-30 characters",
|
||||
"tooltipPasswordDigits": "digits",
|
||||
"tooltipPasswordCapital": "capital letters",
|
||||
"tooltipPasswordSpecial": "special characters (!@#$%^&*)",
|
||||
"TooltipPasswordTitle": "Password must contain:",
|
||||
"TooltipPasswordLength": "-30 characters",
|
||||
"TooltipPasswordDigits": "digits",
|
||||
"TooltipPasswordCapital": "capital letters",
|
||||
"TooltipPasswordSpecial": "special characters (!@#$%^&*)",
|
||||
|
||||
"Culture_en": "English (United Kingdom)",
|
||||
"Culture_en-US": "English (United States)",
|
||||
"Culture_ru-RU": "Russian (Russia)",
|
||||
|
||||
"errorPassword": "Password does not meet the requirements",
|
||||
"errorEmail": "Invalid e-mail Address",
|
||||
"errorLicenseRead": "You must accept the terms of the license agreement",
|
||||
"errorUploadLicenseFile": "You must select a license file",
|
||||
"errorInitWizardHeader": "Something went wrong.",
|
||||
"errorInitWizard": "The service is currently unavailable, please try again later.",
|
||||
"errorInitWizardButton": "Try again",
|
||||
"ErrorPassword": "Password does not meet the requirements",
|
||||
"ErrorEmail": "Invalid e-mail Address",
|
||||
"ErrorLicenseRead": "You must accept the terms of the license agreement",
|
||||
"ErrorUploadLicenseFile": "You must select a license file",
|
||||
"ErrorInitWizardHeader": "Something went wrong.",
|
||||
"ErrorInitWizard": "The service is currently unavailable, please try again later.",
|
||||
"ErrorInitWizardButton": "Try again",
|
||||
|
||||
"generatePassword": "Generate password",
|
||||
"GeneratePassword": "Generate password",
|
||||
|
||||
"errorParamsTitle": "Registration error",
|
||||
"errorParamsBody": "Incorrect data entered:",
|
||||
"errorParamsFooter": "Close"
|
||||
}
|
||||
"ErrorParamsTitle": "Registration error",
|
||||
"ErrorParamsBody": "Incorrect data entered:",
|
||||
"ErrorParamsFooter": "Close"
|
||||
}
|
||||
|
||||
@ -1,46 +1,46 @@
|
||||
{
|
||||
"wizardTitle": "Благодарим Вас за выбор ONLYOFFICE! В целях безопасности необходимо выполнить процедуру установки пароля",
|
||||
"welcomeTitle": "Добро пожаловать на Ваш портал!",
|
||||
"desc": "Пожалуйста, введите регистрационные данные.",
|
||||
"placeholderEmail": "E-mail",
|
||||
"placeholderPass": "Пароль",
|
||||
"placeholderLicense": "Ваш файл лицензии",
|
||||
"license": "Принять условия ",
|
||||
"licenseLink": "лицензионного соглашения",
|
||||
"domain": "Домен:",
|
||||
"email": "E-mail:",
|
||||
"language": "Язык:",
|
||||
"timezone": "Часовой пояс:",
|
||||
"buttonContinue": "Продолжить",
|
||||
"errorLicenseTitle": "Ошибка загрузки",
|
||||
"errorLicenseBody": "Лицензия не действительна. Убедитесь что вы выбрали верный файл",
|
||||
"changeEmailTitle": "Измененить адрес электронной почты",
|
||||
"changeEmailBtn": "Сохранить",
|
||||
"WizardTitle": "Благодарим Вас за выбор ONLYOFFICE! В целях безопасности необходимо выполнить процедуру установки пароля",
|
||||
"WelcomeTitle": "Добро пожаловать на Ваш портал!",
|
||||
"Desc": "Пожалуйста, введите регистрационные данные.",
|
||||
"PlaceholderEmail": "E-mail",
|
||||
"PlaceholderPass": "Пароль",
|
||||
"PlaceholderLicense": "Ваш файл лицензии",
|
||||
"License": "Принять условия ",
|
||||
"LicenseLink": "лицензионного соглашения",
|
||||
"Domain": "Домен:",
|
||||
"Email": "E-mail:",
|
||||
"Language": "Язык:",
|
||||
"Timezone": "Часовой пояс:",
|
||||
"ButtonContinue": "Продолжить",
|
||||
"ErrorLicenseTitle": "Ошибка загрузки",
|
||||
"ErrorLicenseBody": "Лицензия не действительна. Убедитесь что вы выбрали верный файл",
|
||||
"ChangeEmailTitle": "Измененить адрес электронной почты",
|
||||
"ChangeEmailBtn": "Сохранить",
|
||||
|
||||
"closeModalButton": "Закрыть",
|
||||
"CloseModalButton": "Закрыть",
|
||||
|
||||
"tooltipPasswordTitle": "Пароль должен содержать:",
|
||||
"tooltipPasswordLength": "-30 символов",
|
||||
"tooltipPasswordDigits": "цыфры",
|
||||
"tooltipPasswordCapital": "Заглавные буквы",
|
||||
"tooltipPasswordSpecial": "Специальные символы (!@#$%^&*)",
|
||||
"TooltipPasswordTitle": "Пароль должен содержать:",
|
||||
"TooltipPasswordLength": "-30 символов",
|
||||
"TooltipPasswordDigits": "цыфры",
|
||||
"TooltipPasswordCapital": "Заглавные буквы",
|
||||
"TooltipPasswordSpecial": "Специальные символы (!@#$%^&*)",
|
||||
|
||||
"Culture_en": "Английский (Великобритания)",
|
||||
"Culture_en-US": "Английский (США)",
|
||||
"Culture_ru-RU": "Русский (Россия)",
|
||||
|
||||
"errorPassword": "Пароль не соответсвует требованиям",
|
||||
"errorEmail": "Некорректный адрес электронной почты",
|
||||
"errorLicenseRead": "Необходимо приянть условия лицензионного соглашения",
|
||||
"errorUploadLicenseFile": "Небходим файл лицензии",
|
||||
"ErrorPassword": "Пароль не соответсвует требованиям",
|
||||
"ErrorEmail": "Некорректный адрес электронной почты",
|
||||
"ErrorLicenseRead": "Необходимо приянть условия лицензионного соглашения",
|
||||
"ErrorUploadLicenseFile": "Небходим файл лицензии",
|
||||
|
||||
"errorInitWizardHeader": "Что-то пошло не так.",
|
||||
"errorInitWizard": "В данный момент сервис недоступен, попробуйте позже.",
|
||||
"errorInitWizardButton": "Попробовать снова",
|
||||
"ErrorInitWizardHeader": "Что-то пошло не так.",
|
||||
"ErrorInitWizard": "В данный момент сервис недоступен, попробуйте позже.",
|
||||
"ErrorInitWizardButton": "Попробовать снова",
|
||||
|
||||
"generatePassword": "Сгенерировать пароль",
|
||||
"GeneratePassword": "Сгенерировать пароль",
|
||||
|
||||
"errorParamsTitle": "Ошибка регистрации",
|
||||
"errorParamsBody": "Введены некорректные данные:",
|
||||
"errorParamsFooter": "Закрыть"
|
||||
}
|
||||
"ErrorParamsTitle": "Ошибка регистрации",
|
||||
"ErrorParamsBody": "Введены некорректные данные:",
|
||||
"ErrorParamsFooter": "Закрыть"
|
||||
}
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import styled from 'styled-components';
|
||||
import styled from "styled-components";
|
||||
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
utils
|
||||
} from 'asc-web-components';
|
||||
import { Box, Button, utils } from "asc-web-components";
|
||||
|
||||
const { tablet } = utils.device;
|
||||
|
||||
@ -19,11 +15,7 @@ const StyledContainer = styled(Box)`
|
||||
}
|
||||
`;
|
||||
|
||||
const ButtonContainer = ({
|
||||
t,
|
||||
sending,
|
||||
onContinueHandler
|
||||
}) => {
|
||||
const ButtonContainer = ({ t, sending, onContinueHandler }) => {
|
||||
return (
|
||||
<StyledContainer>
|
||||
<Button
|
||||
@ -32,17 +24,17 @@ const ButtonContainer = ({
|
||||
primary
|
||||
isDisabled={sending}
|
||||
isLoading={sending ? true : false}
|
||||
label={t('buttonContinue')}
|
||||
label={t("ButtonContinue")}
|
||||
onClick={onContinueHandler}
|
||||
/>
|
||||
</StyledContainer>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
ButtonContainer.propTypes = {
|
||||
t: PropTypes.func.isRequired,
|
||||
sending: PropTypes.bool.isRequired,
|
||||
onContinueHandler: PropTypes.func.isRequired
|
||||
}
|
||||
onContinueHandler: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default ButtonContainer;
|
||||
export default ButtonContainer;
|
||||
|
||||
@ -1,61 +1,57 @@
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import styled from 'styled-components';
|
||||
import styled from "styled-components";
|
||||
|
||||
import {
|
||||
Box,
|
||||
Heading,
|
||||
Text,
|
||||
utils
|
||||
} from 'asc-web-components';
|
||||
import { Box, Heading, Text, utils } from "asc-web-components";
|
||||
|
||||
const { tablet } = utils.device;
|
||||
|
||||
const StyledHeaderContainer = styled(Box)`
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
|
||||
.wizard-title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
line-height: 36px;
|
||||
margin: 0;
|
||||
}
|
||||
.wizard-title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
line-height: 36px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wizard-desc {
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
.wizard-title,
|
||||
.wizard-desc {
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
.wizard-title, .wizard-desc {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 520px) {
|
||||
.wizard-title {
|
||||
font-size: 23px;
|
||||
line-height: 28px;
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.wizard-title {
|
||||
font-size: 23px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const HeaderContainer = ({ t }) => {
|
||||
return (
|
||||
<StyledHeaderContainer>
|
||||
<Heading level={1} title="Wizard" className="wizard-title">
|
||||
{t('welcomeTitle')}
|
||||
{t("WelcomeTitle")}
|
||||
</Heading>
|
||||
<Text className="wizard-desc" fontSize="13px">
|
||||
{t('desc')}
|
||||
{t("Desc")}
|
||||
</Text>
|
||||
</StyledHeaderContainer>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
HeaderContainer.propTypes = {
|
||||
t: PropTypes.func.isRequired
|
||||
}
|
||||
t: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default HeaderContainer;
|
||||
export default HeaderContainer;
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
import React, { useRef } from 'react';
|
||||
import React, { useRef } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import styled from 'styled-components';
|
||||
import styled from "styled-components";
|
||||
|
||||
import {
|
||||
Box,
|
||||
EmailInput,
|
||||
FileInput,
|
||||
PasswordInput,
|
||||
Link,
|
||||
Checkbox,
|
||||
utils
|
||||
} from 'asc-web-components';
|
||||
import {
|
||||
Box,
|
||||
EmailInput,
|
||||
FileInput,
|
||||
PasswordInput,
|
||||
Link,
|
||||
Checkbox,
|
||||
utils,
|
||||
} from "asc-web-components";
|
||||
|
||||
const { tablet } = utils.device;
|
||||
|
||||
const StyledContainer = styled(Box)`
|
||||
width: 311px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-row-gap: 16px;
|
||||
grid-row-gap: 16px;
|
||||
|
||||
.generate-pass-link {
|
||||
margin-bottom: 16px;
|
||||
@ -44,62 +44,70 @@ const StyledContainer = styled(Box)`
|
||||
`;
|
||||
|
||||
const InputContainer = ({
|
||||
t,
|
||||
settingsPassword,
|
||||
emailNeeded,
|
||||
onEmailChangeHandler,
|
||||
onInputFileHandler,
|
||||
password,
|
||||
onChangePassword,
|
||||
isValidPassHandler,
|
||||
license,
|
||||
onChangeLicense,
|
||||
settings,
|
||||
t,
|
||||
settingsPassword,
|
||||
emailNeeded,
|
||||
onEmailChangeHandler,
|
||||
onInputFileHandler,
|
||||
password,
|
||||
onChangePassword,
|
||||
isValidPassHandler,
|
||||
license,
|
||||
onChangeLicense,
|
||||
settings,
|
||||
isLicenseRequired,
|
||||
hasErrorEmail,
|
||||
hasErrorPass,
|
||||
hasErrorPass,
|
||||
hasErrorLicense,
|
||||
urlLicense
|
||||
urlLicense,
|
||||
}) => {
|
||||
const refPassInput = useRef(null);
|
||||
|
||||
const tooltipPassTitle = t('tooltipPasswordTitle');
|
||||
const tooltipPassLength = `${settingsPassword.minLength}${t('tooltipPasswordLength')}`;
|
||||
const tooltipPassDigits = settingsPassword.digits ? `${t('tooltipPasswordDigits')}` : null;
|
||||
const tooltipPassCapital = settingsPassword.upperCase ? `${t('tooltipPasswordCapital')}` : null;
|
||||
const tooltipPassSpecial = settingsPassword.specSymbols ? `${t('tooltipPasswordSpecial')}` : null;
|
||||
|
||||
const inputEmail = emailNeeded
|
||||
? <EmailInput
|
||||
name="wizard-email"
|
||||
tabIndex={1}
|
||||
size="large"
|
||||
scale={true}
|
||||
placeholder={t('email')}
|
||||
emailSettings={settings}
|
||||
hasError={hasErrorEmail}
|
||||
onValidateInput={onEmailChangeHandler}
|
||||
/>
|
||||
const tooltipPassTitle = t("TooltipPasswordTitle");
|
||||
const tooltipPassLength = `${settingsPassword.minLength}${t(
|
||||
"TooltipPasswordLength"
|
||||
)}`;
|
||||
const tooltipPassDigits = settingsPassword.digits
|
||||
? `${t("TooltipPasswordDigits")}`
|
||||
: null;
|
||||
const tooltipPassCapital = settingsPassword.upperCase
|
||||
? `${t("TooltipPasswordCapital")}`
|
||||
: null;
|
||||
const tooltipPassSpecial = settingsPassword.specSymbols
|
||||
? `${t("TooltipPasswordSpecial")}`
|
||||
: null;
|
||||
|
||||
const inputLicenseFile = isLicenseRequired
|
||||
? <Box>
|
||||
<FileInput
|
||||
tabIndex={3}
|
||||
placeholder={t('placeholderLicense')}
|
||||
size="large"
|
||||
scale={true}
|
||||
accept=".lic"
|
||||
hasError={hasErrorLicense}
|
||||
onInput={onInputFileHandler}
|
||||
/>
|
||||
</Box>
|
||||
: null;
|
||||
const inputEmail = emailNeeded ? (
|
||||
<EmailInput
|
||||
name="wizard-email"
|
||||
tabIndex={1}
|
||||
size="large"
|
||||
scale={true}
|
||||
placeholder={t("Email")}
|
||||
emailSettings={settings}
|
||||
hasError={hasErrorEmail}
|
||||
onValidateInput={onEmailChangeHandler}
|
||||
/>
|
||||
) : null;
|
||||
|
||||
const inputLicenseFile = isLicenseRequired ? (
|
||||
<Box>
|
||||
<FileInput
|
||||
tabIndex={3}
|
||||
placeholder={t("PlaceholderLicense")}
|
||||
size="large"
|
||||
scale={true}
|
||||
accept=".lic"
|
||||
hasError={hasErrorLicense}
|
||||
onInput={onInputFileHandler}
|
||||
/>
|
||||
</Box>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
{inputEmail}
|
||||
|
||||
|
||||
<PasswordInput
|
||||
ref={refPassInput}
|
||||
tabIndex={2}
|
||||
@ -108,7 +116,7 @@ const InputContainer = ({
|
||||
inputValue={password}
|
||||
passwordSettings={settingsPassword}
|
||||
isDisabled={false}
|
||||
placeholder={t('placeholderPass')}
|
||||
placeholder={t("PlaceholderPass")}
|
||||
hideNewPasswordButton={true}
|
||||
isDisableTooltip={true}
|
||||
isTextTooltipVisible={true}
|
||||
@ -121,41 +129,45 @@ const InputContainer = ({
|
||||
onChange={onChangePassword}
|
||||
onValidateInput={isValidPassHandler}
|
||||
/>
|
||||
{ inputLicenseFile }
|
||||
{!isLicenseRequired
|
||||
? <Link
|
||||
className='generate-pass-link'
|
||||
type="action"
|
||||
fontWeight="600"
|
||||
isHovered={true}
|
||||
onClick={() => refPassInput.current.onGeneratePassword()}>
|
||||
{t('generatePassword')}
|
||||
</Link>
|
||||
: null
|
||||
}
|
||||
{inputLicenseFile}
|
||||
{!isLicenseRequired ? (
|
||||
<Link
|
||||
className="generate-pass-link"
|
||||
type="action"
|
||||
fontWeight="600"
|
||||
isHovered={true}
|
||||
onClick={() => refPassInput.current.onGeneratePassword()}
|
||||
>
|
||||
{t("GeneratePassword")}
|
||||
</Link>
|
||||
) : null}
|
||||
<Box>
|
||||
<Checkbox
|
||||
className="wizard-checkbox"
|
||||
id="license"
|
||||
name="confirm"
|
||||
label={t('license')}
|
||||
label={t("License")}
|
||||
isChecked={license}
|
||||
isDisabled={false}
|
||||
onChange={onChangeLicense}
|
||||
/>
|
||||
<Link
|
||||
<Link
|
||||
className="link"
|
||||
type="page"
|
||||
color="#116d9d"
|
||||
type="page"
|
||||
color="#116d9d"
|
||||
fontSize="13px"
|
||||
target="_blank"
|
||||
href={urlLicense ? urlLicense : "https://gnu.org/licenses/gpl-3.0.html"}
|
||||
href={
|
||||
urlLicense ? urlLicense : "https://gnu.org/licenses/gpl-3.0.html"
|
||||
}
|
||||
isBold={false}
|
||||
>{t('licenseLink')}</Link>
|
||||
>
|
||||
{t("LicenseLink")}
|
||||
</Link>
|
||||
</Box>
|
||||
</StyledContainer>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
InputContainer.propTypes = {
|
||||
t: PropTypes.func.isRequired,
|
||||
@ -168,7 +180,7 @@ InputContainer.propTypes = {
|
||||
isValidPassHandler: PropTypes.func.isRequired,
|
||||
license: PropTypes.bool.isRequired,
|
||||
onChangeLicense: PropTypes.func.isRequired,
|
||||
urlLicense: PropTypes.string
|
||||
urlLicense: PropTypes.string,
|
||||
};
|
||||
|
||||
export default InputContainer;
|
||||
export default InputContainer;
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
Button,
|
||||
Box,
|
||||
Text,
|
||||
utils
|
||||
utils,
|
||||
} from "asc-web-components";
|
||||
|
||||
const { tablet } = utils.device;
|
||||
@ -36,21 +36,21 @@ const ModalContainer = ({
|
||||
onEmailChangeHandler,
|
||||
onSaveEmailHandler,
|
||||
onCloseModal,
|
||||
checkingMessages
|
||||
checkingMessages,
|
||||
}) => {
|
||||
let header, content, footer;
|
||||
|
||||
const visible = errorLoading ? errorLoading : visibleModal;
|
||||
|
||||
if (errorLoading) {
|
||||
header = t("errorLicenseTitle");
|
||||
header = t("ErrorLicenseTitle");
|
||||
content = (
|
||||
<BodyContainer>
|
||||
{errorMessage ? errorMessage : t("errorLicenseBody")}
|
||||
{errorMessage ? errorMessage : t("ErrorLicenseBody")}
|
||||
</BodyContainer>
|
||||
);
|
||||
} else if (visibleModal && checkingMessages.length < 1) {
|
||||
header = t("changeEmailTitle");
|
||||
header = t("ChangeEmailTitle");
|
||||
|
||||
content = (
|
||||
<EmailInput
|
||||
@ -59,7 +59,7 @@ const ModalContainer = ({
|
||||
size="base"
|
||||
id="change-email"
|
||||
name="email-wizard"
|
||||
placeholder={t("placeholderEmail")}
|
||||
placeholder={t("PlaceholderEmail")}
|
||||
emailSettings={settings}
|
||||
value={emailOwner}
|
||||
onValidateInput={onEmailChangeHandler}
|
||||
@ -70,7 +70,7 @@ const ModalContainer = ({
|
||||
<BtnContainer>
|
||||
<Button
|
||||
key="saveBtn"
|
||||
label={t("changeEmailBtn")}
|
||||
label={t("ChangeEmailBtn")}
|
||||
primary={true}
|
||||
scale={true}
|
||||
size="big"
|
||||
@ -79,11 +79,11 @@ const ModalContainer = ({
|
||||
</BtnContainer>
|
||||
);
|
||||
} else if (visibleModal && checkingMessages.length > 0) {
|
||||
header = t("errorParamsTitle");
|
||||
header = t("ErrorParamsTitle");
|
||||
|
||||
content = (
|
||||
<>
|
||||
<Text as="p">{t("errorParamsBody")}</Text>
|
||||
<Text as="p">{t("ErrorParamsBody")}</Text>
|
||||
{checkingMessages.map((el, index) => (
|
||||
<Text key={index} as="p">
|
||||
- {el};
|
||||
@ -96,7 +96,7 @@ const ModalContainer = ({
|
||||
<BtnContainer>
|
||||
<Button
|
||||
key="saveBtn"
|
||||
label={t("errorParamsFooter")}
|
||||
label={t("ErrorParamsFooter")}
|
||||
primary={true}
|
||||
scale={true}
|
||||
size="big"
|
||||
@ -128,7 +128,7 @@ ModalContainer.propTypes = {
|
||||
settings: PropTypes.object.isRequired,
|
||||
onEmailChangeHandler: PropTypes.func.isRequired,
|
||||
onSaveEmailHandler: PropTypes.func.isRequired,
|
||||
onCloseModal: PropTypes.func.isRequired
|
||||
onCloseModal: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default ModalContainer;
|
||||
|
||||
@ -1,14 +1,8 @@
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import styled from 'styled-components';
|
||||
import styled from "styled-components";
|
||||
|
||||
import {
|
||||
Box,
|
||||
ComboBox,
|
||||
Text,
|
||||
Link,
|
||||
utils
|
||||
} from 'asc-web-components';
|
||||
import { Box, ComboBox, Text, Link, utils } from "asc-web-components";
|
||||
|
||||
const { tablet } = utils.device;
|
||||
|
||||
@ -39,80 +33,80 @@ const StyledContainer = styled(Box)`
|
||||
`;
|
||||
|
||||
const SettingsContainer = ({
|
||||
selectLanguage,
|
||||
selectTimezone,
|
||||
languages,
|
||||
timezones,
|
||||
emailNeeded,
|
||||
email,
|
||||
selectLanguage,
|
||||
selectTimezone,
|
||||
languages,
|
||||
timezones,
|
||||
emailNeeded,
|
||||
email,
|
||||
emailOwner,
|
||||
t,
|
||||
machineName,
|
||||
onClickChangeEmail,
|
||||
onSelectLanguageHandler,
|
||||
onSelectTimezoneHandler
|
||||
t,
|
||||
machineName,
|
||||
onClickChangeEmail,
|
||||
onSelectLanguageHandler,
|
||||
onSelectTimezoneHandler,
|
||||
}) => {
|
||||
|
||||
const titleEmail = !emailNeeded
|
||||
? <Text>{t('email')}</Text>
|
||||
: null
|
||||
|
||||
const contentEmail = !emailNeeded
|
||||
? <Link
|
||||
className="email-value"
|
||||
type="action"
|
||||
fontSize="13px"
|
||||
fontWeight="600"
|
||||
isHovered={true}
|
||||
onClick={onClickChangeEmail}
|
||||
>
|
||||
{email ? email : emailOwner}
|
||||
</Link>
|
||||
: null
|
||||
|
||||
const titleEmail = !emailNeeded ? <Text>{t("Email")}</Text> : null;
|
||||
|
||||
const contentEmail = !emailNeeded ? (
|
||||
<Link
|
||||
className="email-value"
|
||||
type="action"
|
||||
fontSize="13px"
|
||||
fontWeight="600"
|
||||
isHovered={true}
|
||||
onClick={onClickChangeEmail}
|
||||
>
|
||||
{email ? email : emailOwner}
|
||||
</Link>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<Text fontSize="13px">{t('domain')}</Text>
|
||||
<Text className="machine-name-value" fontSize="13px" fontWeight="600">{machineName}</Text>
|
||||
<Text fontSize="13px">{t("Domain")}</Text>
|
||||
<Text className="machine-name-value" fontSize="13px" fontWeight="600">
|
||||
{machineName}
|
||||
</Text>
|
||||
|
||||
{titleEmail}
|
||||
{contentEmail}
|
||||
|
||||
<Text fontSize="13px">{t('language')}</Text>
|
||||
<ComboBox
|
||||
className="drop-down"
|
||||
<Text fontSize="13px">{t("Language")}</Text>
|
||||
<ComboBox
|
||||
className="drop-down"
|
||||
options={languages}
|
||||
selectedOption={{
|
||||
key: selectLanguage.key,
|
||||
label: selectLanguage.label
|
||||
}}
|
||||
label: selectLanguage.label,
|
||||
}}
|
||||
noBorder={true}
|
||||
scaled={false}
|
||||
size='content'
|
||||
dropDownMaxHeight={300}
|
||||
size="content"
|
||||
dropDownMaxHeight={300}
|
||||
onSelect={onSelectLanguageHandler}
|
||||
textOverflow={true}
|
||||
/>
|
||||
|
||||
<Text className="title" fontSize="13px">{t('timezone')}</Text>
|
||||
<ComboBox
|
||||
<Text className="title" fontSize="13px">
|
||||
{t("Timezone")}
|
||||
</Text>
|
||||
<ComboBox
|
||||
className="drop-down"
|
||||
options={timezones}
|
||||
selectedOption={{
|
||||
key: selectTimezone.key,
|
||||
label: selectTimezone.label
|
||||
label: selectTimezone.label,
|
||||
}}
|
||||
noBorder={true}
|
||||
dropDownMaxHeight={300}
|
||||
scaled={false}
|
||||
size='content'
|
||||
size="content"
|
||||
onSelect={onSelectTimezoneHandler}
|
||||
textOverflow={true}
|
||||
/>
|
||||
|
||||
</StyledContainer>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
SettingsContainer.propTypes = {
|
||||
selectLanguage: PropTypes.object.isRequired,
|
||||
@ -126,7 +120,7 @@ SettingsContainer.propTypes = {
|
||||
email: PropTypes.string,
|
||||
onClickChangeEmail: PropTypes.func.isRequired,
|
||||
onSelectLanguageHandler: PropTypes.func.isRequired,
|
||||
onSelectTimezoneHandler: PropTypes.func.isRequired
|
||||
}
|
||||
onSelectTimezoneHandler: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default SettingsContainer;
|
||||
export default SettingsContainer;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user