Merge pull request #698 from weseek/feat/divide-lang-case

Feat/divide lang case

config/webpack.common.js

@@ -20,6 +20,7 @@ module.exports = (options) => {
     mode: options.mode,
     entry: Object.assign({
       'js/app':                       './src/client/js/app',
+      'js/installer':                 './src/client/js/installer',
       'js/legacy':                    './src/client/js/legacy/crowi',
       'js/legacy-admin':              './src/client/js/legacy/crowi-admin',
       'js/legacy-presentation':       './src/client/js/legacy/crowi-presentation',

resource/locales/ja/translation.json

@@ -118,6 +118,13 @@
   "Deleted Pages": "削除済みページ",
   "Sign out": "ログアウト",
 
+  "installer": {
+    "setup": "セットアップ",
+    "create_initial_account": "最初のアカウントの作成",
+    "initial_account_will_be_administrator_automatically": "初めに作成するアカウントは、自動的に管理者権限が付与されます",
+    "unavaliable_user_id": "このユーザーIDは利用できません。"
+  },
+
   "page_register": {
     "notice": {
        "restricted": "この Wiki への新規登録は制限されています。",

src/client/js/components/InstallerForm.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+
+class InstallerForm extends React.Component {
+  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>
+        </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>
+    );
+  }
+}
+
+InstallerForm.propTypes = {
+  // 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

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { I18nextProvider } from 'react-i18next';
+
+import i18nFactory from './i18n';
+
+import InstallerForm    from './components/InstallerForm';
+
+const userlang = $('body').data('userlang');
+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 userName={userName} name={name} email={email} csrf={csrf} />
+    </I18nextProvider>,
+    installerFormElem
+  );
+}

src/server/views/installer.html

@@ -2,9 +2,7 @@
 
 {% block html_base_css %}installer nologin{% endblock %}
 
-{% block html_title %}{{ customTitle('セットアップ') }}{% endblock %}
-
-
+{% block html_title %}{{ customTitle(t('installer.setup')) }}{% endblock %}
 
 {#
  # Remove default contents
@@ -18,7 +16,10 @@
 {% block sidebar %}
 {% endblock %}
 
-
+{% block html_additional_headers %}
+  {% parent %}
+  <script src="{{ webpack_asset('js/installer.js') }}" defer></script>
+{% endblock %}
 
 {% block layout_main %}
 
@@ -45,53 +46,16 @@
 
     <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>最初のアカウントの作成</strong><br>
-        <small>初めに作成するアカウントは、自動的に管理者権限が付与されます</small>
-      </p>
-
-      <p class="alert alert-warning p-b-10 p-t-10">
-        <small>現在の言語設定: {{ appGlobalLang() }}</small>
+        <strong>{{ t('installer.create_initial_account') }}</strong><br>
+        <small>{{ t('installer.initial_account_will_be_administrator_automatically') }}</small>
       </p>
 
-      <form role="form" action="/installer/createAdmin" method="post" id="register-form">
-
-        <div class="input-group" id="input-group-username">
-          <span class="input-group-addon"><i class="icon-user"></i></span>
-          <input type="text" class="form-control" placeholder="{{ t('User ID') }}" name="registerForm[username]" value="{{ req.body.registerForm.username }}" required>
-        </div>
-        <p class="help-block">
-          <span id="help-block-username"></span>
-        </p>
-
-        <div class="input-group">
-          <span class="input-group-addon"><i class="icon-tag"></i></span>
-          <input type="text" class="form-control" placeholder="{{ t('Name') }}" name="registerForm[name]" value="{{ googleName|default(req.body.registerForm.name) }}" required>
-        </div>
-
-        <div class="input-group">
-          <span class="input-group-addon"><i class="icon-envelope"></i></span>
-          <input type="email" class="form-control" placeholder="{{ t('Email') }}" name="registerForm[email]" value="{{ googleEmail|default(req.body.registerForm.email) }}" required>
-        </div>
-
-        <div class="input-group">
-          <span class="input-group-addon"><i class="icon-lock"></i></span>
-          <input type="password" class="form-control" placeholder="{{ t('Password') }}" name="registerForm[password]" required>
-        </div>
-
-        <input type="hidden" name="_csrf" value="{{ csrf() }}">
-        <div class="input-group m-t-30 m-b-20 d-flex justify-content-center">
-          <button type="submit" class="fcbtn btn btn-success btn-1b btn-register">
-            <span class="btn-label"><i class="icon-user-follow"></i></span>
-            {{ t('Create') }}
-          </button>
-        </div>
-
-        <div class="input-group m-t-30 d-flex justify-content-center">
-          <a href="https://growi.org" class="link-growi-org">
-            <span class="growi">GROWI</span>.<span class="org">ORG
-          </a>
-        </div>
-      </form>
+      <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>
 
   </div>{# /.row #}
@@ -109,7 +73,7 @@ $(function() {
     $.getJSON('/_api/check_username', {username: username}, function(json) {
       if (!json.valid) {
         $('#help-block-username').html(
-          '<i class="icon-fw icon-ban"></i>このユーザーIDは利用できません。'
+          '<i class="icon-fw icon-ban"></i>{{ t("installer.unavaliable_user_id") }}'
         );
         $('#login-dialog').addClass('has-error');
         $('#input-group-username').addClass('has-error');