Add styles and data prototypes

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerItem.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Box, Text } from "asc-web-components";
+
+const ConsumerItem = (props) => {
+    return (
+        <>
+            <Box displayProp="flex" flexDirection="column" marginProp="16px">
+                <Box displayProp="flex" justifyContent="space-between" widthProp="100%">
+                    <Box displayProp="flex">
+                        <Text>
+                            {props.name} logo
+                        </Text>
+                    </Box>
+                    <Box>
+                        toggle
+                        </Box>
+                </Box>
+                <Box displayProp="flex" marginProp="10px 10px 10px auto">
+                    <Text>
+                        {props.description}
+                    </Text>
+                </Box>
+            </Box>
+        </>
+    )
+}
+
+export default ConsumerItem;

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumers.js

@@ -0,0 +1,20 @@
+export const consumers = [
+    {
+        name: "Amazon",
+        description: "Подключите Amazon AWS S3 для резервного копирования и хранения данных портала.",
+        innerDescription: "Добавив Amazon AWS S3, вы сможете использовать его для создания резервных копий портала, чтобы предотвратить потерю данных. Также используйте его для хранения данных и статического содержимого портала.",
+        tokens: ["Ключ доступа S3", "Секретный ключ доступа S3"]
+    },
+    {
+        name: "Mail.ru",
+        description: "Подключите приложение для входа на портал по учетной записи Mail.ru.",
+        innerDescription: "Добавив приложение сервиса Mail.ru Вы сможете на странице своего профиля подключить вход на портал используя аккаунт Mail.ru.",
+        tokens: ["ID", "Секретный ключ"]
+    },
+    {
+        name: "Telegram",
+        description: "Подключите аккаунт Telegram для получения оповещений портала через Telegram.",
+        innerDescription: "",
+        tokens: ["Токен бота", "Имя бота"]
+    }
+]

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js

@@ -1,13 +1,49 @@
 import React from "react";
+import { consumers } from "./sub-components/consumers";
+import { Box, Text } from "asc-web-components";
+import ConsumerItem from "./sub-components/consumerItem";
 
-class ThirdParty extends React.Component {
+class ThirdPartyServices extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            consumers: consumers,
+            dialogVisible: false
+        }
+    }
+
+    onToggleClick = () => {
+        this.setState( {
+            dialogVisible: true
+        })
+    }
+
+    titleDescription = "Ключи авторизации позволяют подключить портал ONLYOFFICE к сторонним сервисам, таким как Twitter, Facebook, Dropbox и т.д. Подключите портал к Facebook, Twitter или Linkedin, если Вы не хотите каждый раз при входе вводить свои учетные данные на портале. Привяжите портал к таким сервисам, как Dropbox, OneDrive и т.д. чтобы перенести документы из всех этих хранилищ в модуль Документы ONLYOFFICE."
 
     render() {
         return (
-            <div>tfs settings</div>
+            <>
+                <Box displayProp="flex" flexDirection="column">
+                    <Box marginProp="10px">
+                        <Text>{this.titleDescription}</Text>
+                    </Box>
+                    <Box displayProp="flex">
+                        <Box displayProp="flex" widthProp="100%">
+                            {this.state.consumers
+                                .map((c) =>
+                                    <ConsumerItem
+                                        name={c.name}
+                                        description={c.description}
+                                        onToggleClick={this.onToggleClick} />
+                                )}
+                        </Box>
+                    </Box>
+                </Box>
+            </>
         )
     }
 }
 
 
-export default ThirdParty;
+export default ThirdPartyServices;