118 lines
3.2 KiB
JavaScript
118 lines
3.2 KiB
JavaScript
import { useMutation, gql } from '@apollo/client'
|
|
import { makeStyles } from '@mui/styles'
|
|
import React, { useEffect, useState } from 'react'
|
|
import ErrorMessage from 'src/components/ErrorMessage'
|
|
import Modal from 'src/components/Modal'
|
|
import { Info2, P, Mono } from 'src/components/typography'
|
|
import CopyToClipboard from 'src/components/CopyToClipboard.jsx'
|
|
|
|
import { urlResolver } from 'src/utils/urlResolver'
|
|
|
|
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 = ({
|
|
state,
|
|
dispatch,
|
|
user,
|
|
requiresConfirmation
|
|
}) => {
|
|
const classes = useStyles()
|
|
const [resetPasswordUrl, setResetPasswordUrl] = useState('')
|
|
|
|
const [createResetPasswordToken, { loading, error }] = useMutation(
|
|
CREATE_RESET_PASSWORD_TOKEN,
|
|
{
|
|
onCompleted: ({ createResetPasswordToken: token }) => {
|
|
setResetPasswordUrl(urlResolver(`/resetpassword?t=${token.token}`))
|
|
}
|
|
}
|
|
)
|
|
|
|
const [confirmation, setConfirmation] = useState(null)
|
|
|
|
useEffect(() => {
|
|
state.showResetPasswordModal &&
|
|
(confirmation || !requiresConfirmation) &&
|
|
createResetPasswordToken({
|
|
variables: {
|
|
confirmationCode: confirmation,
|
|
userID: user?.id
|
|
}
|
|
})
|
|
}, [
|
|
confirmation,
|
|
createResetPasswordToken,
|
|
requiresConfirmation,
|
|
state.showResetPasswordModal,
|
|
user?.id
|
|
])
|
|
|
|
const handleClose = () => {
|
|
setConfirmation(null)
|
|
dispatch({
|
|
type: 'close',
|
|
payload: 'showResetPasswordModal'
|
|
})
|
|
}
|
|
|
|
return (
|
|
(state.showResetPasswordModal && requiresConfirmation && !confirmation && (
|
|
<Input2FAModal
|
|
showModal={state.showResetPasswordModal}
|
|
handleClose={handleClose}
|
|
setConfirmation={setConfirmation}
|
|
/>
|
|
)) ||
|
|
(state.showResetPasswordModal &&
|
|
(confirmation || !requiresConfirmation) &&
|
|
!loading && (
|
|
<Modal
|
|
closeOnBackdropClick={true}
|
|
width={500}
|
|
height={180}
|
|
handleClose={handleClose}
|
|
open={true}>
|
|
<Info2 className={classes.modalTitle}>
|
|
Reset password for {user.username}
|
|
</Info2>
|
|
<P className={classes.info}>
|
|
Safely share this link with {user.username} for a password reset.
|
|
</P>
|
|
{!error && (
|
|
<div className={classes.addressWrapper}>
|
|
<Mono className={classes.address}>
|
|
<strong>
|
|
<CopyToClipboard
|
|
className={classes.link}
|
|
buttonClassname={classes.copyToClipboard}
|
|
wrapperClassname={classes.linkWrapper}>
|
|
{resetPasswordUrl}
|
|
</CopyToClipboard>
|
|
</strong>
|
|
</Mono>
|
|
</div>
|
|
)}
|
|
{error && <ErrorMessage>{error}</ErrorMessage>}
|
|
</Modal>
|
|
))
|
|
)
|
|
}
|
|
|
|
export default ResetPasswordModal
|