Merge pull request #1247 from weseek/apiV3-StatusActivateForm

Api v3 status activate form

resource/locales/en-US/translation.json

@@ -714,7 +714,8 @@
     "cannot_invite_maximum_users": "Can not invite more than the maximum number of users.",
     "current_users": "Current users:",
     "valid_email": "Valid email address is required",
-    "existing_email": "The following emails already exist"
+    "existing_email": "The following emails already exist",
+    "activate_user_success": "Activating user success"
   },
 
   "user_group_management": {

resource/locales/ja/translation.json

@@ -698,7 +698,8 @@
     "cannot_invite_maximum_users": "ユーザーが上限に達したため招待できません。",
     "current_users": "現在のユーザー数：",
     "valid_email": "メールアドレスを入力してください。",
-    "existing_email": "以下のEmailはすでに存在しています。"
+    "existing_email": "以下のEmailはすでに存在しています。",
+    "activate_user_success": "ユーザーを有効化しました"
   },
 
   "user_group_management": {

src/client/js/components/Admin/Users/StatusActivateButton.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+import AdminUsersContainer from '../../../services/AdminUsersContainer';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+class StatusActivateButton extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.onClickAcceptBtn = this.onClickAcceptBtn.bind(this);
+  }
+
+  async onClickAcceptBtn() {
+    const { t } = this.props;
+
+    try {
+      await this.props.adminUsersContainer.activateUser(this.props.user._id);
+      toastSuccess(t('user_management.activate_user_success'));
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <a className="px-4" onClick={() => { this.onClickAcceptBtn() }}>
+        <i className="icon-fw icon-user-following"></i> { t('user_management.accept') }
+      </a>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const StatusActivateFormWrapper = (props) => {
+  return createSubscribedElement(StatusActivateButton, props, [AppContainer, AdminUsersContainer]);
+};
+
+StatusActivateButton.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminUsersContainer: PropTypes.instanceOf(AdminUsersContainer).isRequired,
+
+  user: PropTypes.object.isRequired,
+};
+
+export default withTranslation()(StatusActivateFormWrapper);

src/client/js/components/Admin/Users/StatusActivateForm.jsx

@@ -1,72 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import { createSubscribedElement } from '../../UnstatedUtils';
-import AppContainer from '../../../services/AppContainer';
-
-class StatusActivateForm extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-
-    };
-
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  // これは将来的にapiにするので。あとボタンにするとデザインがよくなかったので。
-  handleSubmit(event) {
-    $(event.currentTarget).parent().submit();
-  }
-
-  render() {
-    const { t, user, appContainer } = this.props;
-
-    return (
-      <Fragment>
-        {user.status === 1
-          ? (
-            <a>
-              <form action={`/admin/user/${user._id}/activate`} method="post">
-                <input type="hidden" name="_csrf" value={appContainer.csrfToken} />
-                <span onClick={this.handleSubmit}>
-                  <i className="icon-fw icon-user-following"></i> { t('user_management.accept') }
-                </span>
-              </form>
-            </a>
-          )
-          : (
-            <a className="px-4">
-              <form action={`/admin/user/${user._id}/activate`} method="post">
-                <input type="hidden" />
-                <span onClick={this.handleSubmit}>
-                  <i className="icon-fw icon-user-following"></i> { t('user_management.accept') }
-                </span>
-              </form>
-            </a>
-          )
-        }
-      </Fragment>
-    );
-  }
-
-}
-
-/**
- * Wrapper component for using unstated
- */
-const StatusActivateFormWrapper = (props) => {
-  return createSubscribedElement(StatusActivateForm, props, [AppContainer]);
-};
-
-StatusActivateForm.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-
-  user: PropTypes.object.isRequired,
-};
-
-export default withTranslation()(StatusActivateFormWrapper);

src/client/js/components/Admin/Users/UserMenu.jsx

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import StatusActivateForm from './StatusActivateForm';
+import StatusActivateButton from './StatusActivateButton';
 import StatusSuspendedForm from './StatusSuspendedForm';
 import RemoveUserButton from './UserRemoveButton';
 import RemoveAdminForm from './RemoveAdminForm';
@@ -47,7 +47,7 @@ class UserMenu extends React.Component {
             <li className="divider"></li>
             <li className="dropdown-header">{ t('status') }</li>
             <li>
-              {(user.status === 1 || user.status === 3) && <StatusActivateForm user={user} />}
+              {(user.status === 1 || user.status === 3) && <StatusActivateButton user={user} />}
               {user.status === 2 && <StatusSuspendedForm user={user} />}
               {(user.status === 1 || user.status === 3 || user.status === 5) && <RemoveUserButton user={user} />}
             </li>

src/client/js/services/AdminUsersContainer.js

@@ -89,6 +89,18 @@ export default class AdminUsersContainer extends Container {
     await this.setState({ isUserInviteModalShown: !this.state.isUserInviteModalShown });
   }
 
+  /**
+   * Activate user
+   * @memberOf AdminUsersContainer
+   * @param {string} userId
+   * @return {string} username
+   */
+  async activateUser(userId) {
+    const response = await this.appContainer.apiv3.put(`/users/${userId}/activate`);
+    const { username } = response.data.userData;
+    return username;
+  }
+
   /**
    * remove user
    * @memberOf AdminUsersContainer

src/server/models/user.js

@@ -306,13 +306,11 @@ module.exports = function(crowi) {
     return this.save();
   };
 
-  userSchema.methods.statusActivate = function(callback) {
+  userSchema.methods.statusActivate = async function() {
     debug('Activate User', this);
     this.status = STATUS_ACTIVE;
-    this.save((err, userData) => {
-      userEvent.emit('activated', userData);
-      return callback(err, userData);
-    });
+    const userData = await this.save();
+    return userEvent.emit('activated', userData);
   };
 
   userSchema.methods.statusSuspend = function(callback) {

src/server/routes/admin.js

@@ -491,29 +491,6 @@ module.exports = function(crowi, app) {
     });
   };
 
-  actions.user.activate = async function(req, res) {
-    // check user upper limit
-    const isUserCountExceedsUpperLimit = await User.isUserCountExceedsUpperLimit();
-    if (isUserCountExceedsUpperLimit) {
-      req.flash('errorMessage', 'ユーザーが上限に達したため有効化できません。');
-      return res.redirect('/admin/users');
-    }
-
-    const id = req.params.id;
-    User.findById(id, (err, userData) => {
-      userData.statusActivate((err, userData) => {
-        if (err === null) {
-          req.flash('successMessage', `${userData.name}さんのアカウントを有効化しました`);
-        }
-        else {
-          req.flash('errorMessage', '更新に失敗しました。');
-          debug(err, userData);
-        }
-        return res.redirect('/admin/users');
-      });
-    });
-  };
-
   actions.user.suspend = function(req, res) {
     const id = req.params.id;
 

src/server/routes/apiv3/users.js

@@ -119,6 +119,53 @@ module.exports = (crowi) => {
       return res.apiv3Err(new ErrorV3(err));
     }
   });
+  /**
+   * @swagger
+   *
+   *  paths:
+   *    /_api/v3/users/{id}/activate:
+   *      put:
+   *        tags: [Users]
+   *        description: Activate user
+   *        parameters:
+   *          - name: id
+   *            in: path
+   *            required: true
+   *            description: id of activate user
+   *            schema:
+   *              type: string
+   *        responses:
+   *          200:
+   *            description: Activationg user success
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    userData:
+   *                      type: object
+   *                      description: data of activate user
+   */
+  router.put('/:id/activate', loginRequiredStrictly, adminRequired, csrf, async(req, res) => {
+    // check user upper limit
+    const isUserCountExceedsUpperLimit = await User.isUserCountExceedsUpperLimit();
+    if (isUserCountExceedsUpperLimit) {
+      const msg = 'Unable to activate because user has reached limit';
+      logger.error('Error', msg);
+      return res.apiv3Err(new ErrorV3(msg));
+    }
+
+    const { id } = req.params;
+
+    try {
+      const userData = await User.findById(id);
+      await userData.statusActivate();
+      return res.apiv3({ userData });
+    }
+    catch (err) {
+      logger.error('Error', err);
+      return res.apiv3Err(new ErrorV3(err));
+    }
+  });
   /**
    * @swagger
    *

src/server/routes/index.js

@@ -131,7 +131,6 @@ module.exports = function(crowi, app) {
   app.get('/admin/users'                , loginRequiredStrictly , adminRequired , admin.user.index);
   app.post('/admin/user/:id/makeAdmin'  , loginRequiredStrictly , adminRequired , csrf, admin.user.makeAdmin);
   app.post('/admin/user/:id/removeFromAdmin', loginRequiredStrictly , adminRequired , admin.user.removeFromAdmin);
-  app.post('/admin/user/:id/activate'   , loginRequiredStrictly , adminRequired , csrf, admin.user.activate);
   app.post('/admin/user/:id/suspend'    , loginRequiredStrictly , adminRequired , csrf, admin.user.suspend);
   app.post('/admin/user/:id/removeCompletely' , loginRequiredStrictly , adminRequired , csrf, admin.user.removeCompletely);
   // new route patterns from here: