TheMaddax
80657cc209
- Replaced Next.js + Express + React stack with Laravel + Inertia + Vue - Created database migrations for docket_entries, documents, subscriptions, admin_users - Built Eloquent models with relationships (DocketEntry, Document, Subscription, AdminUser) - Implemented HomeController with Inertia.js integration - Created Vue home page component matching v1.0 design exactly - Installed Laravel Breeze for authentication scaffolding - Configured Vite 7 for Vue 3 + TypeScript compilation - Updated .gitignore for Laravel project structure - Tested locally - website rendering correctly with empty database - All v1.0 Next.js/Express files removed, replaced with Laravel structure Technology Stack: - Backend: Laravel 12.43.1, PHP 8.3.28, Eloquent ORM - Frontend: Vue 3, TypeScript, Inertia.js, Tailwind CSS 3.x - Build: Vite 7.x, Composer 2.9.2 - Database: SQLite (dev), PostgreSQL (production) Next steps: Email subscription API, document downloads, admin dashboard
110 lines
3.5 KiB
Vue
110 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import DangerButton from '@/Components/DangerButton.vue';
|
|
import InputError from '@/Components/InputError.vue';
|
|
import InputLabel from '@/Components/InputLabel.vue';
|
|
import Modal from '@/Components/Modal.vue';
|
|
import SecondaryButton from '@/Components/SecondaryButton.vue';
|
|
import TextInput from '@/Components/TextInput.vue';
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import { nextTick, ref } from 'vue';
|
|
|
|
const confirmingUserDeletion = ref(false);
|
|
const passwordInput = ref<HTMLInputElement | null>(null);
|
|
|
|
const form = useForm({
|
|
password: '',
|
|
});
|
|
|
|
const confirmUserDeletion = () => {
|
|
confirmingUserDeletion.value = true;
|
|
|
|
nextTick(() => passwordInput.value?.focus());
|
|
};
|
|
|
|
const deleteUser = () => {
|
|
form.delete(route('profile.destroy'), {
|
|
preserveScroll: true,
|
|
onSuccess: () => closeModal(),
|
|
onError: () => passwordInput.value?.focus(),
|
|
onFinish: () => {
|
|
form.reset();
|
|
},
|
|
});
|
|
};
|
|
|
|
const closeModal = () => {
|
|
confirmingUserDeletion.value = false;
|
|
|
|
form.clearErrors();
|
|
form.reset();
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<section class="space-y-6">
|
|
<header>
|
|
<h2 class="text-lg font-medium text-gray-900">
|
|
Delete Account
|
|
</h2>
|
|
|
|
<p class="mt-1 text-sm text-gray-600">
|
|
Once your account is deleted, all of its resources and data will
|
|
be permanently deleted. Before deleting your account, please
|
|
download any data or information that you wish to retain.
|
|
</p>
|
|
</header>
|
|
|
|
<DangerButton @click="confirmUserDeletion">Delete Account</DangerButton>
|
|
|
|
<Modal :show="confirmingUserDeletion" @close="closeModal">
|
|
<div class="p-6">
|
|
<h2
|
|
class="text-lg font-medium text-gray-900"
|
|
>
|
|
Are you sure you want to delete your account?
|
|
</h2>
|
|
|
|
<p class="mt-1 text-sm text-gray-600">
|
|
Once your account is deleted, all of its resources and data
|
|
will be permanently deleted. Please enter your password to
|
|
confirm you would like to permanently delete your account.
|
|
</p>
|
|
|
|
<div class="mt-6">
|
|
<InputLabel
|
|
for="password"
|
|
value="Password"
|
|
class="sr-only"
|
|
/>
|
|
|
|
<TextInput
|
|
id="password"
|
|
ref="passwordInput"
|
|
v-model="form.password"
|
|
type="password"
|
|
class="mt-1 block w-3/4"
|
|
placeholder="Password"
|
|
@keyup.enter="deleteUser"
|
|
/>
|
|
|
|
<InputError :message="form.errors.password" class="mt-2" />
|
|
</div>
|
|
|
|
<div class="mt-6 flex justify-end">
|
|
<SecondaryButton @click="closeModal">
|
|
Cancel
|
|
</SecondaryButton>
|
|
|
|
<DangerButton
|
|
class="ms-3"
|
|
:class="{ 'opacity-25': form.processing }"
|
|
:disabled="form.processing"
|
|
@click="deleteUser"
|
|
>
|
|
Delete Account
|
|
</DangerButton>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</section>
|
|
</template>
|