Send Post Request From All Menu Button

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

@@ -28,7 +28,7 @@ class AdminMenuForm extends React.Component {
     return (
       <a className="px-4">
         <form action={`/admin/user/${user._id}/makeAdmin`} method="post">
-          <input type="hidden" name="csrf" value={appContainer.csrfToken} />
+          <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>

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

@@ -13,15 +13,15 @@ class PasswordResetModal extends React.Component {
     const { t, user } = this.props;
 
     return (
-      <div>
-        {this.props.isOpenPasswordResetDoneModal
+      <Modal show={this.props.isPasswordReset} onHide={this.props.onHideModal}>
+        <Modal.Header className="modal-header" closeButton>
+          <Modal.Title>
+            { t('user_management.reset_password') }
+          </Modal.Title>
+        </Modal.Header>
+        {this.props.isPasswordResetDone
           ? (
-            <Modal show={this.props.isOpenPasswordResetDoneModal} onHide={this.props.onHideDoneModal}>
-              <Modal.Header className="modal-header" closeButton>
-                <Modal.Title>
-                  { t('user_management.reset_password') }
-                </Modal.Title>
-              </Modal.Header>
+            <div>
               <Modal.Body>
                 <div>
                   <p className="alert alert-danger">{ t('user_management.password_reset_message') }</p>
@@ -35,36 +35,29 @@ class PasswordResetModal extends React.Component {
               </Modal.Body>
               <Modal.Footer>
                 <div>
-                  <button type="submit" className="btn btn-primary" onClick={this.props.onHideDoneModal}>OK</button>
+                  <button type="submit" className="btn btn-primary" onClick={this.props.onHideModal}>OK</button>
                 </div>
               </Modal.Footer>
-            </Modal>
+            </div>
           )
           : (
-            <Modal show={this.props.isOpenPasswordResetModal} onHide={this.props.onHideModal}>
-              <Modal.Header className="modal-header" closeButton>
-                <Modal.Title>
-                  {t('user_management.reset_password')}
-                </Modal.Title>
-              </Modal.Header>
-              <Modal.Body>
-                <div>
-                  <p>
-                    { t('user_management.password_never_seen') }<br />
-                    <span className="text-danger">{ t('user_management.send_new_password') }</span>
-                  </p>
-                  <p>
-                    { t('user_management.target_user') }: <code>{ user.email }</code>
-                  </p>
-                  <button type="submit" className="btn btn-primary" onClick={this.props.resetPassword}>
-                    { t('user_management.reset_password')}
-                  </button>
-                </div>
-              </Modal.Body>
-            </Modal>
-        )
-      }
-      </div>
+            <Modal.Body>
+              <div>
+                <p>
+                  { t('user_management.password_never_seen') }<br />
+                  <span className="text-danger">{ t('user_management.send_new_password') }</span>
+                </p>
+                <p>
+                  { t('user_management.target_user') }: <code>{ user.email }</code>
+                </p>
+                <button type="submit" className="btn btn-primary" onClick={this.props.resetPassword}>
+                  { t('user_management.reset_password')}
+                </button>
+              </div>
+            </Modal.Body>
+          )
+        }
+      </Modal>
 
     );
   }
@@ -83,11 +76,10 @@ PasswordResetModal.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   user: PropTypes.object.isRequired,
-  isOpenPasswordResetModal: PropTypes.bool.isRequired,
+  isPasswordReset: PropTypes.bool.isRequired,
   temporaryPassword: PropTypes.array.isRequired,
   onHideModal: PropTypes.func.isRequired,
-  isOpenPasswordResetDoneModal: PropTypes.bool.isRequired,
-  onHideDoneModal: PropTypes.func.isRequired,
+  isPasswordResetDone: PropTypes.bool.isRequired,
   resetPassword: PropTypes.func.isRequired,
 };
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -26,12 +26,12 @@ class RemoveAdminForm extends React.Component {
     const me = this.props.appContainer.me;
 
     return (
-      <span className="px-4">
+      <Fragment>
         {user.username !== me
           ? (
             <a>
               <form action={`/admin/user/${user._id}/removeFromAdmin`} method="post">
-                <input type="hidden" name="csrf" value={this.props.appContainer.csrfToken} />
+                <input type="hidden" />
                 <span onClick={this.handleSubmit}>
                   <i className="icon-fw icon-user-unfollow mb-2"></i>{ t('user_management.remove_admin_access') }
                 </span>
@@ -39,13 +39,13 @@ class RemoveAdminForm extends React.Component {
             </a>
           )
           : (
-            <div>
+            <div className="px-4">
               <i className="icon-fw icon-user-unfollow mb-2"></i>{ t('user_management.remove_admin_access') }
               <p className="alert alert-danger">{ t('user_management.cannot_remove') }</p>
             </div>
           )
         }
-      </span>
+      </Fragment>
     );
   }
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -14,31 +14,42 @@ class StatusActivateForm extends React.Component {
 
     };
 
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  // これは将来的にapiにするので。あとボタンにするとデザインがよくなかったので。
+  handleSubmit(event) {
+    $(event.currentTarget).parent().submit();
   }
 
   render() {
-    const { t, user } = this.props;
+    const { t, user, appContainer } = this.props;
 
     return (
-      <div className="px-4">
+      <Fragment>
         {user.status === 1
           ? (
-            <form action="/admin/user/{{ sUserId }}/activate" method="post">
-              <i className="icon-fw icon-user-following"></i> { t('user_management.accept') }
-            </form>
+            <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>
           )
           : (
-            <div>
-              <form action="/admin/user/{{ sUserId }}/activate" method="post">
-                <i className="icon-fw icon-action-redo"></i> { t('Undo') }
-              </form>
-              <form action="/admin/user/{{ sUserId }}/remove" method="post">
-                <i className="icon-fw icon-fire text-danger"></i> { t('Delete') }
+            <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>
-            </div>
+            </a>
           )
         }
-      </div>
+      </Fragment>
     );
   }
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -14,6 +14,12 @@ class StatusSuspendedForm extends React.Component {
 
     };
 
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  // これは将来的にapiにするので。あとボタンにするとデザインがよくなかったので。
+  handleSubmit(event) {
+    $(event.currentTarget).parent().submit();
   }
 
   render() {
@@ -21,21 +27,26 @@ class StatusSuspendedForm extends React.Component {
     const me = this.props.appContainer.me;
 
     return (
-      <div className="px-4">
+      <Fragment>
         {user.username !== me
           ? (
-            <form id="form_suspend_user" action="/admin/user/{{ sUserId }}/suspend" method="post">
-              <i className="icon-fw icon-ban"></i>{ t('user_management.deactivate_account') }
-            </form>
+            <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>
+            <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>
           )
         }
-      </div>
+      </Fragment>
     );
   }
 

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

@@ -19,26 +19,22 @@ class UserMenu extends React.Component {
     super(props);
 
     this.state = {
-      isOpenPasswordResetModal: false,
+      isPasswordReset: false,
+      isPasswordResetDone: false,
       temporaryPassword: [],
     };
 
     this.isShow = this.isShow.bind(this);
     this.onHideModal = this.onHideModal.bind(this);
-    this.onHideDoneModal = this.onHideDoneModal.bind(this);
     this.resetPassword = this.resetPassword.bind(this);
   }
 
   isShow() {
-    this.setState({ isOpenPasswordResetModal: true });
+    this.setState({ isPasswordReset: true });
   }
 
   onHideModal() {
-    this.setState({ isOpenPasswordResetModal: false });
-  }
-
-  onHideDoneModal() {
-    this.setState({ isOpenPasswordResetDoneModal: false });
+    this.setState({ isPasswordReset: false, isPasswordResetDone: false });
   }
 
   async resetPassword() {
@@ -46,7 +42,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 });
+      this.setState({ temporaryPassword: res.newPassword, isPasswordResetDone: true });
     }
     else {
       toastError('Failed to reset password');
@@ -60,11 +56,10 @@ class UserMenu extends React.Component {
       <Fragment>
         <PasswordResetModal
           user={this.props.user}
-          isOpenPasswordResetModal={this.state.isOpenPasswordResetModal}
-          isOpenPasswordResetDoneModal={this.state.isOpenPasswordResetDoneModal}
+          isPasswordReset={this.state.isPasswordReset}
+          isPasswordResetDone={this.state.isPasswordResetDone}
           temporaryPassword={this.state.temporaryPassword}
           onHideModal={this.onHideModal}
-          onHideDoneModal={this.onHideDoneModal}
           resetPassword={this.resetPassword}
         />
         <div className="btn-group admin-user-menu">

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

@@ -14,15 +14,26 @@ class UserRemoveForm 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" id="form_remove_{{ sUserId }}" action="/admin/user/{{ sUserId }}/remove" method="post">
-        <i className="icon-fw icon-fire text-danger"></i> { t('Delete') }
-      </form>
+      <a className="px-4">
+        <form action={`/admin/user/${user._id}/remove`} method="post">
+          <input type="hidden" name="_csrf" value={appContainer.csrfToken} />
+          <span onClick={this.handleSubmit}>
+            <i className="icon-fw icon-fire text-danger"></i> { t('Delete') }
+          </span>
+        </form>
+      </a>
     );
   }