Merge pull request #9 from hakumizuki/feat/data-transfer-on-installer-page

feat: data transfer form on installer page

packages/app/public/static/locales/en_US/admin.json

@@ -1024,17 +1024,5 @@
     "ADMIN_SEARCH_CONNECTION": "Attempting to reconnect to Elasticsearch",
     "ADMIN_SEARCH_INDICES_NORMALIZE": "Normalize of Elasticsearch indexes",
     "ADMIN_SEARCH_INDICES_REBUILD": "Rebuild Elasticsearch indexes"
-  },
-  "g2g_data_transfer": {
-    "data_transfer": "Growi To Growi Data Transfer",
-    "transfer_data_to_another_growi": "Transfer data from this GROWI to another GROWI",
-    "transfer_data_to_this_growi": "Transfer data from another GROWI to this GROWI",
-    "advanced_options": "Advanced options",
-    "start_transfer": "Start transfer",
-    "publish_transfer_key": "Publish transfer key",
-    "transfer_key_limit": "Transfer keys are valid for 1 hour after issuance.",
-    "once_transfer_key_used": "Once the transfer key is used for transfer, it cannot be used for any other transfer.",
-    "transfer_to_growi_cloud": "If you wish to transfer to GROWI.cloud, please click here.",
-    "paste_transfer_key": "Paste transter key here"
   }
 }

packages/app/public/static/locales/en_US/translation.json

@@ -161,6 +161,7 @@
   "not_allowed_to_see_this_page": "You cannot see this page",
   "Confirm": "Confirm",
   "Successfully requested": "Successfully requested.",
+  "copied_to_clipboard": "Copied to clipboard",
   "personal_dropdown": {
     "home": "Home",
     "settings": "Settings",
@@ -188,6 +189,7 @@
     "link_sharing_is_disabled": "Link sharing is disabled."
   },
   "installer": {
+    "tab": "Create account",
     "setup": "Setup",
     "create_initial_account": "Create an initial account",
     "initial_account_will_be_administrator_automatically": "The initial account will be administrator automatically.",
@@ -195,6 +197,19 @@
     "failed_to_install": "Failed to install GROWI. Please try again.",
     "failed_to_login_after_install": "Failed to login after installation. Redirecting to the login form ..."
   },
+  "g2g_data_transfer": {
+    "tab": "Data transfer",
+    "data_transfer": "Growi To Growi Data Transfer",
+    "transfer_data_to_another_growi": "Transfer data from this GROWI to another GROWI",
+    "transfer_data_to_this_growi": "Transfer data from another GROWI to this GROWI",
+    "advanced_options": "Advanced options",
+    "start_transfer": "Start transfer",
+    "publish_transfer_key": "Publish transfer key",
+    "transfer_key_limit": "Transfer keys are valid for 1 hour after issuance.",
+    "once_transfer_key_used": "Once the transfer key is used for transfer, it cannot be used for any other transfer.",
+    "transfer_to_growi_cloud": "If you wish to transfer to GROWI.cloud, please click here.",
+    "paste_transfer_key": "Paste transter key here"
+  },
   "breaking_changes": {
     "v346_using_basic_auth": "Basic Authentication currently in use will <strong>no longer be available</strong> in the near future. Remove settings from %s"
   },

packages/app/public/static/locales/ja_JP/admin.json

@@ -1036,17 +1036,5 @@
     "ADMIN_SEARCH_CONNECTION": "Elasticsearch の再接続の試行",
     "ADMIN_SEARCH_INDICES_NORMALIZE": "Elasticsearch のインデックスの正規化",
     "ADMIN_SEARCH_INDICES_REBUILD": "Elasticsearch のインデックスのリビルド"
-  },
-  "g2g_data_transfer": {
-    "data_transfer": "別GROWIとのデータ移行",
-    "transfer_data_to_another_growi": "このGROWIのデータを別GROWIへ移行する",
-    "transfer_data_to_this_growi": "別GROWIのデータをこのGROWIへ移行する",
-    "advanced_options": "詳細オプション",
-    "start_transfer": "移行を開始する",
-    "publish_transfer_key": "移行キーを発行する",
-    "transfer_key_limit": "※ 移行キーの有効期限は発行から1時間となります。",
-    "once_transfer_key_used": "※ 移行キーは一度移行に利用するとそれ移行はご利用いただけなくなります。",
-    "transfer_to_growi_cloud": "※ GROWI.cloud への移行を実施する場合はこちらをご確認ください。",
-    "paste_transfer_key": "移行キーをここにペースト"
   }
 }

packages/app/public/static/locales/ja_JP/translation.json

@@ -154,6 +154,7 @@
   "not_allowed_to_see_this_page": "このページは閲覧できません",
   "Confirm": "確認",
   "Successfully requested": "正常に処理を受け付けました",
+  "copied_to_clipboard": "クリップボードにコピーされました。",
   "personal_dropdown": {
     "home": "ホーム",
     "settings": "設定",
@@ -181,6 +182,7 @@
     "link_sharing_is_disabled": "リンクのシェアは無効化されています"
   },
   "installer": {
+    "tab": "アカウント作成",
     "setup": "セットアップ",
     "create_initial_account": "最初のアカウントの作成",
     "initial_account_will_be_administrator_automatically": "初めに作成するアカウントは、自動的に管理者権限が付与されます",
@@ -188,6 +190,19 @@
     "failed_to_install": "GROWI のインストールに失敗しました。再度お試しください。",
     "failed_to_login_after_install": "インストール後、ログインに失敗しました。ログインフォームに遷移しています ..."
   },
+  "g2g_data_transfer": {
+    "tab": "データ移行",
+    "data_transfer": "別GROWIとのデータ移行",
+    "transfer_data_to_another_growi": "このGROWIのデータを別GROWIへ移行する",
+    "transfer_data_to_this_growi": "別GROWIのデータをこのGROWIへ移行する",
+    "advanced_options": "詳細オプション",
+    "start_transfer": "移行を開始する",
+    "publish_transfer_key": "移行キーを発行する",
+    "transfer_key_limit": "※ 移行キーの有効期限は発行から1時間となります。",
+    "once_transfer_key_used": "※ 移行キーは一度移行に利用するとそれ移行はご利用いただけなくなります。",
+    "transfer_to_growi_cloud": "※ GROWI.cloud への移行を実施する場合はこちらをご確認ください。",
+    "paste_transfer_key": "移行キーをここにペースト"
+  },
   "breaking_changes": {
     "v346_using_basic_auth": "現在利用中の Basic 認証機能は、近い将来<strong>廃止されます</strong>。%s から設定を削除してください。"
   },

packages/app/public/static/locales/zh_CN/admin.json

@@ -1002,17 +1002,5 @@
     "ADMIN_SEARCH_CONNECTION": "重试Elasticsearch连接",
     "ADMIN_SEARCH_INDICES_NORMALIZE": "试图重新连接Elasticsearch",
     "ADMIN_SEARCH_INDICES_REBUILD": "重建 Elasticsearch 索引"
-  },
-  "g2g_data_transfer": {
-    "data_transfer": "与另一个GROWI的数据转移",
-    "transfer_data_to_another_growi": "将数据从这个GROWI迁移到另一个GROWI上",
-    "transfer_data_to_this_growi": "将数据从另一个GROWI迁移到这个GROWI上",
-    "advanced_options": "高级选项",
-    "start_transfer": "开始迁移",
-    "publish_transfer_key": "发布迁移密钥",
-    "transfer_key_limit": "迁移密钥在签发后一小时内有效。",
-    "once_transfer_key_used": "一旦迁移密钥被用于迁移，它将不再可用于进一步的迁移。",
-    "transfer_to_growi_cloud": "如果您希望迁移到GROWI.cloud，请点击这里。",
-    "paste_transfer_key": "在这里粘贴过渡键"
   }
 }

packages/app/public/static/locales/zh_CN/translation.json

@@ -164,6 +164,7 @@
   "not_allowed_to_see_this_page": "你不能看到这个页面",
   "Confirm": "确定",
   "Successfully requested": "进程成功接受",
+  "copied_to_clipboard": "它已复制到剪贴板。",
 	"form_validation": {
 		"error_message": "有些值不正确",
 		"required": "%s 是必需的",
@@ -183,6 +184,7 @@
     "link_sharing_is_disabled": "链接共享已被禁用"
   },
 	"installer": {
+    "tab": "创建账户",
 		"setup": "安装",
 		"create_initial_account": "创建初始用户",
 		"initial_account_will_be_administrator_automatically": "初始帐户将自动成为管理员。",
@@ -190,6 +192,19 @@
     "failed_to_install": "GROWI安装失败。请再试一次。",
     "failed_to_login_after_install": "安装后登录失败。重定向到登录表格..."
 	},
+  "g2g_data_transfer": {
+    "tab": "数据迁移",
+    "data_transfer": "与另一个GROWI的数据转移",
+    "transfer_data_to_another_growi": "将数据从这个GROWI迁移到另一个GROWI上",
+    "transfer_data_to_this_growi": "将数据从另一个GROWI迁移到这个GROWI上",
+    "advanced_options": "高级选项",
+    "start_transfer": "开始迁移",
+    "publish_transfer_key": "发布迁移密钥",
+    "transfer_key_limit": "迁移密钥在签发后一小时内有效。",
+    "once_transfer_key_used": "一旦迁移密钥被用于迁移，它将不再可用于进一步的迁移。",
+    "transfer_to_growi_cloud": "如果您希望迁移到GROWI.cloud，请点击这里。",
+    "paste_transfer_key": "在这里粘贴过渡键"
+  },
 	"breaking_changes": {
 		"v346_using_basic_auth": "当前使用的基本身份验证在不久的将来将不再可用。从%s中删除设置"
 	},

packages/app/src/components/Admin/G2GDataTransfer.tsx

@@ -86,28 +86,28 @@ const G2GDataTransfer = (): JSX.Element => {
 
   return (
     <div data-testid="admin-export-archive-data">
-      <h2 className="border-bottom">{t('admin:g2g_data_transfer.transfer_data_to_another_growi')}</h2>
+      <h2 className="border-bottom">{t('g2g_data_transfer.transfer_data_to_another_growi')}</h2>
 
       <button type="button" className="btn btn-outline-secondary mt-4" disabled={isExporting} onClick={() => setExportModalOpen(true)}>
-        {t('admin:g2g_data_transfer.advanced_options')}
+        {t('g2g_data_transfer.advanced_options')}
       </button>
 
       <form onSubmit={transferData}>
         <div className="form-group row mt-3">
           <div className="col-9">
-            <input className="form-control" type="text" placeholder={t('admin:g2g_data_transfer.paste_transfer_key')} />
+            <input className="form-control" type="text" placeholder={t('g2g_data_transfer.paste_transfer_key')} />
           </div>
           <div className="col-3">
-            <button type="submit" className="btn btn-primary w-100">{t('admin:g2g_data_transfer.start_transfer')}</button>
+            <button type="submit" className="btn btn-primary w-100">{t('g2g_data_transfer.start_transfer')}</button>
           </div>
         </div>
       </form>
 
-      <h2 className="border-bottom mt-5">{t('admin:g2g_data_transfer.transfer_data_to_this_growi')}</h2>
+      <h2 className="border-bottom mt-5">{t('g2g_data_transfer.transfer_data_to_this_growi')}</h2>
 
       <div className="form-group row mt-4">
         <div className="col-md-3">
-          <button type="button" className="btn btn-primary w-100" onClick={publishTransferKey}>{t('admin:g2g_data_transfer.publish_transfer_key')}</button>
+          <button type="button" className="btn btn-primary w-100" onClick={publishTransferKey}>{t('g2g_data_transfer.publish_transfer_key')}</button>
         </div>
         <div className="col-md-9">
           <div className="input-group-prepend mx-1">
@@ -118,9 +118,9 @@ const G2GDataTransfer = (): JSX.Element => {
       </div>
 
       <div className="alert alert-warning mt-4">
-        <p className="mb-1">{t('admin:g2g_data_transfer.transfer_key_limit')}</p>
-        <p className="mb-1">{t('admin:g2g_data_transfer.once_transfer_key_used')}</p>
-        <p className="mb-0">{t('admin:g2g_data_transfer.transfer_to_growi_cloud')}</p>
+        <p className="mb-1">{t('g2g_data_transfer.transfer_key_limit')}</p>
+        <p className="mb-1">{t('g2g_data_transfer.once_transfer_key_used')}</p>
+        <p className="mb-0">{t('g2g_data_transfer.transfer_to_growi_cloud')}</p>
       </div>
 
       <SelectCollectionsModal

packages/app/src/components/DataTransferForm.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+
+
+import { useTranslation } from 'react-i18next';
+
+import CustomCopyToClipBoard from './Common/CustomCopyToClipBoard';
+
+const DataTransferForm = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  const [transferKey, setTransferKey] = useState('');
+
+  const publishTransferKey = () => {
+    // 移行キー発行の処理
+    setTransferKey('transferKey');
+  };
+
+  return (
+    <div data-testid="installerForm" className="p-3">
+      <p className="alert alert-success">
+        <strong>{ t('g2g_data_transfer.transfer_data_to_this_growi')}</strong>
+      </p>
+
+      <div className="form-group row mt-3">
+        <div className="col-md-12">
+          <button type="button" className="btn btn-primary w-100" onClick={publishTransferKey}>{t('g2g_data_transfer.publish_transfer_key')}</button>
+        </div>
+        <div className="col-md-12 mt-1">
+          <div className="input-group-prepend">
+            <input className="form-control" type="text" value={transferKey} readOnly />
+            <CustomCopyToClipBoard textToBeCopied={transferKey} message="copied_to_clipboard" />
+          </div>
+        </div>
+      </div>
+
+      <div className="alert alert-warning mt-4">
+        <p className="mb-1">{t('g2g_data_transfer.transfer_key_limit')}</p>
+        <p className="mb-1">{t('g2g_data_transfer.once_transfer_key_used')}</p>
+        <p className="mb-0">{t('g2g_data_transfer.transfer_to_growi_cloud')}</p>
+      </div>
+    </div>
+  );
+};
+
+export default DataTransferForm;

packages/app/src/components/InstallerForm.tsx

@@ -86,7 +86,7 @@ const InstallerForm = memo((): JSX.Element => {
     : <span><i className="icon-fw icon-ban" />{ t('installer.unavaliable_user_id') }</span>;
 
   return (
-    <div data-testid="installerForm" className={`noLogin-dialog p-3 mx-auto${hasErrorClass}`}>
+    <div data-testid="installerForm" className={`p-3${hasErrorClass}`}>
       <div className="row">
         <div className="col-md-12">
           <p className="alert alert-success">

packages/app/src/pages/installer.page.tsx

@@ -1,25 +1,26 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { pagePathUtils } from '@growi/core';
 import {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useTranslation } from 'react-i18next';
 
 import { NoLoginLayout } from '~/components/Layout/NoLoginLayout';
 
+import CustomNavAndContents from '../components/CustomNavigation/CustomNavAndContents';
+import DataTransferForm from '../components/DataTransferForm';
 import InstallerForm from '../components/InstallerForm';
 import {
   useCurrentPagePath, useCsrfToken,
   useAppTitle, useSiteUrl, useConfidential,
 } from '../stores/context';
 
-
 import {
   CommonProps, getNextI18NextConfig, getServerSideCommonProps, useCustomTitle,
 } from './utils/commons';
 
-
 const { isTrashPage: _isTrashPage } = pagePathUtils;
 
 async function injectNextI18NextConfigurations(context: GetServerSidePropsContext, props: Props, namespacesRequired?: string[] | undefined): Promise<void> {
@@ -33,6 +34,24 @@ type Props = CommonProps & {
 };
 
 const InstallerPage: NextPage<Props> = (props: Props) => {
+  const { t } = useTranslation();
+
+  const navTabMapping = useMemo(() => {
+    return {
+      user_infomation: {
+        Icon: () => <i className="icon-fw icon-user"></i>,
+        Content: InstallerForm,
+        i18n: t('installer.tab'),
+        index: 0,
+      },
+      external_accounts: {
+        Icon: () => <i className="icon-fw icon-share-alt"></i>,
+        Content: DataTransferForm,
+        i18n: t('g2g_data_transfer.tab'),
+        index: 1,
+      },
+    };
+  }, [t]);
 
   // commons
   useAppTitle(props.appTitle);
@@ -47,8 +66,8 @@ const InstallerPage: NextPage<Props> = (props: Props) => {
 
   return (
     <NoLoginLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
-      <div id="installer-form-container">
-        <InstallerForm />
+      <div id="installer-form-container" className="noLogin-dialog mx-auto">
+        <CustomNavAndContents navTabMapping={navTabMapping} tabContentClasses={['p-0']} />
       </div>
     </NoLoginLayout>
   );

packages/app/src/styles/theme/_apply-colors.scss

@@ -354,6 +354,22 @@ ul.pagination {
   }
 }
 
+#installer-form-container > .grw-custom-nav-tab {
+  .nav-title {
+    width: 100%;
+    li {
+      width: 100%;
+      text-align: center;
+    }
+  }
+  .nav-link {
+    color: white;
+  }
+  .grw-nav-slide-hr {
+    border-color: white;
+  }
+}
+
 .grw-custom-nav-tab {
   .nav-item {
     &:hover,