Merge branch 'master' of https://github.com/ONLYOFFICE/AppServer
This commit is contained in:
commit
bdbdde44ff
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { withRouter } from "react-router";
|
||||
import {
|
||||
@ -22,7 +22,7 @@ import {
|
||||
} from "asc-web-components";
|
||||
import { connect } from "react-redux";
|
||||
import styled from "styled-components";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { withTranslation, I18nextProvider } from "react-i18next";
|
||||
import i18n from "./i18n";
|
||||
import SubModalDialog from "./sub-components/modal-dialog";
|
||||
import { login, setIsLoaded } from "../../store/auth/actions";
|
||||
@ -88,263 +88,304 @@ const TooltipStyle = styled.span`
|
||||
margin-top: 2px;
|
||||
`;
|
||||
|
||||
const mdOptions = { size: 6, offset: 3 };
|
||||
class Form extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const Form = props => {
|
||||
const { t } = useTranslation("translation", { i18n });
|
||||
const { login, setIsLoaded, match, history, language, greetingTitle } = props;
|
||||
const { params } = match;
|
||||
const [identifier, setIdentifier] = useState(params.confirmedEmail || "");
|
||||
const [identifierValid, setIdentifierValid] = useState(true);
|
||||
const [password, setPassword] = useState("");
|
||||
const [passwordValid, setPasswordValid] = useState(true);
|
||||
const [errorText, setErrorText] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
this.state = {
|
||||
identifierValid: true,
|
||||
identifier: "",
|
||||
isLoading: false,
|
||||
isDisabled: false,
|
||||
passwordValid: true,
|
||||
password: "",
|
||||
isChecked: false,
|
||||
openDialog: false,
|
||||
email: "",
|
||||
errorText: ""
|
||||
};
|
||||
}
|
||||
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
const [email, setEmail] = useState("");
|
||||
const [isDisabled, setIsDisabled] = useState(false);
|
||||
const [isChecked, setIsisChecked] = useState(false);
|
||||
|
||||
const onClick = () => {
|
||||
setOpenDialog(true);
|
||||
setIsDisabled(true);
|
||||
setEmail(identifier);
|
||||
onChangeLogin = event => {
|
||||
this.setState({ identifier: event.target.value });
|
||||
!this.state.identifierValid && this.setState({ identifierValid: true });
|
||||
this.state.errorText && this.setState({ errorText: "" });
|
||||
};
|
||||
|
||||
const onDialogClose = () => {
|
||||
setOpenDialog(false);
|
||||
setIsDisabled(false);
|
||||
setIsLoading(false);
|
||||
setEmail("");
|
||||
onChangePassword = event => {
|
||||
this.setState({ password: event.target.value });
|
||||
!this.state.passwordValid && this.setState({ passwordValid: true });
|
||||
this.state.errorText && this.setState({ errorText: "" });
|
||||
};
|
||||
|
||||
const onSendPasswordInstructions = useCallback(() => {
|
||||
setIsLoading(true);
|
||||
sendInstructionsToChangePassword(email)
|
||||
.then(res => toastr.success(res), message => toastr.error(message))
|
||||
.finally(onDialogClose());
|
||||
}, [email]);
|
||||
onChangeEmail = event => {
|
||||
this.setState({ email: event.target.value });
|
||||
};
|
||||
|
||||
const onSubmit = useCallback(() => {
|
||||
errorText && setErrorText("");
|
||||
onChangeCheckbox = () => this.setState({ isChecked: !this.state.isChecked });
|
||||
|
||||
onClick = () => {
|
||||
this.setState({
|
||||
openDialog: true,
|
||||
isDisabled: true,
|
||||
email: this.state.identifier
|
||||
});
|
||||
};
|
||||
|
||||
onKeyPress = event => {
|
||||
if (event.key === "Enter") {
|
||||
!this.state.isDisabled
|
||||
? this.onSubmit()
|
||||
: this.onSendPasswordInstructions();
|
||||
}
|
||||
};
|
||||
|
||||
onSendPasswordInstructions = () => {
|
||||
this.setState({ isLoading: true });
|
||||
sendInstructionsToChangePassword(this.state.email)
|
||||
.then(
|
||||
res => toastr.success(res),
|
||||
message => toastr.error(message)
|
||||
)
|
||||
.finally(this.onDialogClose());
|
||||
};
|
||||
|
||||
onDialogClose = () => {
|
||||
this.setState({
|
||||
openDialog: false,
|
||||
isDisabled: false,
|
||||
isLoading: false,
|
||||
email: ""
|
||||
});
|
||||
};
|
||||
|
||||
onSubmit = () => {
|
||||
const { errorText, identifier, password } = this.state;
|
||||
const { login, setIsLoaded, history } = this.props;
|
||||
|
||||
errorText && this.setState({ errorText: "" });
|
||||
let hasError = false;
|
||||
|
||||
const userName = identifier.trim();
|
||||
|
||||
if (!userName) {
|
||||
hasError = true;
|
||||
setIdentifierValid(!hasError);
|
||||
this.setState({ identifierValid: !hasError });
|
||||
}
|
||||
|
||||
const pass = password.trim();
|
||||
|
||||
if (!pass) {
|
||||
hasError = true;
|
||||
setPasswordValid(!hasError);
|
||||
this.setState({ passwordValid: !hasError });
|
||||
}
|
||||
|
||||
if (hasError) return false;
|
||||
|
||||
setIsLoading(true);
|
||||
this.setState({ isLoading: true });
|
||||
|
||||
login(userName, pass).then(
|
||||
() => {
|
||||
//console.log("auth success", match, location, history);
|
||||
setIsLoading(false);
|
||||
this.setState({ isLoading: false });
|
||||
setIsLoaded(true);
|
||||
history.push("/");
|
||||
},
|
||||
error => {
|
||||
//console.error("auth error", error);
|
||||
setErrorText(error);
|
||||
setIsLoading(false);
|
||||
this.setState({ errorText: error, isLoading: false });
|
||||
}
|
||||
);
|
||||
}, [errorText, history, identifier, login, setIsLoaded, password]);
|
||||
};
|
||||
|
||||
const onKeyPress = useCallback(
|
||||
event => {
|
||||
if (event.key === "Enter") {
|
||||
!isDisabled ? onSubmit() : onSendPasswordInstructions();
|
||||
}
|
||||
},
|
||||
[onSendPasswordInstructions, onSubmit, isDisabled]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
componentDidMount() {
|
||||
const { language, match } = this.props;
|
||||
const { params } = match;
|
||||
i18n.changeLanguage(language);
|
||||
params.error && setErrorText(params.error);
|
||||
window.addEventListener("keyup", onKeyPress);
|
||||
// Remove event listeners on cleanup
|
||||
return () => {
|
||||
window.removeEventListener("keyup", onKeyPress);
|
||||
};
|
||||
}, [onKeyPress, params, language]);
|
||||
params.error && this.setState({ errorText: params.error });
|
||||
window.addEventListener("keyup", this.onKeyPress);
|
||||
}
|
||||
|
||||
const onChangePassword = event => {
|
||||
setPassword(event.target.value);
|
||||
!passwordValid && setPasswordValid(true);
|
||||
errorText && setErrorText("");
|
||||
};
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener("keyup", this.onKeyPress);
|
||||
}
|
||||
|
||||
const onChangeLogin = event => {
|
||||
setIdentifier(event.target.value);
|
||||
!identifierValid && setIdentifierValid(true);
|
||||
errorText && setErrorText("");
|
||||
};
|
||||
render() {
|
||||
const mdOptions = { size: 6, offset: 3 };
|
||||
const { greetingTitle, match, t } = this.props;
|
||||
const {
|
||||
identifierValid,
|
||||
identifier,
|
||||
isLoading,
|
||||
passwordValid,
|
||||
password,
|
||||
isChecked,
|
||||
openDialog,
|
||||
email,
|
||||
errorText
|
||||
} = this.state;
|
||||
const { params } = match;
|
||||
|
||||
const onChangeEmail = event => {
|
||||
setEmail(event.target.value);
|
||||
};
|
||||
//console.log("Login render");
|
||||
|
||||
// console.log('Login render');
|
||||
return (
|
||||
<FormContainer>
|
||||
<Row className="login-row">
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<Card className="login-card">
|
||||
<CardImg
|
||||
className="card-img"
|
||||
src="images/dark_general.png"
|
||||
alt="Logo"
|
||||
top
|
||||
/>
|
||||
<CardTitle className="card-title">{greetingTitle}</CardTitle>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="login-row">
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<TextInput
|
||||
id="login"
|
||||
name="login"
|
||||
hasError={!identifierValid}
|
||||
value={identifier}
|
||||
placeholder={t("RegistrationEmailWatermark")}
|
||||
size="huge"
|
||||
scale={true}
|
||||
isAutoFocussed={true}
|
||||
tabIndex={1}
|
||||
isDisabled={isLoading}
|
||||
autoComplete="username"
|
||||
onChange={this.onChangeLogin}
|
||||
onKeyDown={this.onKeyPress}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="login-row">
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<TextInput
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
hasError={!passwordValid}
|
||||
value={password}
|
||||
placeholder={t("Password")}
|
||||
size="huge"
|
||||
scale={true}
|
||||
tabIndex={2}
|
||||
isDisabled={isLoading}
|
||||
autoComplete="current-password"
|
||||
onChange={this.onChangePassword}
|
||||
onKeyDown={this.onKeyPress}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="login-row">
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<Link
|
||||
fontSize={12}
|
||||
className="link-style"
|
||||
type="page"
|
||||
isHovered={true}
|
||||
onClick={this.onClick}
|
||||
>
|
||||
{t("ForgotPassword")}
|
||||
</Link>
|
||||
<Checkbox
|
||||
className="checkbox"
|
||||
isChecked={isChecked}
|
||||
onChange={this.onChangeCheckbox}
|
||||
label={t("Remember")}
|
||||
/>
|
||||
<TooltipStyle>
|
||||
<HelpButton
|
||||
helpButtonHeaderContent={t("CookieSettingsTitle")}
|
||||
tooltipContent={
|
||||
<Text.Body fontSize={12}>{t("RememberHelper")}</Text.Body>
|
||||
}
|
||||
/>
|
||||
</TooltipStyle>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{openDialog ? (
|
||||
<SubModalDialog
|
||||
openDialog={openDialog}
|
||||
isLoading={isLoading}
|
||||
email={email}
|
||||
onChangeEmail={this.onChangeEmail}
|
||||
onSendPasswordInstructions={this.onSendPasswordInstructions}
|
||||
onDialogClose={this.onDialogClose}
|
||||
t={t}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Row className="button-row">
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<Button
|
||||
primary
|
||||
size="big"
|
||||
label={isLoading ? t("LoadingProcessing") : t("LoginButton")}
|
||||
tabIndex={3}
|
||||
isDisabled={isLoading}
|
||||
isLoading={isLoading}
|
||||
onClick={this.onSubmit}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{params.confirmedEmail && (
|
||||
<Row className="login-row">
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<Text.Body isBold={true} fontSize={16}>
|
||||
{t("MessageEmailConfirmed")} {t("MessageAuthorize")}
|
||||
</Text.Body>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
<Collapse isOpen={!!errorText}>
|
||||
<Row className="login-row">
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<div className="alert alert-danger">{errorText}</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Collapse>
|
||||
</FormContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const FormWrapper = withTranslation()(Form);
|
||||
|
||||
const LoginForm = props => {
|
||||
const { language } = props;
|
||||
i18n.changeLanguage(language);
|
||||
|
||||
return (
|
||||
<FormContainer>
|
||||
<Row className="login-row">
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<Card className="login-card">
|
||||
<CardImg
|
||||
className="card-img"
|
||||
src="images/dark_general.png"
|
||||
alt="Logo"
|
||||
top
|
||||
/>
|
||||
<CardTitle className="card-title">
|
||||
{greetingTitle}
|
||||
</CardTitle>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="login-row">
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<TextInput
|
||||
id="login"
|
||||
name="login"
|
||||
hasError={!identifierValid}
|
||||
value={identifier}
|
||||
placeholder={t("RegistrationEmailWatermark")}
|
||||
size="huge"
|
||||
scale={true}
|
||||
isAutoFocussed={true}
|
||||
tabIndex={1}
|
||||
isDisabled={isLoading}
|
||||
autoComplete="username"
|
||||
onChange={onChangeLogin}
|
||||
onKeyDown={onKeyPress}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="login-row">
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<TextInput
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
hasError={!passwordValid}
|
||||
value={password}
|
||||
placeholder={t("Password")}
|
||||
size="huge"
|
||||
scale={true}
|
||||
tabIndex={2}
|
||||
isDisabled={isLoading}
|
||||
autoComplete="current-password"
|
||||
onChange={onChangePassword}
|
||||
onKeyDown={onKeyPress}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="login-row">
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<Link
|
||||
fontSize={12}
|
||||
className="link-style"
|
||||
type="page"
|
||||
isHovered={true}
|
||||
onClick={onClick}
|
||||
>
|
||||
{t("ForgotPassword")}
|
||||
</Link>
|
||||
<Checkbox
|
||||
className="checkbox"
|
||||
isChecked={isChecked}
|
||||
onChange={() => setIsisChecked(!isChecked)}
|
||||
label={t("Remember")}
|
||||
/>
|
||||
<TooltipStyle>
|
||||
<HelpButton
|
||||
helpButtonHeaderContent={t('CookieSettingsTitle')}
|
||||
tooltipContent={
|
||||
<Text.Body fontSize={12}>{t("RememberHelper")}</Text.Body>
|
||||
}
|
||||
/>
|
||||
</TooltipStyle>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{openDialog ? (
|
||||
<SubModalDialog
|
||||
openDialog={openDialog}
|
||||
isLoading={isLoading}
|
||||
email={email}
|
||||
onChangeEmail={onChangeEmail}
|
||||
onSendPasswordInstructions={onSendPasswordInstructions}
|
||||
onDialogClose={onDialogClose}
|
||||
t={t}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Row className="button-row">
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<Button
|
||||
primary
|
||||
size="big"
|
||||
label={isLoading ? t("LoadingProcessing") : t("LoginButton")}
|
||||
tabIndex={3}
|
||||
isDisabled={isLoading}
|
||||
isLoading={isLoading}
|
||||
onClick={onSubmit}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{params.confirmedEmail && (
|
||||
<Row className="login-row">
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<Text.Body isBold={true} fontSize={16}>
|
||||
{t("MessageEmailConfirmed")} {t("MessageAuthorize")}
|
||||
</Text.Body>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
<Collapse isOpen={!!errorText}>
|
||||
<Row className="login-row">
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<div className="alert alert-danger">{errorText}</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Collapse>
|
||||
</FormContainer>
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<PageLayout sectionBodyContent={<FormWrapper {...props} />} />
|
||||
</I18nextProvider>
|
||||
);
|
||||
};
|
||||
|
||||
const LoginForm = props => (
|
||||
<PageLayout sectionBodyContent={<Form {...props} />} />
|
||||
);
|
||||
|
||||
LoginForm.propTypes = {
|
||||
Form.propTypes = {
|
||||
login: PropTypes.func.isRequired,
|
||||
match: PropTypes.object.isRequired,
|
||||
location: PropTypes.object.isRequired,
|
||||
history: PropTypes.object.isRequired
|
||||
history: PropTypes.object.isRequired,
|
||||
setIsLoaded: PropTypes.func.isRequired,
|
||||
greetingTitle: PropTypes.string.isRequired,
|
||||
t: PropTypes.func.isRequired,
|
||||
language: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
LoginForm.defaultProps = {
|
||||
Form.defaultProps = {
|
||||
identifier: "",
|
||||
password: "",
|
||||
email: ""
|
||||
};
|
||||
|
||||
LoginForm.propTypes = {
|
||||
language: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
function mapStateToProps(state) {
|
||||
return {
|
||||
language: state.auth.user.cultureName || state.auth.settings.culture,
|
||||
@ -352,7 +393,6 @@ function mapStateToProps(state) {
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
{ login, setIsLoaded }
|
||||
)(withRouter(LoginForm));
|
||||
export default connect(mapStateToProps, { login, setIsLoaded })(
|
||||
withRouter(LoginForm)
|
||||
);
|
||||
|
12548
web/ASC.Web.Common/yarn.lock
Normal file
12548
web/ASC.Web.Common/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "asc-web-components",
|
||||
"version": "1.0.197",
|
||||
"version": "1.0.198",
|
||||
"description": "Ascensio System SIA component library",
|
||||
"license": "AGPL-3.0",
|
||||
"main": "dist/asc-web-components.js",
|
||||
|
@ -56,7 +56,7 @@ class ToggleButton extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
checked: this.props.isChecked
|
||||
checked: props.isChecked
|
||||
};
|
||||
}
|
||||
|
||||
@ -104,4 +104,8 @@ ToggleButton.propTypes = {
|
||||
className: PropTypes.string
|
||||
};
|
||||
|
||||
ToggleIcon.propTypes = {
|
||||
isChecked: PropTypes.bool
|
||||
}
|
||||
|
||||
export default ToggleButton;
|
||||
|
Loading…
Reference in New Issue
Block a user