retrieve personal data from appContainer

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

@@ -18,9 +18,24 @@ class BasicInfoSettings extends React.Component {
   constructor(appContainer) {
     super();
 
+    this.state = {
+      retrieveError: null,
+    };
+
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
+  componentDidMount() {
+    try {
+      this.props.personalContainer.retrievePersonalData();
+    }
+    catch (err) {
+      logger.error(err);
+      toastError(new Error('Failed to fetch data'));
+      this.setState({ retrieveError: err.message });
+    }
+  }
+
   async onClickSubmit() {
     const { t, personalContainer } = this.props;
 
@@ -36,6 +51,7 @@ class BasicInfoSettings extends React.Component {
 
   render() {
     const { t, personalContainer } = this.props;
+    const { registrationWhiteList } = personalContainer.state;
 
     return (
       <Fragment>
@@ -64,14 +80,14 @@ class BasicInfoSettings extends React.Component {
               onChange={(e) => { personalContainer.changeEmail(e.target.value) }}
             />
           </div>
-          {personalContainer.state.registrationWhiteList.length !== 0 && (
+          {registrationWhiteList.length !== 0 && (
             <div className="col-sm-offset-2 col-sm-10">
-              <p className="help-block">
+              <div className="help-block">
                 {t('page_register.form_help.email')}
                 <ul>
-                  <li><code></code></li>
+                  {registrationWhiteList.map(data => <li key={data}><code>{data}</code></li>)}
                 </ul>
-              </p>
+              </div>
             </div>
           )}
         </div>
@@ -110,8 +126,8 @@ class BasicInfoSettings extends React.Component {
                 type="radio"
                 id="radioLangEn"
                 name="userForm[lang]"
-                checked={personalContainer.state.lang === 'English'}
-                onChange={() => { personalContainer.changeLang('English') }}
+                checked={personalContainer.state.lang === 'en-US'}
+                onChange={() => { personalContainer.changeLang('en-US') }}
               />
               <label htmlFor="radioLangEn">{t('English')}</label>
             </div>
@@ -120,8 +136,8 @@ class BasicInfoSettings extends React.Component {
                 type="radio"
                 id="radioLangJa"
                 name="userForm[lang]"
-                checked={personalContainer.state.lang === 'Japanese'}
-                onChange={() => { personalContainer.changeLang('Japanese') }}
+                checked={personalContainer.state.lang === 'ja'}
+                onChange={() => { personalContainer.changeLang('ja') }}
               />
               <label htmlFor="radioLangJa">{t('Japanese')}</label>
             </div>
@@ -130,7 +146,7 @@ class BasicInfoSettings extends React.Component {
 
         <div className="row my-3">
           <div className="col-xs-offset-4 col-xs-5">
-            <button type="button" className="btn btn-primary" onClick={this.onClickSubmit}>{t('Update')}</button>
+            <button type="button" className="btn btn-primary" onClick={this.onClickSubmit} disabled={this.state.retrieveError != null}>{t('Update')}</button>
           </div>
         </div>
 

src/client/js/services/PersonalContainer.js

@@ -2,8 +2,6 @@ import { Container } from 'unstated';
 
 import loggerFactory from '@alias/logger';
 
-import { toastError } from '../util/apiNotification';
-
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:services:PersonalContainer');
 
@@ -21,9 +19,9 @@ export default class PersonalContainer extends Container {
     this.state = {
       name: '',
       email: '',
-      registrationWhiteList: [],
+      registrationWhiteList: appContainer.getConfig().registrationWhiteList,
       isEmailPublished: false,
-      lang: 'English',
+      lang: 'en-US',
     };
 
   }
@@ -39,13 +37,13 @@ export default class PersonalContainer extends Container {
    * retrieve personal data
    */
   async retrievePersonalData() {
-    try {
-      // TODO GW-1036 retrieve data
-    }
-    catch (err) {
-      logger.error(err);
-      toastError(new Error('Failed to fetch data'));
-    }
+    const currentUser = this.appContainer.getCurrentUser();
+    const {
+      name, email, isEmailPublished, lang,
+    } = currentUser;
+    this.setState({
+      name, email, isEmailPublished, lang,
+    });
   }
 
   /**

src/server/models/config.js

@@ -179,6 +179,7 @@ module.exports = function(crowi) {
         image: crowi.fileUploadService.getIsUploadable(),
         file: crowi.fileUploadService.getFileUploadEnabled(),
       },
+      registrationWhiteList: crowi.configManager.getConfig('crowi', 'security:registrationWhiteList'),
       behaviorType: crowi.configManager.getConfig('crowi', 'customize:behavior'),
       layoutType: crowi.configManager.getConfig('crowi', 'customize:layout'),
       themeType: crowi.configManager.getConfig('crowi', 'customize:theme'),