Alert and confirm beautifully

gulpfile.js

@@ -36,7 +36,8 @@ elixir(function (mix) {
     .styles([
       'resources/assets/css/**/*.css',
       'node_modules/font-awesome/css/font-awesome.min.css',
-      'node_modules/rangeslider.js/dist/rangeslider.css'
+      'node_modules/rangeslider.js/dist/rangeslider.css',
+      'node_modules/sweetalert/dist/sweetalert.css'
     ], 'public/css/vendors.css', './');
 
   mix.version(['css/vendors.css', 'css/app.css', 'js/vendors.js', 'js/main.js']);

package.json

@@ -43,6 +43,7 @@
     "rangetouch": "0.0.9",
     "select": "^1.0.6",
     "sinon": "^1.17.2",
+    "sweetalert": "^1.1.3",
     "vue": "^2.0.0-beta.5",
     "vue-hot-reload-api": "^1.3.2",
     "vueify": "^9.1.0",

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

@@ -38,7 +38,7 @@
         </button>
         <button class="del btn btn-red"
           title="Delete this playlist"
-          @click.prevent="del">
+          @click.prevent="confirmDelete">
           <i class="fa fa-times"></i> Playlist
         </button>
 
@@ -57,6 +57,7 @@
 
 <script>
 import isMobile from 'ismobilejs';
+import swal from 'sweetalert';
 
 import { pluralize, event } from '../../../utils';
 import { playlistStore, sharedStore } from '../../../stores';
@@ -101,6 +102,26 @@ export default {
       playback.queueAndPlay(this.playlist.songs, true);
     },
 
+    /**
+     * Confirm deleting the playlist.
+     */
+    confirmDelete() {
+      // If the playlist is empty, just go ahead and delete it.
+      if (!this.playlist.songs.length) {
+        this.del();
+
+        return;
+      }
+
+      swal({
+        title: 'Are you sure?',
+        text: 'Once it’s gone, it’s gone, and there’s no turning back.',
+        type: 'warning',
+        showCancelButton: true,
+        confirmButtonText: 'Yes, go ahead',
+      }, this.del);
+    },
+
     /**
      * Delete the current playlist.
      */

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

@@ -35,7 +35,6 @@
 
         <div class="form-row">
           <button type="submit">Save</button>
-          <span v-show="showStatus" class="status">Saved!</span>
         </div>
       </form>
 
@@ -106,6 +105,7 @@
 
 <script>
 import $ from 'jquery';
+import swal from 'sweetalert';
 
 import { userStore, preferenceStore, sharedStore } from '../../../stores';
 import { forceReloadWindow } from '../../../utils';
@@ -118,7 +118,6 @@ export default {
       cache: userStore.stub,
       pwd: '',
       confirmPwd: '',
-      showStatus: false,
       prefs: preferenceStore.state,
       sharedState: sharedStore.state,
     };
@@ -142,9 +141,12 @@ export default {
         this.pwd = '';
         this.confirmPwd = '';
 
-        // "Save!" aaaaaaaand it's gone!
-        this.showStatus = true;
-        setTimeout(() => this.showStatus = false, 3000);
+        swal({
+          title: 'Done!',
+          text: 'Profile saved.',
+          type: 'success',
+          allowOutsideClick: true,
+        });
       });
     },
 

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

@@ -24,6 +24,8 @@
 </template>
 
 <script>
+import swal from 'sweetalert';
+
 import { settingStore } from '../../../stores';
 import { parseValidationError, forceReloadWindow, event, showOverlay, hideOverlay } from '../../../utils';
 import router from '../../../router';
@@ -32,14 +34,30 @@ export default {
   data() {
     return {
       state: settingStore.state,
+      originalMediaPath: null,
     };
   },
 
+  created() {
+    this.originalMediaPath = this.state.settings.media_path;
+    console.log('dam');
+  },
+
   methods: {
     /**
      * 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();
 
         settingStore.update().then(() => {
@@ -53,7 +71,15 @@ export default {
             msg = parseValidationError(r.responseJSON)[0];
           }
 
-        showOverlay(`Error: ${msg}`, 'error', true);
+          hideOverlay();
+
+          swal({
+            title: 'Something went wrong',
+            text: msg,
+            type: 'error',
+            allowOutsideClick: true,
+          });
+        });
       });
     },
   },

resources/assets/js/components/shared/user-item.vue

@@ -12,15 +12,10 @@
         </div>
 
         <div class="buttons">
-          <button class="btn btn-blue" @click="edit" v-show="!confirmingDelete">
+          <button class="btn btn-blue" @click="edit">
             {{ isCurrentUser ? 'Update Profile' : 'Edit' }}
           </button>
-          <button v-show="!isCurrentUser && !confirmingDelete"
-            class="btn btn-red" @click="confirmDelete">Delete</button>
-          <span v-show="confirmingDelete">
-            <button class="btn btn-red" @click="destroy">Confirm</button>
-            <button @click="cancelDelete">Cancel</button>
-          </span>
+          <button class="btn btn-red" @click="del">Delete</button>
         </div>
       </div>
     </div>
@@ -49,6 +44,7 @@
 
 <script>
 import { clone, assign } from 'lodash';
+import swal from 'sweetalert';
 
 import { userStore } from '../../stores';
 import router from '../../router';
@@ -110,28 +106,22 @@ export default {
       });
     },
 
-    /**
-     * Confirm the delete action by triggering the confirming div's visibility.
-     */
-    confirmDelete() {
-      this.confirmingDelete = true;
-    },
-
-    /**
-     * Cancel the delete action.
-     */
-    cancelDelete() {
-      this.confirmingDelete = false;
-    },
-
     /**
      * Kill off the freaking user.
      */
-    destroy() {
+    del() {
+      swal({
+        title: 'Hey…',
+        text: `You’re about to unperson ${this.user.name}. Are you sure?`,
+        type: 'warning',
+        showCancelButton: true,
+        confirmButtonText: 'Certainly',
+        cancelButtonText: 'Oops',
+      }, () => {
         userStore.destroy(this.user).then(() => {
-        this.confirmingDelete = false;
           this.$destroy(true);
         });
+      });
     },
   },
 };

resources/assets/sass/app.scss

@@ -6,4 +6,6 @@
 
 @import "vendor/_plyr.scss";
 @import "vendor/_nprogress.scss";
+@import "vendor/_sweetalert.scss";
+
 @import "partials/_shared.scss";

resources/assets/sass/vendor/_sweetalert.scss

@@ -0,0 +1,23 @@
+.sweet-alert {
+  font-family: $fontFamily;
+
+  fieldset input {
+    display: none !important;
+  }
+
+  h2 {
+    font-weight: $fontWeight_UltraThin;
+  }
+
+  p {
+    font-size: 1.1rem;
+    line-height: 1.8rem;
+  }
+
+  button {
+    box-shadow: none !important;
+    font-family: $fontFamily;
+    font-weight: $fontWeight_Thin;
+    font-size: 1.1rem;
+  }
+}