create MaintenanceModeContent component with react

packages/app/src/client/nologin.jsx

@@ -1,17 +1,20 @@
 import React from 'react';
+
 import ReactDOM from 'react-dom';
-import { Provider } from 'unstated';
 import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'unstated';
 
-import { i18nFactory } from './util/i18n';
 
 import AppContainer from '~/client/services/AppContainer';
+import CompleteUserRegistrationForm from '~/components/CompleteUserRegistrationForm';
 
 import InstallerForm from '../components/InstallerForm';
 import LoginForm from '../components/LoginForm';
-import PasswordResetRequestForm from '../components/PasswordResetRequestForm';
+import MaintenanceModeContent from '../components/MaintenanceModeContent';
 import PasswordResetExecutionForm from '../components/PasswordResetExecutionForm';
-import CompleteUserRegistrationForm from '~/components/CompleteUserRegistrationForm';
+import PasswordResetRequestForm from '../components/PasswordResetRequestForm';
+
+import { i18nFactory } from './util/i18n';
 
 const i18n = i18nFactory();
 
@@ -85,10 +88,25 @@ if (loginFormElem) {
   );
 }
 
-// render PasswordResetRequestForm
-const passwordResetRequestFormElem = document.getElementById('password-reset-request-form');
 const appContainer = new AppContainer();
 appContainer.initApp();
+
+// render MaintenanceModeContent
+const maintenanceModeContentElm = document.getElementById('maintenance-mode-content');
+if (maintenanceModeContentElm) {
+
+  ReactDOM.render(
+    <I18nextProvider i18n={i18n}>
+      <Provider inject={[appContainer]}>
+        <MaintenanceModeContent />
+      </Provider>
+    </I18nextProvider>,
+    maintenanceModeContentElm,
+  );
+}
+
+// render PasswordResetRequestForm
+const passwordResetRequestFormElem = document.getElementById('password-reset-request-form');
 if (passwordResetRequestFormElem) {
 
   ReactDOM.render(

packages/app/src/components/MaintenanceModeContent.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
+import AppContainer from '~/client/services/AppContainer';
+
+import { withUnstatedContainers } from './UnstatedUtils';
+
+const MaintenanceModeContent = (props) => {
+  // const { appContainer } = props;
+  const { t } = useTranslation();
+
+
+  return (
+    <>
+      <div className="text-left">
+        <p>
+          <i className="icon-arrow-right"></i>
+          <a href="/admin">{ t('maintenance_mode.admin_page') }</a>
+        </p>
+        {/* {% if not user %} */}
+        <p>
+          <i className="icon-arrow-right"></i>
+          <a href="/login">{ t('maintenance_mode.login') }</a>
+        </p>
+        {/* {% else %} */}
+        <p>
+          <form action="/_api/v3/logout" name="form1" method="post">
+            <i className="icon-arrow-right"></i>
+            {/* <a href="javascript:form1.submit()" id="maintanounse-mode-logout">{ t('maintenance_mode.logout') }</a> */}
+            <a href="" id="maintanounse-mode-logout">{ t('maintenance_mode.logout') }</a>
+          </form>
+        </p>
+        {/* {% endif %} */}
+      </div>
+    </>
+  );
+
+};
+
+MaintenanceModeContent.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};
+
+export default withUnstatedContainers(MaintenanceModeContent, [AppContainer]);

packages/app/src/server/views/maintenance-mode.html

@@ -19,12 +19,9 @@
  {% block fixed-controls %}
  {% endblock %}
 
- <script>
-  document.getElementById('maintanounse-mode-logout').addEventListener('click', ()=>{
-    console.log('aaaaai')
-    location.reload();
-}, false);
-  </script>
+ {% block html_additional_headers %}
+ <script src="{{ webpack_asset('js/nologin.js') }}" defer></script>
+{% endblock %}
 
 {% block layout_main %}
 <div id="main" class="main">
@@ -37,25 +34,7 @@
             <h1 class="text-center">{{ t('maintenance_mode.maintenance_mode') }}</h1>
             <h3>{{ t('maintenance_mode.growi_is_under_maintenance') }}</h3>
             <hr />
-            <div class="text-left">
-              <p>
-                <i class="icon-arrow-right"></i>
-                <a href="/admin">{{ t('maintenance_mode.admin_page') }}</a>
-              </p>
-              {% if not user %}
-                <p>
-                  <i class="icon-arrow-right"></i>
-                  <a href="/login">{{ t('maintenance_mode.login') }}</a>
-                </p>
-              {% else %}
-                <p>
-                  <form action="/_api/v3/logout" name="form1" method="post">
-                    <i class="icon-arrow-right"></i>
-                    <a href="javascript:form1.submit()" id="maintanounse-mode-logout">{{ t('maintenance_mode.logout') }}</a>
-                  </form>
-                </p>
-              {% endif %}
-            </div>
+            <div id="maintenance-mode-content"></div>
           </div>
         </div>
       </div>