DeleteUserForm.vue in kaze-0.6.0

- old
+ new
@@ -1,98 +1,102 @@
 <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';
-import { profile_destroy_path } from '@/routes';
+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'
+import { profile_destroy_path } from '@/routes'
 
-const confirmingUserDeletion = ref(false);
-const passwordInput = ref<HTMLInputElement | null>(null);
+const confirmingUserDeletion = ref(false)
+const passwordInput = ref<HTMLInputElement | null>(null)
 
 const form = useForm({
-    password: '',
-});
+  password: '',
+})
 
 const confirmUserDeletion = () => {
-    confirmingUserDeletion.value = true;
+  confirmingUserDeletion.value = true
 
-    nextTick(() => passwordInput.value?.focus());
-};
+  nextTick(() => passwordInput.value?.focus())
+}
 
 const deleteUser = () => {
-    form.delete(profile_destroy_path(), {
-        preserveScroll: true,
-        onSuccess: () => closeModal(),
-        onError: () => passwordInput.value?.focus(),
-        onFinish: () => {
-            form.reset();
-        },
-    });
-};
+  form.delete(profile_destroy_path(), {
+    preserveScroll: true,
+    onSuccess: () => closeModal(),
+    onError: () => passwordInput.value?.focus(),
+    onFinish: () => {
+      form.reset()
+    },
+  })
+}
 
 const closeModal = () => {
-    confirmingUserDeletion.value = false;
+  confirmingUserDeletion.value = false
 
-    form.reset();
-};
+  form.reset()
+}
 </script>
 
 <template>
-    <section class="space-y-6">
-        <header>
-            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Delete Account</h2>
+  <section class="space-y-6">
+    <header>
+      <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+        Delete Account
+      </h2>
 
-            <p class="mt-1 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.
-            </p>
-        </header>
+      <p class="mt-1 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.
+      </p>
+    </header>
 
-        <DangerButton @click="confirmUserDeletion">Delete Account</DangerButton>
+    <DangerButton @click="confirmUserDeletion">Delete Account</DangerButton>
 
-        <Modal :show="confirmingUserDeletion" @close="closeModal">
-            <div class="p-6">
-                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-                    Are you sure you want to delete your account?
-                </h2>
+    <Modal :show="confirmingUserDeletion" @close="closeModal">
+      <div class="p-6">
+        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+          Are you sure you want to delete your account?
+        </h2>
 
-                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-                    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>
+        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+          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" />
+        <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"
-                    />
+          <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>
+          <InputError :message="form.errors.password" class="mt-2" />
+        </div>
 
-                <div class="mt-6 flex justify-end">
-                    <SecondaryButton @click="closeModal"> Cancel </SecondaryButton>
+        <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>
+          <DangerButton
+            class="ms-3"
+            :class="{ 'opacity-25': form.processing }"
+            :disabled="form.processing"
+            @click="deleteUser"
+          >
+            Delete Account
+          </DangerButton>
+        </div>
+      </div>
+    </Modal>
+  </section>
 </template>