Merge pull request #730 from weseek/feat/select-and-apply-global_lang

Feat/select and apply global lang

src/client/js/components/InstallerForm.js

@@ -1,49 +1,99 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import i18next from 'i18next';
 import { translate } from 'react-i18next';
 
 class InstallerForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isValidUserName: true,
+    };
+    this.checkUserName = this.checkUserName.bind(this);
+  }
+
+  checkUserName(event) {
+    const axios = require('axios').create({
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest'
+      },
+      responseType: 'json'
+    });
+    axios.get('/_api/check_username', {params: {username: event.target.value}})
+      .then((res) => this.setState({ isValidUserName: res.data.valid }));
+  }
+
+  changeLanguage(locale) {
+    i18next.changeLanguage(locale);
+  }
+
   render() {
+    const hasErrorClass = this.state.isValidUserName ? '' : ' has-error';
+    const unavailableUserId = this.state.isValidUserName ? '' : <span><i className="icon-fw icon-ban" />{ this.props.t('installer.unavaliable_user_id') }</span>;
     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' + hasErrorClass}>
+        <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' + hasErrorClass}>
+            <span className="input-group-addon"><i className="icon-user" /></span>
+            <input type="text" className="form-control" placeholder={ this.props.t('User ID') }
+              name="registerForm[username]" defaultValue={this.props.userName} onBlur={this.checkUserName} required />
+          </div>
+          <p className="help-block">{ unavailableUserId }</p>
+
+          <div className="input-group">
+            <span className="input-group-addon"><i className="icon-tag" /></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" /></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" /></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" /></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,44 +44,16 @@
       </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 #}
 
-<script>
-$(function() {
-  $('#register-form input[name="registerForm[username]"]').change(function(e) {
-    var username = $(this).val();
-    $('#login-dialog').removeClass('has-error');
-    $('#input-group-username').removeClass('has-error');
-    $('#help-block-username').html("");
-
-    $.getJSON('/_api/check_username', {username: username}, function(json) {
-      if (!json.valid) {
-        $('#help-block-username').html(
-          '<i class="icon-fw icon-ban"></i>{{ t("installer.unavaliable_user_id") }}'
-        );
-        $('#login-dialog').addClass('has-error');
-        $('#input-group-username').addClass('has-error');
-      }
-    });
-  });
-});
-</script>
-
 {% endblock %}