create login container

src/client/js/components/LoginForm.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import loggerFactory from '@alias/logger';
 import { withTranslation } from 'react-i18next';
 
-import AppContainer from '../services/AppContainer';
+import LoginContainer from '../services/LoginContainer';
 import { createSubscribedElement } from './UnstatedUtils';
 
-class LoginForm extends React.Component {
+const logger = loggerFactory('growi:loginForm');
 
+class LoginForm extends React.Component {
   constructor(props) {
     super(props);
 
@@ -25,30 +26,22 @@ class LoginForm extends React.Component {
     this.renderRegisterForm = this.renderRegisterForm.bind(this);
   }
 
-  componentWillMount() {
-    // [TODO][GW-1913] get params from server with axios
-    this.isRegistrationEnabled = true;
-    this.registrationMode = 'Open';
-    this.registrationWhiteList = [];
-    this.isLocalStrategySetup = true;
-    this.isLdapStrategySetup = true;
-    this.objOfIsExternalAuthEnableds = {
-      google: true,
-      github: true,
-      facebook: true,
-      twitter: true,
-      oidc: true,
-      saml: true,
-      basic: true,
-    };
+  async componentDidMount() {
+    const { loginContainer } = this.props;
+
+    try {
+      await loginContainer.retrieveData();
+    } catch (err) {
+      loginContainer.setState({ retrieveError: err.message });
+      logger.error(err);
+    }
   }
 
   // for flip [TODO][GW-1865] use state or react component for flip
   switchForm(e) {
     if (e.target.id === 'register') {
       $('#login-dialog').addClass('to-flip');
-    }
-    else {
+    } else {
       $('#login-dialog').removeClass('to-flip');
     }
   }
@@ -129,7 +122,7 @@ class LoginForm extends React.Component {
         <div id="external-auth" className={`external-auth ${collapsibleClass}`}>
           <div className="spacer"></div>
           <div className="d-flex flex-row justify-content-between flex-wrap">
-            {Object.keys(this.objOfIsExternalAuthEnableds).map((auth) => {
+            {Object.keys(this.objOfIsExternalAuthEnableds).map(auth => {
               if (!this.objOfIsExternalAuthEnableds[auth]) {
                 return;
               }
@@ -201,7 +194,7 @@ class LoginForm extends React.Component {
             <>
               <p className="form-text">{t('page_register.form_help.email')}</p>
               <ul>
-                {this.registrationWhiteList.map((elem) => {
+                {this.registrationWhiteList.map(elem => {
                   return (
                     <li>
                       <code>{{ elem }}</code>
@@ -281,19 +274,19 @@ class LoginForm extends React.Component {
       </div>
     );
   }
-
 }
 
 /**
  * Wrapper component for using unstated
  */
 const LoginFormWrapper = (props) => {
-  return createSubscribedElement(LoginForm, props, [AppContainer]);
+  return createSubscribedElement(LoginForm, props, [LoginContainer]);
 };
 
 LoginForm.propTypes = {
   // i18next
   t: PropTypes.func.isRequired,
+  loginContainer: PropTypes.instanceOf(LoginContainer).isRequired,
   isRegistering: PropTypes.bool,
   username: PropTypes.string,
   name: PropTypes.string,

src/client/js/nologin.jsx

@@ -9,10 +9,11 @@ import InstallerForm from './components/InstallerForm';
 import LoginForm from './components/LoginForm';
 
 import AppContainer from './services/AppContainer';
+import LoginContainer from './services/LoginContainer';
 
-const i18n = i18nFactory();
+const appContainer = new AppContainer();
 
-const nologinContainer = new AppContainer();
+const i18n = i18nFactory();
 
 // render InstallerForm
 const installerFormElem = document.getElementById('installer-form');
@@ -32,6 +33,8 @@ if (installerFormElem) {
 // render loginForm
 const loginFormElem = document.getElementById('login-form');
 if (loginFormElem) {
+  const loginContainer = new LoginContainer(appContainer);
+
   const isRegistering = loginFormElem.dataset.isRegistering === 'true';
   const username = loginFormElem.dataset.username;
   const name = loginFormElem.dataset.name;
@@ -41,7 +44,7 @@ if (loginFormElem) {
 
   ReactDOM.render(
     <I18nextProvider i18n={i18n}>
-      <Provider inject={[nologinContainer]}>
+      <Provider inject={[loginContainer]}>
         <LoginForm isRegistering={isRegistering} username={username} name={name} email={email} csrf={csrf} />
       </Provider>
     </I18nextProvider>,

src/client/js/services/LoginContainer.js

@@ -0,0 +1,64 @@
+import { Container } from 'unstated';
+
+import loggerFactory from '@alias/logger';
+
+import { toastError } from '../util/apiNotification';
+
+const logger = loggerFactory('growi:loginForm');
+
+/**
+ * Service container for login form (LoginForm.jsx)
+ * @extends {Container} unstated Container
+ */
+export default class LoginForm extends Container {
+
+  constructor(appContainer) {
+    super();
+
+    this.appContainer = appContainer;
+
+    this.state = {
+      retrieveError: null,
+      isRegistrationEnabled: false,
+      registrationMode: 'Closed',
+      registrationWhiteList: [],
+      isLocalStrategySetup: false,
+      isLdapStrategySetup: false,
+      objOfIsExternalAuthEnableds: {},
+    };
+
+    this.retrieveData = this.retrieveData.bind(this);
+  }
+
+  /**
+   * Workaround for the mangling in production build to break constructor.name
+   */
+  static getClassName() {
+    return 'LoginContainer';
+  }
+
+  /**
+   * retrieve app sttings data
+   */
+  async retrieveData() {
+    try {
+      const response = await this.appContainer.apiv3.get('/login/');
+      const { data } = response.data;
+
+      this.setState({
+        isRegistrationEnabled: data.isRegistrationEnabled,
+        registrationMode: data.registrationMode,
+        registrationWhiteList: data.registrationWhiteList,
+        isLocalStrategySetup: data.isLocalStrategySetup,
+        isLdapStrategySetup: data.isLdapStrategySetup,
+        objOfIsExternalAuthEnableds: data.objOfIsExternalAuthEnableds,
+      });
+
+    }
+    catch (err) {
+      logger.error(err);
+      toastError(new Error('Failed to fetch data'));
+    }
+  }
+
+}

src/server/routes/apiv3/login.js

@@ -29,9 +29,23 @@ module.exports = (crowi) => {
    *              application/json:
    */
   router.get('/', accessTokenParser, async(req, res) => {
-    console.log('aaaa');
+    const data = {};
     try {
-      return res.apiv3({ content: 'aa' });
+      data.isRegistrationEnabled = true;
+      data.registrationMode = 'Open';
+      data.registrationWhiteList = [];
+      data.isLocalStrategySetup = true;
+      data.isLdapStrategySetup = true;
+      data.objOfIsExternalAuthEnableds = {
+        google: true,
+        github: true,
+        facebook: true,
+        twitter: true,
+        oidc: true,
+        saml: true,
+        basic: true,
+      };
+      return res.apiv3({ data });
     }
     catch (err) {
       logger.error('get-auth-setting-data-failed', err);