From 49d8889225efbd8871c3060b75e2212320336566 Mon Sep 17 00:00:00 2001
From: gopienkonikita <nikita.gopienko@onlyoffice.com>
Date: Fri, 29 Nov 2019 12:00:37 +0300
Subject: [PATCH] Web: Client: removed reactstrap from comfirm pages

---
 .../Confirm/sub-components/activateUser.js    |   8 +-
 .../Confirm/sub-components/changePassword.js  | 173 +++++++++---------
 .../Confirm/sub-components/createUser.js      |   8 +-
 3 files changed, 89 insertions(+), 100 deletions(-)

diff --git a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/activateUser.js b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/activateUser.js
index 4d9cf76e9b..7ecff10599 100644
--- a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/activateUser.js
+++ b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/activateUser.js
@@ -3,7 +3,6 @@ import { withRouter } from "react-router";
 import { withTranslation } from 'react-i18next';
 import { Button, TextInput, PageLayout, Text, PasswordInput, toastr, Loader } from 'asc-web-components';
 import styled from 'styled-components';
-import { Collapse } from 'reactstrap';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { store, constants } from 'asc-web-common';
@@ -298,10 +297,9 @@ class Confirm extends React.PureComponent {
 
             </Row>
  */}
-              <Collapse className='confirm-row'
-                isOpen={!!this.state.errorText}>
-                <div className="alert alert-danger">{this.state.errorText}</div>
-              </Collapse>
+              <Text.Body className="confirm-row" fontSize={14} color="#c30">
+                {this.state.errorText}
+              </Text.Body>
             </div>
           </ConfirmContainer>
         )
diff --git a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePassword.js b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePassword.js
index 325fdda331..730c2e6c99 100644
--- a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePassword.js
+++ b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePassword.js
@@ -4,7 +4,6 @@ import { withTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { Container, Row, Col, Card, CardTitle, CardImg } from "reactstrap";
 import {
   Button,
   PageLayout,
@@ -13,34 +12,32 @@ import {
   Loader,
   toastr
 } from "asc-web-components";
-import { store } from 'asc-web-common';
-const { changePassword,  getConfirmationInfo, logout } = store.auth.actions;
+import { store } from "asc-web-common";
+const { changePassword, getConfirmationInfo, logout } = store.auth.actions;
 
-const BodyStyle = styled(Container)`
-  margin-top: 70px;
-  p {
+const BodyStyle = styled.form`
+  margin: 70px auto 0 auto;
+  max-width: 500px;
+
+  .password-header {
+    margin-bottom: 24px;
+
+    .password-logo {
+      max-width: 216px;
+      max-height: 35px;
+    }
+
+    .password-title {
+      margin: 8px 0;
+    }
+  }
+
+  .password-text {
     margin-bottom: 5px;
   }
-  .button-style {
-    margin-top: 20px;
-  }
 
-  .password-row {
-    margin: 23px 0 0;
-    .password-card {
-      border: none;
-      .card-img {
-        max-width: 216px;
-        max-height: 35px;
-      }
-      .card-title {
-        word-wrap: break-word;
-        margin: 8px 0;
-        text-align: left;
-        font-size: 24px;
-        color: #116d9d;
-      }
-    }
+  .password-button {
+    margin-top: 20px;
   }
 `;
 
@@ -106,8 +103,7 @@ class Form extends React.PureComponent {
 
   componentDidMount() {
     const { getConfirmationInfo, history } = this.props;
-    getConfirmationInfo(this.state.key)
-    .catch(error => {
+    getConfirmationInfo(this.state.key).catch(error => {
       toastr.error(this.props.t(`${error}`));
       history.push("/");
     });
@@ -126,69 +122,65 @@ class Form extends React.PureComponent {
   render() {
     const { settings, isConfirmLoaded, t, greetingTitle } = this.props;
     const { isLoading, password, passwordEmpty } = 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">
-                {greetingTitle}
-              </CardTitle>
-            </Card>
-            <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}
-              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"
-            />
-            <Button
-              className="button-style"
-              primary
-              size="big"
-              tabIndex={2}
-              label={
-                isLoading ? t("LoadingProcessing") : t("ImportContactsOkButton")
-              }
-              isDisabled={isLoading}
-              isLoading={isLoading}
-              onClick={this.onSubmit}
-            />
-          </Col>
-        </Row>
+        <div className="password-header">
+          <img
+            className="password-logo"
+            src="images/dark_general.png"
+            alt="Logo"
+          />
+          <Text.Headline className="password-title" color="#116d9d">
+            {greetingTitle}
+          </Text.Headline>
+        </div>
+        <Text.Body className="password-text" 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}
+          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"
+        />
+        <Button
+          id="button"
+          className="password-button"
+          primary
+          size="big"
+          tabIndex={2}
+          label={
+            isLoading ? t("LoadingProcessing") : t("ImportContactsOkButton")
+          }
+          isDisabled={isLoading}
+          isLoading={isLoading}
+          onClick={this.onSubmit}
+        />
       </BodyStyle>
     );
   }
@@ -215,11 +207,12 @@ function mapStateToProps(state) {
     isConfirmLoaded: state.auth.isConfirmLoaded,
     settings: state.auth.settings.passwordSettings,
     isAuthenticated: state.auth.isAuthenticated,
-    greetingTitle: state.auth.settings.greetingSettings,
+    greetingTitle: state.auth.settings.greetingSettings
   };
 }
 
-export default connect(
-  mapStateToProps,
-  { changePassword, getConfirmationInfo, logout }
-)(withRouter(withTranslation()(ChangePasswordForm)));
+export default connect(mapStateToProps, {
+  changePassword,
+  getConfirmationInfo,
+  logout
+})(withRouter(withTranslation()(ChangePasswordForm)));
diff --git a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/createUser.js b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/createUser.js
index 5ef6fa84bf..8691a5875a 100644
--- a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/createUser.js
+++ b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/createUser.js
@@ -3,7 +3,6 @@ import { withRouter } from "react-router";
 import { withTranslation } from 'react-i18next';
 import { Button, TextInput, PageLayout, Text, PasswordInput, toastr, Loader } from 'asc-web-components';
 import styled from 'styled-components';
-import { Collapse } from 'reactstrap';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { store } from 'asc-web-common';
@@ -318,10 +317,9 @@ class Confirm extends React.PureComponent {
 
             </Row>
  */}
-                            <Collapse className='confirm-row'
-                                isOpen={!!this.state.errorText}>
-                                <div className="alert alert-danger">{this.state.errorText}</div>
-                            </Collapse>
+                            <Text.Body className='confirm-row' fontSize={14} color="#c30">
+                                {this.state.errorText}
+                            </Text.Body>
                         </div>
                     </ConfirmContainer>
                 )