Merge pull request #720 from weseek/feat/change-language-of-installer-errors

Feat/change language of installer errors

src/client/js/components/InstallerForm.js

@@ -4,42 +4,65 @@ 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 (
-      <div className="login-dialog p-t-10 p-b-10 col-sm-offset-4 col-sm-4" id="login-dialog">
+      <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>
 
         <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>
+          <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} required />
+              name="registerForm[username]" defaultValue={this.props.userName} onBlur={this.checkUserName} required />
           </div>
-          <p className="help-block">
-            <span id="help-block-username"></span>
-          </p>
+          <p className="help-block">{ unavailableUserId }</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 />
+            <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"></i></span>
-            <input type="email" className="form-control" placeholder={ this.props.t('Email') } name="registerForm[email]" defaultValue={ this.props.email } required />
+            <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"></i></span>
-            <input type="password" className="form-control" placeholder={ this.props.t('Password') } name="registerForm[password]" required />
+            <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 } />
@@ -59,7 +82,7 @@ class InstallerForm extends React.Component {
 
           <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>
+              <span className="btn-label"><i className="icon-user-follow" /></span>
               { this.props.t('Create') }
             </button>
           </div>

src/server/views/installer.html

@@ -55,29 +55,5 @@
 
 </div>{# /.main #}
 
-<!-- TODO: エラー表示の日英切替 & GC-303によってエラー自体が表示されなくなっているので修正. -->
-<!-- 作成ボタン押下時のエラー表示の日英対応も可能なら行う. -->
-<!-- https://weseek.myjetbrains.com/youtrack/issue/GC-1305 -->
-<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 %}