diff --git a/packages/client/public/locales/en/Settings.json b/packages/client/public/locales/en/Settings.json
index f68a4c8cf2..94ad4ae154 100644
--- a/packages/client/public/locales/en/Settings.json
+++ b/packages/client/public/locales/en/Settings.json
@@ -65,6 +65,7 @@
"CustomTitlesWelcome": "Welcome Page Settings",
"DataBackup": "Data backup",
"DataImport": "Data import",
+ "DataImportDescription": "Import data from a third party service to ONLYOFFICE DocSpace. Data import allows transferring data such as all users, their personal and shared documents.",
"Deactivate": "Deactivate",
"DeactivateOrDeletePortal": "Deactivate or delete space.",
"DeleteDocSpace": "Delete DocSpace",
@@ -93,6 +94,7 @@
"EveryMonth": "Every month",
"EveryWeek": "Every week",
"ForcePathStyle": "Force Path Style",
+ "Import": "Import",
"IPSecurity": "IP Security",
"IPSecurityDescription": "IP Security is used to restrict login to the space from all IP addresses except certain addresses.",
"IPSecurityHelper": "You can set the allowed IP addresses using either exact IP addresses in the IPv4 format (#.#.#.#, where # is a numeric value from 0 to 255) or IP range (in the #.#.#.#-#.#.#.# format).",
@@ -191,6 +193,7 @@
"TwoFactorAuth": "Two-factor authentication",
"TwoFactorAuthDescription": "Two-factor authentication provides a more secure way to log in. After entering the credentials, the user will have to enter a code from an SMS or the authentication app.",
"TwoFactorAuthHelper": "Note: SMS messages can be sent if you have a positive balance only. You can always check your current balance in your SMS provider account. Do not forget to replenish your balance in good time.",
+ "UploadBackupData": "Upload a backup copy from a desired service below to start migration.",
"UseAsLogoButton": "Use as logo",
"UseDigits": "Use digits",
"UseHttp": "Use Http",
diff --git a/packages/client/public/locales/ru/Settings.json b/packages/client/public/locales/ru/Settings.json
index 9d3aa9a613..7eee7f64c5 100644
--- a/packages/client/public/locales/ru/Settings.json
+++ b/packages/client/public/locales/ru/Settings.json
@@ -65,6 +65,7 @@
"CustomTitlesWelcome": "Настройки страницы приветствия",
"DataBackup": "Резервное копирование данных",
"DataImport": "Перенос данных",
+ "DataImportDescription": "Импорт данных из стороннего сервиса в ONLYOFFICE DocSpace. Импорт данных позволяет передавать такие данные, как все пользователи, их личные и общие документы.",
"Deactivate": "Деактивировать",
"DeactivateOrDeletePortal": "Деактивировать или удалить портал.",
"DeleteDocSpace": "Удалить DocSpace",
@@ -93,6 +94,7 @@
"EveryMonth": "Каждый месяц",
"EveryWeek": "Каждую неделю",
"ForcePathStyle": "Принудительно использовать стиль пути",
+ "Import": "Импортировать",
"IPSecurity": "IP-безопасность",
"IPSecurityDescription": "Настройки IP-безопасности используются для ограничения возможности входа на портал со всех IP-адресов, кроме указанных.",
"IPSecurityHelper": "Вы можете задать разрешенные IP-адреса, указав конкретные значения IP-адресов в формате IPv4 (#.#.#.#, где # - это число от 0 до 255) или диапазон IP-адресов (в формате #.#.#.#-#.#.#.#).",
@@ -191,6 +193,7 @@
"TwoFactorAuth": "Двухфакторная аутентификация",
"TwoFactorAuthDescription": "Двухфакторная аутентификация обеспечивает более безопасный способ входа на портал. После ввода учетных данных пользователь должен будет ввести код из SMS или приложения для аутентификации.",
"TwoFactorAuthHelper": "Обратите внимание: отправка SMS-сообщений осуществляется только при положительном балансе. Вы всегда можете проверить текущий баланс в учетной записи вашего SMS-провайдера. Не забывайте своевременно пополнять баланс.",
+ "UploadBackupData": "Загрузите резервную копию из нужного сервиса ниже, чтобы начать миграцию.",
"UseAsLogoButton": "Использовать как логотип",
"UseDigits": "Использовать цифры",
"UseHttp": "Использовать Http",
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/StyledDataImport.js b/packages/client/src/pages/PortalSettings/categories/data-import/StyledDataImport.js
new file mode 100644
index 0000000000..50a30e6ec2
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/StyledDataImport.js
@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+const StyledWrapper = styled.div`
+ max-width: 700px;
+
+ .data-import-description {
+ color: #657077;
+ margin-bottom: 20px;
+ }
+
+ .start-migration-text {
+ margin-bottom: 20px;
+ }
+
+ .service-list {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 20px;
+ }
+
+ .service-wrapper {
+ border: 1px solid #d0d5da;
+ border-radius: 6px;
+ width: 340px;
+ height: 64px;
+ padding: 0 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+`;
+
+export { StyledWrapper };
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/index.js
index e8b5689295..bcbfafcde2 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/index.js
@@ -1,4 +1,68 @@
-const DataImport = () => {
- return
Data Import Page
;
+import { withTranslation } from "react-i18next";
+import { inject, observer } from "mobx-react";
+import { ReactSVG } from "react-svg";
+
+import Box from "@docspace/components/box";
+import Text from "@docspace/components/text";
+import Link from "@docspace/components/link";
+import { StyledWrapper } from "./StyledDataImport";
+
+import WorkspaceGoogleSvgUrl from "PUBLIC_DIR/images/workspace.google.react.svg?url";
+import WorkspaceNextcloudSvgUrl from "PUBLIC_DIR/images/workspace.nextcloud.react.svg?url";
+import WorkspaceOnlyofficeeSvgUrl from "PUBLIC_DIR/images/workspace.onlyoffice.react.svg?url";
+
+const services = [
+ {
+ id: 1,
+ title: "google",
+ logo: WorkspaceGoogleSvgUrl,
+ },
+ {
+ id: 2,
+ title: "nextcloud",
+ logo: WorkspaceNextcloudSvgUrl,
+ },
+ {
+ id: 3,
+ title: "onlyoffice",
+ logo: WorkspaceOnlyofficeeSvgUrl,
+ },
+];
+
+const DataImport = (props) => {
+ const { t } = props;
+ return (
+
+
+ {t("Settings:DataImportDescription")}
+
+
+ {t("Settings:UploadBackupData")}
+
+
+