refactor: full refactor of user management

new-lamassu-admin/src/pages/UserManagement/modals/ResetPasswordModal.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, { useEffect, useState } from 'react'
 
 import Modal from 'src/components/Modal'
 import { Info2, P, Mono } from 'src/components/typography'
@@ -7,22 +9,76 @@ import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard'
 
 import styles from '../UserManagement.styles'
 
+import Input2FAModal from './Input2FAModal'
+
+const CREATE_RESET_PASSWORD_TOKEN = gql`
+  mutation createResetPasswordToken($confirmationCode: String, $userID: ID!) {
+    createResetPasswordToken(
+      confirmationCode: $confirmationCode
+      userID: $userID
+    ) {
+      token
+      user_id
+      expire
+    }
+  }
+`
+
 const useStyles = makeStyles(styles)
 
 const ResetPasswordModal = ({
   showModal,
   toggleModal,
-  resetPasswordURL,
-  user
+  user,
+  requiresConfirmation
 }) => {
   const classes = useStyles()
+  const [resetPasswordUrl, setResetPasswordUrl] = useState('')
+
+  const [createResetPasswordToken, { loading }] = useMutation(
+    CREATE_RESET_PASSWORD_TOKEN,
+    {
+      onCompleted: ({ createResetPasswordToken: token }) => {
+        setResetPasswordUrl(
+          `https://localhost:3001/resetpassword?t=${token.token}`
+        )
+      }
+    }
+  )
+
+  const [confirmation, setConfirmation] = useState(null)
+
+  useEffect(() => {
+    showModal &&
+      (confirmation || !requiresConfirmation) &&
+      createResetPasswordToken({
+        variables: {
+          confirmationCode: confirmation,
+          userID: user?.id
+        }
+      })
+  }, [
+    confirmation,
+    createResetPasswordToken,
+    showModal,
+    user,
+    requiresConfirmation
+  ])
 
   const handleClose = () => {
+    setConfirmation(null)
     toggleModal()
   }
 
   return (
-    showModal && (
+    (showModal && requiresConfirmation && !confirmation && (
+      <Input2FAModal
+        showModal={showModal}
+        handleClose={handleClose}
+        setConfirmation={setConfirmation}
+      />
+    )) ||
+    (showModal && (confirmation || !requiresConfirmation) && !loading && (
       <Modal
         closeOnBackdropClick={true}
         width={500}
@@ -42,13 +98,13 @@ const ResetPasswordModal = ({
                 className={classes.link}
                 buttonClassname={classes.copyToClipboard}
                 wrapperClassname={classes.linkWrapper}>
-                {resetPasswordURL}
+                {resetPasswordUrl}
               </CopyToClipboard>
             </strong>
           </Mono>
         </div>
       </Modal>
-    )
+    ))
   )
 }