Web: Client: refactoring "PasswordChange" page, added get password settings

web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePassword.js

@@ -1,32 +1,41 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React from "react";
 import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { Row, Col, Card, CardImg, CardTitle } from "reactstrap";
-import { Button, PageLayout, Text, PasswordInput } from "asc-web-components";
-import { useTranslation } from "react-i18next";
-import i18n from "../i18n";
+import {
+  Container,
+  Collapse,
+  Row,
+  Col,
+  Card,
+  CardTitle,
+  CardImg
+} from "reactstrap";
+import {
+  Button,
+  PageLayout,
+  Text,
+  PasswordInput,
+  Loader,
+  toastr
+} from "asc-web-components";
 import { welcomePageTitle } from "../../../../helpers/customNames";
 import {
   changePassword,
   getPasswordSettings
 } from "../../../../../src/store/auth/actions";
 
-const BodyStyle = styled.div`
+const BodyStyle = styled(Container)`
   margin-top: 70px;
-
   p {
     margin-bottom: 5px;
   }
-
   .password-row {
     margin: 23px 0 0;
-
     .password-card {
       border: none;
-
       .card-img {
         max-width: 216px;
         max-height: 35px;
@@ -42,179 +51,214 @@ const BodyStyle = styled.div`
   }
 `;
 
-const Form = props => {
-  const [password, setPassword] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [errorText, setErrorText] = useState("");
-  const [passwordValid, setPasswordValid] = useState(true);
-  const {
-    match,
-    location,
-    history,
-    changePassword,
-    getPasswordSettings
-  } = props;
-  const { params } = match;
-  const { t } = useTranslation("translation", { i18n });
+class Form extends React.PureComponent {
+  constructor(props) {
+    super(props);
 
-  const indexOfSlash = match.path.lastIndexOf("/");
-  const typeLink = match.path.slice(indexOfSlash + 1);
-  const queryString = `type=${typeLink}&${location.search.slice(1)}`;
+    const { match, location } = props;
 
-  getPasswordSettings(queryString)
-    .then(function() {
-      console.log("GET PASSWORD SETTINGS SUCCESS");
-    })
-    .catch(e => {
-      console.log("ERROR GET PASSWORD SETTINGS", e);
-      history.push(`/login/error=${e}`);
-    });
+    const str = location.search.split("&");
+    const userId = str[2].slice(4);
+    const indexOfSlash = match.path.lastIndexOf("/");
+    const typeLink = match.path.slice(indexOfSlash + 1);
+    const queryString = `type=${typeLink}&${location.search.slice(1)}`;
 
-  const onSubmit = useCallback(
-    e => {
-      errorText && setErrorText("");
+    this.state = {
+      password: "",
+      passwordValid: true,
+      isValidConfirmLink: false,
+      errorText: "",
+      isLoading: false,
+      passwordEmpty: false,
+      queryString: queryString,
+      type: typeLink,
+      userId: userId
+    };
+  }
 
+  onKeyPress = target => {
+    if (target.key === "Enter") {
+      this.onSubmit();
+    }
+  };
+
+  onChange = event => {
+    this.setState({ password: event.target.value });
+    !this.state.passwordValid && this.setState({ passwordValid: true });
+    event.target.value.trim() && this.setState({ passwordEmpty: false });
+    this.state.errorText && this.setState({ errorText: "" });
+    this.onKeyPress(event);
+  };
+
+  onSubmit = e => {
+    this.setState({ isLoading: true }, function() {
+      const { userId, password, queryString } = this.state;
+      const { history, changePassword } = this.props;
+      this.setState({ errorText: "" });
       let hasError = false;
 
-      if (!password.trim()) {
+      if (!this.state.passwordValid) {
         hasError = true;
-        setPasswordValid(!hasError);
+        this.setState({ passwordValid: !hasError });
       }
 
-      if (hasError) return false;
+      !this.state.password.trim() && this.setState({ passwordEmpty: true });
 
-      setIsLoading(true);
-      console.log("changePassword onSubmit", match, location, history);
+      if (hasError) {
+        this.setState({ isLoading: false });
+        return false;
+      }
 
-      const str = location.search.split("&");
-      const userId = str[2].slice(4);
-      const key = `type=PasswordChange&${location.search.slice(1)}`;
-
-      changePassword(userId, { password }, key)
+      changePassword(userId, { password }, queryString)
         .then(() => {
           console.log("UPDATE PASSWORD");
           history.push("/");
         })
         .catch(e => {
           history.push("/");
-          console.log("ERROR UPDATE PASSWORD", e);
+          console.log("ERROR UPDATE PASSWORD:", e.message);
+          this.setState({ errorText: e.message });
+          this.setState({ isLoading: false });
         });
-    },
-    [errorText, history, location, changePassword, match, password]
-  );
-
-  const onKeyPress = useCallback(
-    target => {
-      if (target.key === "Enter") {
-        onSubmit();
-      }
-    },
-    [onSubmit]
-  );
-
-  useEffect(() => {
-    params.error && setErrorText(params.error);
-    window.addEventListener("keydown", onKeyPress);
-    window.addEventListener("keyup", onKeyPress);
-    // Remove event listeners on cleanup
-    return () => {
-      window.removeEventListener("keydown", onKeyPress);
-      window.removeEventListener("keyup", onKeyPress);
-    };
-  }, [onKeyPress, params.error]);
-
-  const settings = {
-    minLength: 6,
-    upperCase: false,
-    digits: false,
-    specSymbols: false
+    });
   };
 
-  const tooltipPasswordLength =
-    "from " + settings.minLength + " to 30 characters";
+  componentDidMount() {
+    const { getPasswordSettings, history } = this.props;
+    getPasswordSettings(this.state.queryString)
+      .then(() => {
+        console.log("GET PASSWORD SETTINGS SUCCESS");
+      })
+      .catch(e => {
+        console.log("ERROR GET PASSWORD SETTINGS", e);
+        history.push(`/login/error=${e}`);
+      });
 
-  const mdOptions = { size: 6, offset: 3 };
-  return (
-    <BodyStyle>
-      <Row className="password-row">
-        <Col sm="12" md={mdOptions}>
-          <Card className="password-card">
-            <CardImg
-              className="card-img"
-              src="images/dark_general.png"
-              alt="Logo"
-              top
+    window.addEventListener("keydown", this.onKeyPress);
+    window.addEventListener("keyup", this.onKeyPress);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("keydown", this.onKeyPress);
+    window.removeEventListener("keyup", this.onKeyPress);
+  }
+
+  onCopyToClipboard = () =>
+    toastr.success(this.props.t("EmailAndPasswordCopiedToClipboard"));
+    
+  validatePassword = value => this.setState({ passwordValid: value });
+
+  render() {
+    const { settings, isConfirmLoaded, t } = this.props;
+    const { isLoading, password, passwordEmpty, errorText } = this.state;
+    const mdOptions = { size: 6, offset: 3 };
+
+    return !isConfirmLoaded ? (
+      <Loader className="pageLoader" type="rombs" size={40} />
+    ) : (
+      <BodyStyle>
+        <Row className="password-row">
+          <Col sm="12" md={mdOptions}>
+            <Card className="password-card">
+              <CardImg
+                className="card-img"
+                src="images/dark_general.png"
+                alt="Logo"
+                top
+              />
+              <CardTitle className="card-title">
+                {t("CustomWelcomePageTitle", { welcomePageTitle })}
+              </CardTitle>
+            </Card>
+          </Col>
+        </Row>
+
+        <Row className="login-row">
+          <Col sm="12" md={mdOptions}>
+            <Text.Body fontSize={14}>{t("PassworResetTitle")}</Text.Body>
+
+            <PasswordInput
+              id="password"
+              name="password"
+              inputName="password"
+              inputValue={password}
+              size="huge"
+              scale={true}
+              type="password"
+              isDisabled={isLoading}
+              hasError={passwordEmpty}
+              onCopyToClipboard={this.onCopyToClipboard}
+              onValidateInput={this.validatePassword}
+              generatorSpecial="!@#$%^&*"
+              tabIndex={1}
+              value={password}
+              onChange={this.onChange}
+              emailInputName="E-mail"
+              passwordSettings={settings}
+              tooltipPasswordTitle="Password must contain:"
+              tooltipPasswordLength={`${t("ErrorPasswordLength", {
+                fromNumber: 6,
+                toNumber: 30
+              })}:`}
+              placeholder={t("PasswordCustomMode")}
+              maxLength={30}
+              onKeyDown={this.onKeyPress}
+              isAutoFocussed={true}
+              inputWidth="490px"
             />
-            <CardTitle className="card-title">
-              {t("CustomWelcomePageTitle", { welcomePageTitle })}
-            </CardTitle>
-          </Card>
+          </Col>
+        </Row>
+        <Row className="password-row">
+          <Col sm="12" md={mdOptions}>
+            <Button
+              primary
+              size="big"
+              tabIndex={3}
+              label={
+                isLoading ? t("LoadingProcessing") : t("ImportContactsOkButton")
+              }
+              isDisabled={isLoading}
+              isLoading={isLoading}
+              onClick={this.onSubmit}
+            />
+          </Col>
+        </Row>
+        <Collapse isOpen={!!errorText}>
+          <Row className="login-row">
+            <Col sm="12" md={mdOptions}>
+              <div className="alert alert-danger">{errorText}</div>
+            </Col>
+          </Row>
+        </Collapse>
+      </BodyStyle>
+    );
+  }
+}
 
-          <Text.Body fontSize={14}>{t("PassworResetTitle")}</Text.Body>
-          <PasswordInput
-            id="password"
-            name="password"
-            size="huge"
-            scale={true}
-            type="password"
-            isDisabled={isLoading}
-            hasError={!passwordValid}
-            tabIndex={1}
-            value={password}
-            onChange={event => {
-              setPassword(event.target.value);
-              !passwordValid && setPasswordValid(true);
-              errorText && setErrorText("");
-              onKeyPress(event.target);
-            }}
-            emailInputName="E-mail"
-            passwordSettings={settings}
-            tooltipPasswordTitle="Password must contain:"
-            tooltipPasswordLength={tooltipPasswordLength}
-            placeholder={t("PasswordCustomMode")}
-            maxLength={30}
-
-            //isAutoFocussed={true}
-            //autocomple="current-password"
-            //onKeyDown={event => onKeyPress(event.target)}
-          />
-        </Col>
-      </Row>
-      <Row className="password-row">
-        <Col sm="12" md={mdOptions}>
-          <Button
-            primary
-            size="big"
-            tabIndex={3}
-            label={
-              isLoading ? t("LoadingProcessing") : t("ImportContactsOkButton")
-            }
-            isDisabled={isLoading}
-            isLoading={isLoading}
-            onClick={onSubmit}
-          />
-        </Col>
-      </Row>
-    </BodyStyle>
-  );
-};
-
-const ChangePasswordForm = props => {
-  return <PageLayout sectionBodyContent={<Form {...props} />} />;
-};
-
-ChangePasswordForm.propTypes = {
+Form.propTypes = {
   match: PropTypes.object.isRequired,
   location: PropTypes.object.isRequired,
   history: PropTypes.object.isRequired,
   changePassword: PropTypes.func.isRequired
 };
 
-ChangePasswordForm.defaultProps = {
+Form.defaultProps = {
   password: ""
 };
 
+const ChangePasswordForm = props => (
+  <PageLayout sectionBodyContent={<Form {...props} />} />
+);
+
+function mapStateToProps(state) {
+  return {
+    isValidConfirmLink: state.auth.isValidConfirmLink,
+    isConfirmLoaded: state.auth.isConfirmLoaded,
+    settings: state.auth.password
+  };
+}
+
 export default connect(
-  null,
+  mapStateToProps,
   { changePassword, getPasswordSettings }
 )(withRouter(withTranslation()(ChangePasswordForm)));