Merge pull request #145 from ONLYOFFICE/bugfix/login-fix

Bugfix/login fix

products/ASC.Files/Client/public/index.html

@@ -239,16 +239,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script>
-      if (localStorage.getItem("asc_auth_key")){
-        let el = document.getElementById("burger-loader-svg");
-        let el1 = document.getElementById("logo-loader-svg");
-        let el2 = document.getElementById("avatar-loader-svg");
-
-        el.style.display = "block";
-        el1.style.display = "block";
-        el2.style.display = "block";
-      }
-    </script>
   </body>
 </html>

products/ASC.Files/Client/src/App.js

@@ -10,7 +10,6 @@ import config from "../package.json";
 
 import {
   store as commonStore,
-  constants,
   history,
   PrivateRoute,
   PublicRoute,
@@ -32,8 +31,8 @@ const {
   setCurrentProductId,
   setCurrentProductHomePage,
   getPortalCultures,
+  getIsAuthenticated,
 } = commonStore.auth.actions;
-const { AUTH_KEY } = constants;
 
 class App extends React.Component {
   constructor(props) {
@@ -43,8 +42,6 @@ class App extends React.Component {
   }
 
   componentDidMount() {
-    utils.removeTempContent();
-
     const {
       setModuleInfo,
       getUser,
@@ -53,14 +50,16 @@ class App extends React.Component {
       getPortalCultures,
       fetchTreeFolders,
       setIsLoaded,
+      getIsAuthenticated,
     } = this.props;
 
     setModuleInfo();
-
+    getIsAuthenticated().then((isAuthenticated) => {
-    const token = localStorage.getItem(AUTH_KEY);
+      if (!isAuthenticated) {
-
+        utils.updateTempContent();
-    if (!token) {
         return setIsLoaded();
+      } else {
+        utils.updateTempContent(isAuthenticated);
       }
 
       const requests = this.isEditor
@@ -78,8 +77,10 @@ class App extends React.Component {
           toastr.error(e);
         })
         .finally(() => {
+          utils.updateTempContent();
           setIsLoaded();
         });
+    });
   }
 
   render() {
@@ -140,6 +141,7 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
   return {
+    getIsAuthenticated: () => getIsAuthenticated(dispatch),
     setModuleInfo: () => {
       dispatch(setCurrentProductHomePage(config.homepage));
       dispatch(setCurrentProductId("e67be73d-f9ae-4ce1-8fec-1880cb518cb4"));

products/ASC.Files/Client/src/components/Article/Body/index.js

@@ -107,7 +107,7 @@ class ArticleBodyContent extends React.Component {
     const { showNewFilesPanel, expandedKeys, newFolderId } = this.state;
 
     //console.log("Article Body render", this.props, this.state.expandedKeys);
-    console.log("Article Body render");
+    //console.log("Article Body render");
     return (
       <>
         {showNewFilesPanel && (

products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js

@@ -1496,7 +1496,7 @@ class SectionBodyContent extends React.Component {
   };
 
   render() {
-    console.log("Files Home SectionBodyContent render", this.props);
+    //console.log("Files Home SectionBodyContent render", this.props);
 
     const {
       viewer,

products/ASC.Files/Client/src/components/pages/Home/Section/Filter/index.js

@@ -295,7 +295,7 @@ class SectionFilterContent extends React.Component {
   }
 
   render() {
-    console.log("Filter render");
+    //console.log("Filter render");
     const selectedFilterData = this.getSelectedFilterData();
     const { t, language, firstLoad, sectionWidth } = this.props;
     const filterColumnCount =

products/ASC.Files/Client/src/components/pages/Home/index.js

@@ -128,7 +128,7 @@ class PureHome extends React.Component {
 
         if (filter) {
           const folderId = filter.folder;
-          console.log("filter", filter);
+          //console.log("filter", filter);
           return fetchFiles(folderId, filter);
         }
 
@@ -165,7 +165,7 @@ class PureHome extends React.Component {
   }
 
   render() {
-    console.log("Home render");
+    //console.log("Home render");
     const {
       progressData,
       viewAs,

products/ASC.Files/Client/src/index.js

@@ -9,10 +9,7 @@ import "./custom.scss";
 import App from "./App";
 
 import * as serviceWorker from "./serviceWorker";
-import { ErrorBoundary, utils } from "asc-web-common";
+import { ErrorBoundary } from "asc-web-common";
-const { redirectToDefaultPage } = utils;
-
-redirectToDefaultPage();
 
 ReactDOM.render(
   <Provider store={store}>

products/ASC.People/Client/public/index.html

@@ -239,16 +239,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script>
-      if (localStorage.getItem("asc_auth_key")){
-        let el = document.getElementById("burger-loader-svg");
-        let el1 = document.getElementById("logo-loader-svg");
-        let el2 = document.getElementById("avatar-loader-svg");
-
-        el.style.display = "block";
-        el1.style.display = "block";
-        el2.style.display = "block";
-      }
-    </script>
   </body>
 </html>

products/ASC.People/Client/src/App.js

@@ -16,7 +16,6 @@ import {
   Offline,
   utils,
   store as commonStore,
-  constants,
   NavMenu,
   Main,
   toastr,
@@ -34,8 +33,8 @@ const {
   setCurrentProductHomePage,
   getPortalPasswordSettings,
   getPortalCultures,
+  getIsAuthenticated,
 } = commonStore.auth.actions;
-const { AUTH_KEY } = constants;
 
 /*const Profile = lazy(() => import("./components/pages/Profile"));
 const ProfileAction = lazy(() => import("./components/pages/ProfileAction"));
@@ -43,8 +42,6 @@ const GroupAction = lazy(() => import("./components/pages/GroupAction"));*/
 
 class App extends React.Component {
   componentDidMount() {
-    utils.removeTempContent();
-
     const {
       setModuleInfo,
       getUser,
@@ -55,14 +52,16 @@ class App extends React.Component {
       fetchGroups,
       fetchPeople,
       setIsLoaded,
+      getIsAuthenticated,
     } = this.props;
 
     setModuleInfo();
-
+    getIsAuthenticated().then((isAuthenticated) => {
-    const token = localStorage.getItem(AUTH_KEY);
+      if (!isAuthenticated) {
-
+        utils.updateTempContent();
-    if (!token) {
         return setIsLoaded();
+      } else {
+        utils.updateTempContent(isAuthenticated);
       }
 
       const requests = [
@@ -80,8 +79,10 @@ class App extends React.Component {
           toastr.error(e);
         })
         .finally(() => {
+          utils.updateTempContent();
           setIsLoaded();
         });
+    });
   }
 
   render() {
@@ -156,6 +157,7 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
   return {
+    getIsAuthenticated: () => getIsAuthenticated(dispatch),
     setModuleInfo: () => {
       dispatch(setCurrentProductHomePage(config.homepage));
       dispatch(setCurrentProductId("f4d98afd-d336-4332-8778-3c6945c81ea0"));

products/ASC.People/Client/src/index.js

@@ -7,10 +7,7 @@ import "./custom.scss";
 import App from "./App";
 
 import * as serviceWorker from "./serviceWorker";
-import { ErrorBoundary, utils } from "asc-web-common";
+import { ErrorBoundary } from "asc-web-common";
-const { redirectToDefaultPage } = utils;
-
-redirectToDefaultPage();
 
 ReactDOM.render(
   <Provider store={store}>

web/ASC.Web.Client/public/index.html

@@ -212,16 +212,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script>
-      if (localStorage.getItem("asc_auth_key")){
-        let el = document.getElementById("burger-loader-svg");
-        let el1 = document.getElementById("logo-loader-svg");
-        let el2 = document.getElementById("avatar-loader-svg");
-
-        el.style.display = "block";
-        el1.style.display = "block";
-        el2.style.display = "block";
-      }
-    </script>
   </body>
 </html>

web/ASC.Web.Client/src/App.js

@@ -3,7 +3,6 @@ import { Router, Route, Switch } from "react-router-dom";
 import { connect } from "react-redux";
 import {
   store as CommonStore,
-  constants,
   history,
   PrivateRoute,
   PublicRoute,
@@ -28,23 +27,28 @@ const {
   getUser,
   getPortalSettings,
   getModules,
+  getIsAuthenticated,
 } = CommonStore.auth.actions;
 
 class App extends React.Component {
   componentDidMount() {
-    utils.removeTempContent();
+    const {
-
+      getPortalSettings,
-    const { getPortalSettings, getUser, getModules, setIsLoaded } = this.props;
+      getUser,
-
+      getModules,
-    const { AUTH_KEY } = constants;
+      setIsLoaded,
-
+      getIsAuthenticated,
-    const token = localStorage.getItem(AUTH_KEY);
+    } = this.props;
 
+    getIsAuthenticated()
+      .then((isAuthenticated) => {
+        if (isAuthenticated) utils.updateTempContent(isAuthenticated);
         const requests = [];
-
+        if (!isAuthenticated) {
-    if (!token) {
           requests.push(getPortalSettings());
-    } else if (!window.location.pathname.includes("confirm/EmailActivation")) {
+        } else if (
+          !window.location.pathname.includes("confirm/EmailActivation")
+        ) {
           requests.push(getUser());
           requests.push(getPortalSettings());
           requests.push(getModules());
@@ -55,8 +59,11 @@ class App extends React.Component {
             toastr.error(e);
           })
           .finally(() => {
+            utils.updateTempContent();
             setIsLoaded();
           });
+      })
+      .catch((err) => toastr.error(err));
   }
 
   render() {
@@ -113,6 +120,7 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
   return {
+    getIsAuthenticated: () => getIsAuthenticated(dispatch),
     getPortalSettings: () => getPortalSettings(dispatch),
     getUser: () => getUser(dispatch),
     getModules: () => getModules(dispatch),

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

@@ -2,9 +2,12 @@ import React, { Suspense, lazy, useEffect } from "react";
 import { Route, Switch } from "react-router-dom";
 import ConfirmRoute from "../../../helpers/confirmRoute";
 import { I18nextProvider } from "react-i18next";
-import { Error404, utils } from "asc-web-common";
+import { Error404, utils, store, PageLayout, Loaders } from "asc-web-common";
-
 import { createI18N } from "../../../helpers/i18n";
+import { connect } from "react-redux";
+
+const { getIsLoaded } = store.auth.selectors;
+
 const i18n = createI18N({
   page: "Confirm",
   localesPath: "pages/Confirm",
@@ -23,13 +26,19 @@ const ChangePhoneForm = lazy(() => import("./sub-components/changePhone"));
 const ProfileRemoveForm = lazy(() => import("./sub-components/profileRemove"));
 const ChangeOwnerForm = lazy(() => import("./sub-components/changeOwner"));
 
-const Confirm = ({ match }) => {
+const Confirm = ({ match, isLoaded }) => {
   useEffect(() => {
     changeLanguage(i18n);
   }, []);
 
   //console.log("Confirm render");
   return (
+    !isLoaded ? <PageLayout>
+    <PageLayout.SectionBody>
+      <Loaders.Rectangle height="90vh"/>
+    </PageLayout.SectionBody>
+  </PageLayout> :
+
     <I18nextProvider i18n={i18n}>
       <Suspense fallback={null}>
         <Switch>
@@ -80,4 +89,10 @@ const Confirm = ({ match }) => {
   );
 };
 
-export default Confirm;
+function mapStateToProps(state) {
+  return {
+    isLoaded: getIsLoaded(state)
+  };
+}
+
+export default connect(mapStateToProps)(Confirm);

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

@@ -5,13 +5,14 @@ import { Loader } from "asc-web-components";
 import { PageLayout } from "asc-web-common";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
-import { store } from "asc-web-common";
+import { store, utils as commonUtils } from "asc-web-common";
 import { changeEmail } from "../../../../store/confirm/actions";
 const { logout } = store.auth.actions;
+const { tryRedirectTo } = commonUtils;
 
 class ActivateEmail extends React.PureComponent {
   componentDidMount() {
-    const { history, logout, changeEmail, linkData } = this.props;
+    const { logout, changeEmail, linkData } = this.props;
     const [email, uid, key] = [
       linkData.email,
       linkData.uid,
@@ -20,11 +21,11 @@ class ActivateEmail extends React.PureComponent {
     logout();
     changeEmail(uid, email, key)
       .then((res) => {
-        history.push(`/login/confirmed-email=${email}`);
+        tryRedirectTo(`/login/confirmed-email=${email}`);
       })
       .catch((e) => {
         // console.log('activate email error', e);
-        history.push(`/login/error=${e}`);
+        tryRedirectTo(`/login/error=${e}`);
       });
   }
 

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

@@ -19,7 +19,7 @@ import {
   activateConfirmUser,
 } from "../../../../store/confirm/actions";
 const { EmployeeActivationStatus } = constants;
-const { createPasswordHash } = commonUtils;
+const { createPasswordHash, tryRedirectTo } = commonUtils;
 const inputWidth = "400px";
 
 const ConfirmContainer = styled.div`
@@ -82,7 +82,7 @@ class Confirm extends React.PureComponent {
 
   onSubmit = (e) => {
     this.setState({ isLoading: true }, function () {
-      const { activateConfirmUser, history, hashSettings } = this.props;
+      const { activateConfirmUser, hashSettings, defaultPage } = this.props;
 
       this.setState({ errorText: "" });
 
@@ -131,7 +131,7 @@ class Confirm extends React.PureComponent {
         this.state.userId,
         EmployeeActivationStatus.Activated
       )
-        .then(() => history.push("/"))
+        .then(() => tryRedirectTo(defaultPage))
         .catch((error) => {
           console.error("activate error", error);
           this.setState({
@@ -344,6 +344,7 @@ function mapStateToProps(state) {
     settings: state.auth.settings.passwordSettings,
     greetingTitle: state.auth.settings.greetingSettings,
     hashSettings: state.auth.settings.hashSettings,
+    defaultPage: state.auth.settings.defaultPage,
   };
 }
 

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

@@ -2,10 +2,11 @@ import React from "react";
 import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import { Loader } from "asc-web-components";
-import { PageLayout } from "asc-web-common";
+import { PageLayout, utils as commonUtils } from "asc-web-common";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import { changeEmail } from "../../../../store/confirm/actions";
+const { tryRedirectTo } = commonUtils;
 
 class ChangeEmail extends React.PureComponent {
   componentDidMount() {
@@ -15,29 +16,33 @@ class ChangeEmail extends React.PureComponent {
       changeEmail(userId, email, key)
         .then((res) => {
           console.log("change client email success", res);
-          window.location.href = `${window.location.origin}/products/people/view/@self?email_change=success`;
+          tryRedirectTo(
+            `${window.location.origin}/products/people/view/@self?email_change=success`
+          );
         })
         .catch((e) => {
           console.log("change client email error", e);
-          window.location.href = `${window.location.origin}/error=${e}`;
+          tryRedirectTo(`${window.location.origin}/error=${e}`);
         });
     }
   }
 
   componentDidUpdate() {
-    const { changeEmail, userId, isLoaded, linkData } = this.props;
+    const { changeEmail, userId, isLoaded, linkData, defaultPage } = this.props;
     if (isLoaded) {
       const [email, key] = [linkData.email, linkData.confirmHeader];
       changeEmail(userId, email, key)
         .then((res) => {
           console.log("change client email success", res);
-          window.location.href = `${window.location.origin}/products/people/view/@self?email_change=success`;
+          tryRedirectTo(
+            `${window.location.origin}/products/people/view/@self?email_change=success`
+          );
         })
         .catch((e) => {
           console.log("change client email error", e);
         });
     } else {
-      window.location.href = "/";
+      tryRedirectTo(defaultPage);
     }
   }
 
@@ -63,6 +68,7 @@ function mapStateToProps(state) {
   return {
     isLoaded: state.auth.isLoaded,
     userId: state.auth.user.id,
+    defaultPage: state.auth.settings.defaultPage,
   };
 }
 

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

@@ -4,7 +4,8 @@ import { withTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import styled from "styled-components";
 import { Button, Text, toastr } from "asc-web-components";
-import { PageLayout } from "asc-web-common";
+import { PageLayout, utils as commonUtils } from "asc-web-common";
+const { tryRedirectTo } = commonUtils;
 
 const BodyStyle = styled.div`
   margin-top: 70px;
@@ -58,11 +59,11 @@ class Form extends React.PureComponent {
   };
 
   onRedirect = () => {
-    this.props.history.push("/");
+    tryRedirectTo(this.props.defaultPage);
   };
 
   onCancelClick = () => {
-    this.props.history.push("/");
+    tryRedirectTo(this.props.defaultPage);
   };
 
   render() {
@@ -126,7 +127,10 @@ const ChangePasswordForm = (props) => (
 );
 
 function mapStateToProps(state) {
-  return { greetingTitle: state.auth.settings.greetingSettings };
+  return {
+    greetingTitle: state.auth.settings.greetingSettings,
+    defaultPage: state.auth.settings.defaultPage,
+  };
 }
 
 export default connect(

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

@@ -19,7 +19,7 @@ import {
   changePassword,
 } from "../../../../store/confirm/actions";
 
-const { createPasswordHash } = commonUtils;
+const { createPasswordHash, tryRedirectTo } = commonUtils;
 const { logout } = store.auth.actions;
 
 const BodyStyle = styled.form`
@@ -80,7 +80,7 @@ class Form extends React.PureComponent {
   onSubmit = (e) => {
     this.setState({ isLoading: true }, function () {
       const { userId, password, key } = this.state;
-      const { history, changePassword, hashSettings } = this.props;
+      const { changePassword, hashSettings, defaultPage } = this.props;
       let hasError = false;
 
       if (!this.state.passwordValid) {
@@ -99,8 +99,8 @@ class Form extends React.PureComponent {
       changePassword(userId, hash, key)
         .then(() => this.props.logout())
         .then(() => {
-          history.push("/");
           toastr.success(this.props.t("ChangePasswordSuccess"));
+          tryRedirectTo(defaultPage);
         })
         .catch((error) => {
           toastr.error(this.props.t(`${error}`));
@@ -110,10 +110,10 @@ class Form extends React.PureComponent {
   };
 
   componentDidMount() {
-    const { getConfirmationInfo, history } = this.props;
+    const { getConfirmationInfo, defaultPage } = this.props;
     getConfirmationInfo(this.state.key).catch((error) => {
       toastr.error(this.props.t(`${error}`));
-      history.push("/");
+      tryRedirectTo(defaultPage);
     });
 
     window.addEventListener("keydown", this.onKeyPress);
@@ -221,6 +221,7 @@ function mapStateToProps(state) {
     isAuthenticated: state.auth.isAuthenticated,
     greetingTitle: state.auth.settings.greetingSettings,
     hashSettings: state.auth.settings.hashSettings,
+    defaultPage: state.auth.settings.defaultPage,
   };
 }
 

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

@@ -50,7 +50,7 @@ const PhoneForm = (props) => {
   const buttonTranslation = `Enter number`;
 
   const onSubmit = () => {
-    console.log("onSubmit CHANGE");
+    console.log("onSubmit CHANGE"); //TODO: Why do nothing?
   };
 
   const onKeyPress = (target) => {

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

@@ -19,7 +19,7 @@ import {
   createConfirmUser,
 } from "../../../../store/confirm/actions";
 const { logout, login } = store.auth.actions;
-const { createPasswordHash } = commonUtils;
+const { createPasswordHash, tryRedirectTo } = commonUtils;
 const inputWidth = "400px";
 
 const ConfirmContainer = styled.div`
@@ -89,7 +89,7 @@ class Confirm extends React.PureComponent {
 
   onSubmit = () => {
     this.setState({ isLoading: true }, () => {
-      const { history, createConfirmUser, linkData, hashSettings } = this.props;
+      const { defaultPage, createConfirmUser, linkData, hashSettings } = this.props;
       const isVisitor = parseInt(linkData.emplType) === 2;
 
       this.setState({ errorText: "" });
@@ -142,7 +142,7 @@ class Confirm extends React.PureComponent {
       createConfirmUser(registerData, loginData, this.state.key)
         .then(() => {
           toastr.success("User has been created successfully");
-          return history.push("/");
+          tryRedirectTo(defaultPage);
         })
         .catch((error) => {
           console.error("confirm error", error);
@@ -368,6 +368,7 @@ function mapStateToProps(state) {
     settings: state.auth.settings.passwordSettings,
     greetingTitle: state.auth.settings.greetingSettings,
     hashSettings: state.auth.settings.hashSettings,
+    defaultPage: state.auth.settings.defaultPage
   };
 }
 
@@ -375,5 +376,5 @@ export default connect(mapStateToProps, {
   getConfirmationInfo,
   createConfirmUser,
   login,
-  logout,
+  logout
 })(withRouter(withTranslation()(CreateUserForm)));

web/ASC.Web.Client/src/helpers/confirmRoute.js

@@ -4,9 +4,9 @@ import { ValidationResult } from "./../helpers/constants";
 import { Loader } from "asc-web-components";
 import { connect } from "react-redux";
 import { withRouter } from "react-router";
-import { api, constants, utils, PageLayout } from "asc-web-common";
+import { api, utils, PageLayout, store } from "asc-web-common";
+const { isAuthenticated } = store.auth.selectors;
 const { checkConfirmLink } = api.user;
-const { AUTH_KEY } = constants;
 const { getObjectByLocation } = utils;
 
 class ConfirmRoute extends React.Component {
@@ -19,14 +19,14 @@ class ConfirmRoute extends React.Component {
   }
 
   componentDidMount() {
-    const { forUnauthorized, history } = this.props;
+    const { forUnauthorized, history, isAuthenticated } = this.props;
 
-    if (forUnauthorized && localStorage.getItem(AUTH_KEY))
+    if (forUnauthorized && isAuthenticated)
       return history.push(
         `/error=Access error. You should be unauthorized for performing this action`
       );
 
-    const { location, isAuthenticated } = this.props;
+    const { location } = this.props;
     const { search } = location;
 
     const queryParams = getObjectByLocation(location);
@@ -100,7 +100,7 @@ class ConfirmRoute extends React.Component {
 
 function mapStateToProps(state) {
   return {
-    isAuthenticated: state.auth.isAuthenticated,
+    isAuthenticated: isAuthenticated(state)
   };
 }
 

web/ASC.Web.Client/src/index.js

@@ -5,10 +5,7 @@ import store from "./store/store";
 import "./custom.scss";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
-import { ErrorBoundary, utils } from "asc-web-common";
+import { ErrorBoundary } from "asc-web-common";
-const { redirectToDefaultPage } = utils;
-
-redirectToDefaultPage();
 
 ReactDOM.render(
   <Provider store={store}>

web/ASC.Web.Client/src/store/confirm/actions.js

@@ -30,9 +30,27 @@ export function createConfirmUser(registerData, loginData, key) {
   return (dispatch) => {
     return api.people
       .createUser(data, key)
-      .then((user) => dispatch(setCurrentUser(user)))
+      .then((user) => {
-      .then(() => api.user.login(loginData.userName, loginData.passwordHash))
+        dispatch(setCurrentUser(user));
-      .then(() => loadInitInfo(dispatch));
+      })
+      .then(() => {
+        const promise = new Promise((resolve, reject) => {
+          setTimeout(() => {
+            login(
+              loginData.userName,
+              loginData.passwordHash
+            )(dispatch)
+              .then(() => {
+                resolve(loadInitInfo(dispatch));
+              })
+              .catch((e) => {
+                reject(e);
+              });
+          }, 1000);
+        });
+
+        return promise;
+      });
   };
 }
 
@@ -56,7 +74,22 @@ export function activateConfirmUser(
         return api.people.updateActivationStatus(activationStatus, userId, key);
       })
       .then((data) => {
-        return dispatch(login(loginData.userName, loginData.passwordHash));
+        const promise = new Promise((resolve, reject) => {
+          setTimeout(() => {
+            login(
+              data.userName,
+              data.passwordHash
+            )(dispatch)
+              .then(() => {
+                resolve(loadInitInfo(dispatch));
+              })
+              .catch((e) => {
+                reject(e);
+              });
+          }, 1000);
+        });
+
+        return promise;
       })
       .then((data) => {
         return api.people.updateUser(changedData);

web/ASC.Web.Common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asc-web-common",
-  "version": "1.0.282",
+  "version": "1.0.285",
   "description": "Ascensio System SIA common components and solutions library",
   "license": "AGPL-3.0",
   "files": [

web/ASC.Web.Common/src/api/client.js

@@ -1,5 +1,4 @@
 import axios from "axios";
-import { AUTH_KEY } from "../constants";
 //import history from "../history";
 
 const PREFIX = "api";
@@ -16,8 +15,6 @@ const client = axios.create({
   timeout: 30000, // default is `0` (no timeout)
 });
 
-setAuthorizationToken(localStorage.getItem(AUTH_KEY));
-
 client.interceptors.response.use(
   (response) => {
     return response;
@@ -25,7 +22,7 @@ client.interceptors.response.use(
   (error) => {
     switch (true) {
       case error.response.status === 401:
-        setAuthorizationToken();
+        setWithCredentialsStatus(false);
         window.location.href = "/login";
         break;
       case error.response.status === 402:
@@ -41,13 +38,8 @@ client.interceptors.response.use(
   }
 );
 
-export function setAuthorizationToken(token) {
+export function setWithCredentialsStatus(state) {
-  client.defaults.withCredentials = true;
+  client.defaults.withCredentials = state;
-  if (token) {
-    localStorage.setItem(AUTH_KEY, true);
-  } else {
-    localStorage.clear();
-  }
 }
 
 export function setClientBasePath(path) {

web/ASC.Web.Common/src/api/user/index.js

@@ -1,4 +1,4 @@
-import { request, setAuthorizationToken } from "../client";
+import { request, setWithCredentialsStatus } from "../client";
 
 export function login(userName, passwordHash) {
   const data = {
@@ -10,9 +10,6 @@ export function login(userName, passwordHash) {
     method: "post",
     url: "/authentication.json",
     data,
-  }).then((tokenData) => {
-    setAuthorizationToken(true);
-    return Promise.resolve(tokenData);
   });
 }
 
@@ -20,9 +17,6 @@ export function logout() {
   return request({
     method: "post",
     url: "/authentication/logout",
-  }).then(() => {
-    setAuthorizationToken();
-    return Promise.resolve();
   });
 }
 
@@ -33,3 +27,14 @@ export function checkConfirmLink(data) {
     data,
   });
 }
+
+export function checkIsAuthenticated() {
+  return request({
+    method: "get",
+    url: "/authentication",
+    withCredentials: true,
+  }).then((state) => {
+    setWithCredentialsStatus(state);
+    return state;
+  });
+}

web/ASC.Web.Common/src/components/NavMenu/index.js

@@ -104,7 +104,7 @@ class NavMenu extends React.Component {
 
     const isAsideAvailable = !!asideContent;
 
-    console.log("NavMenu render", this.state, this.props);
+    //console.log("NavMenu render", this.state, this.props);
 
     return (
       <StyledContainer>

web/ASC.Web.Common/src/components/PageLayout/index.js

@@ -81,6 +81,9 @@ class PageLayoutComponent extends React.Component {
       isArticleVisible: isArticleVisibleAndPinned,
       isArticlePinned: isArticleVisibleAndPinned,
     };
+
+    this.timeoutHandler = null;
+    this.intervalHandler = null;
   }
 
   componentDidUpdate(prevProps) {
@@ -103,6 +106,11 @@ class PageLayoutComponent extends React.Component {
       "orientationchange",
       this.orientationChangeHandler
     );
+
+    if(this.intervalHandler)
+        clearInterval(this.intervalHandler);
+      if(this.timeoutHandler)
+        clearTimeout(this.timeoutHandler);
   }
 
   orientationChangeHandler = () => {
@@ -123,20 +131,22 @@ class PageLayoutComponent extends React.Component {
     const intervalTime = 100;
     const endTimeoutTime = 1000;
 
-    let interval, timeout, lastInnerHeight, noChangeCount;
+    let lastInnerHeight, noChangeCount;
 
     const updateHeight = () => {
-      clearInterval(interval);
+      if(this.intervalHandler)
-      clearTimeout(timeout);
+        clearInterval(this.intervalHandler);
+      if(this.timeoutHandler)
+        clearTimeout(this.timeoutHandler);
 
-      interval = null;
+        this.intervalHandler = null;
-      timeout = null;
+        this.timeoutHandler = null;
 
       const vh = (window.innerHeight - 57) * 0.01;
       document.documentElement.style.setProperty("--vh", `${vh}px`);
     };
 
-    interval = setInterval(() => {
+    this.intervalHandler = setInterval(() => {
       if (window.innerHeight === lastInnerHeight) {
         noChangeCount++;
 
@@ -149,7 +159,7 @@ class PageLayoutComponent extends React.Component {
       }
     });
 
-    timeout = setTimeout(() => {
+    this.timeoutHandler = setTimeout(() => {
       updateHeight();
     }, endTimeoutTime);
   };

web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js

@@ -86,6 +86,11 @@ class SectionBody extends React.Component {
     this.focusRef.current.focus();
   }
 
+  componentWillUnmount() {
+    this.focusRef = null;
+    this.scrollRef = null;
+  }
+
   render() {
     //console.log("PageLayout SectionBody render");
     const {

web/ASC.Web.Common/src/components/PrivateRoute/PrivateRoute.js

@@ -3,16 +3,17 @@ import React from "react";
 import { Redirect, Route } from "react-router-dom";
 import { connect } from "react-redux";
 //import { Loader } from "asc-web-components";
-//import PageLayout from "../PageLayout";
+import PageLayout from "../PageLayout";
-import { getCurrentUser, isAdmin, isMe } from "../../store/auth/selectors.js";
+import { getCurrentUser, getIsLoaded, isAdmin, isAuthenticated, isMe } from "../../store/auth/selectors.js";
-import { AUTH_KEY } from "../../constants";
 import { Error401, Error404 } from "../../pages/errors";
-import isEmpty from "lodash/isEmpty";
+import RectangleLoader from "../Loaders/RectangleLoader/RectangleLoader";
+//import isEmpty from "lodash/isEmpty";
 
 const PrivateRoute = ({ component: Component, ...rest }) => {
   const {
     isAdmin,
     isAuthenticated,
+    isLoaded,
     restricted,
     allowForMe,
     user,
@@ -21,7 +22,7 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
   const { userId } = computedMatch.params;
 
   const renderComponent = (props) => {
-    if (!isAuthenticated) {
+    if (isLoaded && !isAuthenticated) {
       console.log("PrivateRoute render Redirect to login", rest);
       return (
         <Redirect
@@ -33,11 +34,21 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
       );
     }
 
-    const userLoaded = !isEmpty(user);
+    if(!isLoaded) {
-    if (!userLoaded) {
+      return (
-      return <Component {...props} />;
+            <PageLayout>
+              <PageLayout.SectionBody>
+                <RectangleLoader  height="90vh"/>
+              </PageLayout.SectionBody>
+            </PageLayout>
+          );
     }
 
+    // const userLoaded = !isEmpty(user);
+    // if (!userLoaded) {
+    //   return <Component {...props} />;
+    // }
+
     // if (!userLoaded) {
     //   console.log("PrivateRoute render Loader", rest);
     //   return (
@@ -76,14 +87,11 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
 };
 
 function mapStateToProps(state) {
-  const { isLoaded, isAuthenticated } = state.auth;
   return {
     isAdmin: isAdmin(state),
     user: getCurrentUser(state),
-    isAuthenticated: !(
+    isAuthenticated: isAuthenticated(state),
-      !localStorage.getItem(AUTH_KEY) ||
+    isLoaded: getIsLoaded(state)
-      (isLoaded && !isAuthenticated)
-    ),
   };
 }
 

web/ASC.Web.Common/src/components/PublicRoute/PublicRoute.js

@@ -1,16 +1,26 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 import { Redirect, Route } from "react-router-dom";
-import { AUTH_KEY } from "../../constants";
 import { connect } from "react-redux";
+import { getIsLoaded, isAuthenticated } from "../../store/auth/selectors";
+import PageLayout from "../PageLayout";
+import RectangleLoader from "../Loaders/RectangleLoader/RectangleLoader";
 
 export const PublicRoute = ({ component: Component, ...rest }) => {
-  const token = localStorage.getItem(AUTH_KEY);
+  const { wizardToken, wizardCompleted, isAuthenticated, isLoaded } = rest;
-
-  const { wizardToken, wizardCompleted } = rest;
 
   const renderComponent = (props) => {
-    if (token) {
+    if(!isLoaded) {
+      return (
+        <PageLayout>
+          <PageLayout.SectionBody>
+            <RectangleLoader  height="90vh"/>
+          </PageLayout.SectionBody>
+        </PageLayout>
+      );
+    }
+
+    if (isAuthenticated) {
       return (
         <Redirect
           to={{
@@ -38,9 +48,14 @@ export const PublicRoute = ({ component: Component, ...rest }) => {
 };
 
 function mapStateToProps(state) {
+  const { settings } = state.auth;
+  const {wizardToken, wizardCompleted} = settings;
   return {
-    wizardToken: state.auth.settings.wizardToken,
+    isAuthenticated: isAuthenticated(state),
-    wizardCompleted: state.auth.settings.wizardCompleted,
+    isLoaded: getIsLoaded(state),
+
+    wizardToken,
+    wizardCompleted,
   };
 }
 

web/ASC.Web.Common/src/constants/index.js

@@ -1,4 +1,3 @@
-export const AUTH_KEY = "asc_auth_key";
 export const LANGUAGE = "language";
 export const ARTICLE_PINNED_KEY = "asc_article_pinned_key";
 

web/ASC.Web.Common/src/pages/login/index.js

@@ -10,9 +10,8 @@ import {
   Link,
   toastr,
   Checkbox,
-  HelpButton,
   PasswordInput,
-  FieldContainer,
+  FieldContainer
 } from "asc-web-components";
 import PageLayout from "../../components/PageLayout";
 import { connect } from "react-redux";
@@ -23,12 +22,11 @@ import ForgotPasswordModalDialog from "./sub-components/forgot-password-modal-di
 import {
   login,
   setIsLoaded,
-  reloadPortalSettings,
+  reloadPortalSettings
 } from "../../store/auth/actions";
 import { sendInstructionsToChangePassword } from "../../api/people";
 import Register from "./sub-components/register-container";
-import { createPasswordHash } from "../../utils";
+import { createPasswordHash, tryRedirectTo } from "../../utils";
-import { redirectToDefaultPage } from "../../utils";
 const { getLanguage } = store.auth.selectors;
 const LoginContainer = styled.div`
   display: flex;
@@ -75,8 +73,7 @@ const LoginContainer = styled.div`
       padding: 14px 0;
 
       .login-checkbox-wrapper {
-        position: absolute;
+        display: flex;
-        display: inline-flex;
 
         .login-checkbox {
           float: left;
@@ -84,23 +81,11 @@ const LoginContainer = styled.div`
             font-size: 12px;
           }
         }
-
-        .login-tooltip {
-          display: inline-flex;
-
-          @media (min-width: 1025px) {
-            margin-left: 8px;
-            margin-top: 4px;
-          }
-          @media (max-width: 1024px) {
-            padding: 4px 8px 8px 8px;
-          }
-        }
       }
 
       .login-link {
-        float: right;
+        line-height: 18px;
-        line-height: 16px;
+        margin-left: auto;
       }
     }
 
@@ -126,7 +111,8 @@ const LoginContainer = styled.div`
 
 const LoginFormWrapper = styled.div`
   display: grid;
-  grid-template-rows: ${props => props.enabledJoin ? css`1fr 66px` : css`1fr`};
+  grid-template-rows: ${(props) =>
+    props.enabledJoin ? css`1fr 66px` : css`1fr`};
   width: 100%;
   height: calc(100vh-56px);
 `;
@@ -211,7 +197,12 @@ class Form extends Component {
 
   onSubmit = () => {
     const { errorText, identifier, password } = this.state;
-    const { login, setIsLoaded, hashSettings } = this.props;
+    const {
+      login,
+      setIsLoaded,
+      hashSettings,
+      defaultPage
+    } = this.props;
 
     errorText && this.setState({ errorText: "" });
     let hasError = false;
@@ -237,12 +228,17 @@ class Form extends Component {
 
     login(userName, hash)
       .then(() => {
-        if (!redirectToDefaultPage()) {
+        if (!tryRedirectTo(defaultPage)) {
           setIsLoaded(true);
         }
       })
       .catch((error) => {
-        this.setState({ errorText: error, isLoading: false });
+        this.setState({
+          errorText: error,
+          identifierValid: !error,
+          passwordValid: !error,
+          isLoading: false,
+        });
       });
   };
 
@@ -250,8 +246,8 @@ class Form extends Component {
     const {
       match,
       t,
-      hashSettings,
+      hashSettings, // eslint-disable-line react/prop-types
-      reloadPortalSettings,
+      reloadPortalSettings, // eslint-disable-line react/prop-types
       organizationName,
     } = this.props;
     const { error, confirmedEmail } = match.params;
@@ -315,7 +311,7 @@ class Form extends Component {
               isVertical={true}
               labelVisible={false}
               hasError={!identifierValid}
-              errorMessage={t("RequiredFieldMessage")}
+              errorMessage={errorText ? errorText : t("RequiredFieldMessage")} //TODO: Add wrong login server error
             >
               <TextInput
                 id="login"
@@ -337,7 +333,7 @@ class Form extends Component {
               isVertical={true}
               labelVisible={false}
               hasError={!passwordValid}
-              errorMessage={t("RequiredFieldMessage")}
+              errorMessage={errorText ? "" : t("RequiredFieldMessage")} //TODO: Add wrong password server error
             >
               <PasswordInput
                 simpleView={true}
@@ -365,15 +361,13 @@ class Form extends Component {
                   onChange={this.onChangeCheckbox}
                   label={<Text fontSize="13px">{t("Remember")}</Text>}
                 />
-                <HelpButton
+                {/*<HelpButton
                   className="login-tooltip"
                   helpButtonHeaderContent={t("CookieSettingsTitle")}
                   tooltipContent={
                     <Text fontSize="12px">{t("RememberHelper")}</Text>
                   }
-                />
+                />*/}
-              </div>
-
                 <Link
                   fontSize="13px"
                   color="#316DAA"
@@ -385,6 +379,7 @@ class Form extends Component {
                   {t("ForgotPassword")}
                 </Link>
               </div>
+            </div>
 
             {openDialog && (
               <ForgotPasswordModalDialog
@@ -417,9 +412,11 @@ class Form extends Component {
                 {t("MessageEmailConfirmed")} {t("MessageAuthorize")}
               </Text>
             )}
+            {/* TODO: old error indication
+            
             <Text fontSize="14px" color="#c30">
               {errorText}
-            </Text>
+            </Text> */}
 
             {socialButtons.length ? (
               <Box displayProp="flex" alignItems="center">
@@ -450,6 +447,7 @@ Form.propTypes = {
   socialButtons: PropTypes.array,
   organizationName: PropTypes.string,
   homepage: PropTypes.string,
+  defaultPage: PropTypes.string,
 };
 
 Form.defaultProps = {
@@ -486,21 +484,29 @@ LoginForm.propTypes = {
 };
 
 function mapStateToProps(state) {
-  const { isLoaded, settings } = state.auth;
+  const { isLoaded, settings, isAuthenticated } = state.auth;
-  const { greetingSettings, organizationName, hashSettings, enabledJoin } = settings;
+  const {
+    greetingSettings,
+    organizationName,
+    hashSettings,
+    enabledJoin,
+    defaultPage
+  } = settings;
 
   return {
+    isAuthenticated,
     isLoaded,
     organizationName,
     language: getLanguage(state),
     greetingTitle: greetingSettings,
     hashSettings,
-    enabledJoin
+    enabledJoin,
+    defaultPage
   };
 }
 
 export default connect(mapStateToProps, {
   login,
   setIsLoaded,
-  reloadPortalSettings,
+  reloadPortalSettings
 })(withRouter(LoginForm));

web/ASC.Web.Common/src/pages/login/sub-components/register-container.js

@@ -10,6 +10,9 @@ import { connect } from "react-redux";
 import i18n from "../i18n";
 
 const StyledRegister = styled(Box)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   z-index: 184;
   width: 100%;
   height: 66px;
@@ -60,9 +63,7 @@ const Register = ({ t }) => {
   return (
     <>
       <StyledRegister onClick={onRegisterClick}>
-        <Text color="#316DAA" textAlign="center">
+        <Text color="#316DAA">{t("Register")}</Text>
-          {t("Register")}
-        </Text>
       </StyledRegister>
 
       {visible && (

web/ASC.Web.Common/src/store/auth/actions.js

@@ -1,4 +1,6 @@
 import { default as api } from "../../api";
+import { setWithCredentialsStatus } from "../../api/client";
+import history from "../../history";
 
 export const LOGIN_POST = "LOGIN_POST";
 export const SET_CURRENT_USER = "SET_CURRENT_USER";
@@ -17,6 +19,7 @@ export const SET_CURRENT_PRODUCT_HOME_PAGE = "SET_CURRENT_PRODUCT_HOME_PAGE";
 export const SET_GREETING_SETTINGS = "SET_GREETING_SETTINGS";
 export const SET_CUSTOM_NAMES = "SET_CUSTOM_NAMES";
 export const SET_WIZARD_COMPLETED = "SET_WIZARD_COMPLETED";
+export const SET_IS_AUTHENTICATED = "SET_IS_AUTHENTICATED";
 
 export function setCurrentUser(user) {
   return {
@@ -128,13 +131,30 @@ export function setWizardComplete() {
   };
 }
 
+export function setIsAuthenticated(isAuthenticated) {
+  return {
+    type: SET_IS_AUTHENTICATED,
+    isAuthenticated,
+  };
+}
+
 export function getUser(dispatch) {
   return api.people
     .getUser()
     .then((user) => dispatch(setCurrentUser(user)))
+    .then(() => dispatch(setIsAuthenticated(true)))
     .catch((err) => dispatch(setCurrentUser({})));
 }
 
+export function getIsAuthenticated(dispatch) {
+  return api.user
+    .checkIsAuthenticated()
+    .then((success) => { 
+      dispatch(setIsAuthenticated(success));
+      return success;
+    });
+}
+
 export function getPortalSettings(dispatch) {
   return api.settings.getSettings().then((settings) => {
     const { passwordHash: hashSettings, ...otherSettings } = settings;
@@ -176,16 +196,22 @@ export function login(user, hash) {
     return api.user
       .login(user, hash)
       .then(() => dispatch(setIsLoaded(false)))
+      .then(() => {
+        setWithCredentialsStatus(true);
+        return dispatch(setIsAuthenticated(true));
+      })
       .then(() => getUserInfo(dispatch));
   };
 }
 
 export function logout() {
   return (dispatch) => {
-    return api.user
+    return api.user.logout().then(() => {
-      .logout()
+      setWithCredentialsStatus(false);
-      .then(() => dispatch(setLogout()))
+      dispatch(setLogout());
-      .then(() => dispatch(setIsLoaded(true)));
+
+      history.push("/login");
+    });
   };
 }
 

web/ASC.Web.Common/src/store/auth/reducer.js

@@ -15,9 +15,9 @@ import {
   SET_GREETING_SETTINGS,
   SET_CUSTOM_NAMES,
   SET_WIZARD_COMPLETED,
+  SET_IS_AUTHENTICATED,
 } from "./actions";
-import isEmpty from "lodash/isEmpty";
+import { LANGUAGE } from "../../constants";
-import { LANGUAGE, AUTH_KEY } from "../../constants";
 
 const initialState = {
   isAuthenticated: false,
@@ -73,10 +73,12 @@ const authReducer = (state = initialState, action) => {
         localStorage.getItem(LANGUAGE) !== action.user.cultureName &&
         localStorage.setItem(LANGUAGE, action.user.cultureName);
       return Object.assign({}, state, {
-        isAuthenticated:
-          !isEmpty(action.user) || localStorage.getItem(AUTH_KEY),
         user: action.user,
       });
+    case SET_IS_AUTHENTICATED:
+      return Object.assign({}, state, {
+        isAuthenticated: action.isAuthenticated,
+      });
     case SET_MODULES:
       return Object.assign({}, state, {
         modules: action.modules,
@@ -150,6 +152,7 @@ const authReducer = (state = initialState, action) => {
       });
     case LOGOUT:
       return Object.assign({}, initialState, {
+        isLoaded: true,
         settings: state.settings,
       });
     case SET_WIZARD_COMPLETED:

web/ASC.Web.Common/src/store/auth/selectors.js

@@ -45,6 +45,8 @@ const getCustomModules = (isAdmin) => {
 
 export const getCurrentUser = (state) => state.auth.user;
 
+export const isAuthenticated = (state) => state.auth.isAuthenticated;
+
 export const getCurrentUserId = (state) => state.auth.user;
 
 export const getModules = (state) => state.auth.modules;

web/ASC.Web.Common/src/utils/index.js

@@ -1,4 +1,4 @@
-import { AUTH_KEY, LANGUAGE } from "../constants";
+import { LANGUAGE } from "../constants";
 import sjcl from "sjcl";
 import { isMobile } from "react-device-detect";
 
@@ -44,20 +44,6 @@ export function changeLanguage(
     : i18n.changeLanguage("en");
 }
 
-export function redirectToDefaultPage() {
-  if (
-    (window.location.pathname === "/" ||
-      window.location.pathname === "" ||
-      window.location.pathname === "/login") &&
-    localStorage.getItem(AUTH_KEY) !== null
-  ) {
-    setTimeout(() => window.location.replace("/products/files"), 0);
-    return true;
-  }
-
-  return false;
-}
-
 export function createPasswordHash(password, hashSettings) {
   if (
     !password ||
@@ -82,11 +68,21 @@ export function createPasswordHash(password, hashSettings) {
   return hash;
 }
 
-export function removeTempContent() {
+export function updateTempContent(isAuth = false) {
+  if (isAuth) {
+    let el = document.getElementById("burger-loader-svg");
+    let el1 = document.getElementById("logo-loader-svg");
+    let el2 = document.getElementById("avatar-loader-svg");
+
+    el.style.display = "block";
+    el1.style.display = "block";
+    el2.style.display = "block";
+  } else {
     const tempElm = document.getElementById("temp-content");
     if (tempElm) {
       tempElm.outerHTML = "";
     }
+  }
 }
 
 export function hideLoader() {
@@ -109,3 +105,16 @@ export function showLoader() {
 }
 
 export { withLayoutSize } from "./withLayoutSize";
+
+export function tryRedirectTo(page) {
+  if (
+    window.location &&
+    window.location.pathname &&
+    window.location.pathname.indexOf(page) !== -1
+  )
+    return false;
+  //TODO: check if we already on default page
+  window.location.replace(page);
+
+  return true;
+}

web/ASC.Web.Components/package.json

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

web/ASC.Web.Components/src/components/avatar/index.js

@@ -5,7 +5,7 @@ import { Icons } from "../icons";
 import Link from "../link";
 
 const whiteColor = "#FFFFFF";
-const avatarBackground = "#ECEEF1";
+const avatarBackground = "#D0D5DA";
 const namedAvatarBackground = "#2DA7DB";
 
 const noneUserSelect = css`

web/ASC.Web.Components/src/components/text-input/index.js

@@ -5,8 +5,7 @@ import commonInputStyle from "../text-input/common-input-styles";
 import MaskedInput from "react-text-mask";
 import isEqual from "lodash/isEqual";
 
-/* eslint-disable no-unused-vars */
+/* eslint-disable no-unused-vars, react/prop-types */
-/* eslint-disable react/prop-types */
 const Input = ({
   isAutoFocussed,
   isDisabled,
@@ -25,8 +24,7 @@ const Input = ({
   ) : (
     <input {...props} />
   );
-/* eslint-enable react/prop-types */
+/* eslint-enable react/prop-types, no-unused-vars */
-/* eslint-enable no-unused-vars */
 
 const StyledInput = styled(Input).attrs((props) => ({
   id: props.id,
@@ -77,25 +75,31 @@ const StyledInput = styled(Input).attrs((props) => ({
   transition: all 0.2s ease 0s;
 
   ::-webkit-input-placeholder {
-    color: ${(props) => (props.isDisabled ? "#A3A9AE" : "#D0D5DA")};
+    color: "#A3A9AE";
     font-family: "Open Sans", sans-serif;
     user-select: none;
   }
 
   :-moz-placeholder {
-    color: ${(props) => (props.isDisabled ? "#A3A9AE" : "#D0D5DA")};
+    color: "#A3A9AE";
     font-family: "Open Sans", sans-serif;
     user-select: none;
   }
 
   ::-moz-placeholder {
-    color: ${(props) => (props.isDisabled ? "#A3A9AE" : "#D0D5DA")};
+    color: "#A3A9AE";
     font-family: "Open Sans", sans-serif;
     user-select: none;
   }
 
   :-ms-input-placeholder {
-    color: ${(props) => (props.isDisabled ? "#A3A9AE" : "#D0D5DA")};
+    color: "#A3A9AE";
+    font-family: "Open Sans", sans-serif;
+    user-select: none;
+  }
+
+  ::placeholder {
+    color: "#A3A9AE";
     font-family: "Open Sans", sans-serif;
     user-select: none;
   }

web/ASC.Web.Components/src/components/textarea/index.js

@@ -56,25 +56,31 @@ const StyledTextarea = styled(ClearTextareaAutosize)`
   }
 
   ::-webkit-input-placeholder {
-    color: ${(props) => (props.isDisabled ? "#D0D5DA" : "#D0D5DA")};
+    color: "#A3A9AE";
     font-family: "Open Sans", sans-serif;
     user-select: none;
   }
 
   :-moz-placeholder {
-    color: ${(props) => (props.isDisabled ? "#D0D5DA" : "#D0D5DA")};
+    color: "#A3A9AE";
     font-family: "Open Sans", sans-serif;
     user-select: none;
   }
 
   ::-moz-placeholder {
-    color: ${(props) => (props.isDisabled ? "#D0D5DA" : "#D0D5DA")};
+    color: "#A3A9AE";
     font-family: "Open Sans", sans-serif;
     user-select: none;
   }
 
   :-ms-input-placeholder {
-    color: ${(props) => (props.isDisabled ? "#D0D5DA" : "#D0D5DA")};
+    color: "#A3A9AE";
+    font-family: "Open Sans", sans-serif;
+    user-select: none;
+  }
+
+  ::placeholder {
+    color: "#A3A9AE";
     font-family: "Open Sans", sans-serif;
     user-select: none;
   }