Fix regression in notification deliverability (CTFd#1659)

 * Fix regression in notification deliverability. Closes CTFd#1641
    * Only master tabs were showing notifications
* Only play the notification sound in the master tab
* Clears notification form after notification submission
* Add notification to admin notification list after creation. Closes CTFd#1651 
* Remove `console.log` statements from minified production JS

CTFd/themes/admin/assets/js/components/notifications/Notification.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="card bg-light mb-4">
+    <button
+      type="button"
+      :data-notif-id="this.id"
+      class="delete-notification close position-absolute p-3"
+      style="right:0;"
+      data-dismiss="alert"
+      aria-label="Close"
+      @click="deleteNotification()"
+    >
+      <span aria-hidden="true">&times;</span>
+    </button>
+    <div class="card-body">
+      <h3 class="card-title">{{ title }}</h3>
+      <blockquote class="blockquote mb-0">
+        <p v-html="this.content"></p>
+        <small class="text-muted">
+          <span :data-time="this.date">{{ this.localDate() }}</span>
+        </small>
+      </blockquote>
+    </div>
+  </div>
+</template>
+
+<script>
+import CTFd from "core/CTFd";
+import Moment from "moment";
+export default {
+  props: {
+    id: Number,
+    title: String,
+    content: String,
+    date: String
+  },
+  methods: {
+    localDate: function() {
+      return Moment(this.date)
+        .local()
+        .format("MMMM Do, h:mm:ss A");
+    },
+    deleteNotification: function() {
+      if (confirm("Are you sure you want to delete this notification?")) {
+        CTFd.api
+          .delete_notification({ notificationId: this.id })
+          .then(response => {
+            if (response.success) {
+              // Delete the current component
+              // https://stackoverflow.com/a/55384005
+              this.$destroy();
+              this.$el.parentNode.removeChild(this.$el);
+            }
+          });
+      }
+    }
+  }
+};
+</script>

CTFd/themes/admin/assets/js/pages/notifications.js

@@ -2,7 +2,11 @@ import "./main";
 import "core/utils";
 import $ from "jquery";
 import CTFd from "core/CTFd";
-import { ezQuery, ezAlert } from "core/ezq";
+import { ezAlert } from "core/ezq";
+import Vue from "vue/dist/vue.esm.browser";
+import Notification from "../components/notifications/Notification.vue";
+
+const notificationCard = Vue.extend(Notification);
 
 function submit(event) {
   event.preventDefault();
@@ -13,6 +17,9 @@ function submit(event) {
   $form.find("button[type=submit]").attr("disabled", true);
 
   CTFd.api.post_notification_list({}, params).then(response => {
+    $form.find(":input[name=title]").val("");
+    $form.find(":input[name=content]").val("");
+
     // Admin should also see the notification sent out
     setTimeout(function() {
       $form.find("button[type=submit]").attr("disabled", false);
@@ -24,6 +31,17 @@ function submit(event) {
         button: "OK"
       });
     }
+
+    let vueContainer = document.createElement("div");
+    $("#notifications-list").prepend(vueContainer);
+    new notificationCard({
+      propsData: {
+        id: response.data.id,
+        title: response.data.title,
+        content: response.data.content,
+        date: response.data.date
+      }
+    }).$mount(vueContainer);
   });
 }
 
@@ -32,17 +50,13 @@ function deleteNotification(event) {
   const $elem = $(this);
   const id = $elem.data("notif-id");
 
-  ezQuery({
-    title: "Delete Notification",
-    body: "Are you sure you want to delete this notification?",
-    success: function() {
-      CTFd.api.delete_notification({ notificationId: id }).then(response => {
-        if (response.success) {
-          $elem.parent().remove();
-        }
-      });
-    }
-  });
+  if (confirm("Are you sure you want to delete this notification?")) {
+    CTFd.api.delete_notification({ notificationId: id }).then(response => {
+      if (response.success) {
+        $elem.parent().remove();
+      }
+    });
+  }
 }
 
 $(() => {