Add a setting to confirm Koel before closing

resources/assets/js/app.vue

@@ -80,6 +80,15 @@
                     // Ask for user's notification permission.
                     this.requestNotifPermission();
 
+                    // To confirm or not to confirm closing, it's a question.
+                    window.onbeforeunload = e => {
+                        if (!this.prefs.confirmClosing) {
+                            return;
+                        }
+
+                        return 'You asked Koel to confirm before closing, so here it is.';
+                    };
+
                     // Let all other compoenents know we're ready.
                     this.$broadcast('koel:ready');
                 }, () => this.authenticated = false);

resources/assets/js/components/main-wrapper/main-content/profile.vue

@@ -41,8 +41,16 @@
 
             <div class="preferences">
                 <div class="form-row">
-                    <input type="checkbox" v-model="prefs.notify" @change="savePreference()">
-                    <span @click="prefs.notify = !prefs.notify">Show “Now Playing” song notification</span>
+                    <label>
+                        <input type="checkbox" v-model="prefs.notify" @change="savePreference()">
+                        Show “Now Playing” song notification
+                    </label>
+                </div>
+                <div class="form-row">
+                    <label>
+                        <input type="checkbox" v-model="prefs.confirmClosing" @change="changeConfirmClosing">
+                        Confirm before closing Koel
+                    </label>
                 </div>
             </div>
 
@@ -66,7 +74,6 @@
                         Doing so will reload Koel, though.
                     </p>
 
-
                     <div class="buttons">
                         <button @click.prevent="connectToLastfm" class="connect">
                             <i class="fa fa-lastfm"></i>
@@ -143,6 +150,14 @@
                 });
             },
 
+            /**
+             * Change the confirmClosing value on the window object (and save it as a preference too).
+             */
+            changeConfirmClosing() {
+                window.confirmClosing = this.prefs.confirmClosing;
+                preferenceStore.save();
+            },
+
             /**
              * Save the current user's preference. 
              * Right now it's only "Song notification."
@@ -209,6 +224,10 @@
         .preferences {
             margin-top: 32px;
             border-top: 1px solid $color2ndBgr;
+
+            label {
+                font-size: $fontSize;
+            }
         }
 
         .lastfm {

resources/assets/js/stores/preference.js

@@ -11,6 +11,7 @@ export default {
         notify: true,
         repeatMode: 'NO_REPEAT',
         showExtraPanel: true,
+        confirmClosing: false,
         equalizerGains: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
     },