Delete User password confirmation (#91)

* Password confirmation on user deletetion inertia

* Livewire support

* Typo fix

* code style

* update comment

Author: SeanBourke

src/Http/Controllers/Inertia/CurrentUserController.php

@@ -5,6 +5,8 @@
 use Illuminate\Contracts\Auth\StatefulGuard;
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Validation\ValidationException;
 use Laravel\Jetstream\Contracts\DeletesUsers;
 
 class CurrentUserController extends Controller
@@ -18,6 +20,12 @@ class CurrentUserController extends Controller
      */
     public function destroy(Request $request, StatefulGuard $auth)
     {
+        if (! Hash::check($request->password, $request->user()->password)) {
+            throw ValidationException::withMessages([
+                'password' => [__('This password does not match our records.')],
+            ])->errorBag('deleteUser');
+        }
+
         app(DeletesUsers::class)->delete($request->user()->fresh());
 
         $auth->logout();

src/Http/Livewire/DeleteUserForm.php

@@ -4,6 +4,8 @@
 
 use Illuminate\Contracts\Auth\StatefulGuard;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Validation\ValidationException;
 use Laravel\Jetstream\Contracts\DeletesUsers;
 use Livewire\Component;
 
@@ -16,6 +18,27 @@ class DeleteUserForm extends Component
      */
     public $confirmingUserDeletion = false;
 
+    /**
+     * The user's current password.
+     *
+     * @var string
+     */
+    public $password = '';
+
+    /**
+     * Confirm that the user would like to delete their account.
+     *
+     * @return void
+     */
+    public function confirmDelete()
+    {
+        $this->password = '';
+
+        $this->dispatchBrowserEvent('confirming-delete-user');
+
+        $this->confirmingUserDeletion = true;
+    }
+
     /**
      * Delete the current user.
      *
@@ -25,6 +48,14 @@ class DeleteUserForm extends Component
      */
     public function deleteUser(DeletesUsers $deleter, StatefulGuard $auth)
     {
+        $this->resetErrorBag();
+
+        if (! Hash::check($this->password, Auth::user()->password)) {
+            throw ValidationException::withMessages([
+                'password' => [__('This password does not match our records.')],
+            ]);
+        }
+
         $deleter->delete(Auth::user()->fresh());
 
         $auth->logout();

stubs/inertia/resources/js/Pages/Profile/DeleteUserForm.vue

@@ -26,15 +26,24 @@
                 </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.
+                    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">
+                        <jet-input type="password" class="mt-1 block w-3/4" placeholder="Password"
+                                    ref="password"
+                                    v-model="form.password"
+                                    @keyup.enter.native="deleteUser" />
+
+                        <jet-input-error :message="form.error('password')" class="mt-2" />
+                    </div>
                 </template>
 
                 <template #footer>
                     <jet-secondary-button @click.native="confirmingUserDeletion = false">
                         Nevermind
                     </jet-secondary-button>
 
-                    <jet-danger-button class="ml-2" @click.native="deleteTeam" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                    <jet-danger-button class="ml-2" @click.native="deleteUser" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                         Delete Account
                     </jet-danger-button>
                 </template>
@@ -48,6 +57,8 @@
     import JetButton from './../../Jetstream/Button'
     import JetConfirmationModal from './../../Jetstream/ConfirmationModal'
     import JetDangerButton from './../../Jetstream/DangerButton'
+    import JetInput from './../../Jetstream/Input'
+    import JetInputError from './../../Jetstream/InputError'
     import JetSecondaryButton from './../../Jetstream/SecondaryButton'
 
     export default {
@@ -56,6 +67,8 @@
             JetButton,
             JetConfirmationModal,
             JetDangerButton,
+            JetInput,
+            JetInputError,
             JetSecondaryButton,
         },
 
@@ -65,7 +78,8 @@
                 deleting: false,
 
                 form: this.$inertia.form({
-                    //
+                    '_method': 'DELETE',
+                    password: '',
                 }, {
                     bag: 'deleteUser'
                 })
@@ -77,10 +91,14 @@
                 this.confirmingUserDeletion = true
             },
 
-            deleteTeam() {
-                this.form.delete('/user', {
+            deleteUser() {
+                this.form.post('/user', {
                     preserveScroll: true
-                });
+                }).then(response => {
+                    if (! this.form.hasErrors()) {
+                        this.confirmingUserDeletion = false
+                    }
+                })
             },
         },
     }

stubs/livewire/resources/views/profile/delete-user-form.blade.php

@@ -19,13 +19,22 @@
         </div>
 
         <!-- Delete User Confirmation Modal -->
-        <x-jet-confirmation-modal wire:model="confirmingUserDeletion">
+        <x-jet-dialog-modal wire:model="confirmingUserDeletion">
             <x-slot name="title">
                 Delete Account
             </x-slot>
 
             <x-slot name="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.
+                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" x-data="{}" x-on:confirming-delete-user.window="setTimeout(() => $refs.password.focus(), 250)">
+                    <x-jet-input type="password" class="mt-1 block w-3/4" placeholder="Password"
+                                x-ref="password"
+                                wire:model.defer="password"
+                                wire:keydown.enter="deleteUser" />
+
+                    <x-jet-input-error for="password" class="mt-2" />
+                </div>
             </x-slot>
 
             <x-slot name="footer">
@@ -37,6 +46,6 @@
                     Delete Account
                 </x-jet-danger-button>
             </x-slot>
-        </x-jet-confirmation-modal>
+        </x-jet-dialog-modal>
     </x-slot>
 </x-jet-action-section>