Confirm with danger button

Author: pascalbaljet

app/resources/views/form/confirmDanger.blade.php

@@ -0,0 +1,12 @@
+@extends('layout')
+
+@section('content')
+
+FormConfirmDanger
+
+<x-splade-form confirm-danger :action="route('form.simple.submit')">
+    <input v-model="form.name" dusk="name" />
+    <button type="submit">Submit</button>
+</x-splade-form>
+
+@endsection

app/routes/web.php

@@ -106,6 +106,7 @@
     Route::view('form/background', 'form.background')->name('form.background');
 
     Route::view('form/confirm', 'form.confirm')->name('form.confirm');
+    Route::view('form/confirmDanger', 'form.confirmDanger')->name('form.confirmDanger');
     Route::view('form/customConfirm', 'form.customConfirm')->name('form.customConfirm');
     Route::view('form/passwordConfirm', 'form.passwordConfirm')->name('form.passwordConfirm');
     Route::view('form/passwordConfirmOnce', 'form.passwordConfirmOnce')->name('form.passwordConfirmOnce');

app/tests/Browser/FormTest.php

@@ -106,6 +106,25 @@ public function it_can_ask_to_confirm_the_submit()
         });
     }
 
+    /** @test */
+    public function it_can_ask_to_confirm_the_submit_with_a_danger_button()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('/form/confirmDanger')
+                ->waitForText('FormConfirmDanger')
+                ->type('@name', 'Splade')
+                ->press('Submit')
+                ->waitForText('Are you sure you want to continue?')
+                ->press('@splade-confirm-cancel')
+                ->waitUntilMissingText('Are you sure you want to continue?')
+                ->assertInputValue('@name', 'Splade')
+                ->press('Submit')
+                ->waitForText('Are you sure you want to continue?')
+                ->press('@splade-confirm-confirm')
+                ->waitForText('FormSimple'); // redirect
+        });
+    }
+
     /** @test */
     public function it_can_ask_to_confirm_the_submit_with_custom_texts()
     {

lib/Components/Confirm.vue

@@ -98,6 +98,12 @@ export default {
                 ? Splade.confirmModal.value.confirmPasswordOnce
                 : false;
         },
+
+        confirmDanger: function () {
+            return Splade.confirmModal.value?.confirmDanger
+                ? Splade.confirmModal.value.confirmDanger
+                : false;
+        },
     },
 
     watch: {
@@ -187,6 +193,7 @@ export default {
             confirmButton: this.confirmButton,
             cancelButton: this.cancelButton,
             confirmPassword: this.confirmPassword,
+            confirmDanger: this.confirmDanger,
 
             isOpen: this.isOpen,
             setIsOpen: this.setIsOpen,

lib/Components/Form.vue

@@ -48,12 +48,20 @@ export default {
             },
         },
 
-        confirm: {
+        confirmDanger: {
             type: [Boolean, String],
             required: false,
             default: false,
         },
 
+        confirm: {
+            type: [Boolean, String],
+            required: false,
+            default: (props) => {
+                return props.confirmDanger;
+            },
+        },
+
         confirmText: {
             type: String,
             required: false,
@@ -410,7 +418,8 @@ export default {
                 this.confirmButton,
                 this.cancelButton,
                 this.requirePassword ? true : false,
-                this.requirePasswordOnce
+                this.requirePasswordOnce,
+                this.confirmDanger ? true : false
             )
                 .then((password) => {
                     if(!this.requirePassword) {

lib/Components/Link.vue

@@ -52,12 +52,20 @@ const props = defineProps({
         default: false,
     },
 
-    confirm: {
+    confirmDanger: {
         type: [Boolean, String],
         required: false,
         default: false,
     },
 
+    confirm: {
+        type: [Boolean, String],
+        required: false,
+        default: (props) => {
+            return props.confirmDanger;
+        },
+    },
+
     confirmText: {
         type: String,
         required: false,
@@ -139,7 +147,8 @@ function navigate() {
         props.confirmButton,
         props.cancelButton,
         props.requirePassword ? true : false,
-        props.requirePasswordOnce
+        props.requirePasswordOnce,
+        props.confirmDanger ? true : false
     )
         .then((filledPassword) => {
             if(!props.requirePassword) {

lib/Splade.js

@@ -342,7 +342,7 @@ const confirmModal = ref(null);
  * Shows the confirm modal with the given texts and
  * returns a promise to listen for the response.
  */
-function confirm(title, text, confirmButton, cancelButton, confirmPassword, confirmPasswordOnce) {
+function confirm(title, text, confirmButton, cancelButton, confirmPassword, confirmPasswordOnce, confirmDanger) {
     let resolvePromise;
     let rejectPromise;
 
@@ -354,6 +354,10 @@ function confirm(title, text, confirmButton, cancelButton, confirmPassword, conf
         confirmPasswordOnce = false;
     }
 
+    if (typeof confirmDanger === "undefined") {
+        confirmDanger = false;
+    }
+
     const promise = new Promise((resolve, reject) => {
         resolvePromise = resolve;
         rejectPromise = reject;
@@ -367,7 +371,8 @@ function confirm(title, text, confirmButton, cancelButton, confirmPassword, conf
         resolvePromise,
         rejectPromise,
         confirmPassword,
-        confirmPasswordOnce
+        confirmPasswordOnce,
+        confirmDanger
     };
 
     return promise;

resources/views/components/confirm.blade.php

@@ -48,7 +48,11 @@ class="rounded-md block w-full border-0 focus:border-indigo-300 focus:ring focus
                                     <button
                                         dusk="splade-confirm-confirm"
                                         type="button"
-                                        class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+                                        class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 sm:w-auto sm:text-sm"
+                                        :class="{
+                                            'bg-indigo-500 hover:bg-indigo-700 focus:ring-indigo-500': !confirm.confirmDanger,
+                                            'bg-red-500 hover:bg-red-700 focus:ring-red-500': confirm.confirmDanger
+                                        }"
                                         @click.prevent="confirm.confirm"
                                         :disabled="confirm.submitting"
                                         v-text="confirm.confirmButton"