Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore
This commit is contained in:
NikolayRechkin
commit
b31571a2a9
@ -2,12 +2,15 @@ import React, { useState, useCallback, useEffect } from 'react';
|
||||
import { withRouter } from "react-router";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import i18n from './i18n';
|
||||
import { Button, TextInput, PageLayout, Text, PasswordInput } from 'asc-web-components';
|
||||
import { Container, Row, Col } from 'reactstrap';
|
||||
import { Button, TextInput, PageLayout, Text, PasswordInput, FieldContainer } from 'asc-web-components';
|
||||
import styled from 'styled-components';
|
||||
import { welcomePageTitle } from './../../../helpers/customNames';
|
||||
|
||||
const ConfirmContainer = styled(Container)`
|
||||
const ConfirmContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.confirm-block-title {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
@ -15,8 +18,30 @@ const ConfirmContainer = styled(Container)`
|
||||
.login-row {
|
||||
margin: 23px 0 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
|
||||
margin-left: 13%;
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
margin-left: 22%;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.join-button {
|
||||
align-self: baseline;
|
||||
}
|
||||
`;
|
||||
const mdOptions = { size: 6, offset: 3 };
|
||||
|
||||
const passwordSettings = {
|
||||
minLength: 6,
|
||||
@ -100,23 +125,18 @@ const Confirm = (props) => {
|
||||
return (
|
||||
<ConfirmContainer>
|
||||
|
||||
<Row className='confirm-block-title'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<Text.Body as='p' fontSize={18}>{t('InviteTitle')}</Text.Body>
|
||||
</Col>
|
||||
</Row>
|
||||
<Text.Body className='confirm-block-title' as='p' fontSize={18}>{t('InviteTitle')}</Text.Body>
|
||||
|
||||
<Row className='login-row'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<a href='/login'>
|
||||
<img className='login-row' src="images/dark_general.png" alt="Logo" />
|
||||
</a>
|
||||
<Text.Body as='p' fontSize={24} color='#116d9d'>{t('CustomWelcomePageTitle', { welcomePageTitle })}</Text.Body>
|
||||
</Col>
|
||||
</Row>
|
||||
<div className='login-row'>
|
||||
<a href='/login'>
|
||||
<img src="images/dark_general.png" alt="Logo" />
|
||||
</a>
|
||||
<Text.Body as='p' fontSize={24} color='#116d9d'>{t('CustomWelcomePageTitle', { welcomePageTitle })}</Text.Body>
|
||||
</div>
|
||||
|
||||
<Row className='login-row'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<div className='input-container login-row'>
|
||||
|
||||
<FieldContainer isVertical={true} className=''>
|
||||
<TextInput
|
||||
id='name'
|
||||
name='name'
|
||||
@ -136,11 +156,11 @@ const Confirm = (props) => {
|
||||
}}
|
||||
onKeyDown={event => onKeyPress(event.target)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className='login-row'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
</FieldContainer>
|
||||
|
||||
<FieldContainer isVertical={true} className=''>
|
||||
|
||||
<TextInput
|
||||
id='surname'
|
||||
name='surname'
|
||||
@ -159,11 +179,10 @@ const Confirm = (props) => {
|
||||
}}
|
||||
onKeyDown={event => onKeyPress(event.target)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className='login-row'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
</FieldContainer>
|
||||
|
||||
<FieldContainer isVertical={true} className=''>
|
||||
<TextInput
|
||||
type="email"
|
||||
id='email'
|
||||
@ -183,11 +202,10 @@ const Confirm = (props) => {
|
||||
}}
|
||||
onKeyDown={event => onKeyPress(event.target)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className='login-row'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
</FieldContainer>
|
||||
|
||||
<FieldContainer isVertical={true} className=''>
|
||||
<PasswordInput
|
||||
inputName="password"
|
||||
emailInputName="email"
|
||||
@ -197,6 +215,7 @@ const Confirm = (props) => {
|
||||
scale={true}
|
||||
tabIndex={4}
|
||||
maxLength={30}
|
||||
inputWidth='400px'
|
||||
hasError={!passwordValid}
|
||||
onChange={event => {
|
||||
setPassword(event.target.value);
|
||||
@ -216,11 +235,9 @@ const Confirm = (props) => {
|
||||
passwordSettings={passwordSettings}
|
||||
isDisabled={isLoading}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</FieldContainer>
|
||||
|
||||
<Row className='login-row'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<div className='login-row join-button'>
|
||||
<Button
|
||||
primary
|
||||
size='big'
|
||||
@ -230,13 +247,14 @@ const Confirm = (props) => {
|
||||
isLoading={isLoading}
|
||||
onClick={onSubmit}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* <Row className='login-row'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
|
||||
<Text.Body as='p' fontSize={14}>{t('LoginWithAccount')}</Text.Body>
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
*/}
|
||||
</ConfirmContainer>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "asc-web-components",
|
||||
"version": "1.0.45",
|
||||
"version": "1.0.48",
|
||||
"description": "Ascensio System SIA component library",
|
||||
"license": "AGPL-3.0",
|
||||
"main": "dist/asc-web-components.cjs.js",
|
||||
|
||||
@ -43,10 +43,15 @@ class DatePicker extends Component {
|
||||
const format = moment.localeData().longDateFormat('L');
|
||||
let date = new Date(moment(e.target.value, format));
|
||||
|
||||
console.log(moment(e.target.value).format());
|
||||
|
||||
this.setState({ value: e.target.value });
|
||||
if (!isNaN(date) && this.validationDate(date)) {
|
||||
this.props.onChange && this.props.onChange(date);
|
||||
this.setState({ selectedDate: date })
|
||||
|
||||
if (!isNaN(moment(e.target.value).format())) {
|
||||
if (!isNaN(date) && this.validationDate(date)) {
|
||||
this.props.onChange && this.props.onChange(date);
|
||||
this.setState({ selectedDate: date })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -72,6 +77,8 @@ class DatePicker extends Component {
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
moment.locale(this.props.locale);
|
||||
|
||||
if (this.state.isOpen !== prevState.isOpen) {
|
||||
handleAnyClick(this.state.isOpen, this.handleClick);
|
||||
}
|
||||
@ -102,7 +109,20 @@ class DatePicker extends Component {
|
||||
const hasError = this.props.hasError;
|
||||
const hasWarning = this.props.hasWarning;
|
||||
|
||||
const symbol = '/';
|
||||
let symbol = '.';
|
||||
let str = moment.localeData().longDateFormat('L');
|
||||
console.log(str);
|
||||
|
||||
if (str.indexOf('/') + 1) { symbol = "/"; }
|
||||
else if (str.indexOf('.') + 1) { symbol = "."; }
|
||||
else if (str.indexOf('-') + 1) { symbol = "-"; }
|
||||
|
||||
let mask = [/\d/, /\d/, symbol, /\d/, /\d/, symbol, /\d/, /\d/, /\d/, /\d/];
|
||||
|
||||
if (str[0] === "Y") { mask = mask.reverse(); }
|
||||
if (this.props.locale === "ko" || this.props.locale === "lv") {
|
||||
mask.push(symbol);
|
||||
}
|
||||
|
||||
return (
|
||||
<DateInputStyle /*onFocus={this.onFocus} onBlur={this.onBlur}*/ ref={this.ref} >
|
||||
@ -116,7 +136,7 @@ class DatePicker extends Component {
|
||||
value={this.state.value}
|
||||
onChange={this.handleChange}
|
||||
placeholder={moment.localeData().longDateFormat('L')}
|
||||
mask={[/\d/, /\d/, symbol, /\d/, /\d/, symbol, /\d/, /\d/, /\d/, /\d/]}
|
||||
mask={mask}
|
||||
keepCharPositions={true}
|
||||
//guide={true}
|
||||
//showMask={true}
|
||||
@ -9,7 +9,9 @@ import Link from '../link'
|
||||
import { Text } from '../text'
|
||||
import DropDown from '../drop-down'
|
||||
|
||||
const StyledInput = styled.div`
|
||||
const SimpleInput = ({ onValidateInput, onCopyToClipboard, ...props }) => <div {...props}></div>;
|
||||
|
||||
const StyledInput = styled(SimpleInput)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 32px;
|
||||
@ -120,7 +122,7 @@ class PasswordInput extends React.PureComponent {
|
||||
digits: digits,
|
||||
capital: capital,
|
||||
special: special,
|
||||
length: value.length >= passwordSettings.minLength
|
||||
length: value.trim().length >= passwordSettings.minLength
|
||||
};
|
||||
}
|
||||
|
||||
@ -132,13 +134,15 @@ class PasswordInput extends React.PureComponent {
|
||||
&& passwordValidation.capital
|
||||
&& passwordValidation.special
|
||||
&& passwordValidation.length;
|
||||
const progressWidth = value.length * 100 / this.props.passwordSettings.minLength;
|
||||
const progressWidth = value.trim().length * 100 / this.props.passwordSettings.minLength;
|
||||
const progressColor = progressScore
|
||||
? greenColor
|
||||
: (value.length === 0)
|
||||
? 'transparent'
|
||||
: redColor;
|
||||
|
||||
this.props.onValidateInput && this.props.onValidateInput(progressScore);
|
||||
|
||||
this.setState({
|
||||
progressColor: progressColor,
|
||||
progressWidth: progressWidth > 100 ? 100 : progressWidth,
|
||||
@ -183,12 +187,12 @@ class PasswordInput extends React.PureComponent {
|
||||
|
||||
if (passwordSettings.upperCase) {
|
||||
hold = (password.length % 2 == 0)
|
||||
? (hold.toUpperCase())
|
||||
: (hold);
|
||||
? (hold.toUpperCase())
|
||||
: (hold);
|
||||
}
|
||||
|
||||
character += hold;
|
||||
|
||||
|
||||
if (passwordSettings.digits) {
|
||||
character += numeric.charAt(b);
|
||||
}
|
||||
@ -196,7 +200,7 @@ class PasswordInput extends React.PureComponent {
|
||||
if (passwordSettings.specSymbols) {
|
||||
character += special.charAt(c);
|
||||
}
|
||||
|
||||
|
||||
password = character;
|
||||
}
|
||||
|
||||
@ -209,23 +213,26 @@ class PasswordInput extends React.PureComponent {
|
||||
}
|
||||
|
||||
copyToClipboard = emailInputName => {
|
||||
const { clipEmailResource, clipPasswordResource, isDisabled } = this.props;
|
||||
const { clipEmailResource, clipPasswordResource, isDisabled, onCopyToClipboard } = this.props;
|
||||
|
||||
if (isDisabled)
|
||||
return event.preventDefault();
|
||||
|
||||
const textField = document.createElement('textarea');
|
||||
const emailValue = document.getElementsByName(emailInputName)[0].value;
|
||||
const formattedText = clipEmailResource + emailValue + ' | ' + clipPasswordResource + this.state.inputValue;
|
||||
|
||||
textField.innerText = clipEmailResource + emailValue + ' | ' + clipPasswordResource + this.state.inputValue;
|
||||
|
||||
textField.innerText = formattedText;
|
||||
document.body.appendChild(textField);
|
||||
textField.select();
|
||||
document.execCommand('copy');
|
||||
textField.remove();
|
||||
|
||||
onCopyToClipboard && onCopyToClipboard(formattedText);
|
||||
}
|
||||
|
||||
render() {
|
||||
//console.log('PasswordInput render()');
|
||||
const {
|
||||
inputName,
|
||||
isDisabled,
|
||||
@ -244,7 +251,8 @@ class PasswordInput extends React.PureComponent {
|
||||
hasWarning,
|
||||
placeholder,
|
||||
tabIndex,
|
||||
maxLength
|
||||
maxLength,
|
||||
onValidateInput
|
||||
} = this.props;
|
||||
const {
|
||||
type,
|
||||
@ -272,20 +280,20 @@ class PasswordInput extends React.PureComponent {
|
||||
</StyledTooltipItem>
|
||||
}
|
||||
{passwordSettings.upperCase &&
|
||||
<StyledTooltipItem forwardedAs='div' title={tooltipPasswordCapital} valid={validCapital} >
|
||||
{tooltipPasswordCapital}
|
||||
</StyledTooltipItem>
|
||||
<StyledTooltipItem forwardedAs='div' title={tooltipPasswordCapital} valid={validCapital} >
|
||||
{tooltipPasswordCapital}
|
||||
</StyledTooltipItem>
|
||||
}
|
||||
{passwordSettings.specSymbols &&
|
||||
<StyledTooltipItem forwardedAs='div' title={tooltipPasswordSpecial} valid={validSpecial} >
|
||||
{tooltipPasswordSpecial}
|
||||
</StyledTooltipItem>
|
||||
<StyledTooltipItem forwardedAs='div' title={tooltipPasswordSpecial} valid={validSpecial} >
|
||||
{tooltipPasswordSpecial}
|
||||
</StyledTooltipItem>
|
||||
}
|
||||
</StyledTooltipContainer>
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledInput>
|
||||
<StyledInput onValidateInput={onValidateInput}>
|
||||
<PasswordProgress inputWidth={inputWidth}>
|
||||
<InputBlock
|
||||
name={inputName}
|
||||
@ -363,21 +371,24 @@ PasswordInput.propTypes = {
|
||||
tooltipPasswordSpecial: PropTypes.string,
|
||||
|
||||
generatorSpecial: PropTypes.string,
|
||||
passwordSettings: PropTypes.object.isRequired
|
||||
passwordSettings: PropTypes.object.isRequired,
|
||||
|
||||
onValidateInput: PropTypes.func,
|
||||
onCopyToClipboard: PropTypes.func
|
||||
}
|
||||
|
||||
PasswordInput.defaultProps = {
|
||||
inputType: 'password',
|
||||
inputName: 'passwordInput',
|
||||
|
||||
isDisabled: false,
|
||||
size: 'base',
|
||||
scale: true,
|
||||
|
||||
clipEmailResource: 'E-mail',
|
||||
clipPasswordResource: 'Password',
|
||||
clipEmailResource: 'E-mail ',
|
||||
clipPasswordResource: 'Password ',
|
||||
|
||||
generatorSpecial: '!@#$%^&*'
|
||||
|
||||
}
|
||||
|
||||
export default PasswordInput;
|
||||
@ -54,5 +54,5 @@ export { default as ContextMenu } from './components/context-menu'
|
||||
export { default as RowContainer } from './components/row-container'
|
||||
export { default as FieldContainer } from './components/field-container'
|
||||
export { default as utils } from './utils'
|
||||
export { default as DatePicker } from './components/calendar-new/date-input'
|
||||
export { default as DatePicker } from './components/date-picker'
|
||||
export { default as PasswordInput } from './components/password-input'
|
||||
|
||||
@ -5,7 +5,7 @@ import { withKnobs, boolean, color, select, date } from '@storybook/addon-knobs/
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Readme from './README.md';
|
||||
import { DatePicker } from 'asc-web-components';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
import Section from '../../.storybook/decorators/section';
|
||||
import moment from 'moment';
|
||||
import 'moment/min/locales'
|
||||
|
||||
@ -16,7 +16,7 @@ function myDateKnob(name, defaultValue) {
|
||||
|
||||
const locales = moment.locales();
|
||||
|
||||
storiesOf('Components|Calendar', module)
|
||||
storiesOf('Components|Date-picker', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('date-picker', () => (
|
||||
@ -19,7 +19,7 @@ Check for compliance with settings is carried out on fly. As you type in require
|
||||
|
||||
Depending on screen width of device, input will change location of elements.
|
||||
|
||||
When setting focus to input, tooltip will be shown with progress in fulfilling conditions specified in settings. When unfocused, tooltip disappears.
|
||||
When setting focus to input, tooltip will be shown with progress in fulfilling conditions specified in settings. When unfocused, tooltip disappears.
|
||||
|
||||
You can apply all the parameters of the InputBlock component to the component.
|
||||
|
||||
@ -53,27 +53,32 @@ const settings = {
|
||||
generatorSpecial="!@#$%^&*"
|
||||
passwordSettings={settings}
|
||||
isDisabled={false}
|
||||
placeholder="password"
|
||||
onValidateInput={a => console.log(a)}
|
||||
onCopyToClipboard={b => console.log("Data " + b + " copied to clipboard")}
|
||||
/>;
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------- | --------- | :------: | ------------------ | --------- | --------------------------------------------------------- |
|
||||
| `inputType` | `array` | - | `text`, `password` | `password`| It is necessary for correct display of values inside input|
|
||||
| `inputName` | `string` | - | - | `passwordInput`| Input name |
|
||||
| `emailInputName` | `string` | ✅ | - | - | Required to associate password field with email field |
|
||||
| `inputValue` | `string` | - | - | - | Input value |
|
||||
| `onChange` | `func` | - | - | - | Will be triggered whenever an PasswordInput typing |
|
||||
| `clipActionResource`| `string` | - | - | - | Translation of text for copying email data and password |
|
||||
| `clipEmailResource` | `string` | - | - | `E-mail` | Text translation email to copy |
|
||||
| `clipPasswordResource`| `string` | - | - | `Password`| Text translation password to copy |
|
||||
| `tooltipPasswordTitle`| `string` | - | - | - | Text translation tooltip |
|
||||
| `tooltipPasswordLength`| `string` | - | - | - | Password text translation is long tooltip |
|
||||
| `tooltipPasswordDigits`| `string` | - | - | - | Digit text translation tooltip |
|
||||
| `tooltipPasswordCapital`| `string` |- | - | - | Capital text translation tooltip |
|
||||
| `tooltipPasswordSpecial`| `string` |- | - | - | Special text translation tooltip |
|
||||
| `generatorSpecial` | `string` | - | - | `!@#$%^&*`| Set of special characters for password generator and validator|
|
||||
| `passwordSettings` | `object` | ✅ | - | - | Set of settings for password generator and validator |
|
||||
| `isDisabled` | `bool` | - | - | `false` | Set input disabled |
|
||||
| `inputWidth` | `string` | - | - | - | If you need to set input width manually |
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------------ | -------- | :------: | ------------------ | --------------- | -------------------------------------------------------------- |
|
||||
| `inputType` | `array` | - | `text`, `password` | `password` | It is necessary for correct display of values inside input |
|
||||
| `inputName` | `string` | - | - | `passwordInput` | Input name |
|
||||
| `emailInputName` | `string` | ✅ | - | - | Required to associate password field with email field |
|
||||
| `inputValue` | `string` | - | - | - | Input value |
|
||||
| `onChange` | `func` | - | - | - | Will be triggered whenever an PasswordInput typing |
|
||||
| `clipActionResource` | `string` | - | - | - | Translation of text for copying email data and password |
|
||||
| `clipEmailResource` | `string` | - | - | `E-mail` | Text translation email to copy |
|
||||
| `clipPasswordResource` | `string` | - | - | `Password` | Text translation password to copy |
|
||||
| `tooltipPasswordTitle` | `string` | - | - | - | Text translation tooltip |
|
||||
| `tooltipPasswordLength` | `string` | - | - | - | Password text translation is long tooltip |
|
||||
| `tooltipPasswordDigits` | `string` | - | - | - | Digit text translation tooltip |
|
||||
| `tooltipPasswordCapital` | `string` | - | - | - | Capital text translation tooltip |
|
||||
| `tooltipPasswordSpecial` | `string` | - | - | - | Special text translation tooltip |
|
||||
| `generatorSpecial` | `string` | - | - | `!@#$%^&*` | Set of special characters for password generator and validator |
|
||||
| `passwordSettings` | `object` | ✅ | - | - | Set of settings for password generator and validator |
|
||||
| `isDisabled` | `bool` | - | - | `false` | Set input disabled |
|
||||
| `inputWidth` | `string` | - | - | - | If you need to set input width manually |
|
||||
| `onValidateInput` | `func` | - | - | - | Will be triggered whenever an PasswordInput typing, return bool value|
|
||||
| `onCopyToClipboard` | `func` | - | - | - | Will be triggered if you press copy button, return formatted value|
|
||||
@ -60,6 +60,8 @@ storiesOf('Components|Input', module)
|
||||
isDisabled={isDisabled}
|
||||
placeholder='password'
|
||||
maxLength={30}
|
||||
onValidateInput={(a) => console.log(a)}
|
||||
onCopyToClipboard={(b) => console.log('Data ' + b + ' copied to clipboard')}
|
||||
/>
|
||||
)}
|
||||
</StringValue>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user