Client: WIzard: fix style
This commit is contained in:
Viktor Fomin
parent
c3a54b2e74
commit
3d58a461c0
@ -8,7 +8,7 @@ export const Wrapper = styled.div`
|
||||
width: 100vw;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
${isMobileOnly &&
|
||||
@ -18,23 +18,38 @@ export const Wrapper = styled.div`
|
||||
width: 100%;
|
||||
`}
|
||||
|
||||
background-image: url("${BackgroundPatternReactSvgUrl}");
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: 100% 100%;
|
||||
|
||||
@media ${tablet} {
|
||||
.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 ${hugeMobile} {
|
||||
background-image: none;
|
||||
@media ${hugeMobile} {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const WizardContainer = styled.div`
|
||||
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;
|
||||
margin-top: 56px;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
`;
|
||||
|
||||
export const WizardContainer = styled.div`
|
||||
margin: 56px auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@ -34,6 +34,7 @@ import {
|
||||
StyledLink,
|
||||
StyledInfo,
|
||||
StyledAcceptTerms,
|
||||
StyledContent,
|
||||
} from "./StyledWizard";
|
||||
import { getUserTimezone, getSelectZone } from "./timezonesHelper";
|
||||
|
||||
@ -275,194 +276,197 @@ const Wizard = (props) => {
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<WizardContainer>
|
||||
<DocspaceLogo className="docspace-logo" />
|
||||
<Text fontWeight={700} fontSize="23px" className="welcome-text">
|
||||
{t("WelcomeTitle")}
|
||||
</Text>
|
||||
<FormWrapper>
|
||||
<Text fontWeight={600} fontSize="16px" className="form-header">
|
||||
{t("Desc")}
|
||||
<div className="bg-cover"></div>
|
||||
<StyledContent>
|
||||
<WizardContainer>
|
||||
<DocspaceLogo className="docspace-logo" />
|
||||
<Text fontWeight={700} fontSize="23px" className="welcome-text">
|
||||
{t("WelcomeTitle")}
|
||||
</Text>
|
||||
<FieldContainer
|
||||
className="wizard-field"
|
||||
isVertical={true}
|
||||
labelVisible={false}
|
||||
hasError={hasErrorEmail}
|
||||
errorMessage={t("ErrorEmail")}
|
||||
>
|
||||
<EmailInput
|
||||
name="wizard-email"
|
||||
tabIndex={1}
|
||||
size="large"
|
||||
scale={true}
|
||||
placeholder={t("Common:Email")}
|
||||
emailSettings={emailSettings}
|
||||
hasError={hasErrorEmail}
|
||||
onValidateInput={onEmailChangeHandler}
|
||||
isDisabled={isCreated}
|
||||
/>
|
||||
</FieldContainer>
|
||||
|
||||
<FieldContainer
|
||||
className="wizard-field password-field"
|
||||
isVertical={true}
|
||||
labelVisible={false}
|
||||
hasError={hasErrorPass}
|
||||
errorMessage={t("ErrorPassword")}
|
||||
>
|
||||
<PasswordInput
|
||||
ref={refPassInput}
|
||||
tabIndex={2}
|
||||
size="large"
|
||||
scale={true}
|
||||
inputValue={password}
|
||||
passwordSettings={passwordSettings}
|
||||
isDisabled={isCreated}
|
||||
placeholder={t("Common:Password")}
|
||||
hideNewPasswordButton={true}
|
||||
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="action"
|
||||
fontWeight={600}
|
||||
isHovered={true}
|
||||
onClick={generatePassword}
|
||||
>
|
||||
{t("GeneratePassword")}
|
||||
</Link>
|
||||
</StyledLink>
|
||||
|
||||
{isLicenseRequired && (
|
||||
<FormWrapper>
|
||||
<Text fontWeight={600} fontSize="16px" className="form-header">
|
||||
{t("Desc")}
|
||||
</Text>
|
||||
<FieldContainer
|
||||
className="license-filed"
|
||||
className="wizard-field"
|
||||
isVertical={true}
|
||||
labelVisible={false}
|
||||
hasError={hasErrorLicense}
|
||||
errorMessage={
|
||||
invalidLicense
|
||||
? t("ErrorLicenseBody")
|
||||
: t("ErrorUploadLicenseFile")
|
||||
}
|
||||
hasError={hasErrorEmail}
|
||||
errorMessage={t("ErrorEmail")}
|
||||
>
|
||||
<FileInput
|
||||
scale
|
||||
<EmailInput
|
||||
name="wizard-email"
|
||||
tabIndex={1}
|
||||
size="large"
|
||||
accept=".lic"
|
||||
placeholder={t("PlaceholderLicense")}
|
||||
onInput={onLicenseFileHandler}
|
||||
hasError={hasErrorLicense}
|
||||
scale={true}
|
||||
placeholder={t("Common:Email")}
|
||||
emailSettings={emailSettings}
|
||||
hasError={hasErrorEmail}
|
||||
onValidateInput={onEmailChangeHandler}
|
||||
isDisabled={isCreated}
|
||||
/>
|
||||
</FieldContainer>
|
||||
)}
|
||||
<StyledInfo>
|
||||
<Text color="#A3A9AE" fontWeight={400}>
|
||||
{t("Domain")}
|
||||
</Text>
|
||||
<Text fontWeight={600} className="machine-name">
|
||||
{machineName}
|
||||
</Text>
|
||||
</StyledInfo>
|
||||
<StyledInfo>
|
||||
<Text color="#A3A9AE" fontWeight={400}>
|
||||
{t("Common:Language")}
|
||||
</Text>
|
||||
<ComboBox
|
||||
withoutPadding
|
||||
directionY="both"
|
||||
options={cultureNames}
|
||||
selectedOption={selectedLanguage}
|
||||
onSelect={onLanguageSelect}
|
||||
isDisabled={isCreated}
|
||||
scaled={isMobileOnly}
|
||||
scaledOptions={false}
|
||||
size="content"
|
||||
showDisabledItems={true}
|
||||
dropDownMaxHeight={364}
|
||||
manualWidth="250px"
|
||||
isDefaultMode={!isMobileOnly}
|
||||
withBlur={isMobileOnly}
|
||||
fillIcon={false}
|
||||
modernView={true}
|
||||
/>
|
||||
</StyledInfo>
|
||||
<StyledInfo>
|
||||
<Text color="#A3A9AE" fontWeight={400}>
|
||||
{t("Timezone")}
|
||||
</Text>
|
||||
<ComboBox
|
||||
withoutPadding
|
||||
directionY="both"
|
||||
options={timezones}
|
||||
selectedOption={selectedTimezone}
|
||||
onSelect={onTimezoneSelect}
|
||||
isDisabled={isCreated}
|
||||
scaled={isMobileOnly}
|
||||
scaledOptions={false}
|
||||
size="content"
|
||||
showDisabledItems={true}
|
||||
dropDownMaxHeight={364}
|
||||
manualWidth="350px"
|
||||
isDefaultMode={!isMobileOnly}
|
||||
withBlur={isMobileOnly}
|
||||
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="page"
|
||||
color={
|
||||
hasErrorAgree
|
||||
? theme.checkbox.errorColor
|
||||
: theme.client.wizard.linkColor
|
||||
}
|
||||
fontSize="13px"
|
||||
target="_blank"
|
||||
href={
|
||||
urlLicense
|
||||
? urlLicense
|
||||
: "https://gnu.org/licenses/gpl-3.0.html"
|
||||
}
|
||||
<FieldContainer
|
||||
className="wizard-field password-field"
|
||||
isVertical={true}
|
||||
labelVisible={false}
|
||||
hasError={hasErrorPass}
|
||||
errorMessage={t("ErrorPassword")}
|
||||
>
|
||||
{t("LicenseLink")}
|
||||
</Link>
|
||||
</StyledAcceptTerms>
|
||||
<PasswordInput
|
||||
ref={refPassInput}
|
||||
tabIndex={2}
|
||||
size="large"
|
||||
scale={true}
|
||||
inputValue={password}
|
||||
passwordSettings={passwordSettings}
|
||||
isDisabled={isCreated}
|
||||
placeholder={t("Common:Password")}
|
||||
hideNewPasswordButton={true}
|
||||
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="action"
|
||||
fontWeight={600}
|
||||
isHovered={true}
|
||||
onClick={generatePassword}
|
||||
>
|
||||
{t("GeneratePassword")}
|
||||
</Link>
|
||||
</StyledLink>
|
||||
|
||||
<Button
|
||||
size="medium"
|
||||
scale={true}
|
||||
primary
|
||||
label={t("Common:ContinueButton")}
|
||||
isLoading={isCreated}
|
||||
onClick={onContinueClick}
|
||||
/>
|
||||
</FormWrapper>
|
||||
</WizardContainer>
|
||||
{isLicenseRequired && (
|
||||
<FieldContainer
|
||||
className="license-filed"
|
||||
isVertical={true}
|
||||
labelVisible={false}
|
||||
hasError={hasErrorLicense}
|
||||
errorMessage={
|
||||
invalidLicense
|
||||
? t("ErrorLicenseBody")
|
||||
: t("ErrorUploadLicenseFile")
|
||||
}
|
||||
>
|
||||
<FileInput
|
||||
scale
|
||||
size="large"
|
||||
accept=".lic"
|
||||
placeholder={t("PlaceholderLicense")}
|
||||
onInput={onLicenseFileHandler}
|
||||
hasError={hasErrorLicense}
|
||||
/>
|
||||
</FieldContainer>
|
||||
)}
|
||||
<StyledInfo>
|
||||
<Text color="#A3A9AE" fontWeight={400}>
|
||||
{t("Domain")}
|
||||
</Text>
|
||||
<Text fontWeight={600} className="machine-name">
|
||||
{machineName}
|
||||
</Text>
|
||||
</StyledInfo>
|
||||
<StyledInfo>
|
||||
<Text color="#A3A9AE" fontWeight={400}>
|
||||
{t("Common:Language")}
|
||||
</Text>
|
||||
<ComboBox
|
||||
withoutPadding
|
||||
directionY="both"
|
||||
options={cultureNames}
|
||||
selectedOption={selectedLanguage}
|
||||
onSelect={onLanguageSelect}
|
||||
isDisabled={isCreated}
|
||||
scaled={isMobileOnly}
|
||||
scaledOptions={false}
|
||||
size="content"
|
||||
showDisabledItems={true}
|
||||
dropDownMaxHeight={364}
|
||||
manualWidth="250px"
|
||||
isDefaultMode={!isMobileOnly}
|
||||
withBlur={isMobileOnly}
|
||||
fillIcon={false}
|
||||
modernView={true}
|
||||
/>
|
||||
</StyledInfo>
|
||||
<StyledInfo>
|
||||
<Text color="#A3A9AE" fontWeight={400}>
|
||||
{t("Timezone")}
|
||||
</Text>
|
||||
<ComboBox
|
||||
withoutPadding
|
||||
directionY="both"
|
||||
options={timezones}
|
||||
selectedOption={selectedTimezone}
|
||||
onSelect={onTimezoneSelect}
|
||||
isDisabled={isCreated}
|
||||
scaled={isMobileOnly}
|
||||
scaledOptions={false}
|
||||
size="content"
|
||||
showDisabledItems={true}
|
||||
dropDownMaxHeight={364}
|
||||
manualWidth="350px"
|
||||
isDefaultMode={!isMobileOnly}
|
||||
withBlur={isMobileOnly}
|
||||
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="page"
|
||||
color={
|
||||
hasErrorAgree
|
||||
? theme.checkbox.errorColor
|
||||
: theme.client.wizard.linkColor
|
||||
}
|
||||
fontSize="13px"
|
||||
target="_blank"
|
||||
href={
|
||||
urlLicense
|
||||
? urlLicense
|
||||
: "https://gnu.org/licenses/gpl-3.0.html"
|
||||
}
|
||||
>
|
||||
{t("LicenseLink")}
|
||||
</Link>
|
||||
</StyledAcceptTerms>
|
||||
|
||||
<Button
|
||||
size="medium"
|
||||
scale={true}
|
||||
primary
|
||||
label={t("Common:ContinueButton")}
|
||||
isLoading={isCreated}
|
||||
onClick={onContinueClick}
|
||||
/>
|
||||
</FormWrapper>
|
||||
</WizardContainer>
|
||||
</StyledContent>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user