95 lines
2.4 KiB
JavaScript
95 lines
2.4 KiB
JavaScript
import { useMutation } from '@apollo/react-hooks'
|
|
import { makeStyles } from '@material-ui/core/styles'
|
|
import gql from 'graphql-tag'
|
|
import React, { useState } from 'react'
|
|
|
|
import ErrorMessage from 'src/components/ErrorMessage'
|
|
import Modal from 'src/components/Modal'
|
|
import { Button } from 'src/components/buttons'
|
|
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 = ({ state, dispatch, user, requiresConfirmation }) => {
|
|
const classes = useStyles()
|
|
|
|
const [changeUserRole, { error }] = useMutation(CHANGE_USER_ROLE, {
|
|
onCompleted: () => handleClose(),
|
|
refetchQueries: () => ['users']
|
|
})
|
|
|
|
const [confirmation, setConfirmation] = useState(null)
|
|
|
|
const submit = () => {
|
|
changeUserRole({
|
|
variables: {
|
|
confirmationCode: confirmation,
|
|
id: user.id,
|
|
newRole: user.role === 'superuser' ? 'user' : 'superuser'
|
|
}
|
|
})
|
|
}
|
|
|
|
const handleClose = () => {
|
|
setConfirmation(null)
|
|
dispatch({
|
|
type: 'close',
|
|
payload: 'showRoleModal'
|
|
})
|
|
}
|
|
|
|
return (
|
|
(state.showRoleModal && requiresConfirmation && !confirmation && (
|
|
<Input2FAModal
|
|
showModal={state.showRoleModal}
|
|
handleClose={handleClose}
|
|
setConfirmation={setConfirmation}
|
|
/>
|
|
)) ||
|
|
(state.showRoleModal && (
|
|
<Modal
|
|
closeOnBackdropClick={true}
|
|
width={450}
|
|
height={250}
|
|
handleClose={handleClose}
|
|
open={true}>
|
|
<Info2 className={classes.modalTitle}>
|
|
Change {user.username}'s role?
|
|
</Info2>
|
|
<P className={classes.info}>
|
|
You are about to alter {user.username}'s role. This will change this
|
|
user's permission to access certain resources.
|
|
</P>
|
|
<P className={classes.info}>Do you wish to proceed?</P>
|
|
<div className={classes.footer}>
|
|
{error && <ErrorMessage>{error}</ErrorMessage>}
|
|
<Button className={classes.submit} onClick={() => submit()}>
|
|
Confirm
|
|
</Button>
|
|
</div>
|
|
</Modal>
|
|
))
|
|
)
|
|
}
|
|
|
|
export default ChangeRoleModal
|