Merge pull request #710 from weseek/feat/select-language-in-installer

Feat/select language in installer

src/client/js/components/InstallerForm.js

@@ -1,49 +1,76 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import i18next from 'i18next';
 import { translate } from 'react-i18next';
 
 class InstallerForm extends React.Component {
+
+  changeLanguage(locale) {
+    i18next.changeLanguage(locale);
+  }
+
   render() {
     return (
-      <form role="form" action="/installer/createAdmin" method="post" id="register-form">
-        <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]" defaultValue={this.props.userName} required />
-        </div>
-        <p className="help-block">
-          <span id="help-block-username"></span>
+      <div className="login-dialog p-t-10 p-b-10 col-sm-offset-4 col-sm-4" id="login-dialog">
+        <p className="alert alert-success">
+          <strong>{ this.props.t('installer.create_initial_account') }</strong><br />
+          <small>{ this.props.t('installer.initial_account_will_be_administrator_automatically') }</small>
         </p>
 
-        <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]" defaultValue={ 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]" defaultValue={ this.props.email } required />
-        </div>
-
-        <div className="input-group">
-          <span className="input-group-addon"><i className="icon-lock"></i></span>
-          <input type="password" className="form-control" placeholder={ this.props.t('Password') } name="registerForm[password]" required />
-        </div>
-
-        <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>
-            { this.props.t('Create') }
-          </button>
-        </div>
-
-        <div className="input-group m-t-30 d-flex justify-content-center">
-          <a href="https://growi.org" className="link-growi-org">
-            <span className="growi">GROWI</span>.<span className="org">ORG</span>
-          </a>
-        </div>
-      </form>
+        <form role="form" action="/installer/createAdmin" method="post" id="register-form">
+          <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]" defaultValue={this.props.userName} required />
+          </div>
+          <p className="help-block">
+            <span id="help-block-username"></span>
+          </p>
+
+          <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]" defaultValue={ 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]" defaultValue={ this.props.email } required />
+          </div>
+
+          <div className="input-group">
+            <span className="input-group-addon"><i className="icon-lock"></i></span>
+            <input type="password" className="form-control" placeholder={ this.props.t('Password') } name="registerForm[password]" required />
+          </div>
+
+          <input type="hidden" name="_csrf" value={ this.props.csrf } />
+
+          <div className="input-group m-t-20 m-b-20 mx-auto">
+            <div className="radio radio-primary radio-inline">
+              <input type="radio" id="radioLangEn" name="registerForm[app:globalLang]" value="en-US"
+                     defaultChecked={ true } onClick={() => this.changeLanguage('en-US')} />
+              <label htmlFor="radioLangEn">{ this.props.t('English') }</label>
+            </div>
+            <div className="radio radio-primary radio-inline">
+              <input type="radio" id="radioLangJa" name="registerForm[app:globalLang]" value="ja"
+                     defaultChecked={ false } onClick={() => this.changeLanguage('ja')} />
+              <label htmlFor="radioLangJa">{ this.props.t('Japanese') }</label>
+            </div>
+          </div>
+
+          <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>
+              { this.props.t('Create') }
+            </button>
+          </div>
+
+          <div className="input-group m-t-30 d-flex justify-content-center">
+            <a href="https://growi.org" className="link-growi-org">
+              <span className="growi">GROWI</span>.<span className="org">ORG</span>
+            </a>
+          </div>
+        </form>
+      </div>
     );
   }
 }

src/server/form/register.js

@@ -9,5 +9,6 @@ module.exports = form(
   field('registerForm.email').required(),
   field('registerForm.password').required().is(/^[\x20-\x7F]{6,}$/),
   field('registerForm.googleId'),
-  field('registerForm.googleImage')
+  field('registerForm.googleImage'),
+  field('registerForm[app:globalLang]')
 );

src/server/routes/installer.js

@@ -34,13 +34,16 @@ module.exports = function(crowi, app) {
 
   actions.createAdmin = function(req, res) {
     var registerForm = req.body.registerForm || {};
-    var language = req.language || 'en-US';
 
     if (req.form.isValid) {
       var name = registerForm.name;
       var username = registerForm.username;
       var email = registerForm.email;
       var password = registerForm.password;
+      var language = registerForm['app:globalLang'] || (req.language || 'en-US');
+      // for config.globalLang setting.
+      var langForm = {};
+      langForm['app:globalLang'] = language;
 
       User.createUserByEmailAndPassword(name, username, email, password, language, function(err, userData) {
         if (err) {
@@ -69,6 +72,11 @@ module.exports = function(crowi, app) {
           // create initial pages
           createInitialPages(userData, language);
         });
+
+        // save config settings, and update config cache
+        Config.updateNamespaceByArray('crowi', langForm, function(err, config) {
+          Config.updateConfigCache('crowi', config);
+        });
       });
     }
     else {

src/server/views/installer.html

@@ -44,24 +44,20 @@
       </div>
     </div>
 
-    <div class="login-dialog p-t-10 p-b-10 col-sm-offset-4 col-sm-4" id="login-dialog">
-      <p class="alert alert-success">
-        <strong>{{ t('installer.create_initial_account') }}</strong><br>
-        <small>{{ t('installer.initial_account_will_be_administrator_automatically') }}</small>
-      </p>
-
-      <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 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>{# /.row #}
 
 </div>{# /.main #}
 
+<!-- TODO: エラー表示の日英切替 & GC-303によってエラー自体が表示されなくなっているので修正. -->
+<!-- 作成ボタン押下時のエラー表示の日英対応も可能なら行う. -->
+<!-- https://weseek.myjetbrains.com/youtrack/issue/GC-1305 -->
 <script>
 $(function() {
   $('#register-form input[name="registerForm[username]"]').change(function(e) {