aspirecloud/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
Enrique Chavez 135c6802a6 User Management and API Keys (#84)
* feat: Changes required on existing files to setup Jetstream

* feat: add the Inertia Home and Dashboard

* feat: Add all required files and migrations to setup Jetstream

* feat: Add the Sanctum middleware to the API endpoints

- Added Sanctum to the API endpoints to requiere an API Key
- Added a setting to control if the app should use authenticated API or not (see .env.example)
- Fix redirection on API routes to the login page when a request was unauthenticated

* feat: Users Management and Authication API Keys

- Refactor existing tests to make authenticated request is enable
- Hide the permissions setting on the UI, for now we only have a read-only API
- Add tests to test authenticated and unauthenticated calls
2024-11-01 18:30:03 -06:00

102 lines
3.4 KiB
Vue

<script setup>
import { ref } from 'vue';
import { useForm } from '@inertiajs/vue3';
import ActionSection from '@/Components/ActionSection.vue';
import DangerButton from '@/Components/DangerButton.vue';
import DialogModal from '@/Components/DialogModal.vue';
import InputError from '@/Components/InputError.vue';
import SecondaryButton from '@/Components/SecondaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
const confirmingUserDeletion = ref(false);
const passwordInput = ref(null);
const form = useForm({
password: '',
});
const confirmUserDeletion = () => {
confirmingUserDeletion.value = true;
setTimeout(() => passwordInput.value.focus(), 250);
};
const deleteUser = () => {
form.delete(route('current-user.destroy'), {
preserveScroll: true,
onSuccess: () => closeModal(),
onError: () => passwordInput.value.focus(),
onFinish: () => form.reset(),
});
};
const closeModal = () => {
confirmingUserDeletion.value = false;
form.reset();
};
</script>
<template>
<ActionSection>
<template #title>
Delete Account
</template>
<template #description>
Permanently delete your account.
</template>
<template #content>
<div class="max-w-xl text-sm text-gray-600 dark:text-gray-400">
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.
</div>
<div class="mt-5">
<DangerButton @click="confirmUserDeletion">
Delete Account
</DangerButton>
</div>
<!-- Delete Account Confirmation Modal -->
<DialogModal :show="confirmingUserDeletion" @close="closeModal">
<template #title>
Delete Account
</template>
<template #content>
Are you sure you want to delete your account? 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.
<div class="mt-4">
<TextInput
ref="passwordInput"
v-model="form.password"
type="password"
class="mt-1 block w-3/4"
placeholder="Password"
autocomplete="current-password"
@keyup.enter="deleteUser"
/>
<InputError :message="form.errors.password" class="mt-2" />
</div>
</template>
<template #footer>
<SecondaryButton @click="closeModal">
Cancel
</SecondaryButton>
<DangerButton
class="ms-3"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
@click="deleteUser"
>
Delete Account
</DangerButton>
</template>
</DialogModal>
</template>
</ActionSection>
</template>