IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:ONLYOFFICE/CommunityServer-AspNetCore

Browse Source
This commit is contained in:
Alexey Safronov 2019-09-13 12:52:36 +03:00
commit 2bf887e135
12 changed files with 441 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js
View File

@ -3,7 +3,8 @@ import isEqual from "lodash/isEqual";
import {
FieldContainer,
SelectorAddButton,
SelectedItem
SelectedItem,
AdvancedSelector
} from "asc-web-components";
class DepartmentField extends React.Component {
@ -19,10 +20,21 @@ class DepartmentField extends React.Component {
isDisabled,
hasError,
labelText,
addButtonTitle,
departments,
onAddDepartment,
onRemoveDepartment
showGroupSelectorButtonTitle,
onShowGroupSelector,
onCloseGroupSelector,
onRemoveGroup,
selectorIsVisible,
selectorSearchPlaceholder,
selectorOptions,
selectorSelectedOptions,
selectorAddButtonText,
selectorSelectAllText,
selectorOnSearchGroups,
selectorOnSelectGroups
} = this.props;
return (
@ -34,16 +46,31 @@ class DepartmentField extends React.Component {
>
<SelectorAddButton
isDisabled={isDisabled}
title={addButtonTitle}
onClick={onAddDepartment}
title={showGroupSelectorButtonTitle}
onClick={onShowGroupSelector}
className="department-add-btn"
/>
{departments.map(department => (
<AdvancedSelector
isDropDown={true}
isOpen={selectorIsVisible}
maxHeight={336}
width={379}
placeholder={selectorSearchPlaceholder}
onSearchChanged={selectorOnSearchGroups}
options={selectorOptions}
selectedOptions={selectorSelectedOptions}
isMultiSelect={true}
buttonLabel={selectorAddButtonText}
selectAllLabel={selectorSelectAllText}
onSelect={selectorOnSelectGroups}
onCancel={onCloseGroupSelector}
/>
{selectorSelectedOptions.map(option => (
<SelectedItem
key={`department_${department.id}`}
text={department.name}
key={`department_${option.key}`}
text={option.label}
onClose={() => {
onRemoveDepartment(department.id);
onRemoveGroup(option.key);
}}
isInline={true}
className="department-item"

2
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/Form.js
View File

@ -20,6 +20,8 @@ const MainContainer = styled.div`
}
.departments-field {
position: relative;
.department-add-btn {
margin: 0 8px 8px 0;
float: left;

94
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/createUserForm.js
View File

@ -3,7 +3,7 @@ import { withRouter } from 'react-router'
import { connect } from 'react-redux'
import { Avatar, Button, Textarea, toastr } from 'asc-web-components'
import { withTranslation } from 'react-i18next';
import { toEmployeeWrapper, getUserRole, getUserContactsPattern, getUserContacts } from "../../../../../store/people/selectors";
import { toEmployeeWrapper, getUserRole, getUserContactsPattern, getUserContacts, mapGroupsToGroupSelectorOptions, mapGroupSelectorOptionsToGroups, filterGroupSelectorOptions } from "../../../../../store/people/selectors";
import { createProfile } from '../../../../../store/profile/actions';
import { MainContainer, AvatarContainer, MainFieldsContainer } from './FormFields/Form'
import TextField from './FormFields/TextField'
@ -13,7 +13,7 @@ import RadioField from './FormFields/RadioField'
import DepartmentField from './FormFields/DepartmentField'
import ContactsField from './FormFields/ContactsField'
import InfoFieldContainer from './FormFields/InfoFieldContainer'
import { department, position, employedSinceDate } from '../../../../../helpers/customNames';
import { departments, department, position, employedSinceDate } from '../../../../../helpers/customNames';
class CreateUserForm extends React.Component {
@ -27,13 +27,17 @@ class CreateUserForm extends React.Component {
this.onInputChange = this.onInputChange.bind(this);
this.onBirthdayDateChange = this.onBirthdayDateChange.bind(this);
this.onWorkFromDateChange = this.onWorkFromDateChange.bind(this);
this.onAddGroup = this.onAddGroup.bind(this);
this.onGroupClose = this.onGroupClose.bind(this);
this.onCancel = this.onCancel.bind(this);
this.onContactsItemAdd = this.onContactsItemAdd.bind(this);
this.onContactsItemTypeChange = this.onContactsItemTypeChange.bind(this);
this.onContactsItemTextChange = this.onContactsItemTextChange.bind(this);
this.onShowGroupSelector = this.onShowGroupSelector.bind(this);
this.onCloseGroupSelector = this.onCloseGroupSelector.bind(this);
this.onSearchGroups = this.onSearchGroups.bind(this);
this.onSelectGroups = this.onSelectGroups.bind(this);
this.onRemoveGroup = this.onRemoveGroup.bind(this);
}
componentDidUpdate(prevProps, prevState) {
@ -43,6 +47,13 @@ class CreateUserForm extends React.Component {
}
mapPropsToState = (props) => {
var profile = toEmployeeWrapper({
isVisitor: props.match.params.type === "guest",
passwordType: "link"
});
var allOptions = mapGroupsToGroupSelectorOptions(props.groups);
var selected = mapGroupsToGroupSelectorOptions(profile.groups);
return {
isLoading: false,
errors: {
@ -51,10 +62,13 @@ class CreateUserForm extends React.Component {
email: false,
password: false,
},
profile: toEmployeeWrapper({
isVisitor: props.match.params.type === "guest",
passwordType: "link"
})
profile: profile,
selector: {
visible: false,
allOptions: allOptions,
options: [...allOptions],
selected: selected
}
};
}
@ -76,16 +90,6 @@ class CreateUserForm extends React.Component {
this.setState(stateCopy)
}
onAddGroup() {
console.log("onAddGroup")
}
onGroupClose(id) {
var stateCopy = Object.assign({}, this.state);
stateCopy.profile.groups = this.state.profile.groups.filter((group) => group.id !== id);
this.setState(stateCopy)
}
validate() {
const { profile } = this.state;
const emailRegex = /.+@.+\..+/;
@ -151,8 +155,41 @@ class CreateUserForm extends React.Component {
this.setState(stateCopy);
}
onShowGroupSelector() {
var stateCopy = Object.assign({}, this.state);
stateCopy.selector.visible = true;
this.setState(stateCopy);
}
onCloseGroupSelector() {
var stateCopy = Object.assign({}, this.state);
stateCopy.selector.visible = false;
this.setState(stateCopy);
}
onSearchGroups(template) {
var stateCopy = Object.assign({}, this.state);
stateCopy.selector.options = filterGroupSelectorOptions(stateCopy.selector.allOptions, template);
this.setState(stateCopy);
}
onSelectGroups(selected) {
var stateCopy = Object.assign({}, this.state);
stateCopy.profile.groups = mapGroupSelectorOptionsToGroups(selected);
stateCopy.selector.selected = selected;
stateCopy.selector.visible = false;
this.setState(stateCopy);
}
onRemoveGroup(id) {
var stateCopy = Object.assign({}, this.state);
stateCopy.profile.groups = stateCopy.profile.groups.filter(group => group.id !== id);
stateCopy.selector.selected = stateCopy.selector.selected.filter(option => option.key !== id);
this.setState(stateCopy)
}
render() {
const { isLoading, errors, profile } = this.state;
const { isLoading, errors, profile, selector } = this.state;
const { t, settings } = this.props;
const pattern = getUserContactsPattern();
@ -268,10 +305,18 @@ class CreateUserForm extends React.Component {
<DepartmentField
labelText={`${t("CustomDepartment", { department })}:`}
isDisabled={isLoading}
departments={profile.groups}
addButtonTitle={t("AddButton")}
onAddDepartment={this.onAddGroup}
onRemoveDepartment={this.onGroupClose}
showGroupSelectorButtonTitle={t("AddButton")}
onShowGroupSelector={this.onShowGroupSelector}
onCloseGroupSelector={this.onCloseGroupSelector}
onRemoveGroup={this.onRemoveGroup}
selectorIsVisible={selector.visible}
selectorSearchPlaceholder={t("Search")}
selectorOptions={selector.options}
selectorSelectedOptions={selector.selected}
selectorAddButtonText={t("CustomAddDepartments", { departments })}
selectorSelectAllText={t("SelectAll")}
selectorOnSearchGroups={this.onSearchGroups}
selectorOnSelectGroups={this.onSelectGroups}
/>
</MainFieldsContainer>
</MainContainer>
@ -311,7 +356,8 @@ class CreateUserForm extends React.Component {
const mapStateToProps = (state) => {
return {
settings: state.auth.settings
settings: state.auth.settings,
groups: state.people.groups
}
};

90
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/updateUserForm.js
View File

@ -3,7 +3,7 @@ import { withRouter } from 'react-router'
import { connect } from 'react-redux'
import { Avatar, Button, Textarea, Text, toastr, ModalDialog, TextInput } from 'asc-web-components'
import { withTranslation } from 'react-i18next';
import { toEmployeeWrapper, getUserRole, getUserContactsPattern, getUserContacts } from "../../../../../store/people/selectors";
import { toEmployeeWrapper, getUserRole, getUserContactsPattern, getUserContacts, mapGroupsToGroupSelectorOptions, mapGroupSelectorOptionsToGroups, filterGroupSelectorOptions } from "../../../../../store/people/selectors";
import { updateProfile } from '../../../../../store/profile/actions';
import { MainContainer, AvatarContainer, MainFieldsContainer } from './FormFields/Form'
import TextField from './FormFields/TextField'
@ -13,7 +13,7 @@ import RadioField from './FormFields/RadioField'
import DepartmentField from './FormFields/DepartmentField'
import ContactsField from './FormFields/ContactsField'
import InfoFieldContainer from './FormFields/InfoFieldContainer'
import { department, position, employedSinceDate, typeGuest, typeUser } from '../../../../../helpers/customNames';
import { departments, department, position, employedSinceDate, typeGuest, typeUser } from '../../../../../helpers/customNames';
class UpdateUserForm extends React.Component {
@ -28,8 +28,6 @@ class UpdateUserForm extends React.Component {
this.onUserTypeChange = this.onUserTypeChange.bind(this);
this.onBirthdayDateChange = this.onBirthdayDateChange.bind(this);
this.onWorkFromDateChange = this.onWorkFromDateChange.bind(this);
this.onAddGroup = this.onAddGroup.bind(this);
this.onGroupClose = this.onGroupClose.bind(this);
this.onCancel = this.onCancel.bind(this);
this.onEmailChange = this.onEmailChange.bind(this);
@ -43,6 +41,12 @@ class UpdateUserForm extends React.Component {
this.onContactsItemAdd = this.onContactsItemAdd.bind(this);
this.onContactsItemTypeChange = this.onContactsItemTypeChange.bind(this);
this.onContactsItemTextChange = this.onContactsItemTextChange.bind(this);
this.onShowGroupSelector = this.onShowGroupSelector.bind(this);
this.onCloseGroupSelector = this.onCloseGroupSelector.bind(this);
this.onSearchGroups = this.onSearchGroups.bind(this);
this.onSelectGroups = this.onSelectGroups.bind(this);
this.onRemoveGroup = this.onRemoveGroup.bind(this);
}
componentDidUpdate(prevProps, prevState) {
@ -52,19 +56,29 @@ class UpdateUserForm extends React.Component {
}
mapPropsToState = (props) => {
const newState = {
var profile = toEmployeeWrapper(props.profile);
var allOptions = mapGroupsToGroupSelectorOptions(props.groups);
var selected = mapGroupsToGroupSelectorOptions(profile.groups);
const newState = {
isLoading: false,
errors: {
firstName: false,
lastName: false,
},
profile: toEmployeeWrapper(props.profile),
profile: profile,
dialog: {
visible: false,
header: "",
body: "",
buttons: [],
newEmail: "",
},
selector: {
visible: false,
allOptions: allOptions,
options: [...allOptions],
selected: selected
}
};
@ -102,16 +116,6 @@ class UpdateUserForm extends React.Component {
this.setState(stateCopy)
}
onAddGroup() {
console.log("onAddGroup")
}
onGroupClose(id) {
var stateCopy = Object.assign({}, this.state);
stateCopy.profile.groups = this.state.profile.groups.filter((group) => group.id !== id);
this.setState(stateCopy)
}
validate() {
const { profile } = this.state;
const errors = {
@ -268,8 +272,41 @@ class UpdateUserForm extends React.Component {
this.setState(stateCopy);
}
onShowGroupSelector() {
var stateCopy = Object.assign({}, this.state);
stateCopy.selector.visible = true;
this.setState(stateCopy);
}
onCloseGroupSelector() {
var stateCopy = Object.assign({}, this.state);
stateCopy.selector.visible = false;
this.setState(stateCopy);
}
onSearchGroups(template) {
var stateCopy = Object.assign({}, this.state);
stateCopy.selector.options = filterGroupSelectorOptions(stateCopy.selector.allOptions, template);
this.setState(stateCopy);
}
onSelectGroups(selected) {
var stateCopy = Object.assign({}, this.state);
stateCopy.profile.groups = mapGroupSelectorOptionsToGroups(selected);
stateCopy.selector.selected = selected;
stateCopy.selector.visible = false;
this.setState(stateCopy);
}
onRemoveGroup(id) {
var stateCopy = Object.assign({}, this.state);
stateCopy.profile.groups = stateCopy.profile.groups.filter(group => group.id !== id);
stateCopy.selector.selected = stateCopy.selector.selected.filter(option => option.key !== id);
this.setState(stateCopy)
}
render() {
const { isLoading, errors, profile, dialog } = this.state;
const { isLoading, errors, profile, dialog, selector } = this.state;
const { t } = this.props;
const pattern = getUserContactsPattern();
@ -394,10 +431,18 @@ class UpdateUserForm extends React.Component {
<DepartmentField
labelText={`${t("CustomDepartment", { department })}:`}
isDisabled={isLoading}
departments={profile.groups}
addButtonTitle={t("AddButton")}
onAddDepartment={this.onAddGroup}
onRemoveDepartment={this.onGroupClose}
showGroupSelectorButtonTitle={t("AddButton")}
onShowGroupSelector={this.onShowGroupSelector}
onCloseGroupSelector={this.onCloseGroupSelector}
onRemoveGroup={this.onRemoveGroup}
selectorIsVisible={selector.visible}
selectorSearchPlaceholder={t("Search")}
selectorOptions={selector.options}
selectorSelectedOptions={selector.selected}
selectorAddButtonText={t("CustomAddDepartments", { departments })}
selectorSelectAllText={t("SelectAll")}
selectorOnSearchGroups={this.onSearchGroups}
selectorOnSelectGroups={this.onSelectGroups}
/>
</MainFieldsContainer>
</MainContainer>
@ -445,7 +490,8 @@ class UpdateUserForm extends React.Component {
const mapStateToProps = (state) => {
return {
profile: state.profile.targetUser,
settings: state.auth.settings
settings: state.auth.settings,
groups: state.people.groups
}
};

5
products/ASC.People/Client/src/components/pages/ProfileAction/locales/en/translation.json
View File

@ -16,6 +16,8 @@
"ContactInformation": "Contact Information",
"AddContact": "Add contact",
"SocialProfiles": "Social Profiles",
"Search": "Search",
"SelectAll": "Select all",
"ActivationLink": "Activation link",
"AddPhoto": "Add photo",
@ -32,5 +34,6 @@
"CustomTypeGuest": "{{typeGuest}}",
"CustomTypeUser": "{{typeUser}}",
"CustomNewEmployee": "New {{typeUser, lowercase}}",
"CustomNewGuest": "New {{typeGuest, lowercase}}"
"CustomNewGuest": "New {{typeGuest, lowercase}}",
"CustomAddDepartments": "Add {{departments, lowercase}}"
}

27
products/ASC.People/Client/src/store/people/selectors.js
View File

@ -143,3 +143,30 @@ export function toEmployeeWrapper(profile) {
return cloneDeep({ ...emptyData, ...profile });
}
export function mapGroupsToGroupSelectorOptions(groups) {
return groups.map(group => {
return {
key: group.id,
label: group.name,
manager: group.manager,
total: 0
}
});
}
export function mapGroupSelectorOptionsToGroups(options) {
return options.map(option => {
return {
id: option.key,
name: option.label,
manager: option.manager
}
});
}
export function filterGroupSelectorOptions(options, template) {
return options.filter(option => {
return template ? option.label.indexOf(template) > -1 : true;
})
}

440
web/ASC.Web.Client/src/components/pages/Confirm/index.js
View File

@ -1,6 +1,6 @@
import React, { useState, useCallback, useEffect } from 'react';
import React from 'react';
import { withRouter } from "react-router";
import { useTranslation } from 'react-i18next';
import { I18nextProvider, withTranslation } from 'react-i18next';
import i18n from './i18n';
import { Button, TextInput, PageLayout, Text, PasswordInput, FieldContainer, toastr, Loader } from 'asc-web-components';
import styled from 'styled-components';
@ -47,268 +47,278 @@ const ConfirmContainer = styled.div`
const emailInputName = 'email';
const passwordInputName = 'password';
const Confirm = (props) => {
const { t } = useTranslation('translation', { i18n });
const [email, setEmail] = useState('');
const [emailValid, setEmailValid] = useState(true);
const [firstName, setFirstName] = useState('');
const [firstNameValid, setFirstNameValid] = useState(true);
const [lastName, setLastName] = useState('');
const [lastNameValid, setLastNameValid] = useState(true);
const [password, setPassword] = useState('');
const [passwordValid, setPasswordValid] = useState(true);
const [errorText, setErrorText] = useState("");
const [isLoading, setIsLoading] = useState(false);
const { location, history, isLoaded, getPasswordSettings, settings, createConfirmUser } = props;
const emailRegex = '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$';
const validationEmail = new RegExp(emailRegex);
const queryString = location.search.slice(1);
const queryParams = queryString.split('&');
const arrayOfQueryParams = queryParams.map(queryParam => queryParam.split('='));
const linkParams = Object.fromEntries(arrayOfQueryParams);
const isVisitor = parseInt(linkParams.emplType) === 2;
class Confirm extends React.PureComponent {
const emailRegex = '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z0-9]{2,}$';
const validationEmail = new RegExp(emailRegex);
const onSubmit = useCallback((e) => {
constructor(props) {
super(props);
errorText && setErrorText("");
this.state = {
email: '',
emailValid: true,
firstName: '',
firstNameValid: true,
lastName: '',
lastNameValid: true,
password: '',
passwordValid: true,
errorText: '',
isLoading: false,
};
}
onSubmit = (e) => {
const { location, history, createConfirmUser } = this.props;
const queryString = location.search.slice(1);
const queryParams = queryString.split('&');
const arrayOfQueryParams = queryParams.map(queryParam => queryParam.split('='));
const linkParams = Object.fromEntries(arrayOfQueryParams);
const isVisitor = parseInt(linkParams.emplType) === 2;
this.state.errorText && this.setState({ errorText: "" });
let hasError = false;
if (!firstName.trim()) {
if (!this.state.firstName.trim()) {
hasError = true;
setFirstNameValid(!hasError);
this.setState({ firstNameValid: !hasError });
}
if (!lastName.trim()) {
if (!this.state.lastName.trim()) {
hasError = true;
setLastNameValid(!hasError);
this.setState({ lastNameValid: !hasError });
}
if (!validationEmail.test(email.trim())) {
if (!validationEmail.test(this.state.email.trim())) {
hasError = true;
setEmailValid(!hasError);
this.setState({ emailValid: !hasError });
}
if (!passwordValid) {
if (!this.state.passwordValid) {
hasError = true;
setPasswordValid(!hasError);
this.setState({ passwordValid: !hasError });
}
if (hasError)
return false;
setIsLoading(true);
this.setState({ isLoading: true });
const loginData = {
userName: email,
password: password
userName: this.state.email,
password: this.state.password
}
const registerData = {
firstname: firstName,
lastname: lastName,
email: email,
firstname: this.state.firstName,
lastname: this.state.lastName,
email: this.state.email,
isVisitor: isVisitor
};
createConfirmUser(registerData, loginData, queryString)
.then(() => history.push('/'))
.catch(e => {
console.error("confirm error", e);
setErrorText(e.message);
setIsLoading(false)
this.setState({ errorText: e.message });
this.setState({ isLoading: false });
});
};
onKeyPress = (target) => {
if (target.code === "Enter") {
this.onSubmit();
}
};
onCopyToClipboard = () => toastr.success(this.props.t('EmailAndPasswordCopiedToClipboard'));
validatePassword = (value) => this.setState({ passwordValid: value });
componentDidMount() {
const { getPasswordSettings, history, location } = this.props;
const queryString = location.search.slice(1);
getPasswordSettings(queryString)
.then(
function () {
console.log("get settings success");
}
)
.catch(e => {
console.error("get settings error", e);
history.push(`/login/${e}`);
});
}, [errorText, email, firstName, lastName, validationEmail, passwordValid, createConfirmUser, history, queryString, isVisitor, password]);
window.addEventListener('keydown', this.onKeyPress);
window.addEventListener('keyup', this.onKeyPress);
}
const onKeyPress = useCallback((target) => {
if (target.code === "Enter") {
onSubmit();
}
}, [onSubmit]);
componentWillUnmount() {
window.removeEventListener('keydown', this.onKeyPress);
window.removeEventListener('keyup', this.onKeyPress);
}
useEffect(() => {
if (!isLoaded && !settings) {
getPasswordSettings(queryString)
.then(
function () {
console.log("get settings success");
}
render() {
const { settings, isLoaded, t } = this.props;
return (
!isLoaded
? (
<Loader className="pageLoader" type="rombs" size={40} />
)
.catch(e => {
console.error("get settings error", e);
history.push(`/login/${e}`);
: (
<ConfirmContainer>
<div className='start-basis'>
<div className='margin-left'>
<Text.Body className='confirm-row' as='p' fontSize={18}>{t('InviteTitle')}</Text.Body>
})
};
window.addEventListener('keydown', onKeyPress);
window.addEventListener('keyup', onKeyPress);
// Remove event listeners on cleanup
return () => {
window.removeEventListener('keydown', onKeyPress);
window.removeEventListener('keyup', onKeyPress);
};
}, [onKeyPress, getPasswordSettings, isLoaded, settings, queryString, history]);
const onCopyToClipboard = () => toastr.success(t('EmailAndPasswordCopiedToClipboard'));
const validatePassword = (value) => setPasswordValid(value);
return (
!isLoaded
? (
<Loader className="pageLoader" type="rombs" size={40} />
)
: (
<ConfirmContainer>
<div className='start-basis'>
<div className='margin-left'>
<Text.Body className='confirm-row' as='p' fontSize={18}>{t('InviteTitle')}</Text.Body>
<div className='confirm-row full-width break-word'>
<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>
</div>
<div className='confirm-row'>
<div className='full-width'>
<FieldContainer isVertical={true} className=''>
<TextInput
id='name'
name='name'
value={firstName}
placeholder={t('FirstName')}
size='huge'
scale={true}
tabIndex={1}
isAutoFocussed={true}
autoComplete='given-name'
isDisabled={isLoading}
hasError={!firstNameValid}
onChange={event => {
setFirstName(event.target.value);
!firstNameValid && setFirstNameValid(true);
errorText && setErrorText("");
}}
onKeyDown={event => onKeyPress(event.target)}
/>
</FieldContainer>
<FieldContainer isVertical={true} className=''>
<TextInput
id='surname'
name='surname'
value={lastName}
placeholder={t('LastName')}
size='huge'
scale={true}
tabIndex={2}
autoComplete='family-name'
isDisabled={isLoading}
hasError={!lastNameValid}
onChange={event => {
setLastName(event.target.value);
!lastNameValid && setLastNameValid(true);
errorText && setErrorText("");
}}
onKeyDown={event => onKeyPress(event.target)}
/>
</FieldContainer>
<FieldContainer isVertical={true} className=''>
<TextInput
id='email'
name={emailInputName}
value={email}
placeholder={t('Email')}
size='huge'
scale={true}
tabIndex={3}
autoComplete='email'
isDisabled={isLoading}
hasError={!emailValid}
onChange={event => {
setEmail(event.target.value);
!emailValid && setEmailValid(true);
errorText && setErrorText("");
}}
onKeyDown={event => onKeyPress(event.target)}
/>
</FieldContainer>
<div className='confirm-row full-width break-word'>
<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>
</div>
<FieldContainer isVertical={true} className=''>
<PasswordInput
inputName={passwordInputName}
emailInputName={emailInputName}
inputValue={password}
placeholder={t('InvitePassword')}
size='huge'
scale={true}
tabIndex={4}
maxLength={30}
inputWidth={inputWidth}
hasError={!passwordValid && !password.trim()}
onChange={event => {
setPassword(event.target.value);
!passwordValid && setPasswordValid(true);
errorText && setErrorText("");
onKeyPress(event.target);
}}
onCopyToClipboard={onCopyToClipboard}
onValidateInput={validatePassword}
clipActionResource={t('CopyEmailAndPassword')}
clipEmailResource={`${t('Email')}: `}
clipPasswordResource={`${t('InvitePassword')}: `}
tooltipPasswordTitle={`${t('ErrorPasswordMessage')}:`}
tooltipPasswordLength={`${t('ErrorPasswordLength', { fromNumber: 6, toNumber: 30 })}:`}
tooltipPasswordDigits={t('ErrorPasswordNoDigits')}
tooltipPasswordCapital={t('ErrorPasswordNoUpperCase')}
tooltipPasswordSpecial={`${t('ErrorPasswordNoSpecialSymbols')} (!@#$%^&*)`}
generatorSpecial="!@#$%^&*"
passwordSettings={settings}
isDisabled={isLoading}
<div className='confirm-row'>
<div className='full-width'>
<FieldContainer isVertical={true} className=''>
<TextInput
id='name'
name='name'
value={this.state.firstName}
placeholder={t('FirstName')}
size='huge'
scale={true}
tabIndex={1}
isAutoFocussed={true}
autoComplete='given-name'
isDisabled={this.state.isLoading}
hasError={!this.state.firstNameValid}
onChange={event => {
this.setState({ firstName: event.target.value });
!this.state.firstNameValid && this.setState({ firstNameValid: event.target.value });
this.state.errorText && this.setState({ errorText: "" });
}}
onKeyDown={event => this.onKeyPress(event.target)}
/>
</FieldContainer>
<FieldContainer isVertical={true} className=''>
<TextInput
id='surname'
name='surname'
value={this.state.lastName}
placeholder={t('LastName')}
size='huge'
scale={true}
tabIndex={2}
autoComplete='family-name'
isDisabled={this.state.isLoading}
hasError={!this.state.lastNameValid}
onChange={event => {
this.setState({ lastName: event.target.value });
!this.state.lastNameValid && this.setState({ lastNameValid: true });
this.state.errorText && this.setState({ errorText: "" });;
}}
onKeyDown={event => this.onKeyPress(event.target)}
/>
</FieldContainer>
<FieldContainer isVertical={true} className=''>
<TextInput
id='email'
name={emailInputName}
value={this.state.email}
placeholder={t('Email')}
size='huge'
scale={true}
tabIndex={3}
autoComplete='email'
isDisabled={this.state.isLoading}
hasError={!this.state.emailValid}
onChange={event => {
this.setState({ email: event.target.value });
!this.state.emailValid && this.setState({ emailValid: true });
this.state.errorText && this.setState({ errorText: "" });;
}}
onKeyDown={event => this.onKeyPress(event.target)}
/>
</FieldContainer>
</div>
<FieldContainer isVertical={true} className=''>
<PasswordInput
inputName={passwordInputName}
emailInputName={emailInputName}
inputValue={this.state.password}
placeholder={t('InvitePassword')}
size='huge'
scale={true}
tabIndex={4}
maxLength={30}
inputWidth={inputWidth}
hasError={!this.state.passwordValid && !this.state.password.trim()}
onChange={event => {
this.setState({ password: event.target.value });
!this.state.passwordValid && this.setState({ passwordValid: true });
this.state.errorText && this.setState({ errorText: "" });
this.onKeyPress(event.target);
}}
onCopyToClipboard={this.onCopyToClipboard}
onValidateInput={this.validatePassword}
clipActionResource={t('CopyEmailAndPassword')}
clipEmailResource={`${t('Email')}: `}
clipPasswordResource={`${t('InvitePassword')}: `}
tooltipPasswordTitle={`${t('ErrorPasswordMessage')}:`}
tooltipPasswordLength={`${t('ErrorPasswordLength', { fromNumber: 6, toNumber: 30 })}:`}
tooltipPasswordDigits={t('ErrorPasswordNoDigits')}
tooltipPasswordCapital={t('ErrorPasswordNoUpperCase')}
tooltipPasswordSpecial={`${t('ErrorPasswordNoSpecialSymbols')} (!@#$%^&*)`}
generatorSpecial="!@#$%^&*"
passwordSettings={settings}
isDisabled={this.state.isLoading}
/>
</FieldContainer>
<Button
primary
size='big'
label={t('LoginRegistryButton')}
tabIndex={5}
isDisabled={this.state.isLoading}
isLoading={this.state.isLoading}
onClick={this.onSubmit}
/>
</FieldContainer>
<Button
primary
size='big'
label={t('LoginRegistryButton')}
tabIndex={5}
isDisabled={isLoading}
isLoading={isLoading}
onClick={onSubmit}
/>
</div>
</div>
{/* <Row className='confirm-row'>
{/* <Row className='confirm-row'>
<Text.Body as='p' fontSize={14}>{t('LoginWithAccount')}</Text.Body>
</Row>
*/}
<Collapse className='confirm-row'
isOpen={!!errorText}>
<div className="alert alert-danger">{errorText}</div>
</Collapse>
</div>
</ConfirmContainer>
)
);
<Collapse className='confirm-row'
isOpen={!!this.state.errorText}>
<div className="alert alert-danger">{this.state.errorText}</div>
</Collapse>
</div>
</ConfirmContainer>
)
);
}
}
const ConfirmForm = (props) => (<PageLayout sectionBodyContent={<Confirm {...props} />} />);
const ConfirmWrapper = withTranslation()(Confirm);
const ConfirmWithTrans = (props) => <I18nextProvider i18n={i18n}><ConfirmWrapper {...props} /></I18nextProvider>;
ConfirmWithTrans.propTypes = {
};
const ConfirmForm = (props) => (<PageLayout sectionBodyContent={<ConfirmWithTrans {...props} />} />);
function mapStateToProps(state) {
return {

4
web/ASC.Web.Client/src/store/auth/actions.js
View File

@ -96,11 +96,11 @@ export function createConfirmUser(registerData, loginData, key) {
.then(res => {
checkResponseError(res);
console.log('register success:', res.data.response);
return api.login(data);
return api.login(loginData);
})
.then(res => {
console.error("log in, result:", res);
console.log("log in, result:", res);
checkResponseError(res);
const token = res.data.response.token;
setAuthorizationToken(token);

2
web/ASC.Web.Components/package.json
View File

@ -1,6 +1,6 @@
{
"name": "asc-web-components",
"version": "1.0.74",
"version": "1.0.76",
"description": "Ascensio System SIA component library",
"license": "AGPL-3.0",
"main": "dist/asc-web-components.js",

2
web/ASC.Web.Components/src/components/backdrop/index.js
View File

@ -27,7 +27,7 @@ Backdrop.propTypes = {
Backdrop.defaultProps = {
visible: false,
zIndex: 500
zIndex: 200
};
export default Backdrop;

2
web/ASC.Web.Components/src/components/modal-dialog/index.js
View File

@ -71,7 +71,7 @@ const ModalDialog = props => {
return (
<>
<Backdrop visible={visible}>
<Backdrop visible={visible} zIndex={310} >
<Dialog>
<Content>
<Header>

4
web/ASC.Web.Components/src/components/paging/index.js
View File

@ -14,7 +14,7 @@ const StyledPaging = styled.div`
& > button {
margin-right: 8px;
width: 110px;
max-width: 110px;
}
`;
@ -22,7 +22,7 @@ const StyledOnPage = styled.div`
margin-left: auto;
margin-right: 0px;
@media ${mobile} {
@media (max-width: 450px) {
display: none;
}
`;