refactor: full refactor of user management

new-lamassu-admin/src/pages/UserManagement/modals/ChangeRoleModal.js

@@ -1,5 +1,7 @@
+import { useMutation } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core/styles'
-import React from 'react'
+import gql from 'graphql-tag'
+import React, { useState } from 'react'
 
 import Modal from 'src/components/Modal'
 import { Button } from 'src/components/buttons'
@@ -7,24 +9,65 @@ import { Info2, P } from 'src/components/typography'
 
 import styles from '../UserManagement.styles'
 
+import Input2FAModal from './Input2FAModal'
+
+const CHANGE_USER_ROLE = gql`
+  mutation changeUserRole(
+    $confirmationCode: String
+    $id: ID!
+    $newRole: String!
+  ) {
+    changeUserRole(
+      confirmationCode: $confirmationCode
+      id: $id
+      newRole: $newRole
+    ) {
+      id
+    }
+  }
+`
+
 const useStyles = makeStyles(styles)
 
 const ChangeRoleModal = ({
   showModal,
   toggleModal,
   user,
-  confirm,
-  inputConfirmToggle,
-  setAction
+  requiresConfirmation
 }) => {
   const classes = useStyles()
 
+  const [changeUserRole] = useMutation(CHANGE_USER_ROLE, {
+    refetchQueries: () => ['users']
+  })
+
+  const [confirmation, setConfirmation] = useState(null)
+
+  const submit = () => {
+    changeUserRole({
+      variables: {
+        confirmationCode: confirmation,
+        id: user.id,
+        newRole: user.role === 'superuser' ? 'user' : 'superuser'
+      }
+    })
+    handleClose()
+  }
+
   const handleClose = () => {
+    setConfirmation(null)
     toggleModal()
   }
 
   return (
-    showModal && (
+    (showModal && requiresConfirmation && !confirmation && (
+      <Input2FAModal
+        showModal={showModal}
+        handleClose={handleClose}
+        setConfirmation={setConfirmation}
+      />
+    )) ||
+    (showModal && (
       <Modal
         closeOnBackdropClick={true}
         width={450}
@@ -40,25 +83,12 @@ const ChangeRoleModal = ({
         </P>
         <P className={classes.info}>Do you wish to proceed?</P>
         <div className={classes.footer}>
-          <Button
-            className={classes.submit}
-            onClick={() => {
-              setAction(() =>
-                confirm.bind(null, {
-                  variables: {
-                    id: user.id,
-                    newRole: user.role === 'superuser' ? 'user' : 'superuser'
-                  }
-                })
-              )
-              inputConfirmToggle()
-              handleClose()
-            }}>
+          <Button className={classes.submit} onClick={() => submit()}>
             Confirm
           </Button>
         </div>
       </Modal>
-    )
+    ))
   )
 }