182 lines
5.9 KiB
Vue
182 lines
5.9 KiB
Vue
<script setup lang="ts">
|
|
import { Form, Head } from '@inertiajs/vue3';
|
|
import { ShieldCheck } from 'lucide-vue-next';
|
|
import { onUnmounted, ref } from 'vue';
|
|
import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController';
|
|
import Heading from '@/components/Heading.vue';
|
|
import InputError from '@/components/InputError.vue';
|
|
import PasswordInput from '@/components/PasswordInput.vue';
|
|
import TwoFactorRecoveryCodes from '@/components/TwoFactorRecoveryCodes.vue';
|
|
import TwoFactorSetupModal from '@/components/TwoFactorSetupModal.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Label } from '@/components/ui/label';
|
|
import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
|
|
import { edit } from '@/routes/security';
|
|
import { disable, enable } from '@/routes/two-factor';
|
|
|
|
type Props = {
|
|
canManageTwoFactor?: boolean;
|
|
requiresConfirmation?: boolean;
|
|
twoFactorEnabled?: boolean;
|
|
};
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
canManageTwoFactor: false,
|
|
requiresConfirmation: false,
|
|
twoFactorEnabled: false,
|
|
});
|
|
|
|
defineOptions({
|
|
layout: {
|
|
breadcrumbs: [
|
|
{
|
|
title: 'Security settings',
|
|
href: edit(),
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
const { hasSetupData, clearTwoFactorAuthData } = useTwoFactorAuth();
|
|
const showSetupModal = ref<boolean>(false);
|
|
|
|
onUnmounted(() => clearTwoFactorAuthData());
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Security settings" />
|
|
|
|
<h1 class="sr-only">Security settings</h1>
|
|
|
|
<div class="space-y-6">
|
|
<Heading
|
|
variant="small"
|
|
title="Update password"
|
|
description="Ensure your account is using a long, random password to stay secure"
|
|
/>
|
|
|
|
<Form
|
|
v-bind="SecurityController.update.form()"
|
|
:options="{
|
|
preserveScroll: true,
|
|
}"
|
|
reset-on-success
|
|
:reset-on-error="[
|
|
'password',
|
|
'password_confirmation',
|
|
'current_password',
|
|
]"
|
|
class="space-y-6"
|
|
v-slot="{ errors, processing }"
|
|
>
|
|
<div class="grid gap-2">
|
|
<Label for="current_password">Current password</Label>
|
|
<PasswordInput
|
|
id="current_password"
|
|
name="current_password"
|
|
class="mt-1 block w-full"
|
|
autocomplete="current-password"
|
|
placeholder="Current password"
|
|
/>
|
|
<InputError :message="errors.current_password" />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="password">New password</Label>
|
|
<PasswordInput
|
|
id="password"
|
|
name="password"
|
|
class="mt-1 block w-full"
|
|
autocomplete="new-password"
|
|
placeholder="New password"
|
|
/>
|
|
<InputError :message="errors.password" />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="password_confirmation">Confirm password</Label>
|
|
<PasswordInput
|
|
id="password_confirmation"
|
|
name="password_confirmation"
|
|
class="mt-1 block w-full"
|
|
autocomplete="new-password"
|
|
placeholder="Confirm password"
|
|
/>
|
|
<InputError :message="errors.password_confirmation" />
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<Button
|
|
:disabled="processing"
|
|
data-test="update-password-button"
|
|
>
|
|
Save password
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
|
|
<div v-if="canManageTwoFactor" class="space-y-6">
|
|
<Heading
|
|
variant="small"
|
|
title="Two-factor authentication"
|
|
description="Manage your two-factor authentication settings"
|
|
/>
|
|
|
|
<div
|
|
v-if="!twoFactorEnabled"
|
|
class="flex flex-col items-start justify-start space-y-4"
|
|
>
|
|
<p class="text-sm text-muted-foreground">
|
|
When you enable two-factor authentication, you will be prompted
|
|
for a secure pin during login. This pin can be retrieved from a
|
|
TOTP-supported application on your phone.
|
|
</p>
|
|
|
|
<div>
|
|
<Button v-if="hasSetupData" @click="showSetupModal = true">
|
|
<ShieldCheck />Continue setup
|
|
</Button>
|
|
<Form
|
|
v-else
|
|
v-bind="enable.form()"
|
|
@success="showSetupModal = true"
|
|
#default="{ processing }"
|
|
>
|
|
<Button type="submit" :disabled="processing">
|
|
Enable 2FA
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="flex flex-col items-start justify-start space-y-4">
|
|
<p class="text-sm text-muted-foreground">
|
|
You will be prompted for a secure, random pin during login,
|
|
which you can retrieve from the TOTP-supported application on
|
|
your phone.
|
|
</p>
|
|
|
|
<div class="relative inline">
|
|
<Form v-bind="disable.form()" #default="{ processing }">
|
|
<Button
|
|
variant="destructive"
|
|
type="submit"
|
|
:disabled="processing"
|
|
>
|
|
Disable 2FA
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
|
|
<TwoFactorRecoveryCodes />
|
|
</div>
|
|
|
|
<TwoFactorSetupModal
|
|
v-model:isOpen="showSetupModal"
|
|
:requiresConfirmation="requiresConfirmation"
|
|
:twoFactorEnabled="twoFactorEnabled"
|
|
/>
|
|
</div>
|
|
</template>
|