Merge pull request #1966 from weseek/support/reactify-login-page-create-react-component

Support/reactify login page create react component

config/webpack.common.js

@@ -22,7 +22,7 @@ module.exports = (options) => {
     entry: Object.assign({
       'js/app':                       './src/client/js/app',
       'js/admin':                     './src/client/js/admin',
-      'js/installer':                 './src/client/js/installer',
+      'js/nologin':                   './src/client/js/nologin',
       'js/legacy':                    './src/client/js/legacy/crowi',
       'js/legacy-presentation':       './src/client/js/legacy/crowi-presentation',
       'js/plugin':                    './src/client/js/plugin',

src/client/js/components/LoginForm.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { withTranslation } from 'react-i18next';
+
+class LoginForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+    };
+
+  }
+
+  render() {
+
+    return (
+      <div></div>
+    );
+  }
+
+}
+
+LoginForm.propTypes = {
+};
+
+export default withTranslation()(LoginForm);

src/client/js/installer.jsx → src/client/js/nologin.jsx

@@ -5,6 +5,7 @@ import { I18nextProvider } from 'react-i18next';
 import i18nFactory from './util/i18n';
 
 import InstallerForm from './components/InstallerForm';
+import LoginForm from './components/LoginForm';
 
 const i18n = i18nFactory();
 
@@ -22,3 +23,14 @@ if (installerFormElem) {
     installerFormElem,
   );
 }
+
+// render loginForm
+const loginFormElem = document.getElementById('login-form');
+if (loginFormElem) {
+  ReactDOM.render(
+    <I18nextProvider i18n={i18n}>
+      <LoginForm />
+    </I18nextProvider>,
+    loginFormElem,
+  );
+}

src/server/views/installer.html

@@ -30,7 +30,7 @@
 
   {{ cdnStyleTagsByGroup('basis') }}
 
-  <script src="{{ webpack_asset('js/installer.js') }}" defer></script>
+  <script src="{{ webpack_asset('js/nologin.js') }}" defer></script>
 
 </head>
 {% endblock %}

src/server/views/login.html

@@ -111,7 +111,8 @@
     {% set isLocalOrLdapStrategiesEnabled = passportService.isLocalStrategySetup || passportService.isLdapStrategySetup %}
     {% set isExternalAuthCollapsible = isLocalOrLdapStrategiesEnabled %}
     {% set isRegistrationEnabled = passportService.isLocalStrategySetup && getConfig('crowi', 'security:registrationMode') != 'Closed' %}
-
+      <div id="login-form"></div>
+      <!-- [TODO][GW-1772][GW-1863] remove the old login-form -->
       <div class="login-dialog mx-auto flipper {% if req.query.register or req.body.registerForm or isRegistering %}to-flip{% endif %}" id="login-dialog">
 
         <div class="col-12">