Membuat Logout Confirm Dengan Sweetalert

Saya asumsikan bahwa Anda sudah mengerti secara konsep bagaimana sweetalert bekerja, nah dalam konteks ini sebenarnya saya ingin memberikan sebuah contoh sederhana bagaimana membuat semacam konfirmasi logout session menggunakan sweetalert, disini sweetalert yang digunakan merupakan versi sweetalert lama (v1.x) yang sebenarnya adalah semacam ‘bundling’ dari template yang saya gunakan.

Contoh :

logout: function(){
    $(".js__logout").on("click", function(event){
        event.preventDefault();
        swal({
            title: "Logout bener?",   
            text: "Are you sure you want to logout?",   
            type: "warning",   
            showCancelButton: true,   
            confirmButtonColor: "#DD6B55",   
            confirmButtonText: "Yes, I'm out!", 
            cancelButtonText: "No, stay plx!", 
            closeOnConfirm: false,
            closeOnCancel: true,
            confirmButtonColor: '#f60e0e',
        }, function(isConfirm){   
            if (isConfirm) { 
                console.log(isConfirm);
                swal({
                    title: "Logout success", 
                    text: "See you later!", 
                    type: "success",
                    confirmButtonColor: '#304ffe',
                }, function() {
                    // Arahkan pengguna ke halaman /logout setelah konfirmasi
                    window.location.href = "/logout";
                });
            } else {    
                // Jika pengguna memilih "No, stay plx!"
            } 
        });
        return false;
    });
},

Jika kamu menggunakan sweetalert2 cara pemanggilan fungsinya bisa dilakukan seperti contoh berikut :

logout: function(){
    $(".js__logout").on("click", function(event){
        event.preventDefault();
        Swal.fire({  // Gunakan Swal.fire() di SweetAlert2
            title: "Logout?",   
            text: "Are you sure you want to logout?",   
            icon: "warning",  // "type" diubah menjadi "icon" di SweetAlert2
            showCancelButton: true,   
            confirmButtonColor: "#DD6B55",   
            confirmButtonText: "Yes, I'm out!", 
            cancelButtonText: "No, stay plx!", 
            reverseButtons: true, // untuk urutan tombol yang benar
        }).then(function(result){  // Menggunakan .then() untuk menangani hasil
            if (result.isConfirmed) {     
                Swal.fire({
                    title: "Logout success", 
                    text: "See you later!", 
                    icon: "success",  // "type" menjadi "icon" di SweetAlert2
                    confirmButtonColor: '#304ffe',
                }).then(function() {
                    // Arahkan pengguna ke halaman /logout setelah konfirmasi
                    window.location.href = "/logout";
                });
            } else {    
                // Jika pengguna memilih "No, stay plx!"
            } 
        });
        return false;
    });
},

Kedua contoh diatas menggunakan parameter logout: diawal yang merupakan semacam parameter untuk grouping fungsi yang juga merupakan default script yang terdapat pada template yang saya gunakan, sehingga jika seandainya kalian ingin menggunakan semacam custom js tersendiri, silahkan tambahkan parameternya didalam custom jquery masing – masing seperti berikut :

(function($) {
		 $(".js__logout").on("click", function(event){
		        event.preventDefault();
		        swal({
		            title: "Logout bener?",   
		            text: "Are you sure you want to logout?",   
		            type: "warning",   
		            showCancelButton: true,   
		            confirmButtonColor: "#DD6B55",   
		            confirmButtonText: "Yes, I'm out!", 
		            cancelButtonText: "No, stay plx!", 
		            closeOnConfirm: false,
		            closeOnCancel: true,
		            confirmButtonColor: '#f60e0e',
		        }, function(isConfirm){   
		            if (isConfirm) { 
		            	//console.log(isConfirm);    
		                swal({
		                    title: "Logout success", 
		                    text: "See you later!", 
		                    type: "success",
		                    confirmButtonColor: '#304ffe',
		                },function() {
		                    // Arahkan pengguna ke halaman /logout setelah konfirmasi
		                    window.location.href = "/logout";
		                });
		            } else {    
		                // Jika pengguna memilih "No, stay plx!"
		            } 
		        });
		        return false;
		    });
})(jQuery);

Terakhir kita buat triger untuk memanggil sweetalert ketika terjadi klik

<a class="js__logout" href="#">Log Out</a>