I18N verification extension installerForm && AppSettings && BasicInfoSettings && user validate

resource/locales/en-US/_conf.json

@@ -0,0 +1,3 @@
+{
+  "name": "English"
+}

resource/locales/ja/_conf.json

@@ -0,0 +1,3 @@
+{
+  "name": "日本語"
+}

resource/locales/zh-CN/_conf.json

@@ -0,0 +1,3 @@
+{
+  "name": "简体中文"
+}

src/client/js/components/Admin/App/AppSetting.jsx

@@ -26,16 +26,16 @@ class AppSetting extends React.Component {
     try {
       await adminAppContainer.updateAppSettingHandler();
       toastSuccess(t('toaster.update_successed', { target: t('App Settings') }));
-    }
-    catch (err) {
+    } catch (err) {
       toastError(err);
       logger.error(err);
     }
   }
 
   render() {
-    const { t, adminAppContainer } = this.props;
-
+    const { t, adminAppContainer, appContainer } = this.props;
+    const locales = appContainer.locales;
+    const languages = Object.keys(locales);
     return (
       <React.Fragment>
         <div className="form-group row">
@@ -45,7 +45,9 @@ class AppSetting extends React.Component {
               className="form-control"
               type="text"
               defaultValue={adminAppContainer.state.title || ''}
-              onChange={(e) => { adminAppContainer.changeTitle(e.target.value) }}
+              onChange={(e) => {
+                adminAppContainer.changeTitle(e.target.value);
+              }}
               placeholder="GROWI"
             />
             <p className="form-text text-muted">{t('admin:app_setting.sitename_change')}</p>
@@ -53,13 +55,16 @@ class AppSetting extends React.Component {
         </div>
 
         <div className="row form-group mb-5">
-          <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.confidential_name')}</label>
+          <label
+            className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.confidential_name')}</label>
           <div className="col-md-6">
             <input
               className="form-control"
               type="text"
               defaultValue={adminAppContainer.state.confidential || ''}
-              onChange={(e) => { adminAppContainer.changeConfidential(e.target.value) }}
+              onChange={(e) => {
+                adminAppContainer.changeConfidential(e.target.value);
+              }}
               placeholder={t('admin:app_setting.confidential_example')}
             />
             <p className="form-text text-muted">{t('admin:app_setting.header_content')}</p>
@@ -67,37 +72,33 @@ class AppSetting extends React.Component {
         </div>
 
         <div className="row form-group mb-5">
-          <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.default_language')}</label>
+          <label
+            className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.default_language')}</label>
           <div className="col-md-6">
-            <div className="custom-control custom-radio custom-control-inline">
-              <input
-                type="radio"
-                id="radioLangEn"
-                className="custom-control-input"
-                name="globalLang"
-                value="en-US"
-                checked={adminAppContainer.state.globalLang === 'en-US'}
-                onChange={(e) => { adminAppContainer.changeGlobalLang(e.target.value) }}
-              />
-              <label className="custom-control-label" htmlFor="radioLangEn">{t('English')}</label>
-            </div>
-            <div className="custom-control custom-radio custom-control-inline">
-              <input
-                type="radio"
-                id="radioLangJa"
-                className="custom-control-input"
-                name="globalLang"
-                value="ja"
-                checked={adminAppContainer.state.globalLang === 'ja'}
-                onChange={(e) => { adminAppContainer.changeGlobalLang(e.target.value) }}
-              />
-              <label className="custom-control-label" htmlFor="radioLangJa">{t('Japanese')}</label>
-            </div>
+            {
+              languages.map((lan)=>(
+                <div key={lan} className="custom-control custom-radio custom-control-inline">
+                  <input
+                    type="radio"
+                    id={'radioLang' + lan}
+                    className="custom-control-input"
+                    name="globalLang"
+                    value={lan}
+                    checked={adminAppContainer.state.globalLang === lan}
+                    onChange={(e) => {
+                      adminAppContainer.changeGlobalLang(e.target.value);
+                    }}
+                  />
+                  <label className="custom-control-label" htmlFor={'radioLang' + lan}>{locales[lan]["_conf"]["name"]}</label>
+                </div>
+              ))
+            }
           </div>
         </div>
 
         <div className="row form-group mb-5">
-          <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.file_uploading')}</label>
+          <label
+            className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.file_uploading')}</label>
           <div className="col-md-6">
             <div className="custom-control custom-checkbox custom-checkbox-info">
               <input
@@ -106,9 +107,12 @@ class AppSetting extends React.Component {
                 className="custom-control-input"
                 name="fileUpload"
                 checked={adminAppContainer.state.fileUpload}
-                onChange={(e) => { adminAppContainer.changeFileUpload(e.target.checked) }}
+                onChange={(e) => {
+                  adminAppContainer.changeFileUpload(e.target.checked);
+                }}
               />
-              <label className="custom-control-label" htmlFor="cbFileUpload">{t('admin:app_setting.enable_files_except_image')}</label>
+              <label className="custom-control-label"
+                     htmlFor="cbFileUpload">{t('admin:app_setting.enable_files_except_image')}</label>
             </div>
 
             <p className="form-text text-muted">
@@ -117,7 +121,7 @@ class AppSetting extends React.Component {
           </div>
         </div>
 
-        <AdminUpdateButtonRow onClick={this.submitHandler} disabled={adminAppContainer.state.retrieveError != null} />
+        <AdminUpdateButtonRow onClick={this.submitHandler} disabled={adminAppContainer.state.retrieveError != null}/>
       </React.Fragment>
     );
   }

src/client/js/components/InstallerForm.jsx

@@ -44,6 +44,9 @@ class InstallerForm extends React.Component {
       : <span><i className="icon-fw icon-ban" />{ this.props.t('installer.unavaliable_user_id') }</span>;
 
     const checkedBtn = this.state.checkedBtn;
+    const {i18n}=this.props;
+    const locales = i18n.options.resources;
+    const languages = Object.keys(locales);
 
     return (
       <div className={`login-dialog p-3 mx-auto${hasErrorClass}`}>
@@ -58,36 +61,24 @@ class InstallerForm extends React.Component {
         <div className="row">
           <form role="form" action="/installer" method="post" id="register-form" className="col-md-12">
             <div className="form-group text-center">
-              <div className="custom-control custom-radio custom-control-inline">
-                <input
-                  type="radio"
-                  className="custom-control-input"
-                  id="register-form-check-en"
-                  name="registerForm[app:globalLang]"
-                  value="en-US"
-                  checked={checkedBtn === 'en-US'}
-                  inline
-                  onChange={(e) => { if (e.target.checked) { this.changeLanguage('en-US') } }}
-                />
-                <label className="custom-control-label" htmlFor="register-form-check-en">
-                  English
-                </label>
-              </div>
-              <div className="custom-control custom-radio custom-control-inline">
-                <input
-                  type="radio"
-                  className="custom-control-input"
-                  id="register-form-check-jp"
-                  name="registerForm[app:globalLang]"
-                  value="ja"
-                  checked={checkedBtn === 'ja'}
-                  inline
-                  onChange={(e) => { if (e.target.checked) { this.changeLanguage('ja') } }}
-                />
-                <label className="custom-control-label" htmlFor="register-form-check-jp">
-                  日本語
-                </label>
-              </div>
+              {
+                languages.map(lan=>(
+                  <div key={lan} className="custom-control custom-radio custom-control-inline">
+                    <input
+                      type="radio"
+                      className="custom-control-input"
+                      id={'register-form-check-'+lan}
+                      name="registerForm[app:globalLang]"
+                      value={lan}
+                      checked={checkedBtn === lan}
+                      onChange={(e) => { if (e.target.checked) { this.changeLanguage(lan) } }}
+                    />
+                    <label className="custom-control-label" htmlFor={'register-form-check-'+lan}>
+                      {locales[lan]["_conf"]["name"]}
+                    </label>
+                  </div>
+                ))
+              }
             </div>
 
             <div className={`input-group mb-3${hasErrorClass}`}>

src/client/js/components/Me/BasicInfoSettings.jsx

@@ -39,8 +39,10 @@ class BasicInfoSettings extends React.Component {
   }
 
   render() {
-    const { t, personalContainer } = this.props;
+    const { t, personalContainer, appContainer } = this.props;
     const { registrationWhiteList } = personalContainer.state;
+    const locales = appContainer.locales;
+    const languages = Object.keys(locales);
 
     return (
       <Fragment>
@@ -110,28 +112,21 @@ class BasicInfoSettings extends React.Component {
         <div className="form-group row">
           <label className="text-left text-md-right col-md-3 col-form-label">{t('Language')}</label>
           <div className="col-md-6">
-            <div className="custom-control custom-radio custom-control-inline">
-              <input
-                type="radio"
-                id="radioLangEn"
-                className="custom-control-input"
-                name="userForm[lang]"
-                checked={personalContainer.state.lang === 'en-US'}
-                onChange={() => { personalContainer.changeLang('en-US') }}
-              />
-              <label className="custom-control-label" htmlFor="radioLangEn">{t('English')}</label>
-            </div>
-            <div className="custom-control custom-radio custom-control-inline">
-              <input
-                type="radio"
-                id="radioLangJa"
-                className="custom-control-input"
-                name="userForm[lang]"
-                checked={personalContainer.state.lang === 'ja'}
-                onChange={() => { personalContainer.changeLang('ja') }}
-              />
-              <label className="custom-control-label" htmlFor="radioLangJa">{t('Japanese')}</label>
-            </div>
+            {
+              languages.map(lan=>(
+                <div key={lan} className="custom-control custom-radio custom-control-inline">
+                  <input
+                    type="radio"
+                    id={'radioLang'+lan}
+                    className="custom-control-input"
+                    name="userForm[lang]"
+                    checked={personalContainer.state.lang === lan}
+                    onChange={() => { personalContainer.changeLang(lan) }}
+                  />
+                  <label className="custom-control-label" htmlFor={'radioLang'+lan}>{locales[lan]["_conf"]['name']}</label>
+                </div>
+              ))
+            }
           </div>
         </div>
 

src/server/models/user.js

@@ -59,7 +59,7 @@ module.exports = function(crowi) {
     lang: {
       type: String,
       // eslint-disable-next-line no-eval
-      enum: Object.keys(getLanguageLabels()).map((k) => { return eval(k) }),
+      enum: crowi.locales,
       default: LANG_EN_US,
     },
     status: {