Merge pull request #1588 from weseek/reactify/retrieve-personal-settings

Reactify/retrieve personal settings

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

@@ -21,6 +21,10 @@ class BasicInfoSettings extends React.Component {
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
+  componentDidMount() {
+    this.props.personalContainer.retrievePersonalData();
+  }
+
   async onClickSubmit() {
     const { t, personalContainer } = this.props;
 
@@ -36,6 +40,7 @@ class BasicInfoSettings extends React.Component {
 
   render() {
     const { t, personalContainer } = this.props;
+    const { registrationWhiteList } = personalContainer.state;
 
     return (
       <Fragment>
@@ -64,14 +69,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 +115,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 +125,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 +135,9 @@ 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={personalContainer.state.retrieveError != null}>
+              {t('Update')}
+            </button>
           </div>
         </div>
 

src/client/js/services/PersonalContainer.js

@@ -19,11 +19,12 @@ export default class PersonalContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
+      retrieveError: null,
       name: '',
       email: '',
-      registrationWhiteList: [],
+      registrationWhiteList: this.appContainer.getConfig().registrationWhiteList,
       isEmailPublished: false,
-      lang: 'English',
+      lang: 'en-US',
     };
 
   }
@@ -40,9 +41,18 @@ export default class PersonalContainer extends Container {
    */
   async retrievePersonalData() {
     try {
-      // TODO GW-1036 retrieve data
+      const response = await this.appContainer.apiv3.get('/personal-setting/');
+      const { currentUser } = response.data;
+
+      this.setState({
+        name: currentUser.name,
+        email: currentUser.email,
+        isEmailPublished: currentUser.isEmailPublished,
+        lang: currentUser.lang,
+      });
     }
     catch (err) {
+      this.setState({ retrieveError: err.message });
       logger.error(err);
       toastError(new Error('Failed to fetch data'));
     }

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'),

src/server/routes/apiv3/index.js

@@ -13,29 +13,25 @@ module.exports = (crowi) => {
 
   router.use('/healthcheck', require('./healthcheck')(crowi));
 
+  // admin
   router.use('/admin-home', require('./admin-home')(crowi));
-
   router.use('/markdown-setting', require('./markdown-setting')(crowi));
-
   router.use('/app-settings', require('./app-settings')(crowi));
-
   router.use('/customize-setting', require('./customize-setting')(crowi));
-
   router.use('/users', require('./users')(crowi));
-
   router.use('/user-groups', require('./user-group')(crowi));
+  router.use('/export', require('./export')(crowi));
+  router.use('/import', require('./import')(crowi));
+  router.use('/search', require('./search')(crowi));
+
+  router.use('/personal-setting', require('./personal-setting')(crowi));
 
   router.use('/user-group-relations', require('./user-group-relation')(crowi));
 
   router.use('/mongo', require('./mongo')(crowi));
 
-  router.use('/export', require('./export')(crowi));
-
-  router.use('/import', require('./import')(crowi));
-
   router.use('/statistics', require('./statistics')(crowi));
 
-  router.use('/search', require('./search')(crowi));
 
   return router;
 };

src/server/routes/apiv3/personal-setting.js

@@ -0,0 +1,55 @@
+/* eslint-disable no-unused-vars */
+const loggerFactory = require('@alias/logger');
+
+const logger = loggerFactory('growi:routes:apiv3:personal-setting');
+
+const express = require('express');
+
+const router = express.Router();
+
+const { body } = require('express-validator/check');
+const ErrorV3 = require('../../models/vo/error-apiv3');
+
+/**
+ * @swagger
+ *  tags:
+ *    name: PsersonalSetting
+ */
+module.exports = (crowi) => {
+  const loginRequiredStrictly = require('../../middleware/login-required')(crowi);
+  const adminRequired = require('../../middleware/admin-required')(crowi);
+  const csrf = require('../../middleware/csrf')(crowi);
+  const { customizeService } = crowi;
+
+  const { User } = crowi.models;
+
+
+  const { ApiV3FormValidator } = crowi.middlewares;
+
+  /**
+   * @swagger
+   *
+   *    /personal-setting:
+   *      get:
+   *        tags: [PersonalSetting]
+   *        operationId: getPersonalSetting
+   *        summary: /personal-setting
+   *        description: Get personal parameters
+   *        responses:
+   *          200:
+   *            description: params of personal
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    currentUser:
+   *                      type: object
+   *                      description: personal params
+   */
+  router.get('/', loginRequiredStrictly, async(req, res) => {
+    const currentUser = await User.findUserByUsername(req.user.username);
+    return res.apiv3({ currentUser });
+  });
+
+  return router;
+};