Saad Ibn-Ezzoubayr
35545c2a8f
Initial commit of the L'Ami Fiduciaire SaaS platform built on Laravel 12, Vue 3, Inertia.js 2, and Tailwind CSS 4. Story 0.1 (rename folders to declarations in database) is implemented and code-reviewed: migration, rollback, and 6 Pest tests all passing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
115 lines
4.5 KiB
Vue
115 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
import { Form } from '@inertiajs/vue3';
|
|
import { useTemplateRef } from 'vue';
|
|
import Heading from '@/components/Heading.vue';
|
|
import InputError from '@/components/InputError.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@/components/ui/dialog';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
|
|
|
|
const passwordInput = useTemplateRef('passwordInput');
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-6">
|
|
<Heading
|
|
variant="small"
|
|
title="Delete account"
|
|
description="Delete your account and all of its resources"
|
|
/>
|
|
<div
|
|
class="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10"
|
|
>
|
|
<div class="relative space-y-0.5 text-red-600 dark:text-red-100">
|
|
<p class="font-medium">Warning</p>
|
|
<p class="text-sm">
|
|
Please proceed with caution, this cannot be undone.
|
|
</p>
|
|
</div>
|
|
<Dialog>
|
|
<DialogTrigger as-child>
|
|
<Button variant="destructive" data-test="delete-user-button"
|
|
>Delete account</Button
|
|
>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<Form
|
|
v-bind="ProfileController.destroy.form()"
|
|
reset-on-success
|
|
@error="() => passwordInput?.$el?.focus()"
|
|
:options="{
|
|
preserveScroll: true,
|
|
}"
|
|
class="space-y-6"
|
|
v-slot="{ errors, processing, reset, clearErrors }"
|
|
>
|
|
<DialogHeader class="space-y-3">
|
|
<DialogTitle
|
|
>Are you sure you want to delete your
|
|
account?</DialogTitle
|
|
>
|
|
<DialogDescription>
|
|
Once your account is deleted, all of its
|
|
resources and data will also be permanently
|
|
deleted. Please enter your password to confirm
|
|
you would like to permanently delete your
|
|
account.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="password" class="sr-only"
|
|
>Password</Label
|
|
>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
name="password"
|
|
ref="passwordInput"
|
|
placeholder="Password"
|
|
/>
|
|
<InputError :message="errors.password" />
|
|
</div>
|
|
|
|
<DialogFooter class="gap-2">
|
|
<DialogClose as-child>
|
|
<Button
|
|
variant="secondary"
|
|
@click="
|
|
() => {
|
|
clearErrors();
|
|
reset();
|
|
}
|
|
"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</DialogClose>
|
|
|
|
<Button
|
|
type="submit"
|
|
variant="destructive"
|
|
:disabled="processing"
|
|
data-test="confirm-delete-user-button"
|
|
>
|
|
Delete account
|
|
</Button>
|
|
</DialogFooter>
|
|
</Form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|