move register form

src/client/js/components/LoginForm.jsx

@@ -9,18 +9,24 @@ class LoginForm extends React.Component {
     super(props);
 
     this.isRegistrationEnabled = false;
+    this.registrationMode = 'Closed';
+    this.registrationWhiteList = [];
     this.isLocalStrategySetup = false;
     this.isLdapStrategySetup = false;
     this.objOfIsExternalAuthEnableds = {};
 
+    this.switchForm = this.switchForm.bind(this);
     this.renderLocalOrLdapLoginForm = this.renderLocalOrLdapLoginForm.bind(this);
     this.renderExternalAuthLoginForm = this.renderExternalAuthLoginForm.bind(this);
     this.renderExternalAuthInput = this.renderExternalAuthInput.bind(this);
+    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 = {
@@ -34,15 +40,26 @@ class LoginForm extends React.Component {
     };
   }
 
+  // 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 {
+      $('#login-dialog').removeClass('to-flip');
+    }
+  }
+
   renderLocalOrLdapLoginForm() {
-    const { t } = this.props;
+    const { t, csrf } = 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>
+            <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]" />
           {this.isLdapStrategySetup && (
@@ -56,35 +73,40 @@ class LoginForm extends React.Component {
 
         <div className="input-group mb-3">
           <div className="input-group-prepend">
-            <span className="input-group-text"><i className="icon-lock"></i></span>
+            <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() }}" />
+          <input type="hidden" name="_csrf" value={csrf} />
           <button type="submit" id="login" 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>
+            <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>
     );
   }
 
   renderExternalAuthInput(auth) {
-    const { t } = this.props;
+    const { t, csrf } = this.props;
     return (
       <div key={auth} className="input-group justify-content-center d-flex mt-5">
         {/* [TODO][GW-1913] use onClick, and delete form tag */}
         <form role="form" action={`/passport/${auth}`} className="d-inline-flex flex-column">
-          <input type="hidden" name="_csrf" value="{{ csrf() }}" />
+          <input type="hidden" name="_csrf" value={csrf} />
           <button type="submit" className="btn btn-fill px-0 py-2" id={auth}>
             <div className="eff"></div>
-            <span className="btn-label p-3"><i className={`fa fa-${auth}`}></i></span>
-            <span className="btn-label-text p-3">{ t('Sign in') }</span>
+            <span className="btn-label p-3">
+              <i className={`fa fa-${auth}`}></i>
+            </span>
+            <span className="btn-label-text p-3">{t('Sign in')}</span>
           </button>
           <div className="small text-center">by {auth} Account</div>
         </form>
@@ -129,8 +151,94 @@ class LoginForm extends React.Component {
   }
 
   renderRegisterForm() {
+    const { t, csrf } = this.props;
     return (
-      <div className="back"></div>
+      <div className="back">
+        {this.registrationMode === 'Restricted' && (
+          <p className="alert alert-warning">
+            {t('page_register.notice.restricted')}
+            <br />
+            {t('page_register.notice.restricted_defail')}
+          </p>
+        )}
+        <form role="form" action="/register" method="post" id="register-form">
+          <div className="input-group" id="input-group-username">
+            <div className="input-group-prepend">
+              <span className="input-group-text">
+                <i className="icon-user"></i>
+              </span>
+            </div>
+            <input type="text" className="form-control" placeholder={t('User ID')} name="registerForm[username]" defaultValue={this.props.username} required />
+          </div>
+          <p className="form-text text-danger">
+            <span id="help-block-username"></span>
+          </p>
+
+          <div className="input-group">
+            <div className="input-group-prepend">
+              <span className="input-group-text">
+                <i className="icon-tag"></i>
+              </span>
+            </div>
+            <input type="text" className="form-control" placeholder={t('Name')} name="registerForm[name]" defaultValue={this.props.name} required />
+          </div>
+
+          <div className="input-group">
+            <div className="input-group-prepend">
+              <span className="input-group-text">
+                <i className="icon-envelope"></i>
+              </span>
+            </div>
+            <input type="email" className="form-control" placeholder={t('Email')} name="registerForm[email]" defaultValue={this.props.email} required />
+          </div>
+
+          {this.registrationWhiteList.length > 0 && (
+            <>
+              <p className="form-text">{t('page_register.form_help.email')}</p>
+              <ul>
+                {this.registrationWhiteList.map(elem => {
+                  return (
+                    <li>
+                      <code>{{ elem }}</code>
+                    </li>
+                  );
+                })}
+              </ul>
+            </>
+          )}
+
+          <div className="input-group">
+            <div className="input-group-prepend">
+              <span className="input-group-text">
+                <i className="icon-lock"></i>
+              </span>
+            </div>
+            <input type="password" className="form-control" placeholder={t('Password')} name="registerForm[password]" required />
+          </div>
+
+          <div className="input-group justify-content-center mt-5">
+            <input type="hidden" name="_csrf" value={csrf} />
+            <button type="submit" className="btn btn-fill px-0 py-2" id="register">
+              <div className="eff"></div>
+              <span className="btn-label p-3">
+                <i className="icon-user-follow"></i>
+              </span>
+              <span className="btn-label-text p-3">{t('Sign up')}</span>
+            </button>
+          </div>
+        </form>
+
+        <div className="border-bottom mb-3"></div>
+
+        <div className="row">
+          <div className="text-right col-12 py-1">
+            <a href="#login" id="login" className="link-switch" onClick={this.handleClick}>
+              <i className="icon-fw icon-login"></i>
+              {t('Sign in is here')}
+            </a>
+          </div>
+        </div>
+      </div>
     );
   }
 
@@ -146,31 +254,36 @@ class LoginForm extends React.Component {
         <div className="row mx-0">
           <div className="col-12">
             <div className="front">
-              { isLocalOrLdapStrategiesEnabled && this.renderLocalOrLdapLoginForm() }
-              { isSomeExternalAuthEnabled && this.renderExternalAuthLoginForm() }
+              {isLocalOrLdapStrategiesEnabled && this.renderLocalOrLdapLoginForm()}
+              {isSomeExternalAuthEnabled && this.renderExternalAuthLoginForm()}
+              {this.isRegistrationEnabled && (
+                <div className="row">
+                  <div className="col-12 text-right py-2">
+                    <a href="#register" id="register" className="link-switch" onClick={this.switchForm}>
+                      <i className="ti-check-box"></i> {t('Sign up is here')}
+                    </a>
+                  </div>
+                </div>
+              )}
             </div>
-            {isRegistrationEnabled && this.renderRegisterForm()}
+            {this.isRegistrationEnabled && this.renderRegisterForm()}
+            <a href="https://growi.org" className="link-growi-org pl-3">
+              <span className="growi">GROWI</span>.<span className="org">ORG</span>
+            </a>
           </div>
         </div>
-        {this.isRegistrationEnabled && (
-          <div className="row">
-            <div className="col-12 text-right py-2">
-              <a href="#register" id="register" className="link-switch">
-                <i className="ti-check-box"></i> { t('Sign up is here') }
-              </a>
-            </div>
-          </div>
-        )}
       </div>
     );
   }
-
 }
 
 LoginForm.propTypes = {
   // i18next
   t: PropTypes.func.isRequired,
   isRegistering: PropTypes.bool,
+  username: PropTypes.string,
+  name: PropTypes.string,
+  email: PropTypes.string,
   csrf: PropTypes.string,
 };
 

src/client/js/nologin.jsx

@@ -28,12 +28,19 @@ if (installerFormElem) {
 const loginFormElem = document.getElementById('login-form');
 if (loginFormElem) {
   const isRegistering = loginFormElem.dataset.isRegistering === 'true';
+  const username = loginFormElem.dataset.username;
+  const name = loginFormElem.dataset.name;
+  const email = loginFormElem.dataset.email;
   // [TODO][GW-1913] An AppContainer gets csrf data
   const csrf = loginFormElem.dataset.csrf;
+
   ReactDOM.render(
     <I18nextProvider i18n={i18n}>
       <LoginForm
         isRegistering={isRegistering}
+        username={username}
+        name={name}
+        email={email}
         csrf={csrf}
       />
     </I18nextProvider>,

src/server/views/login.html

@@ -109,92 +109,11 @@
       <!-- [TODO][GW-1913] An AppContainer gets csrf data -->
       <div id="login-form"
         data-is-registering="{{ req.query.register or req.body.registerForm or isRegistering }}"
+        data-username ="{{ req.body.registerForm.username }}"
+        data-name ="{{ req.body.registerForm.name }}"
+        data-email ="{{ req.body.registerForm.email }}"
         data-csrf="{{ csrf() }}"
       ></div>
-
-      <div>
-        <div>
-          {% if isRegistrationEnabled %}
-          <div class="back">
-            {% if getConfig('crowi', 'security:registrationMode') == 'Restricted' %}
-            <p class="alert alert-warning">
-              {{ t('page_register.notice.restricted') }}<br>
-              {{ t('page_register.notice.restricted_defail') }}
-            </p>
-            {% endif %}
-
-            <form role="form" action="/register" method="post" id="register-form">
-              <div class="input-group" id="input-group-username">
-                <div class="input-group-prepend">
-                  <span class="input-group-text"><i class="icon-user"></i></span>
-                </div>
-                <input type="text" class="form-control" placeholder="{{ t('User ID') }}" name="registerForm[username]" value="{{ req.body.registerForm.username }}" required>
-              </div>
-              <p class="form-text text-danger">
-                <span id="help-block-username"></span>
-              </p>
-
-              <div class="input-group">
-                <div class="input-group-prepend">
-                  <span class="input-group-text"><i class="icon-tag"></i></span>
-                </div>
-                <input type="text" class="form-control" placeholder="{{ t('Name') }}" name="registerForm[name]" value="{{ req.body.registerForm.name }}" required>
-              </div>
-
-              <div class="input-group">
-                <div class="input-group-prepend">
-                  <span class="input-group-text"><i class="icon-envelope"></i></span>
-                </div>
-                <input type="email" class="form-control" placeholder="{{ t('Email') }}" name="registerForm[email]" value="{{ req.body.registerForm.email }}" required>
-              </div>
-              {% if getConfig('crowi', 'security:registrationWhiteList') && getConfig('crowi', 'security:registrationWhiteList').length %}
-              <p class="form-text">
-                {{ t('page_register.form_help.email') }}
-              </p>
-              <ul>
-                {% for em in getConfig('crowi', 'security:registrationWhiteList') %}
-                <li><code>{{ em }}</code></li>
-                {% endfor %}
-              </ul>
-              {% endif %}
-
-              <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="{{ t('Password') }}" name="registerForm[password]" required>
-              </div>
-
-              <div class="input-group justify-content-center mt-5">
-                <input type="hidden" name="_csrf" value="{{ csrf() }}">
-                <button type="submit" class="btn btn-fill px-0 py-2" id="register">
-                  <div class="eff"></div>
-                  <span class="btn-label p-3"><i class="icon-user-follow"></i></span>
-                  <span class="btn-label-text p-3">{{ t('Sign up') }}</span>
-                </button>
-              </div>
-
-            </form>
-
-            <div class="border-bottom mb-3"></div>
-
-            <div class="row">
-              <div class="text-right col-12 py-1">
-                <a href="#login" id="login" class="link-switch">
-                  <i class="icon-fw icon-login"></i>{{ t('Sign in is here') }}
-                </a>
-              </div>
-            </div>
-          </div>
-
-          {% endif %} {# if isRegistrationEnabled id false #}
-        </div>
-
-        <a href="https://growi.org" class="link-growi-org pl-3">
-          <span class="growi">GROWI</span>.<span class="org">ORG
-        </a>
-
-      </div>
     </div>
   </div>
 </div>
@@ -221,16 +140,6 @@
 </script>
 {% endif %}
 <script>
-  // login
-  $('#register').on('click', function() {
-    $('#login-dialog').addClass('to-flip');
-    return false;
-  });
-  $('#login').on('click', function() {
-    $('#login-dialog').removeClass('to-flip');
-    return false;
-  });
-
   $('#register-form input[name="registerForm[username]"]').change(function(e) {
     var username = $(this).val();
     $('#login-dialog').removeClass('has-error');