Merge pull request #1250 from weseek/apiV3-StatusSuspendedForm

Api v3 status suspended form

resource/locales/en-US/translation.json

@@ -715,7 +715,9 @@
     "current_users": "Current users:",
     "valid_email": "Valid email address is required",
     "existing_email": "The following emails already exist",
-    "activate_user_success": "Activating user success"
+    "activate_user_success": "Activating {{username}} success",
+    "deactivate_user_success": "Deactivating {{username}} success",
+    "remove_user_success": "Removing {{username}} success"
   },
 
   "user_group_management": {

resource/locales/ja/translation.json

@@ -699,7 +699,9 @@
     "current_users": "現在のユーザー数：",
     "valid_email": "メールアドレスを入力してください。",
     "existing_email": "以下のEmailはすでに存在しています。",
-    "activate_user_success": "ユーザーを有効化しました"
+    "activate_user_success": "{{username}}を有効化しました",
+    "deactivate_user_success": "{{username}}を無効化しました",
+    "remove_user_success": "{{username}}を削除しました"
   },
 
   "user_group_management": {

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

@@ -19,8 +19,8 @@ class StatusActivateButton extends React.Component {
     const { t } = this.props;
 
     try {
-      await this.props.adminUsersContainer.activateUser(this.props.user._id);
-      toastSuccess(t('user_management.activate_user_success'));
+      const username = await this.props.adminUsersContainer.activateUser(this.props.user._id);
+      toastSuccess(t('user_management.activate_user_success', { username }));
     }
     catch (err) {
       toastError(err);

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

@@ -0,0 +1,80 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+import AdminUsersContainer from '../../../services/AdminUsersContainer';
+
+class StatusSuspendedButton extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.onClickDeactiveBtn = this.onClickDeactiveBtn.bind(this);
+  }
+
+  async onClickDeactiveBtn() {
+    const { t } = this.props;
+
+    try {
+      const username = await this.props.adminUsersContainer.deactivateUser(this.props.user._id);
+      toastSuccess(t('user_management.deactivate_user_success', { username }));
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }
+
+  renderSuspendedBtn() {
+    const { t } = this.props;
+
+    return (
+      <a className="px-4" onClick={() => { this.onClickDeactiveBtn() }}>
+        <i className="icon-fw icon-ban"></i> { t('user_management.deactivate_account') }
+      </a>
+    );
+  }
+
+  renderSuspendedAlert() {
+    const { t } = this.props;
+
+    return (
+      <div className="px-4">
+        <i className="icon-fw icon-ban mb-2"></i>{ t('user_management.deactivate_account') }
+        <p className="alert alert-danger">{ t('user_management.your_own') }</p>
+      </div>
+    );
+  }
+
+  render() {
+    const { user } = this.props;
+    const me = this.props.appContainer.me;
+
+    return (
+      <Fragment>
+        {user.username !== me ? this.renderSuspendedBtn()
+          : this.renderSuspendedAlert()}
+      </Fragment>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const StatusSuspendedFormWrapper = (props) => {
+  return createSubscribedElement(StatusSuspendedButton, props, [AppContainer, AdminUsersContainer]);
+};
+
+StatusSuspendedButton.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminUsersContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  user: PropTypes.object.isRequired,
+};
+
+export default withTranslation()(StatusSuspendedFormWrapper);

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

@@ -1,69 +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 StatusSuspendedForm 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 } = this.props;
-    const me = this.props.appContainer.me;
-
-    return (
-      <Fragment>
-        {user.username !== me
-          ? (
-            <a>
-              <form action={`/admin/user/${user._id}/suspend`} method="post">
-                <input type="hidden" name="_csrf" value={this.props.appContainer.csrfToken} />
-                <span onClick={this.handleSubmit}>
-                  <i className="icon-fw icon-ban"></i>{ t('user_management.deactivate_account') }
-                </span>
-              </form>
-            </a>
-          )
-          : (
-            <div className="px-4">
-              <i className="icon-fw icon-ban mb-2"></i>{ t('user_management.deactivate_account') }
-              <p className="alert alert-danger">{ t('user_management.your_own') }</p>
-            </div>
-          )
-        }
-      </Fragment>
-    );
-  }
-
-}
-
-/**
- * Wrapper component for using unstated
- */
-const StatusSuspendedFormWrapper = (props) => {
-  return createSubscribedElement(StatusSuspendedForm, props, [AppContainer]);
-};
-
-StatusSuspendedForm.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-
-  user: PropTypes.object.isRequired,
-};
-
-export default withTranslation()(StatusSuspendedFormWrapper);

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

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

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

@@ -16,9 +16,11 @@ class UserRemoveButton extends React.Component {
   }
 
   async onClickDeleteBtn() {
+    const { t } = this.props;
+
     try {
       const username = await this.props.adminUsersContainer.removeUser(this.props.user._id);
-      toastSuccess(`Delete ${username} success`);
+      toastSuccess(t('user_management.remove_user_success', { username }));
     }
     catch (err) {
       toastError(err);

src/client/js/services/AdminUsersContainer.js

@@ -101,6 +101,18 @@ export default class AdminUsersContainer extends Container {
     return username;
   }
 
+  /**
+   * Deactivate user
+   * @memberOf AdminUsersContainer
+   * @param {string} userId
+   * @return {string} username
+   */
+  async deactivateUser(userId) {
+    const response = await this.appContainer.apiv3.put(`/users/${userId}/deactivate`);
+    const { username } = response.data.userData;
+    return username;
+  }
+
   /**
    * remove user
    * @memberOf AdminUsersContainer

src/server/models/user.js

@@ -313,7 +313,7 @@ module.exports = function(crowi) {
     return userEvent.emit('activated', userData);
   };
 
-  userSchema.methods.statusSuspend = function(callback) {
+  userSchema.methods.statusSuspend = async function() {
     debug('Suspend User', this);
     this.status = STATUS_SUSPENDED;
     if (this.email === undefined || this.email === null) { // migrate old data
@@ -325,9 +325,7 @@ module.exports = function(crowi) {
     if (this.username === undefined || this.usename === null) { // migrate old data
       this.username = '-';
     }
-    this.save((err, userData) => {
-      return callback(err, userData);
-    });
+    return this.save();
   };
 
   userSchema.methods.statusDelete = async function() {

src/server/routes/admin.js

@@ -491,23 +491,6 @@ module.exports = function(crowi, app) {
     });
   };
 
-  actions.user.suspend = function(req, res) {
-    const id = req.params.id;
-
-    User.findById(id, (err, userData) => {
-      userData.statusSuspend((err, userData) => {
-        if (err === null) {
-          req.flash('successMessage', `${userData.name}さんのアカウントを利用停止にしました`);
-        }
-        else {
-          req.flash('errorMessage', '更新に失敗しました。');
-          debug(err, userData);
-        }
-        return res.redirect('/admin/users');
-      });
-    });
-  };
-
   // これやったときの relation の挙動未確認
   actions.user.removeCompletely = function(req, res) {
     // ユーザーの物理削除

src/server/routes/apiv3/users.js

@@ -166,6 +166,45 @@ module.exports = (crowi) => {
       return res.apiv3Err(new ErrorV3(err));
     }
   });
+  /**
+   * @swagger
+   *
+   *  paths:
+   *    /_api/v3/users/{id}/deactivate:
+   *      put:
+   *        tags: [Users]
+   *        description: Deactivate user
+   *        parameters:
+   *          - name: id
+   *            in: path
+   *            required: true
+   *            description: id of deactivate user
+   *            schema:
+   *              type: string
+   *        responses:
+   *          200:
+   *            description: Deactivationg user success
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    userData:
+   *                      type: object
+   *                      description: data of deactivate user
+   */
+  router.put('/:id/deactivate', loginRequiredStrictly, adminRequired, csrf, async(req, res) => {
+    const { id } = req.params;
+
+    try {
+      const userData = await User.findById(id);
+      await userData.statusSuspend();
+      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/suspend'    , loginRequiredStrictly , adminRequired , csrf, admin.user.suspend);
   app.post('/admin/user/:id/removeCompletely' , loginRequiredStrictly , adminRequired , csrf, admin.user.removeCompletely);
   // new route patterns from here:
   app.post('/_api/admin/users.resetPassword'  , loginRequiredStrictly , adminRequired , csrf, admin.user.resetPassword);