data transfer form on installer page

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="noLogin-dialog p-3 mx-auto">
+      <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="admin:slack_integration.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/pages/installer.page.tsx

@@ -1,13 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { pagePathUtils } from '@growi/core';
 import {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import {
+  Nav, NavItem, NavLink,
+} from 'reactstrap';
 
 import { NoLoginLayout } from '~/components/Layout/NoLoginLayout';
 
+import DataTransferForm from '../components/DataTransferForm';
 import InstallerForm from '../components/InstallerForm';
 import {
   useCurrentPagePath, useCsrfToken,
@@ -33,6 +37,7 @@ type Props = CommonProps & {
 };
 
 const InstallerPage: NextPage<Props> = (props: Props) => {
+  const [isCreateUserTab, setCreateUserTab] = useState(true);
 
   // commons
   useAppTitle(props.appTitle);
@@ -48,7 +53,26 @@ const InstallerPage: NextPage<Props> = (props: Props) => {
   return (
     <NoLoginLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
       <div id="installer-form-container">
-        <InstallerForm />
+        <div className="noLogin-dialog grw-custom-nav-tab mx-auto">
+          <Nav className="nav-title text-center w-100">
+            <NavItem className={`col-6 p-0 ${isCreateUserTab ? 'active' : ''}`}>
+              <NavLink type="button" className="text-white" onClick={() => setCreateUserTab(true)}>
+              アカウント作成
+              </NavLink>
+            </NavItem>
+            <NavItem className={`col-6 p-0 ${isCreateUserTab ? '' : 'active'}`}>
+              <NavLink type="button" className="text-white" onClick={() => setCreateUserTab(false)}>
+              データ移行
+              </NavLink>
+            </NavItem>
+          </Nav>
+          <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: '50%', marginLeft: isCreateUserTab ? '0%' : '50%', borderColor: 'white' }} />
+        </div>
+        {isCreateUserTab ? (
+          <InstallerForm />
+        ) : (
+          <DataTransferForm />
+        )}
       </div>
     </NoLoginLayout>
   );

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

@@ -379,6 +379,9 @@ ul.pagination {
 
   .grw-nav-slide-hr {
     border-color: $color-link;
+    border-top: 0rem;
+    border-bottom: 3px solid;
+    transition: 0.3s ease-in-out;
   }
 }