93 lines
4.4 KiB
TypeScript
93 lines
4.4 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { format } from 'date-fns';
|
|
import tw from 'twin.macro';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faFingerprint, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
|
|
import FlashMessageRender from '@/components/FlashMessageRender';
|
|
import ContentBox from '@/components/elements/ContentBox';
|
|
import GreyRowBox from '@/components/elements/GreyRowBox';
|
|
import PageContentBlock from '@/components/elements/PageContentBlock';
|
|
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
|
import { useFlashKey } from '@/plugins/useFlash';
|
|
import ConfirmationModal from '@/components/elements/ConfirmationModal';
|
|
import { useSecurityKeys, deleteSecurityKey } from '@/api/account/security-keys';
|
|
import AddSecurityKeyForm from '@/components/dashboard/security/AddSecurityKeyForm';
|
|
|
|
export default () => {
|
|
const { clearFlashes, clearAndAddHttpError } = useFlashKey('security_keys');
|
|
|
|
const [ deleteId, setDeleteId ] = useState<string | null>(null);
|
|
const { data, mutate, error } = useSecurityKeys({ revalidateOnFocus: false });
|
|
|
|
const doDeletion = () => {
|
|
const uuid = deleteId;
|
|
|
|
setDeleteId(null);
|
|
clearFlashes();
|
|
mutate(keys => !keys ? undefined : keys.filter(key => key.uuid !== deleteId));
|
|
|
|
if (!uuid) return;
|
|
|
|
deleteSecurityKey(uuid).catch(error => {
|
|
clearAndAddHttpError(error);
|
|
mutate();
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
clearAndAddHttpError(error);
|
|
}, [ error ]);
|
|
|
|
return (
|
|
<PageContentBlock title={'Security Keys'}>
|
|
<FlashMessageRender byKey={'security_keys'}/>
|
|
<div css={tw`md:flex flex-nowrap my-10`}>
|
|
<ContentBox title={'Add Security Key'} css={tw`flex-1 md:mr-8`}>
|
|
<AddSecurityKeyForm onKeyAdded={key => mutate((keys) => (keys || []).concat(key))}/>
|
|
</ContentBox>
|
|
<ContentBox title={'Security Keys'} css={tw`flex-none w-full mt-8 md:mt-0 md:w-1/2`}>
|
|
<ConfirmationModal
|
|
visible={!!deleteId}
|
|
title={'Confirm key deletion'}
|
|
buttonText={'Yes, Delete Key'}
|
|
onConfirmed={doDeletion}
|
|
onModalDismissed={() => setDeleteId(null)}
|
|
>
|
|
Are you sure you wish to delete this security key?
|
|
You will no longer be able to authenticate using this key.
|
|
</ConfirmationModal>
|
|
{!data ?
|
|
<SpinnerOverlay visible/>
|
|
:
|
|
data?.length === 0 ?
|
|
<p css={tw`text-center text-sm`}>
|
|
No security keys have been configured for this account.
|
|
</p>
|
|
:
|
|
data.map((key, index) => (
|
|
<GreyRowBox
|
|
key={index}
|
|
css={[ tw`bg-neutral-600 flex items-center`, index > 0 && tw`mt-2` ]}
|
|
>
|
|
<FontAwesomeIcon icon={faFingerprint} css={tw`text-neutral-300`}/>
|
|
<div css={tw`ml-4 flex-1 overflow-hidden`}>
|
|
<p css={tw`text-sm break-words`}>{key.name}</p>
|
|
<p css={tw`text-2xs text-neutral-300 uppercase`}>
|
|
Created at:
|
|
{key.createdAt ? format(key.createdAt, 'MMM do, yyyy HH:mm') : 'Never'}
|
|
</p>
|
|
</div>
|
|
<button css={tw`ml-4 p-2 text-sm`} onClick={() => setDeleteId(key.uuid)}>
|
|
<FontAwesomeIcon
|
|
icon={faTrashAlt}
|
|
css={tw`text-neutral-400 hover:text-red-400 transition-colors duration-150`}
|
|
/>
|
|
</button>
|
|
</GreyRowBox>
|
|
))
|
|
}
|
|
</ContentBox>
|
|
</div>
|
|
</PageContentBlock>
|
|
);
|
|
};
|