deleted sub-components
This commit is contained in:
parent
d911f80342
commit
efd6e652da
@ -1,21 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Button } from 'asc-web-components';
|
||||
|
||||
import StyledButtonBox from './StyledButtonBox';
|
||||
|
||||
const ButtonBox = ({ label }) => (
|
||||
<StyledButtonBox>
|
||||
<Button
|
||||
id="continue-button"
|
||||
className="wizard-button"
|
||||
primary
|
||||
label={label}
|
||||
tabIndex={3}
|
||||
size="big"
|
||||
onClick={() => alert('click')}
|
||||
/>
|
||||
</StyledButtonBox>
|
||||
);
|
||||
|
||||
export default ButtonBox;
|
@ -1,5 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledButtonBox = styled.div``;
|
||||
|
||||
export default StyledButtonBox;
|
@ -1,3 +0,0 @@
|
||||
import ButtonBox from './ButtonBox';
|
||||
|
||||
export default ButtonBox;
|
@ -1,49 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Checkbox,
|
||||
Link
|
||||
} from 'asc-web-components';
|
||||
|
||||
import StyledCheckboxBox from './StyledCheckboxBox';
|
||||
|
||||
const CheckboxBox = ({
|
||||
isSendData,
|
||||
isAcceptLicense,
|
||||
sendDataHandler,
|
||||
acceptLicenseHandler,
|
||||
t
|
||||
}) => (
|
||||
<StyledCheckboxBox>
|
||||
<Checkbox
|
||||
className="wizard-checkbox"
|
||||
id="usage-data"
|
||||
name="usage-data"
|
||||
label={t('checkboxBox.labelSendData')}
|
||||
isChecked={isSendData}
|
||||
isIndeterminate={false}
|
||||
isDisabled={false}
|
||||
onChange={sendDataHandler}
|
||||
/>
|
||||
<Checkbox
|
||||
className="wizard-checkbox"
|
||||
id="license"
|
||||
name="confirm"
|
||||
label={t('checkboxBox.labelAcceptLicense')}
|
||||
isChecked={isAcceptLicense}
|
||||
isIndeterminate={false}
|
||||
isDisabled={false}
|
||||
onChange={acceptLicenseHandler}
|
||||
/>
|
||||
<Link
|
||||
type="page"
|
||||
color="#116d9d"
|
||||
href="https://gnu.org/licenses/gpl-3.0.html"
|
||||
isBold={false}
|
||||
>
|
||||
{t('checkboxBox.link')}
|
||||
</Link>
|
||||
</StyledCheckboxBox>
|
||||
)
|
||||
|
||||
export default CheckboxBox;
|
@ -1,16 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledCheckboxBox = styled.div`
|
||||
margin-top: 40px;
|
||||
|
||||
.wizard-checkbox {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#license {
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledCheckboxBox;
|
@ -1,2 +0,0 @@
|
||||
import CheckboxBox from './CheckboxBox';
|
||||
export default CheckboxBox;
|
@ -1,18 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import StyledHeaderBox from './StyledHeaderBox';
|
||||
|
||||
const HeaderBox = () => (
|
||||
<StyledHeaderBox>
|
||||
<div className="wizard-header">
|
||||
<a className="wizard-logo" href="/home">
|
||||
<img
|
||||
src="images/onlyoffice_logo/light_small_general.svg"
|
||||
alt="Logo"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</StyledHeaderBox>
|
||||
);
|
||||
|
||||
export default HeaderBox;
|
@ -1,33 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledHeaderBox = styled.header`
|
||||
.wizard-header {
|
||||
height: 48px;
|
||||
background-color: #0f4071;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 74px;
|
||||
|
||||
.wizard-logo {
|
||||
display: block;
|
||||
width: 142px;
|
||||
height: 23px;
|
||||
cursor: pointer;
|
||||
margin: -12px 0 0;
|
||||
margin-left: 24px;
|
||||
position: absolute;
|
||||
top: 51%;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-header::before {
|
||||
content: "";
|
||||
background: url("images/clouds_fond.png");
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledHeaderBox;
|
@ -1,3 +0,0 @@
|
||||
import HeaderBox from './HeaderBox';
|
||||
|
||||
export default HeaderBox;
|
@ -1,71 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Heading,
|
||||
Label,
|
||||
Icons,
|
||||
ComboBox
|
||||
} from 'asc-web-components';
|
||||
|
||||
import StyledLanguageAndTimezoneBox from './StyledLanguageAndTimezoneBox';
|
||||
|
||||
const LanguageAndTimezoneBox = ({
|
||||
languages, timeZones, t
|
||||
}) => {
|
||||
|
||||
const optionsLang = languages.map( el => Object.assign({}, {
|
||||
key: el,
|
||||
label: el
|
||||
}));
|
||||
|
||||
const optionsTimeZone = timeZones.map( el => Object.assign({}, {
|
||||
key: el,
|
||||
label: el
|
||||
}))
|
||||
|
||||
return <StyledLanguageAndTimezoneBox>
|
||||
<Heading level={2} title="Language and Time Zone Settings" className="header-base timezone">
|
||||
{t('languageAndTimezoneBox.heading')}
|
||||
</Heading>
|
||||
|
||||
<Label
|
||||
className="lang timezone-lang-label"
|
||||
text={t('languageAndTimezoneBox.labelLanguage')}
|
||||
title="Language"
|
||||
display="block"
|
||||
htmlFor="language"
|
||||
/>
|
||||
<Icons.QuestionIcon size="small" className="question-icon"/>
|
||||
<ComboBox
|
||||
className="comboBox"
|
||||
id="language"
|
||||
options={optionsLang}
|
||||
selectedOption={{
|
||||
key: optionsLang[0].key,
|
||||
label: optionsLang[0].label
|
||||
}}
|
||||
dropDownMaxHeight={200}
|
||||
onSelect={option => console.log("selected", option)} />
|
||||
|
||||
<Label
|
||||
className="timezone timezone-lang-label"
|
||||
text={t('languageAndTimezoneBox.labelTimezone')}
|
||||
title="Time Zone"
|
||||
display="block"
|
||||
htmlFor="time-zone"
|
||||
/>
|
||||
<ComboBox
|
||||
className="comboBox"
|
||||
id="time-zone"
|
||||
options={optionsTimeZone}
|
||||
selectedOption={{
|
||||
key: optionsTimeZone[0].key,
|
||||
label: optionsTimeZone[0].label
|
||||
}}
|
||||
dropDownMaxHeight={200}
|
||||
onSelect={option => console.log("selected", option)} />
|
||||
|
||||
</StyledLanguageAndTimezoneBox>
|
||||
}
|
||||
|
||||
export default LanguageAndTimezoneBox;
|
@ -1,35 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledLanguageAndTimezoneBox = styled.div`
|
||||
padding-left: 7px;
|
||||
|
||||
@media(max-width: 600px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.timezone {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.timezone-lang-label {
|
||||
font: bold 12px 'Open Sans', sans-serif;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.lang {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
|
||||
}
|
||||
|
||||
.question-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.comboBox {
|
||||
width: 350px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledLanguageAndTimezoneBox;
|
@ -1,3 +0,0 @@
|
||||
import LanguageAndTimezoneBox from './LanguageAndTimezoneBox';
|
||||
|
||||
export default LanguageAndTimezoneBox;
|
@ -1,81 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Heading,
|
||||
Label,
|
||||
PasswordInput
|
||||
} from 'asc-web-components';
|
||||
|
||||
import StyledPasswordBox from './StyledPasswordBox';
|
||||
|
||||
const settingsPassword = {
|
||||
minLength: 6,
|
||||
upperCase: true,
|
||||
digits: true,
|
||||
specSymbols: true
|
||||
};
|
||||
|
||||
const PasswordBox = ({
|
||||
firstPass, secondPass, t
|
||||
}) => (
|
||||
<StyledPasswordBox>
|
||||
<Heading level={2} className="header-base">
|
||||
{t('passwordBox.heading')}
|
||||
</Heading>
|
||||
|
||||
<Label
|
||||
className="label-pass"
|
||||
text={t('passwordBox.labelFirstPass')}
|
||||
title="first pass"
|
||||
htmlFor="first"
|
||||
display="block"
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
className="wizard-pass"
|
||||
id="first"
|
||||
inputName="firstPass"
|
||||
emailInputName="email-wizard"
|
||||
inputValue={firstPass}
|
||||
onChange={e => console.log(e)}
|
||||
tooltipPasswordTitle={t('passwordBox.tooltipPasswordTitle')}
|
||||
tooltipPasswordLength={t('passwordBox.tooltipPasswordLength')}
|
||||
tooltipPasswordDigits={t('passwordBox.tooltipPasswordDigits')}
|
||||
tooltipPasswordCapital={t('passwordBox.tooltipPasswordCapital')}
|
||||
tooltipPasswordSpecial={t('passwordBox.tooltipPasswordSpecial')}
|
||||
generatorSpecial="!@#$%^&*"
|
||||
passwordSettings={settingsPassword}
|
||||
isDisabled={false}
|
||||
placeholder={t('passwordBox.placeholder')}
|
||||
onValidateInput={a => console.log(a)}
|
||||
/>
|
||||
|
||||
<Label
|
||||
className="label-pass"
|
||||
text={t('passwordBox.labelSecondPass')}
|
||||
title="second pass"
|
||||
htmlFor="second"
|
||||
display="block"
|
||||
/>
|
||||
<PasswordInput
|
||||
className="wizard-pass"
|
||||
id="second"
|
||||
inputName="secondPass"
|
||||
emailInputName="email-wizard"
|
||||
inputValue={secondPass}
|
||||
onChange={e => console.log(e)}
|
||||
tooltipPasswordTitle={t('passwordBox.tooltipPasswordTitle')}
|
||||
tooltipPasswordLength={t('passwordBox.tooltipPasswordLength')}
|
||||
tooltipPasswordDigits={t('passwordBox.tooltipPasswordDigits')}
|
||||
tooltipPasswordCapital={t('passwordBox.tooltipPasswordCapital')}
|
||||
tooltipPasswordSpecial={t('passwordBox.tooltipPasswordSpecial')}
|
||||
generatorSpecial="!@#$%^&*"
|
||||
passwordSettings={settingsPassword}
|
||||
isDisabled={false}
|
||||
placeholder={t('passwordBox.placeholder')}
|
||||
onValidateInput={a => console.log(a)}
|
||||
/>
|
||||
</StyledPasswordBox>
|
||||
);
|
||||
|
||||
export default PasswordBox;
|
@ -1,39 +0,0 @@
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledPasswordBox = styled.div`
|
||||
width: 30%;
|
||||
|
||||
.wizard-pass {
|
||||
width: 95%;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.label-pass {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.label-pass::after {
|
||||
content: "*";
|
||||
color: red;
|
||||
}
|
||||
|
||||
@media(max-width: 768px) {
|
||||
width: 50%;
|
||||
|
||||
.wizard-pass {
|
||||
width: 95%;
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
width: 100%;
|
||||
|
||||
.wizard-pass {
|
||||
width: 98%;
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledPasswordBox;
|
@ -1,3 +0,0 @@
|
||||
import PasswordBox from './PasswordBox';
|
||||
|
||||
export default PasswordBox;
|
@ -1,58 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Heading,
|
||||
Label,
|
||||
EmailInput,
|
||||
Text,
|
||||
Icons,
|
||||
utils
|
||||
} from 'asc-web-components';
|
||||
|
||||
import StyledLanguageAndTimezoneBox from './StyledRegistrationSettingsBox';
|
||||
|
||||
const { EmailSettings } = utils.email;
|
||||
const settings = new EmailSettings();
|
||||
settings.allowDomainPunycode = true;
|
||||
|
||||
const RegistrationSettingsBox = ({
|
||||
domain, t
|
||||
}) => (
|
||||
<StyledLanguageAndTimezoneBox>
|
||||
<Heading className="reg-settings-title" title="Registration Settings" className="header-base">
|
||||
{t('registrationSettingsBox.heading')}
|
||||
</Heading>
|
||||
|
||||
<Label
|
||||
className="settings-label"
|
||||
text={t('registrationSettingsBox.labelEmail')}
|
||||
title="registered email"
|
||||
display="block"
|
||||
htmlFor="input-email"
|
||||
/>
|
||||
|
||||
<EmailInput
|
||||
id="input-email"
|
||||
name="email-wizard"
|
||||
placeholder={t('registrationSettingsBox.placeholder')}
|
||||
emailSettings={settings}
|
||||
onValidateInput={result => {
|
||||
console.log("onValidateInput", result.value, result.isValid, result.errors)
|
||||
}}
|
||||
/>
|
||||
|
||||
<Label
|
||||
className="settings-label"
|
||||
text={t('registrationSettingsBox.labelDomain')}
|
||||
title="registered domain"
|
||||
display="block"
|
||||
htmlFor="input-email"
|
||||
/>
|
||||
<Text className="domain-name">
|
||||
{domain}
|
||||
</Text>
|
||||
<Icons.QuestionIcon size="small" className="question-icon"/>
|
||||
</StyledLanguageAndTimezoneBox>
|
||||
);
|
||||
|
||||
export default RegistrationSettingsBox;
|
@ -1,51 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledRegistrationSettingsBox = styled.div`
|
||||
width: 100%;
|
||||
padding-left: 7px;
|
||||
padding-top: 3px;
|
||||
|
||||
.settings-label {
|
||||
font: normal 14px 'Open Sans', sans-serif;
|
||||
display: inline-block;
|
||||
margin: 2px 14px 11px 0;
|
||||
}
|
||||
|
||||
#input-email {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
width: 45%;
|
||||
|
||||
@media(max-width: 985px) {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
@media(max-width: 768px) {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
.domain-name {
|
||||
display: inline-block;
|
||||
font: bold 14px 'Open Sans', sans-serif;
|
||||
margin-right: 5px;
|
||||
@media(max-width: 600px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.question-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledRegistrationSettingsBox;
|
@ -1,3 +0,0 @@
|
||||
import RegistrationSettingsBox from './RegistrationSettingsBox';
|
||||
|
||||
export default RegistrationSettingsBox;
|
@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import StyledSettingsWrapper from './StyledSettingsWrapper';
|
||||
|
||||
const SettingsWrapper = ({
|
||||
children
|
||||
}) => (
|
||||
<StyledSettingsWrapper>
|
||||
{ children }
|
||||
</StyledSettingsWrapper>
|
||||
);
|
||||
|
||||
export default SettingsWrapper;
|
@ -1,28 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledSettingsWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: top;
|
||||
margin-top: 26px;
|
||||
width: 100%;
|
||||
|
||||
@media(max-width: 600px) {
|
||||
margin-top: 0px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
@media(max-width: 768px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
width: 70%;
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledSettingsWrapper;
|
@ -1,3 +0,0 @@
|
||||
import SettingsWrapper from './SettingsWrapper';
|
||||
|
||||
export default SettingsWrapper;
|
@ -1,26 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledWelcomeBox = styled.div`
|
||||
.wizard-title {
|
||||
font-size: 28px;
|
||||
margin-bottom: 15px;
|
||||
font: normal 28px 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.wizard-desc{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.wizard-desc::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: url("images/lock.png");
|
||||
left: -30px;
|
||||
top: -6px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledWelcomeBox;
|
@ -1,22 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Heading,
|
||||
Text
|
||||
} from 'asc-web-components';
|
||||
|
||||
import StyledWelcomeBox from './StyledWelcomeBox';
|
||||
|
||||
const WelcomeBox = ({ t }) => (
|
||||
<StyledWelcomeBox>
|
||||
<Heading level={1} title="Heading form" className="wizard-title">
|
||||
{t('welcomeBox.heading')}
|
||||
</Heading>
|
||||
|
||||
<Text className="wizard-desc">
|
||||
{t('welcomeBox.text')}
|
||||
</Text>
|
||||
</StyledWelcomeBox>
|
||||
);
|
||||
|
||||
export default WelcomeBox;
|
@ -1,3 +0,0 @@
|
||||
import WelcomeBox from './WelcomeBox';
|
||||
|
||||
export default WelcomeBox;
|
@ -1,22 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledWizardForm = styled.div`
|
||||
width: 976px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media(max-width: 1080px) {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.header-base {
|
||||
font: normal 18px 'Open Sans', sans-serif;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#continue-button {
|
||||
margin-top: 20px;
|
||||
font: normal 15px 'Open Sans', sans-serif;
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledWizardForm;
|
@ -1,11 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import StyledWizardForm from './StyledWizardForm';
|
||||
|
||||
const WizardForm = ({ children }) => (
|
||||
<StyledWizardForm>
|
||||
{children}
|
||||
</StyledWizardForm>
|
||||
);
|
||||
|
||||
export default WizardForm;
|
@ -1,3 +0,0 @@
|
||||
import WizardForm from './WizardForm';
|
||||
|
||||
export default WizardForm;
|
@ -1,9 +0,0 @@
|
||||
export { default as ButtonBox } from './ButtonBox';
|
||||
export { default as CheckboxBox } from './CheckboxBox';
|
||||
export { default as HeaderBox } from './HeaderBox';
|
||||
export { default as LanguageAndTimezoneBox } from './LanguageAndTimezoneBox';
|
||||
export { default as PasswordBox } from './PasswordBox';
|
||||
export { default as RegistrationSettingsBox } from './RegistrationSettingsBox';
|
||||
export { default as SettingsWrapper } from './SettingsWrapper';
|
||||
export { default as WelcomeBox } from './WelcomeBox';
|
||||
export { default as WizardForm } from './WizardForm';
|
Loading…
Reference in New Issue
Block a user