Send Post Request From Admin Menu

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

@@ -14,15 +14,26 @@ class AdminMenuForm extends React.Component {
 
     };
 
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  // これは将来的にapiにするので。あとボタンにするとデザインがよくなかったので。
+  handleSubmit(event) {
+    $(event.currentTarget).parent().submit();
   }
 
   render() {
-    const { t } = this.props;
+    const { t, appContainer, user } = this.props;
 
     return (
-      <form className="px-4" action="/admin/user/{{ sUser._id.toString() }}/makeAdmin" method="post">
-        <i className="icon-fw icon-magic-wand"></i>{ t('user_management.give_admin_access') }
-      </form>
+      <a className="px-4">
+        <form action={`/admin/user/${user._id}/makeAdmin`} method="post">
+          <input type="hidden" name="csrf" value={appContainer.csrfToken} />
+          <span onClick={this.handleSubmit}>
+            <i className="icon-fw icon-magic-wand"></i>{ t('user_management.give_admin_access') }
+          </span>
+        </form>
+      </a>
     );
   }
 

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

@@ -14,7 +14,7 @@ class PasswordResetModal extends React.Component {
 
     return (
       <div>
-        {this.props.isResetDone
+        {this.props.isOpenPasswordResetDoneModal
           ? (
             <Modal show={this.props.isOpenPasswordResetDoneModal} onHide={this.props.onHideDoneModal}>
               <Modal.Header className="modal-header" closeButton>
@@ -86,11 +86,9 @@ PasswordResetModal.propTypes = {
   isOpenPasswordResetModal: PropTypes.bool.isRequired,
   temporaryPassword: PropTypes.array.isRequired,
   onHideModal: PropTypes.func.isRequired,
-  isShowDoneModal: PropTypes.func.isRequired,
   isOpenPasswordResetDoneModal: PropTypes.bool.isRequired,
   onHideDoneModal: PropTypes.func.isRequired,
   resetPassword: PropTypes.func.isRequired,
-  isResetDone: PropTypes.bool,
 };
 
 export default withTranslation()(PasswordResetModalWrapper);

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

@@ -5,15 +5,20 @@ import { withTranslation } from 'react-i18next';
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 
-class AdminMenuForm extends React.Component {
+class RemoveAdminForm extends React.Component {
 
   constructor(props) {
     super(props);
 
     this.state = {
-
     };
 
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  // これは将来的にapiにするので。あとボタンにするとデザインがよくなかったので。
+  handleSubmit(event) {
+    $(event.currentTarget).parent().submit();
   }
 
   render() {
@@ -21,14 +26,17 @@ class AdminMenuForm extends React.Component {
     const me = this.props.appContainer.me;
 
     return (
-      <div className="px-4">
+      <span className="px-4">
         {user.username !== me
           ? (
-            <form name="removeadmin" action="/admin/user/+ {user._id} +/removeFromAdmin" method="post">
-              <input type="hidden" />
-              <i type="submit" className="icon-fw icon-user-unfollow mb-2"></i> { t('user_management.remove_admin_access') }
-            </form>
-
+            <a>
+              <form action={`/admin/user/${user._id}/removeFromAdmin`} method="post">
+                <input type="hidden" name="csrf" value={this.props.appContainer.csrfToken} />
+                <span onClick={this.handleSubmit}>
+                  <i className="icon-fw icon-user-unfollow mb-2"></i>{ t('user_management.remove_admin_access') }
+                </span>
+              </form>
+            </a>
           )
           : (
             <div>
@@ -37,7 +45,7 @@ class AdminMenuForm extends React.Component {
             </div>
           )
         }
-      </div>
+      </span>
     );
   }
 
@@ -46,15 +54,15 @@ class AdminMenuForm extends React.Component {
 /**
 * Wrapper component for using unstated
 */
-const AdminMenuFormWrapper = (props) => {
-  return createSubscribedElement(AdminMenuForm, props, [AppContainer]);
+const RemoveAdminFormWrapper = (props) => {
+  return createSubscribedElement(RemoveAdminForm, props, [AppContainer]);
 };
 
-AdminMenuForm.propTypes = {
+RemoveAdminForm.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   user: PropTypes.object.isRequired,
 };
 
-export default withTranslation()(AdminMenuFormWrapper);
+export default withTranslation()(RemoveAdminFormWrapper);

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

@@ -21,7 +21,6 @@ class UserMenu extends React.Component {
     this.state = {
       isOpenPasswordResetModal: false,
       temporaryPassword: [],
-      isResetDone: false,
     };
 
     this.isShow = this.isShow.bind(this);
@@ -47,7 +46,7 @@ class UserMenu extends React.Component {
 
     const res = await appContainer.apiPost('/admin/users.resetPassword', { user_id: user._id });
     if (res.ok) {
-      this.setState({ temporaryPassword: res.newPassword, isOpenPasswordResetDoneModal: true, isResetDone: true });
+      this.setState({ temporaryPassword: res.newPassword, isOpenPasswordResetDoneModal: true });
     }
     else {
       toastError('Failed to reset password');
@@ -67,7 +66,6 @@ class UserMenu extends React.Component {
           onHideModal={this.onHideModal}
           onHideDoneModal={this.onHideDoneModal}
           resetPassword={this.resetPassword}
-          isResetDone={this.state.isResetDone}
         />
         <div className="btn-group admin-user-menu">
           <button type="button" className="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">

src/server/routes/admin.js

@@ -585,7 +585,6 @@ module.exports = function(crowi, app) {
   actions.user.resetPassword = async function(req, res) {
     const id = req.body.user_id;
     const User = crowi.model('User');
-    debug(User);
 
     try {
       const newPassword = await User.resetPasswordByRandomString(id);