Components:WizardForm: add Wizard Form
This commit is contained in:
parent
b485c6a4d9
commit
8ec905319a
216
packages/login/src/components/WizardForm/Wizard.styled.ts
Normal file
216
packages/login/src/components/WizardForm/Wizard.styled.ts
Normal file
@ -0,0 +1,216 @@
|
||||
// (c) Copyright Ascensio System SIA 2009-2024
|
||||
//
|
||||
// This program is a free software product.
|
||||
// You can redistribute it and/or modify it under the terms
|
||||
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
|
||||
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
|
||||
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
|
||||
// any third-party rights.
|
||||
//
|
||||
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
|
||||
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
|
||||
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||
//
|
||||
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
|
||||
//
|
||||
// The interactive user interfaces in modified source and object code versions of the Program must
|
||||
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
|
||||
//
|
||||
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
|
||||
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
|
||||
// trademark law for use of our trademarks.
|
||||
//
|
||||
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import styled, { css } from "styled-components";
|
||||
import { tablet, mobile } from "@docspace/shared/utils";
|
||||
import { isIOS, isFirefox } from "react-device-detect";
|
||||
import BackgroundPatternReactSvgUrl from "PUBLIC_DIR/images/background.pattern.react.svg?url";
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
height: ${isIOS && !isFirefox ? "calc(var(--vh, 1vh) * 100)" : "100vh"};
|
||||
width: 100vw;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media ${mobile} {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.bg-cover {
|
||||
background-image: url("${BackgroundPatternReactSvgUrl}");
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
|
||||
@media ${mobile} {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledContent = styled.div`
|
||||
min-height: 100vh;
|
||||
flex: 1 0 auto;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
|
||||
@media ${mobile} {
|
||||
min-height: 100%;
|
||||
width: calc(100% - 32px);
|
||||
justify-content: start;
|
||||
}
|
||||
`;
|
||||
|
||||
export const WizardContainer = styled.div`
|
||||
margin: 56px auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media ${tablet} {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
max-width: 100%;
|
||||
margin: 32px auto;
|
||||
}
|
||||
|
||||
.portal-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
padding-bottom: 32px;
|
||||
|
||||
@media ${mobile} {
|
||||
max-width: 343px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-header {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.password-field-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wizard-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.password-field {
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
.license-filed {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledLink = styled.div`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding-bottom: 16px;
|
||||
padding-top: 8px;
|
||||
|
||||
.generate-password-link {
|
||||
color: ${(props) => props.theme.client.wizard.generatePasswordColor};
|
||||
}
|
||||
|
||||
.icon-button_svg {
|
||||
svg > g > path {
|
||||
fill: ${(props) => props.theme.client.wizard.generatePasswordColor};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledInfo = styled.div`
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 59px 1fr;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
margin-bottom: 4px;
|
||||
|
||||
.machine-name {
|
||||
padding-bottom: 4px;
|
||||
padding-top: 4px;
|
||||
padding-left: 8px;
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-right: 8px;`
|
||||
: `padding-left: 8px;`}
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.combo-button {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-right: 8px;`
|
||||
: `padding-left: 8px;`}
|
||||
}
|
||||
|
||||
.wrapper__language-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.combo-button-label {
|
||||
max-width: 220px;
|
||||
|
||||
@media ${tablet} {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
max-width: 220px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledAcceptTerms = styled.div`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3em;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 24px;
|
||||
|
||||
.wizard-checkbox svg {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: 8px;`
|
||||
: `margin-right: 8px;`}
|
||||
}
|
||||
`;
|
||||
472
packages/login/src/components/WizardForm/index.tsx
Normal file
472
packages/login/src/components/WizardForm/index.tsx
Normal file
@ -0,0 +1,472 @@
|
||||
// (c) Copyright Ascensio System SIA 2009-2024
|
||||
//
|
||||
// This program is a free software product.
|
||||
// You can redistribute it and/or modify it under the terms
|
||||
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
|
||||
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
|
||||
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
|
||||
// any third-party rights.
|
||||
//
|
||||
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
|
||||
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
|
||||
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||
//
|
||||
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
|
||||
//
|
||||
// The interactive user interfaces in modified source and object code versions of the Program must
|
||||
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
|
||||
//
|
||||
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
|
||||
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
|
||||
// trademark law for use of our trademarks.
|
||||
//
|
||||
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
"use client";
|
||||
|
||||
import { TCulturesOption, TTimeZoneOption } from "@/types";
|
||||
import { getSelectZone, getUserTimezone, mapTimezonesToArray } from "@/utils";
|
||||
import {
|
||||
DEFAULT_SELECT_LANGUAGE,
|
||||
DEFAULT_SELECT_TIMEZONE,
|
||||
URL_LICENSE,
|
||||
} from "@/utils/constants";
|
||||
import {
|
||||
TPasswordHash,
|
||||
TPasswordSettings,
|
||||
TPortalCultures,
|
||||
TTimeZone,
|
||||
} from "@docspace/shared/api/settings/types";
|
||||
import {
|
||||
convertLanguage,
|
||||
createPasswordHash,
|
||||
mapCulturesToArray,
|
||||
} from "@docspace/shared/utils/common";
|
||||
import { Text } from "@docspace/shared/components/text";
|
||||
import { FieldContainer } from "@docspace/shared/components/field-container";
|
||||
import { ChangeEvent, MouseEvent, useEffect, useRef, useState } from "react";
|
||||
import { EmailInput, TValidate } from "@docspace/shared/components/email-input";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
COOKIE_EXPIRATION_YEAR,
|
||||
LANGUAGE,
|
||||
PRODUCT_NAME,
|
||||
} from "@docspace/shared/constants";
|
||||
import { EmailSettings } from "@docspace/shared/utils";
|
||||
import {
|
||||
PasswordInput,
|
||||
PasswordInputHandle,
|
||||
} from "@docspace/shared/components/password-input";
|
||||
import { FileInput } from "@docspace/shared/components/file-input";
|
||||
import { StyledAcceptTerms, StyledInfo, StyledLink } from "./Wizard.styled";
|
||||
import { IconButton } from "@docspace/shared/components/icon-button";
|
||||
import { Link, LinkTarget, LinkType } from "@docspace/shared/components/link";
|
||||
import RefreshReactSvgUrl from "PUBLIC_DIR/images/refresh.react.svg?url";
|
||||
import { setLicense } from "@docspace/shared/api/settings";
|
||||
import { ComboBox, ComboBoxSize } from "@docspace/shared/components/combobox";
|
||||
import BetaBadge from "@docspace/client/src/components/BetaBadgeWrapper";
|
||||
import { isMobile } from "@docspace/shared/utils";
|
||||
import { Checkbox } from "@docspace/shared/components/checkbox";
|
||||
import { useTheme } from "styled-components";
|
||||
import { Button, ButtonSize } from "@docspace/shared/components/button";
|
||||
import api from "@docspace/shared/api";
|
||||
import { setCookie } from "@docspace/shared/utils/cookie";
|
||||
import { InputSize, InputType } from "@docspace/shared/components/text-input";
|
||||
|
||||
type WizardFormProps = {
|
||||
passwordSettings?: TPasswordSettings;
|
||||
machineName?: string;
|
||||
isRequiredLicense?: boolean;
|
||||
portalTimeZones?: TTimeZone[];
|
||||
portalCultures?: TPortalCultures;
|
||||
culture?: string;
|
||||
wizardToken?: string;
|
||||
passwordHash?: TPasswordHash;
|
||||
};
|
||||
|
||||
const emailSettings = new EmailSettings();
|
||||
emailSettings.allowDomainPunycode = true;
|
||||
|
||||
function WizardForm(props: WizardFormProps) {
|
||||
const {
|
||||
passwordSettings,
|
||||
machineName,
|
||||
isRequiredLicense,
|
||||
portalTimeZones,
|
||||
portalCultures,
|
||||
culture,
|
||||
wizardToken,
|
||||
passwordHash,
|
||||
} = props;
|
||||
|
||||
const [selectedTimezone, setSelectedTimezone] = useState<TTimeZoneOption>(
|
||||
DEFAULT_SELECT_TIMEZONE,
|
||||
);
|
||||
const [selectedLanguage, setSelectedLanguage] = useState<TCulturesOption>(
|
||||
DEFAULT_SELECT_LANGUAGE,
|
||||
);
|
||||
const [cultures, setCultures] = useState<TCulturesOption[]>();
|
||||
const [timezones, setTimezones] = useState<TTimeZoneOption[]>();
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [hasErrorEmail, setHasErrorEmail] = useState(false);
|
||||
const [password, setPassword] = useState("");
|
||||
const [hasErrorPass, setHasErrorPass] = useState(false);
|
||||
const [hasErrorLicense, setHasErrorLicense] = useState(false);
|
||||
const [invalidLicense, setInvalidLicense] = useState(false);
|
||||
const [licenseUpload, setLicenseUpload] = useState<string | null>(null);
|
||||
const [agreeTerms, setAgreeTerms] = useState(false);
|
||||
const [hasErrorAgree, setHasErrorAgree] = useState(false);
|
||||
const [isCreated, setIsCreated] = useState(false);
|
||||
|
||||
const { t, i18n } = useTranslation(["Wizard", "Common"]);
|
||||
const theme = useTheme();
|
||||
|
||||
const refPassInput = useRef<PasswordInputHandle>(null);
|
||||
|
||||
//TODO: add property
|
||||
const userCulture = window.navigator
|
||||
? window.navigator.language
|
||||
: culture || "en";
|
||||
|
||||
const convertedCulture = convertLanguage(userCulture);
|
||||
|
||||
useEffect(() => {
|
||||
if (portalTimeZones) {
|
||||
const userTimezone = getUserTimezone();
|
||||
const zones = mapTimezonesToArray(portalTimeZones);
|
||||
const select = getSelectZone(zones, userTimezone);
|
||||
setTimezones(zones);
|
||||
|
||||
if (select.length === 0) {
|
||||
setSelectedTimezone(DEFAULT_SELECT_TIMEZONE);
|
||||
} else {
|
||||
setSelectedTimezone(select[0]);
|
||||
}
|
||||
}
|
||||
}, [portalTimeZones]);
|
||||
|
||||
useEffect(() => {
|
||||
if (portalCultures) {
|
||||
const cultures = mapCulturesToArray(portalCultures, true, i18n);
|
||||
const select = cultures.filter((lang) => lang.key === convertedCulture);
|
||||
setCultures(cultures);
|
||||
|
||||
if (select.length === 0) {
|
||||
setSelectedLanguage(DEFAULT_SELECT_LANGUAGE);
|
||||
} else {
|
||||
setSelectedLanguage(select[0]);
|
||||
}
|
||||
}
|
||||
}, [convertedCulture, i18n, portalCultures]);
|
||||
|
||||
const onEmailChangeHandler = (result: TValidate): undefined => {
|
||||
setHasErrorEmail(!result.isValid);
|
||||
};
|
||||
|
||||
const onChangeEmail = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setEmail(e.target.value);
|
||||
};
|
||||
|
||||
const onChangePassword = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setPassword(e.target.value);
|
||||
};
|
||||
|
||||
const isValidPassHandler = (progressScore: boolean) => {
|
||||
setHasErrorPass(!progressScore);
|
||||
};
|
||||
|
||||
const generatePassword = (e: MouseEvent) => {
|
||||
if (isCreated) return;
|
||||
if (refPassInput.current === null) return;
|
||||
|
||||
refPassInput.current.onGeneratePassword(e);
|
||||
};
|
||||
|
||||
const onLanguageSelect = (lang: TCulturesOption) => {
|
||||
setSelectedLanguage(lang);
|
||||
};
|
||||
|
||||
const onTimezoneSelect = (timezone: TTimeZoneOption) => {
|
||||
setSelectedTimezone(timezone);
|
||||
};
|
||||
|
||||
const onLicenseFileHandler = (file: File | File[]) => {
|
||||
if (licenseUpload) setLicenseUpload(null);
|
||||
setHasErrorLicense(false);
|
||||
setInvalidLicense(false);
|
||||
|
||||
let fd = new FormData();
|
||||
fd.append("files", file as Blob);
|
||||
|
||||
if (!wizardToken) return;
|
||||
|
||||
setLicense(wizardToken, fd)
|
||||
.then((res) => {
|
||||
setLicenseUpload(res);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
setHasErrorLicense(true);
|
||||
setInvalidLicense(true);
|
||||
});
|
||||
};
|
||||
|
||||
const onAgreeTermsChange = () => {
|
||||
if (hasErrorAgree && !agreeTerms) setHasErrorAgree(false);
|
||||
setAgreeTerms(!agreeTerms);
|
||||
};
|
||||
|
||||
const validateFields = () => {
|
||||
let anyError = false;
|
||||
const emptyEmail = email.trim() === "";
|
||||
const emptyPassword = password.trim() === "";
|
||||
|
||||
if (emptyEmail || emptyPassword) {
|
||||
emptyEmail && setHasErrorEmail(true);
|
||||
emptyPassword && setHasErrorPass(true);
|
||||
anyError = true;
|
||||
}
|
||||
|
||||
if (!agreeTerms) {
|
||||
setHasErrorAgree(true);
|
||||
anyError = true;
|
||||
}
|
||||
|
||||
if (isRequiredLicense && licenseUpload === null) {
|
||||
setHasErrorLicense(true);
|
||||
anyError = true;
|
||||
}
|
||||
|
||||
if (anyError || hasErrorEmail || hasErrorPass) return false;
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const onContinueClick = async () => {
|
||||
if (!validateFields()) return;
|
||||
|
||||
setIsCreated(true);
|
||||
|
||||
const emailTrim = email.trim();
|
||||
const analytics = true;
|
||||
const hash = createPasswordHash(password, passwordHash);
|
||||
|
||||
try {
|
||||
await api.settings.setPortalOwner(
|
||||
emailTrim,
|
||||
hash,
|
||||
selectedLanguage.key,
|
||||
selectedTimezone.key,
|
||||
wizardToken,
|
||||
analytics,
|
||||
);
|
||||
|
||||
setCookie(LANGUAGE, selectedLanguage.key.toString(), {
|
||||
"max-age": COOKIE_EXPIRATION_YEAR,
|
||||
});
|
||||
|
||||
//setWizardComplete();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setIsCreated(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Text fontWeight={600} fontSize="16px" className="form-header">
|
||||
{t("Wizard:Desc", { productName: PRODUCT_NAME })}
|
||||
</Text>
|
||||
<FieldContainer
|
||||
className="wizard-field"
|
||||
isVertical={true}
|
||||
labelVisible={false}
|
||||
hasError={hasErrorEmail}
|
||||
errorMessage={t("ErrorEmail")}
|
||||
>
|
||||
<EmailInput
|
||||
name="wizard-email"
|
||||
tabIndex={1}
|
||||
type={InputType.email}
|
||||
size={InputSize.large}
|
||||
scale={true}
|
||||
value={email}
|
||||
placeholder={t("Common:Email")}
|
||||
emailSettings={emailSettings}
|
||||
hasError={hasErrorEmail}
|
||||
onValidateInput={onEmailChangeHandler}
|
||||
isAutoFocussed={true}
|
||||
onChange={onChangeEmail}
|
||||
isDisabled={isCreated}
|
||||
/>
|
||||
</FieldContainer>
|
||||
|
||||
<FieldContainer
|
||||
className="wizard-field password-field"
|
||||
isVertical={true}
|
||||
labelVisible={false}
|
||||
hasError={hasErrorPass}
|
||||
errorMessage={t("ErrorPassword")}
|
||||
>
|
||||
<PasswordInput
|
||||
ref={refPassInput}
|
||||
tabIndex={2}
|
||||
size={InputSize.large}
|
||||
scale={true}
|
||||
inputValue={password}
|
||||
inputType={InputType.password}
|
||||
passwordSettings={passwordSettings}
|
||||
isDisabled={isCreated}
|
||||
placeholder={t("Common:Password")}
|
||||
isDisableTooltip={true}
|
||||
isTextTooltipVisible={false}
|
||||
hasError={hasErrorPass}
|
||||
onChange={onChangePassword}
|
||||
autoComplete="current-password"
|
||||
onValidateInput={isValidPassHandler}
|
||||
/>
|
||||
</FieldContainer>
|
||||
|
||||
<StyledLink>
|
||||
<IconButton
|
||||
size={12}
|
||||
iconName={RefreshReactSvgUrl}
|
||||
onClick={generatePassword}
|
||||
/>
|
||||
<Link
|
||||
className="generate-password-link"
|
||||
type={LinkType.action}
|
||||
fontWeight={600}
|
||||
isHovered={true}
|
||||
onClick={generatePassword}
|
||||
>
|
||||
{t("GeneratePassword")}
|
||||
</Link>
|
||||
</StyledLink>
|
||||
|
||||
{isRequiredLicense && (
|
||||
<FieldContainer
|
||||
className="license-filed"
|
||||
isVertical={true}
|
||||
labelVisible={false}
|
||||
hasError={hasErrorLicense}
|
||||
errorMessage={
|
||||
invalidLicense ? t("ErrorLicenseBody") : t("ErrorUploadLicenseFile")
|
||||
}
|
||||
>
|
||||
<FileInput
|
||||
scale
|
||||
size={InputSize.large}
|
||||
accept={[".lic"]}
|
||||
placeholder={t("PlaceholderLicense")}
|
||||
onInput={onLicenseFileHandler}
|
||||
hasError={hasErrorLicense}
|
||||
/>
|
||||
</FieldContainer>
|
||||
)}
|
||||
|
||||
<StyledInfo>
|
||||
<Text color="#A3A9AE" fontWeight={400}>
|
||||
{t("Common:Domain")}
|
||||
</Text>
|
||||
<Text fontWeight={600} className="machine-name">
|
||||
{machineName}
|
||||
</Text>
|
||||
</StyledInfo>
|
||||
|
||||
<StyledInfo>
|
||||
<Text color="#A3A9AE" fontWeight={400}>
|
||||
{t("Common:Language")}
|
||||
</Text>
|
||||
<div className="wrapper__language-selector">
|
||||
<ComboBox
|
||||
withoutPadding
|
||||
directionY="both"
|
||||
options={cultures || []}
|
||||
selectedOption={selectedLanguage}
|
||||
onSelect={onLanguageSelect}
|
||||
isDisabled={isCreated}
|
||||
scaled={isMobile()}
|
||||
scaledOptions={false}
|
||||
size={ComboBoxSize.content}
|
||||
showDisabledItems={true}
|
||||
dropDownMaxHeight={364}
|
||||
manualWidth="250px"
|
||||
isDefaultMode={!isMobile()}
|
||||
withBlur={isMobile()}
|
||||
fillIcon={false}
|
||||
modernView={true}
|
||||
/>
|
||||
{selectedLanguage?.isBeta && (
|
||||
<BetaBadge withOutFeedbackLink place="bottom" />
|
||||
)}
|
||||
</div>
|
||||
</StyledInfo>
|
||||
|
||||
<StyledInfo>
|
||||
<Text color="#A3A9AE" fontWeight={400}>
|
||||
{t("Timezone")}
|
||||
</Text>
|
||||
<ComboBox
|
||||
textOverflow
|
||||
withoutPadding
|
||||
directionY="both"
|
||||
options={timezones || []}
|
||||
selectedOption={selectedTimezone}
|
||||
onSelect={onTimezoneSelect}
|
||||
isDisabled={isCreated}
|
||||
scaled={isMobile()}
|
||||
scaledOptions={false}
|
||||
size={ComboBoxSize.content}
|
||||
showDisabledItems={true}
|
||||
dropDownMaxHeight={364}
|
||||
manualWidth="350px"
|
||||
isDefaultMode={!isMobile()}
|
||||
withBlur={isMobile()}
|
||||
fillIcon={false}
|
||||
modernView={true}
|
||||
/>
|
||||
</StyledInfo>
|
||||
|
||||
<StyledAcceptTerms>
|
||||
<Checkbox
|
||||
className="wizard-checkbox"
|
||||
id="license"
|
||||
name="confirm"
|
||||
label={t("License")}
|
||||
isChecked={agreeTerms}
|
||||
onChange={onAgreeTermsChange}
|
||||
isDisabled={isCreated}
|
||||
hasError={hasErrorAgree}
|
||||
/>
|
||||
<Link
|
||||
type={LinkType.page}
|
||||
color={
|
||||
hasErrorAgree
|
||||
? theme.checkbox.errorColor
|
||||
: theme.client.wizard.linkColor
|
||||
}
|
||||
fontSize="13px"
|
||||
target={LinkTarget.blank}
|
||||
href={URL_LICENSE}
|
||||
>
|
||||
{t("LicenseLink")}
|
||||
</Link>
|
||||
</StyledAcceptTerms>
|
||||
|
||||
<Button
|
||||
size={ButtonSize.medium}
|
||||
scale={true}
|
||||
primary
|
||||
label={t("Common:ContinueButton")}
|
||||
isLoading={isCreated}
|
||||
onClick={onContinueClick}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default WizardForm;
|
||||
Loading…
Reference in New Issue
Block a user