diff --git a/libs/tup-components/src/mfa/MfaUnpairingView.tsx b/libs/tup-components/src/mfa/MfaUnpairingView.tsx index d49b8b67f..73fe07969 100644 --- a/libs/tup-components/src/mfa/MfaUnpairingView.tsx +++ b/libs/tup-components/src/mfa/MfaUnpairingView.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import { Navigate } from 'react-router-dom'; -import { useMfa } from '@tacc/tup-hooks'; +import { Navigate, useLocation } from 'react-router-dom'; +import { useConfig, useMfa, useProfile } from '@tacc/tup-hooks'; import { Button, InlineMessage, @@ -16,6 +16,9 @@ import TicketCreateModal from '../tickets/TicketCreateModal'; import styles from './Mfa.module.css'; const MfaUnpairingView: React.FC = () => { + const { search } = useLocation(); + const { data: profileData } = useProfile(); + const unpairCode = new URLSearchParams(search).get('code'); const [currentToken, setCurrentToken] = useState(''); const { data, isLoading } = useMfa(); const { mutate: unpairWithCode, isError, isSuccess } = useMfaDelete(); @@ -38,6 +41,28 @@ const MfaUnpairingView: React.FC = () => { otpcode: currentToken, }); }; + const { baseUrl } = useConfig(); + + if (unpairCode && profileData?.username) + return ( + <> + + You are about to remove multifactor authentication from your account. + +

+ {' '} + You are seeing this page because of a request we have received to + remove your multifactor authentication credential. +

+

+ + Click here to confirm removal of your MFA credential. + +

+ + ); if (isLoading || !data) { return ; @@ -85,7 +110,7 @@ const MfaUnpairingView: React.FC = () => { - {!sendChallengeSuccess && ( + {!sendChallengeSuccess && !unpairCode && (

Alternatively,{' '}