Properly warn user when saving media path

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

@@ -4,7 +4,7 @@
       <span>Settings</span>
     </h1>
 
-    <form @submit.prevent="save" class="main-scroll-wrap">
+    <form @submit.prevent="confirmThenSave" class="main-scroll-wrap">
       <div class="form-row">
         <label for="inputSettingsPath">Media Path</label>
         <p class="help">
@@ -26,7 +26,7 @@
 <script>
 import swal from 'sweetalert';
 
-import { settingStore } from '../../../stores';
+import { settingStore, sharedStore } from '../../../stores';
 import { parseValidationError, forceReloadWindow, event, showOverlay, hideOverlay } from '../../../utils';
 import router from '../../../router';
 
@@ -34,51 +34,63 @@ export default {
   data() {
     return {
       state: settingStore.state,
-      originalMediaPath: null,
+      sharedState: sharedStore.state,
     };
   },
 
-  created() {
-    this.originalMediaPath = this.state.settings.media_path;
-    console.log('dam');
+  computed: {
+    /**
+     * Determine if we should warn the user upon saving.
+     * @return {boolean}
+     */
+    shouldWarn() {
+      // Warn the user if the media path is not empty and about to change.
+      return this.sharedState.originalMediaPath &&
+        this.sharedState.originalMediaPath !== this.state.settings.media_path.trim();
+    },
   },
 
   methods: {
+    confirmThenSave() {
+      if (this.shouldWarn) {
+        swal({
+          title: 'Be careful!',
+          text: 'Changing the media path will essentially remove all existing data – songs, artists, \
+          albums, favorites, everything – and empty your playlists!',
+          type: 'warning',
+          showCancelButton: true,
+          confirmButtonText: 'I know. Go ahead.',
+          confirmButtonColor: '#c34848',
+        }, this.save);
+      } else {
+        this.save();
+      }
+    },
+
     /**
      * Save the settings.
      */
     save() {
-      console.log(this.originalMediaPath);
-      swal({
-        title: 'Be careful!',
-        text: 'Changing the media path will essentially remove all existing data – songs, artists, \
-        albums, favorites, everything – and empty your playlists!',
-        type: 'warning',
-        showCancelButton: true,
-        confirmButtonText: 'I know. Go ahead.',
-        confirmButtonColor: '#c34848',
-      }, () => {
-        showOverlay();
+      showOverlay();
 
-        settingStore.update().then(() => {
-          // Make sure we're back to home first.
-          router.go('home');
-          forceReloadWindow();
-        }).catch(r => {
-          let msg = 'Unknown error.';
+      settingStore.update().then(() => {
+        // Make sure we're back to home first.
+        router.go('home');
+        forceReloadWindow();
+      }).catch(r => {
+        let msg = 'Unknown error.';
 
-          if (r.status === 422) {
-            msg = parseValidationError(r.responseJSON)[0];
-          }
+        if (r.status === 422) {
+          msg = parseValidationError(r.responseJSON)[0];
+        }
 
-          hideOverlay();
+        hideOverlay();
 
-          swal({
-            title: 'Something went wrong',
-            text: msg,
-            type: 'error',
-            allowOutsideClick: true,
-          });
+        swal({
+          title: 'Something went wrong',
+          text: msg,
+          type: 'error',
+          allowOutsideClick: true,
         });
       });
     },

resources/assets/js/stores/shared.js

@@ -22,6 +22,7 @@ export const sharedStore = {
     currentVersion: '',
     latestVersion: '',
     cdnUrl: '',
+    originalMediaPath: '',
   },
 
   init() {
@@ -50,6 +51,9 @@ export const sharedStore = {
         queueStore.init();
         settingStore.init(this.state.settings);
 
+        // Keep a copy of the media path. We'll need this to properly warn the user later.
+        this.state.originalMediaPath = this.state.settings.media_path;
+
         resolve(data)
       }, r => reject(r));
     });