123 lines
4.0 KiB
TypeScript
Vendored
123 lines
4.0 KiB
TypeScript
Vendored
/*
|
|
Copyright (C) 2023-2026 QuantumNous
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
For commercial licensing, please contact support@quantumnous.com
|
|
*/
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import { Button } from '@/components/design-system/button'
|
|
import { StatusBadge } from '@/components/status-badge'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { useDialogs } from '@/hooks/use-dialog'
|
|
|
|
import { useTwoFA } from '../hooks'
|
|
import { TwoFABackupDialog } from './dialogs/two-fa-backup-dialog'
|
|
import { TwoFADisableDialog } from './dialogs/two-fa-disable-dialog'
|
|
import { TwoFASetupDialog } from './dialogs/two-fa-setup-dialog'
|
|
|
|
interface TwoFARowProps {
|
|
loading: boolean
|
|
}
|
|
|
|
type DialogKey = 'setup' | 'disable' | 'backup'
|
|
|
|
export function TwoFARow({ loading: pageLoading }: TwoFARowProps) {
|
|
const { t } = useTranslation()
|
|
const { status, loading, refetch } = useTwoFA(!pageLoading)
|
|
const dialogs = useDialogs<DialogKey>()
|
|
|
|
if (pageLoading || loading) {
|
|
return (
|
|
<div className='space-y-2 py-4 first:pt-0 last:pb-0'>
|
|
<Skeleton className='h-5 w-56' />
|
|
<Skeleton className='h-4 w-72' />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className='flex flex-col gap-3 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between'>
|
|
<div className='min-w-0 space-y-0.5'>
|
|
<div className='flex flex-wrap items-center gap-2'>
|
|
<p className='text-sm font-medium'>
|
|
{t('Two-Factor Authentication')}
|
|
</p>
|
|
<StatusBadge variant={status.enabled ? 'success' : 'neutral'}>
|
|
{status.enabled ? t('Enabled') : t('Disabled')}
|
|
</StatusBadge>
|
|
{status.locked && (
|
|
<StatusBadge variant='destructive'>{t('Locked')}</StatusBadge>
|
|
)}
|
|
</div>
|
|
<p className='text-muted-foreground text-xs sm:text-sm'>
|
|
{status.enabled
|
|
? t('Backup codes remaining: {{count}}', {
|
|
count: status.backup_codes_remaining,
|
|
})
|
|
: t('Add an extra layer of security to your account')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className='flex shrink-0 flex-wrap items-center gap-2'>
|
|
{status.enabled ? (
|
|
<>
|
|
<Button variant='outline' onClick={() => dialogs.open('backup')}>
|
|
{t('Regenerate Backup Codes')}
|
|
</Button>
|
|
<Button
|
|
variant='outline'
|
|
className='text-destructive hover:text-destructive'
|
|
onClick={() => dialogs.open('disable')}
|
|
>
|
|
{t('Disable 2FA')}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Button variant='outline' onClick={() => dialogs.open('setup')}>
|
|
{t('Enable')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<TwoFASetupDialog
|
|
open={dialogs.isOpen('setup')}
|
|
onOpenChange={(open) =>
|
|
open ? dialogs.open('setup') : dialogs.close('setup')
|
|
}
|
|
onSuccess={refetch}
|
|
/>
|
|
|
|
<TwoFADisableDialog
|
|
open={dialogs.isOpen('disable')}
|
|
onOpenChange={(open) =>
|
|
open ? dialogs.open('disable') : dialogs.close('disable')
|
|
}
|
|
onSuccess={refetch}
|
|
/>
|
|
|
|
<TwoFABackupDialog
|
|
open={dialogs.isOpen('backup')}
|
|
onOpenChange={(open) =>
|
|
open ? dialogs.open('backup') : dialogs.close('backup')
|
|
}
|
|
onSuccess={refetch}
|
|
/>
|
|
</>
|
|
)
|
|
}
|