Enable some of Form be carried to Component with html.dataset.

src/client/js/components/InstallerForm.js

@@ -8,7 +8,7 @@ class InstallerForm extends React.Component {
       <div>
         <div className="input-group" id="input-group-username">
           <span className="input-group-addon"><i className="icon-user"></i></span>
-          <input type="text" className="form-control" placeholder={ this.props.t('User ID') } name="registerForm[username]" value="{{ req.body.registerForm.username }}" required />
+          <input type="text" className="form-control" placeholder={ this.props.t('User ID') } name="registerForm[username]" value={ this.props.userName } required />
         </div>
         <p className="help-block">
           <span id="help-block-username"></span>
@@ -16,12 +16,12 @@ class InstallerForm extends React.Component {
 
         <div className="input-group">
           <span className="input-group-addon"><i className="icon-tag"></i></span>
-          <input type="text" className="form-control" placeholder={ this.props.t('Name') } name="registerForm[name]" value="{{ googleName|default(req.body.registerForm.name) }}" required />
+          <input type="text" className="form-control" placeholder={ this.props.t('Name') } name="registerForm[name]" value={ this.props.name } required />
         </div>
 
         <div className="input-group">
           <span className="input-group-addon"><i className="icon-envelope"></i></span>
-          <input type="email" className="form-control" placeholder={ this.props.t('Email') } name="registerForm[email]" value="{{ googleEmail|default(req.body.registerForm.email) }}" required />
+          <input type="email" className="form-control" placeholder={ this.props.t('Email') } name="registerForm[email]" value={ this.props.email } required />
         </div>
 
         <div className="input-group">
@@ -29,7 +29,7 @@ class InstallerForm extends React.Component {
           <input type="password" className="form-control" placeholder={ this.props.t('Password') } name="registerForm[password]" required />
         </div>
 
-        <input type="hidden" name="_csrf" value="{{ csrf() }}" />
+        <input type="hidden" name="_csrf" value={ this.props.csrf } />
         <div className="input-group m-t-30 m-b-20 d-flex justify-content-center">
           <button type="submit" className="fcbtn btn btn-success btn-1b btn-register">
             <span className="btn-label"><i className="icon-user-follow"></i></span>
@@ -42,7 +42,13 @@ class InstallerForm extends React.Component {
 }
 
 InstallerForm.propTypes = {
-  t: PropTypes.func.isRequired,               // i18next
+  // i18next
+  t: PropTypes.func.isRequired,
+  // for input value
+  userName: PropTypes.string,
+  name: PropTypes.string,
+  email: PropTypes.string,
+  csrf: PropTypes.string,
 };
 
 export default translate()(InstallerForm);

src/client/js/installer.js

@@ -12,9 +12,13 @@ const i18n = i18nFactory(userlang);
 // render InstallerForm
 const installerFormElem = document.getElementById('installer-form');
 if (installerFormElem) {
+  const userName = installerFormElem.dataset.userName;
+  const name = installerFormElem.dataset.name;
+  const email = installerFormElem.dataset.email;
+  const csrf = installerFormElem.dataset.csrf;
   ReactDOM.render(
     <I18nextProvider i18n={i18n}>
-      <InstallerForm />
+      <InstallerForm userName={userName} name={name} email={email} csrf={csrf} />
     </I18nextProvider>,
     installerFormElem
   );

src/server/views/installer.html

@@ -55,7 +55,12 @@
       </p>
 
       <form role="form" action="/installer/createAdmin" method="post" id="register-form">
-        <div id='installer-form'></div>
+        <div id='installer-form'
+          data-user-name="{{ req.body.registerForm.username }}"
+          data-name="{{ googleName|default(req.body.registerForm.name) }}"
+          data-email="{{ googleEmail|default(req.body.registerForm.email) }}"
+          data-csrf="{{ csrf() }}">
+        </div>
 
         <div class="input-group m-t-30 d-flex justify-content-center">
           <a href="https://growi.org" class="link-growi-org">