send params to client

src/client/js/components/LoginForm.jsx

@@ -10,12 +10,68 @@ class LoginForm extends React.Component {
 
     this.state = {
     };
+
+    this.renderLocalOrLdapLoginForm = this.renderLocalOrLdapLoginForm.bind(this);
+  }
+
+  renderLocalOrLdapLoginForm() {
+    const { t, isLdapStrategySetup } = this.props;
+
+    return (
+      <form role="form" action="/login" method="post">
+
+        <div className="input-group mb-3">
+          <div className="input-group-prepend">
+            <span className="input-group-text"><i className="icon-user"></i></span>
+          </div>
+          <input type="text" className="form-control" placeholder="Username or E-mail" name="loginForm[username]" />
+          {isLdapStrategySetup && (
+            <div className="input-group-append">
+              <small className="input-group-text text-success">
+                <i className="icon-fw icon-check"></i> LDAP
+              </small>
+            </div>
+          )}
+        </div>
+
+        <div className="input-group mb-3">
+          <div className="input-group-prepend">
+            <span className="input-group-text"><i className="icon-lock"></i></span>
+          </div>
+          <input type="password" className="form-control" placeholder="Password" name="loginForm[password]" />
+        </div>
+
+        <div className="input-group justify-content-center d-flex mt-5">
+          <input type="hidden" name="_csrf" value="{{ csrf() }}" />
+          <button type="submit" className="btn btn-fill login px-0 py-2">
+            <div className="eff"></div>
+            <span className="btn-label p-3"><i className="icon-login"></i></span>
+            <span className="btn-label-text p-3">{ t('Sign in') }</span>
+          </button>
+        </div>
+
+      </form>
+    );
   }
 
   render() {
 
+    const {
+      isRegistering,
+      isLocalStrategySetup,
+      isLdapStrategySetup,
+    } = this.props;
+
+    const isLocalOrLdapStrategiesEnabled = isLocalStrategySetup || isLdapStrategySetup;
+    const registerFormClass = isRegistering ? 'to-flip' : '';
     return (
-      <div className="aaaaa"></div>
+      <div className={`login-dialog mx-auto flipper ${registerFormClass}`} id="login-dialog">
+        <div className="row">
+          <div className="col-md-12">
+            { isLocalOrLdapStrategiesEnabled && this.renderLocalOrLdapLoginForm() }
+          </div>
+        </div>
+      </div>
     );
   }
 
@@ -24,6 +80,9 @@ class LoginForm extends React.Component {
 LoginForm.propTypes = {
   // i18next
   t: PropTypes.func.isRequired,
+  isRegistering: PropTypes.bool,
+  isLocalStrategySetup: PropTypes.bool,
+  isLdapStrategySetup: PropTypes.bool,
 };
 
 export default withTranslation()(LoginForm);

src/client/js/login.jsx

@@ -11,9 +11,12 @@ const i18n = i18nFactory();
 // render loginForm
 const loginFormElem = document.getElementById('login-form');
 if (loginFormElem) {
+  const isRegistering = loginFormElem.dataset.isRegistering === 'true';
+  const isLdapStrategySetup = loginFormElem.dataset.isLdapStrategySetup === 'true';
+  const isLocalStrategySetup = loginFormElem.dataset.isLocalStrategySetup === 'true';
   ReactDOM.render(
     <I18nextProvider i18n={i18n}>
-      <LoginForm />
+      <LoginForm isRegistering={isRegistering} isLdapStrategySetup={isLdapStrategySetup} isLocalStrategySetup={isLocalStrategySetup} />
     </I18nextProvider>,
     loginFormElem,
   );

src/server/views/login.html

@@ -28,9 +28,7 @@
 
   <div class="row">
     <div class="col-md-12">
-      <div id="login-form">
-      </div>
-      <!-- <div class="login-header mx-auto">
+      <div class="login-header mx-auto">
         <div class="logo mb-3">{% include 'widget/logo.html' %}</div>
         <h1>{{ appService.getAppTitle() }}</h1>
 
@@ -106,53 +104,25 @@
           </div>
         </div>
       </div>
-      <div class="row mb-5">
+        {% set isLocalStrategySetup = passportService.isLocalStrategySetup %}
+        {% set isLdapStrategySetup = passportService.isLdapStrategySetup %}
+        <!-- {% set isLocalOrLdapStrategiesEnabled = passportService.isLocalStrategySetup || passportService.isLdapStrategySetup %} -->
+        <!-- {% set isExternalAuthCollapsible = isLocalOrLdapStrategiesEnabled %} -->
+        <!-- {% set isRegistrationEnabled = passportService.isLocalStrategySetup && getConfig('crowi', 'security:registrationMode') != 'Closed' %} -->
+
+      <div id="login-form"
+        data-is-local-strategy-setup="{{ isLocalStrategySetup }}"
+        data-is-ldap-strategy-setup="{{ isLdapStrategySetup }}"
+        data-is-is-registering="{{ req.query.register or req.body.registerForm or isRegistering }}"
+      ></div>
+      <!--<div class="row mb-5">
         <div class="col-md-12">
-
-        {% set isLocalOrLdapStrategiesEnabled = passportService.isLocalStrategySetup || passportService.isLdapStrategySetup %}
-        {% set isExternalAuthCollapsible = isLocalOrLdapStrategiesEnabled %}
-        {% set isRegistrationEnabled = passportService.isLocalStrategySetup && getConfig('crowi', 'security:registrationMode') != 'Closed' %}
-
           <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">
               <div class="front">
 
-                {% if isLocalOrLdapStrategiesEnabled %}
-                <form role="form" action="/login" method="post">
-
-                  <div class="input-group mb-3">
-                    <div class="input-group-prepend">
-                      <span class="input-group-text"><i class="icon-user"></i></span>
-                    </div>
-                    <input type="text" class="form-control" placeholder="Username or E-mail" name="loginForm[username]">
-                    {% if passportService.isLdapStrategySetup %}
-                    <div class="input-group-append">
-                      <small class="input-group-text text-success">
-                        <i class="icon-fw icon-check"></i> LDAP
-                      </small>
-                    </div>
-                    {% endif %}
-                  </div>
 
-                  <div class="input-group">
-                    <div class="input-group-prepend">
-                      <span class="input-group-text"><i class="icon-lock"></i></span>
-                    </div>
-                    <input type="password" class="form-control" placeholder="Password" name="loginForm[password]">
-                  </div>
-
-                  <div class="input-group justify-content-center d-flex mt-5">
-                    <input type="hidden" name="_csrf" value="{{ csrf() }}">
-                    <button type="submit" class="btn btn-fill login px-0 py-2">
-                      <div class="eff"></div>
-                      <span class="btn-label p-3"><i class="icon-login"></i></span>
-                      <span class="btn-label-text p-3">{{ t('Sign in') }}</span>
-                    </button>
-                  </div>
-
-                </form>
-                {% endif %}
 
                 {% if (
                   getConfig('crowi', 'security:passport-google:isEnabled') ||
@@ -384,7 +354,7 @@
 
           </div>
         </div>
-      </div> -->
+     </div> -->
   </div>
 </div>