From fa2a510a8aca492ada4d8e862f4c8712d9667379 Mon Sep 17 00:00:00 2001
From: gopienkonikita <nikita.gopienko@onlyoffice.com>
Date: Tue, 10 Nov 2020 12:50:07 +0300
Subject: [PATCH] Web: Files: added thirdParty api, added new thirdParty
 dialogs

---
 .../src/components/Article/Body/index.js      |   2 +-
 .../Settings/Section/Body/ConnectedClouds.js  | 189 +++++++++++++-----
 .../Settings/Section/Body/ConnectedDialog.js  |  88 +++++---
 .../pages/Settings/Section/Body/index.js      |   3 +-
 .../Settings/locales/en/translation.json      |   8 +-
 .../Settings/locales/ru/translation.json      |   8 +-
 .../Client/src/store/files/actions.js         |  26 +++
 web/ASC.Web.Common/src/api/files/index.js     |  27 +++
 8 files changed, 265 insertions(+), 86 deletions(-)

diff --git a/products/ASC.Files/Client/src/components/Article/Body/index.js b/products/ASC.Files/Client/src/components/Article/Body/index.js
index f302b918c8..136412eff6 100644
--- a/products/ASC.Files/Client/src/components/Article/Body/index.js
+++ b/products/ASC.Files/Client/src/components/Article/Body/index.js
@@ -131,7 +131,7 @@ class ArticleBodyContent extends React.Component {
               onTreeDrop={onTreeDrop}
             />
             <TreeSettings />
-            КНОПКА
+            Add account
           </>
         )}
       </>
diff --git a/products/ASC.Files/Client/src/components/pages/Settings/Section/Body/ConnectedClouds.js b/products/ASC.Files/Client/src/components/pages/Settings/Section/Body/ConnectedClouds.js
index 41c04564ea..8a4a2b3c3c 100644
--- a/products/ASC.Files/Client/src/components/pages/Settings/Section/Body/ConnectedClouds.js
+++ b/products/ASC.Files/Client/src/components/pages/Settings/Section/Body/ConnectedClouds.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { connect } from "react-redux";
 import styled from "styled-components";
 import {
   Box,
@@ -8,13 +9,21 @@ import {
   Button,
   Row,
   Icons,
+  toastr,
 } from "asc-web-components";
+import { Loaders, store } from "asc-web-common";
+import { withTranslation } from "react-i18next";
 import EmptyFolderContainer from "../../../Home/Section/Body/EmptyFolderContainer";
 import { createI18N } from "../../../../../helpers/i18n";
 import { Trans } from "react-i18next";
-import { getConnectedCloud } from "../../../../../store/files/actions";
+import {
+  getConnectedCloud,
+  deleteThirdParty,
+} from "../../../../../store/files/actions";
 import ConnectedDialog from "./ConnectedDialog";
 
+const { isAdmin } = store.auth.selectors;
+
 const i18n = createI18N({
   page: "SectionBodyContent",
   localesPath: "pages/Settings",
@@ -53,26 +62,19 @@ const ServiceItem = (props) => {
   const capabilityAuthKey = capability[1];
   const capabilityLink = capability[2] ? capability[2] : "";
 
-  /*
-   <img
-   src="images/services/logo_nextcloud.svg"
-   alt=""
-   {...imageProps}
-   />
-   <img
-   src="images/services/logo_owncloud.svg"
-   alt=""
-   {...imageProps}
-   />
-*/
+  const dataProps = {
+    "data-link": capabilityLink,
+    "data-auth_key": capabilityAuthKey,
+    "data-title": capabilityName,
+  };
+
   switch (capabilityName) {
     case "Box":
       return (
         <img
           src="images/services/logo_box.svg"
-          data-link={`${capabilityLink}`}
-          data-title={`${capabilityName}`}
           alt=""
+          {...dataProps}
           {...rest}
         />
       );
@@ -81,9 +83,8 @@ const ServiceItem = (props) => {
       return (
         <img
           src="images/services/logo_dropbox.svg"
-          data-link={`${capabilityLink}`}
-          data-title={`${capabilityName}`}
           alt=""
+          {...dataProps}
           {...rest}
         />
       );
@@ -92,9 +93,8 @@ const ServiceItem = (props) => {
       return (
         <img
           src="images/services/logo_google-drive.svg"
-          data-link={`${capabilityLink}`}
-          data-title={`${capabilityName}`}
           alt=""
+          {...dataProps}
           {...rest}
         />
       );
@@ -103,9 +103,8 @@ const ServiceItem = (props) => {
       return (
         <img
           src="images/services/logo_onedrive.svg"
-          data-link={`${capabilityLink}`}
-          data-title={`${capabilityName}`}
           alt=""
+          {...dataProps}
           {...rest}
         />
       );
@@ -115,16 +114,14 @@ const ServiceItem = (props) => {
         <>
           <img
             src="images/services/logo_onedrive-for-business.svg"
-            data-link={`${capabilityLink}`}
-            data-title={`${capabilityName}`}
             alt=""
+            {...dataProps}
             {...rest}
           />
           <img
             src="images/services/logo_sharepoint.svg"
-            data-link={`${capabilityLink}`}
-            data-title={`${capabilityName}`}
             alt=""
+            {...dataProps}
             {...rest}
           />
         </>
@@ -134,9 +131,8 @@ const ServiceItem = (props) => {
       return (
         <img
           src="images/services/logo_kdrive.svg"
-          data-link={`${capabilityLink}`}
-          data-title={`${capabilityName}`}
           alt=""
+          {...dataProps}
           {...rest}
         />
       );
@@ -145,23 +141,31 @@ const ServiceItem = (props) => {
       return (
         <img
           src="images/services/logo_yandex_ru.svg"
-          data-link={`${capabilityLink}`}
-          data-title={`${capabilityName}`}
           alt=""
+          {...dataProps}
           {...rest}
         />
       );
 
     case "WebDav":
       return (
-        <Text
-          data-link={`${capabilityLink}`}
-          data-title={`${capabilityName}`}
-          {...rest}
-          className="service-item service-text"
-        >
-          {t("ConnextOtherAccount")}
-        </Text>
+        <>
+          <img
+            src="images/services/logo_nextcloud.svg"
+            alt=""
+            {...dataProps}
+            {...rest}
+          />
+          <img
+            src="images/services/logo_owncloud.svg"
+            alt=""
+            {...dataProps}
+            {...rest}
+          />
+          <Text {...dataProps} {...rest} className="service-item service-text">
+            {t("ConnextOtherAccount")}
+          </Text>
+        </>
       );
 
     default:
@@ -176,12 +180,15 @@ class ConnectClouds extends React.Component {
     this.state = {
       connectDialogVisible: false,
       showAccountSettingDialog: false,
+      showDeleteDialog: false,
       providers: [],
       capabilities: [],
       loginValue: "",
       passwordValue: "",
       folderNameValue: "",
-      selectedService: "",
+      selectedServiceData: null,
+      removeItemId: null,
+      providersLoading: true,
     };
   }
 
@@ -190,16 +197,25 @@ class ConnectClouds extends React.Component {
       this.setState({
         providers: res.providers,
         capabilities: res.capabilities,
+        providersLoading: false,
       });
     });
   }
 
   onShowService = (e) => {
+    const selectedServiceData = e.currentTarget.dataset;
     const showAccountSettingDialog = !e.currentTarget.dataset.link;
+    if (!showAccountSettingDialog) {
+      window.open(
+        selectedServiceData.link,
+        selectedServiceData.title,
+        "width=1020,height=600"
+      );
+    }
     this.setState({
       connectDialogVisible: !this.state.connectDialogVisible,
-      selectedService: e.currentTarget.dataset.title,
       showAccountSettingDialog,
+      selectedServiceData,
     });
   };
 
@@ -210,16 +226,57 @@ class ConnectClouds extends React.Component {
   onShowAccountSettingDialog = () => {
     this.setState({
       showAccountSettingDialog: !this.state.showAccountSettingDialog,
+      selectedServiceData: null,
     });
   };
 
+  onShowDeleteDialog = (e) => {
+    const removeItemId = e.currentTarget.dataset.id;
+
+    this.setState({
+      showDeleteDialog: !this.state.showDeleteDialog,
+      removeItemId,
+    });
+  };
+
+  onChangeThirdPartyInfo = (e) => {
+    const key = e.currentTarget.dataset.key;
+    const capabilitiesItem = this.state.capabilities.find((x) => x[0] === key);
+    const providerItem = this.state.providers.find(
+      (x) => x.provider_key === key
+    );
+
+    const selectedServiceData = {
+      title: capabilitiesItem[0],
+      auth_key: capabilitiesItem[1],
+      link: capabilitiesItem[2],
+      corporate: providerItem.corporate,
+      provider_id: providerItem.provider_id,
+      provider_key: key,
+    };
+    this.setState({ selectedServiceData, showAccountSettingDialog: true });
+  };
+
+  onDeleteThirdParty = () => {
+    const id = this.state.removeItemId;
+    const providers = this.state.providers.filter((x) => x.id === id);
+    deleteThirdParty(+id)
+      .then(() => this.setState({ showDeleteDialog: false, providers }))
+      .catch((err) => {
+        toastr(err);
+        this.setState({ showDeleteDialog: false });
+      });
+  };
+
   render() {
     const {
       connectDialogVisible,
       providers,
       capabilities,
       showAccountSettingDialog,
-      selectedService,
+      showDeleteDialog,
+      selectedServiceData,
+      providersLoading,
     } = this.state;
     const { t, isAdmin } = this.props;
 
@@ -232,11 +289,6 @@ class ConnectClouds extends React.Component {
       display: "flex",
     };
 
-    const imageProps = {
-      onClick: this.onShowService,
-      className: "service-item",
-    };
-
     const buttons = (
       <div className="empty-folder_container-links empty-connect_container-links">
         <img
@@ -266,16 +318,18 @@ class ConnectClouds extends React.Component {
             {providers.map((item, index) => {
               return (
                 <Row
-                  key={index} //item.provider.id
+                  key={index}
                   element={<Icons.NavLogoIcon size="big" />}
                   contextOptions={[
                     {
-                      label: "Change connection settings",
-                      onClick: () => console.log("Change connection settings"),
+                      "data-key": item.provider_key,
+                      label: t("ThirdPartyInfo"),
+                      onClick: this.onChangeThirdPartyInfo,
                     },
                     {
-                      label: "Disconnect third party",
-                      onClick: () => console.log("Disconnect third party"),
+                      "data-id": item.provider_id,
+                      label: t("DeleteThirdParty"),
+                      onClick: this.onShowDeleteDialog,
                     },
                   ]}
                 >
@@ -314,6 +368,8 @@ class ConnectClouds extends React.Component {
               );
             })}
           </>
+        ) : providersLoading ? (
+          <Loaders.Rows />
         ) : (
           <EmptyFolderContainer
             headerText={t("ConnectAccounts")}
@@ -351,7 +407,8 @@ class ConnectClouds extends React.Component {
                 {capabilities.map((capability, key) => (
                   <ServiceItem
                     capability={capability}
-                    {...imageProps}
+                    onClick={this.onShowService}
+                    className="service-item"
                     t={t}
                     key={key}
                   />
@@ -360,18 +417,42 @@ class ConnectClouds extends React.Component {
             </ModalDialog.Body>
           </ModalDialog>
         )}
-
         {showAccountSettingDialog && (
           <ConnectedDialog
             visible={showAccountSettingDialog}
             onClose={this.onShowAccountSettingDialog}
             t={t}
-            selectedService={selectedService}
+            item={selectedServiceData}
           />
         )}
+
+        {showDeleteDialog && (
+          <ModalDialog
+            visible={showDeleteDialog}
+            zIndex={310}
+            onClose={this.onShowDeleteDialog}
+          >
+            <ModalDialog.Header>{t("DeleteThirdParty")}</ModalDialog.Header>
+            <ModalDialog.Body>{t("DeleteThirdPartyAlert")}</ModalDialog.Body>
+            <ModalDialog.Footer>
+              <Button
+                label={t("SaveButton")}
+                size="big"
+                primary
+                onClick={this.onDeleteThirdParty}
+              />
+            </ModalDialog.Footer>
+          </ModalDialog>
+        )}
       </>
     );
   }
 }
 
-export default ConnectClouds;
+function mapStateToProps(state) {
+  return {
+    isAdmin: isAdmin(state),
+  };
+}
+
+export default connect(mapStateToProps, {})(withTranslation()(ConnectClouds));
diff --git a/products/ASC.Files/Client/src/components/pages/Settings/Section/Body/ConnectedDialog.js b/products/ASC.Files/Client/src/components/pages/Settings/Section/Body/ConnectedDialog.js
index 5becdc44d4..17d9dde5b7 100644
--- a/products/ASC.Files/Client/src/components/pages/Settings/Section/Body/ConnectedDialog.js
+++ b/products/ASC.Files/Client/src/components/pages/Settings/Section/Body/ConnectedDialog.js
@@ -3,11 +3,13 @@ import styled from "styled-components";
 import {
   ModalDialog,
   TextInput,
+  PasswordInput,
   Button,
   Checkbox,
   Text,
   utils,
 } from "asc-web-components";
+import { saveThirdParty } from "../../../../../store/files/actions";
 
 const { tablet } = utils.device;
 
@@ -24,8 +26,7 @@ const StyledConnectedDialog = styled.div`
   }
   .dialog-form-text {
     line-height: 32px;
-    width: 160px;
-    min-width: 110px;
+    min-width: 160px;
     text-align: right;
     padding-right: 8px;
 
@@ -37,56 +38,89 @@ const StyledConnectedDialog = styled.div`
 `;
 
 const ConnectedDialog = (props) => {
-  const { onClose, visible, t, selectedService } = props;
+  const { onClose, visible, t, item } = props;
+  const { corporate, title, link, auth_key, provider_id, provider_key } = item;
 
   const [urlValue, setUrlValue] = useState("");
   const [loginValue, setLoginValue] = useState("");
   const [passwordValue, setPasswordValue] = useState("");
-  const [folderNameValue, setFolderNameValue] = useState("");
-  const [makeShared, setMakeShared] = useState(false);
+  const [customerTitle, setCustomerTitleValue] = useState(title);
+  const [isCorporate, setMakeShared] = useState(!!corporate);
 
   const onChangeUrl = (e) => setUrlValue(e.target.value);
   const onChangeLogin = (e) => setLoginValue(e.target.value);
   const onChangePassword = (e) => setPasswordValue(e.target.value);
-  const onChangeFolderName = (e) => setFolderNameValue(e.target.value);
-  const onChangeMakeShared = (e) => setMakeShared(!makeShared);
+  const onChangeFolderName = (e) => setCustomerTitleValue(e.target.value);
+  const onChangeMakeShared = (e) => setMakeShared(!isCorporate);
 
   const onSave = () => {
-    alert("onSave");
+    saveThirdParty(
+      urlValue,
+      loginValue,
+      passwordValue,
+      auth_key,
+      isCorporate,
+      customerTitle,
+      provider_key,
+      provider_id
+    );
   };
 
-  const showUrlField =
-    selectedService === "WebDav" || selectedService === "SharePoint";
+  const onReconnect = () => {
+    window.open(link, title, "width=1020,height=600");
+  };
+
+  const isAccount = !!link;
+  const showUrlField = title === "WebDav" || title === "SharePoint";
 
   return (
     <StyledConnectedDialog>
       <ModalDialog visible={visible} zIndex={310} onClose={onClose}>
         <ModalDialog.Header>{t("ConnectingAccount")}</ModalDialog.Header>
         <ModalDialog.Body>
-          {showUrlField && (
+          {isAccount ? (
             <div className="dialog-form-container">
-              <Text className="dialog-form-text">{t("ConnectionUrl")}</Text>
-              <TextInput scale value={urlValue} onChange={onChangeUrl} />
+              <Text className="dialog-form-text">{t("Account")}</Text>
+              <Button
+                label={t("Reconnect")}
+                size="medium"
+                onClick={onReconnect}
+                scale
+              />
             </div>
+          ) : (
+            <>
+              {showUrlField && (
+                <div className="dialog-form-container">
+                  <Text className="dialog-form-text">{t("ConnectionUrl")}</Text>
+                  <TextInput scale value={urlValue} onChange={onChangeUrl} />
+                </div>
+              )}
+
+              <div className="dialog-form-container">
+                <Text className="dialog-form-text">{t("Login")}</Text>
+                <TextInput scale value={loginValue} onChange={onChangeLogin} />
+              </div>
+              <div className="dialog-form-container">
+                <Text className="dialog-form-text">{t("Password")}</Text>
+                <PasswordInput
+                  hideNewPasswordButton
+                  isDisableTooltip
+                  isTextTooltipVisible
+                  passwordSettings={{ minLength: 0 }}
+                  scale
+                  value={passwordValue}
+                  onChange={onChangePassword}
+                />
+              </div>
+            </>
           )}
 
-          <div className="dialog-form-container">
-            <Text className="dialog-form-text">{t("Login")}</Text>
-            <TextInput scale value={loginValue} onChange={onChangeLogin} />
-          </div>
-          <div className="dialog-form-container">
-            <Text className="dialog-form-text">{t("Password")}</Text>
-            <TextInput
-              scale
-              value={passwordValue}
-              onChange={onChangePassword}
-            />
-          </div>
           <div className="dialog-form-container">
             <Text className="dialog-form-text">{t("ConnectFolderTitle")}</Text>
             <TextInput
               scale
-              value={folderNameValue}
+              value={`${customerTitle} ${t("Directory")}`}
               onChange={onChangeFolderName}
             />
           </div>
@@ -94,7 +128,7 @@ const ConnectedDialog = (props) => {
             <Text className="dialog-form-text" />
             <Checkbox
               label={t("ConnectMakeShared")}
-              isChecked={makeShared}
+              isChecked={isCorporate}
               onChange={onChangeMakeShared}
             />
           </div>
diff --git a/products/ASC.Files/Client/src/components/pages/Settings/Section/Body/index.js b/products/ASC.Files/Client/src/components/pages/Settings/Section/Body/index.js
index 904da685ae..e03507238e 100644
--- a/products/ASC.Files/Client/src/components/pages/Settings/Section/Body/index.js
+++ b/products/ASC.Files/Client/src/components/pages/Settings/Section/Body/index.js
@@ -168,8 +168,7 @@ const SectionBodyContent = ({
 
   if (setting === "admin" && isAdmin) content = renderAdminSettings();
   if (setting === "common") content = renderCommonSettings();
-  if (setting === "thirdParty" && enableThirdParty)
-    content = <ConnectClouds isAdmin={isAdmin} t={t} />;
+  if (setting === "thirdParty" && enableThirdParty) content = <ConnectClouds />;
 
   return isLoading ? null : (!enableThirdParty && setting === "thirdParty") ||
     (!isAdmin && setting === "admin") ? (
diff --git a/products/ASC.Files/Client/src/components/pages/Settings/locales/en/translation.json b/products/ASC.Files/Client/src/components/pages/Settings/locales/en/translation.json
index ac9c8f89f5..c9263fa9d0 100644
--- a/products/ASC.Files/Client/src/components/pages/Settings/locales/en/translation.json
+++ b/products/ASC.Files/Client/src/components/pages/Settings/locales/en/translation.json
@@ -38,5 +38,11 @@
   "Password": "Password",
   "ConnectFolderTitle": "Folder title",
   "ConnectMakeShared": "Make shared and put into the 'Common' folder",
-  "ConnectionUrl": "Connection url"
+  "ConnectionUrl": "Connection url",
+  "DeleteThirdParty": "Delete third party",
+  "ThirdPartyInfo": "Change the third party info",
+  "DeleteThirdPartyAlert": "Are you sure you want to remove the Google directory from the 'Documents' module? This will not affect your google.com account in any way.",
+  "Account": "Account",
+  "Reconnect": "Reconnect",
+  "Directory": "directory"
 }
diff --git a/products/ASC.Files/Client/src/components/pages/Settings/locales/ru/translation.json b/products/ASC.Files/Client/src/components/pages/Settings/locales/ru/translation.json
index 04e8dfcac4..bcac9db81c 100644
--- a/products/ASC.Files/Client/src/components/pages/Settings/locales/ru/translation.json
+++ b/products/ASC.Files/Client/src/components/pages/Settings/locales/ru/translation.json
@@ -38,5 +38,11 @@
   "Password": "Пароль",
   "ConnectFolderTitle": "Название папки",
   "ConnectMakeShared": "Сделать доступным и поместить в папку 'Общие'",
-  "ConnectionUrl": "URL-адрес подключения"
+  "ConnectionUrl": "URL-адрес подключения",
+  "DeleteThirdParty": "Отключить сторонний ресурс",
+  "ThirdPartyInfo": "Изменить настройки подключения",
+  "DeleteThirdPartyAlert": "Вы действительно хотите удалить Каталог Google из модуля 'Документы'? Это никак не повлияет на Ваш аккаунт Google Drive.",
+  "Account": "Аккаунт",
+  "Reconnect": "Подключить повторно",
+  "Directory": "каталог"
 }
diff --git a/products/ASC.Files/Client/src/store/files/actions.js b/products/ASC.Files/Client/src/store/files/actions.js
index 284605d1c5..f24e2e3825 100644
--- a/products/ASC.Files/Client/src/store/files/actions.js
+++ b/products/ASC.Files/Client/src/store/files/actions.js
@@ -612,6 +612,32 @@ export function setEnableThirdParty(data, setting) {
   };
 }
 
+export function deleteThirdParty(id) {
+  return files.deleteThirdParty(id);
+}
+
+export function saveThirdParty(
+  url,
+  login,
+  password,
+  token,
+  isCorporate,
+  customerTitle,
+  providerKey,
+  providerId
+) {
+  return files.saveThirdParty(
+    url,
+    login,
+    password,
+    token,
+    isCorporate,
+    customerTitle,
+    providerKey,
+    providerId
+  );
+}
+
 export function setForceSave(data, setting) {
   return (dispatch) => {
     return files
diff --git a/web/ASC.Web.Common/src/api/files/index.js b/web/ASC.Web.Common/src/api/files/index.js
index 9afc41fd4c..4e44160aad 100644
--- a/web/ASC.Web.Common/src/api/files/index.js
+++ b/web/ASC.Web.Common/src/api/files/index.js
@@ -565,6 +565,33 @@ export function getThirdPartyList() {
   return request({ method: "get", url: "files/thirdparty" });
 }
 
+export function saveThirdParty(
+  url,
+  login,
+  password,
+  token,
+  isCorporate,
+  customerTitle,
+  providerKey,
+  providerId
+) {
+  const data = {
+    url,
+    login,
+    password,
+    token,
+    isCorporate,
+    customerTitle,
+    providerKey,
+    providerId,
+  };
+  return request({ method: "post", url: "files/thirdparty", data });
+}
+
+export function deleteThirdParty(providerId) {
+  return request({ method: "delete", url: `files/thirdparty/${providerId}` });
+}
+
 export function getThirdPartyCapabilities() {
   return request({ method: "get", url: "files/thirdparty/capabilities" });
 }