feat(KAN-37): rebuild security and application key settings
This commit is contained in:
@@ -1,123 +1,169 @@
|
||||
<script setup lang="ts">
|
||||
import { Form } from '@inertiajs/vue3';
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import { Eye, EyeOff, LockKeyhole, RefreshCw } from 'lucide-vue-next';
|
||||
import { nextTick, onMounted, ref, useTemplateRef } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import AlertError from '@/components/AlertError.vue';
|
||||
import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { useFormProtection } from '@/composables/useFormProtection';
|
||||
import { useLocalization } from '@/composables/useLocalization';
|
||||
import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
|
||||
import { regenerateRecoveryCodes } from '@/routes/two-factor';
|
||||
|
||||
const { recoveryCodesList, fetchRecoveryCodes, errors } = useTwoFactorAuth();
|
||||
const isRecoveryCodesVisible = ref<boolean>(false);
|
||||
const recoveryCodeSectionRef = useTemplateRef('recoveryCodeSectionRef');
|
||||
const { t } = useLocalization();
|
||||
const {
|
||||
recoveryCodesList,
|
||||
fetchRecoveryCodes,
|
||||
clearRecoveryCodes,
|
||||
errors,
|
||||
loading,
|
||||
} = useTwoFactorAuth();
|
||||
const visible = ref(false);
|
||||
const showRegenerate = ref(false);
|
||||
const form = useForm({});
|
||||
const protection = useFormProtection(form);
|
||||
|
||||
const toggleRecoveryCodesVisibility = async () => {
|
||||
if (!isRecoveryCodesVisible.value && !recoveryCodesList.value.length) {
|
||||
await fetchRecoveryCodes();
|
||||
function hide(): void {
|
||||
visible.value = false;
|
||||
clearRecoveryCodes();
|
||||
}
|
||||
function toggle(): void {
|
||||
if (visible.value) {
|
||||
hide();
|
||||
} else {
|
||||
visible.value = true;
|
||||
void fetchRecoveryCodes();
|
||||
}
|
||||
|
||||
isRecoveryCodesVisible.value = !isRecoveryCodesVisible.value;
|
||||
|
||||
if (isRecoveryCodesVisible.value) {
|
||||
await nextTick();
|
||||
recoveryCodeSectionRef.value?.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
function closeRegenerate(open: boolean): void {
|
||||
if (!form.processing) {
|
||||
showRegenerate.value = open;
|
||||
protection.clearFeedback();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!recoveryCodesList.value.length) {
|
||||
await fetchRecoveryCodes();
|
||||
}
|
||||
});
|
||||
}
|
||||
function regenerate(): void {
|
||||
protection.submit(regenerateRecoveryCodes(), {
|
||||
preserveScroll: true,
|
||||
onBefore: hide,
|
||||
onSuccess: () => {
|
||||
showRegenerate.value = false;
|
||||
visible.value = true;
|
||||
return fetchRecoveryCodes();
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex gap-3">
|
||||
<LockKeyhole class="size-4" />2FA recovery codes
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Recovery codes let you regain access if you lose your 2FA
|
||||
device. Store them in a secure password manager.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
class="flex select-none flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
|
||||
<section
|
||||
class="gap-column grid min-w-0 rounded-lg border p-4"
|
||||
aria-labelledby="recovery-title"
|
||||
>
|
||||
<div class="gap-stack grid">
|
||||
<h3
|
||||
id="recovery-title"
|
||||
class="flex items-center gap-2 font-semibold"
|
||||
>
|
||||
<Button @click="toggleRecoveryCodesVisibility" class="w-fit">
|
||||
<component
|
||||
:is="isRecoveryCodesVisible ? EyeOff : Eye"
|
||||
class="size-4"
|
||||
/>
|
||||
{{ isRecoveryCodesVisible ? 'Hide' : 'View' }} recovery
|
||||
codes
|
||||
</Button>
|
||||
|
||||
<Form
|
||||
v-if="isRecoveryCodesVisible && recoveryCodesList.length"
|
||||
v-bind="regenerateRecoveryCodes.form()"
|
||||
method="post"
|
||||
:options="{ preserveScroll: true }"
|
||||
@success="fetchRecoveryCodes"
|
||||
#default="{ processing }"
|
||||
<LockKeyhole class="text-primary size-4" />{{
|
||||
t('security.recoveryTitle')
|
||||
}}
|
||||
</h3>
|
||||
<p class="text-body text-muted-foreground">
|
||||
{{ t('security.recoveryDescription') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
:aria-expanded="visible"
|
||||
aria-controls="recovery-codes"
|
||||
:disabled="form.processing"
|
||||
@click="toggle"
|
||||
><component :is="visible ? EyeOff : Eye" />{{
|
||||
t(
|
||||
visible
|
||||
? 'security.hideRecovery'
|
||||
: 'security.viewRecovery',
|
||||
)
|
||||
}}</Button
|
||||
>
|
||||
<Button
|
||||
v-if="visible && recoveryCodesList.length"
|
||||
variant="secondary"
|
||||
@click="showRegenerate = true"
|
||||
><RefreshCw />{{ t('security.regenerate') }}</Button
|
||||
>
|
||||
</div>
|
||||
<div v-if="visible" id="recovery-codes" class="gap-stack grid">
|
||||
<p
|
||||
v-if="loading"
|
||||
role="status"
|
||||
class="bg-muted animate-pulse rounded-lg p-4"
|
||||
>
|
||||
{{ t('security.loadingRecovery') }}
|
||||
</p>
|
||||
<template v-else-if="errors.length">
|
||||
<AlertError :errors="errors" />
|
||||
<Button
|
||||
class="justify-self-start"
|
||||
variant="outline"
|
||||
@click="fetchRecoveryCodes"
|
||||
>{{ t('common.retry') }}</Button
|
||||
>
|
||||
<Button
|
||||
variant="secondary"
|
||||
type="submit"
|
||||
:disabled="processing"
|
||||
>
|
||||
<RefreshCw /> Regenerate codes
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
'relative overflow-hidden transition-all duration-300',
|
||||
isRecoveryCodesVisible
|
||||
? 'h-auto opacity-100'
|
||||
: 'h-0 opacity-0',
|
||||
]"
|
||||
</template>
|
||||
<template v-else>
|
||||
<ul
|
||||
class="bg-muted grid gap-2 rounded-lg p-4 font-mono text-sm sm:grid-cols-2"
|
||||
:aria-label="t('security.recoveryTitle')"
|
||||
>
|
||||
<li v-for="code in recoveryCodesList" :key="code">
|
||||
{{ code }}
|
||||
</li>
|
||||
</ul>
|
||||
<p class="text-caption text-muted-foreground">
|
||||
{{ t('security.recoveryOnce') }}
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
<Dialog :open="showRegenerate" @update:open="closeRegenerate">
|
||||
<DialogContent
|
||||
:show-close-button="!form.processing"
|
||||
@escape-key-down="form.processing && $event.preventDefault()"
|
||||
@interact-outside="form.processing && $event.preventDefault()"
|
||||
>
|
||||
<div v-if="errors?.length" class="mt-6">
|
||||
<AlertError :errors="errors" />
|
||||
</div>
|
||||
<div v-else class="mt-3 space-y-3">
|
||||
<div
|
||||
ref="recoveryCodeSectionRef"
|
||||
class="bg-muted grid gap-1 rounded-lg p-4 font-mono text-sm"
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{
|
||||
t('security.regenerateTitle')
|
||||
}}</DialogTitle>
|
||||
<DialogDescription>{{
|
||||
t('security.regenerateDescription')
|
||||
}}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<AuthFormFeedback
|
||||
:state="protection.state.value"
|
||||
:response-status="protection.responseStatus.value"
|
||||
@retry="regenerate"
|
||||
/>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
:disabled="form.processing"
|
||||
@click="closeRegenerate(false)"
|
||||
>{{ t('common.cancel') }}</Button
|
||||
>
|
||||
<div v-if="!recoveryCodesList.length" class="space-y-2">
|
||||
<div
|
||||
v-for="n in 8"
|
||||
:key="n"
|
||||
class="bg-muted-foreground/20 h-4 animate-pulse rounded"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
v-for="(code, index) in recoveryCodesList"
|
||||
:key="index"
|
||||
>
|
||||
{{ code }}
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-muted-foreground select-none text-xs">
|
||||
Each recovery code can be used once to access your
|
||||
account and will be removed after use. If you need more,
|
||||
click
|
||||
<span class="font-bold">Regenerate codes</span> above.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Button :loading="form.processing" @click="regenerate">{{
|
||||
t('security.regenerate')
|
||||
}}</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user