Add styles and data prototypes
This commit is contained in:
parent
153a420674
commit
bdfdd76f43
@ -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;
|
@ -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: ["Токен бота", "Имя бота"]
|
||||
}
|
||||
]
|
@ -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;
|
Loading…
Reference in New Issue
Block a user