vue

core/users.go

@@ -103,6 +103,8 @@ func AuthUser(username, password string) (*User, bool) {
 		return nil, false
 	}
 	if CheckHash(password, user.Password) {
+		user.UpdatedAt = time.Now().UTC()
+		user.Update()
 		return user, true
 	}
 	return nil, false

frontend/src/App.vue

@@ -1,11 +1,12 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view :loaded="loaded"/>
-      <Footer version="DEV" v-if="$route.path !== '/setup'"/>
+      <Footer :version="version" v-if="$route.path !== '/setup'"/>
   </div>
 </template>
 
 <script>
+  import Api from './components/API';
   import Footer from "./components/Footer";
 
   export default {
@@ -15,26 +16,26 @@
   },
   data () {
     return {
-      loaded: false
+      loaded: false,
+        version: "",
+        logged_in: false,
     }
+  },
+      async created() {
+          await this.$store.dispatch('loadRequired')
+          this.loaded = true
+          window.console.log('finished loadRequired')
       },
     async mounted() {
           if (this.$route.path !== '/setup') {
-        const tk = JSON.parse(localStorage.getItem("statping_user"))
+              const tk = localStorage.getItem("statping_user")
-        if (tk.token) {
+              if (tk) {
-          await this.$store.dispatch('loadAdmin')
+                  // await this.$store.dispatch('loadAdmin')
-          this.loaded = true
-          return
-        }
-        if (!this.$store.getters.hasPublicData) {
-          await this.$store.dispatch('loadRequired')
               }
           }
     },
     methods: {
-      async setAllObjects () {
+
-        this.loaded = true
-      }
     }
 }
 </script>

frontend/src/assets/js/css.js

@@ -0,0 +1,820 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+CodeMirror.defineMode("css", function(config, parserConfig) {
+  var inline = parserConfig.inline
+  if (!parserConfig.propertyKeywords) parserConfig = CodeMirror.resolveMode("text/css");
+
+  var indentUnit = config.indentUnit,
+      tokenHooks = parserConfig.tokenHooks,
+      documentTypes = parserConfig.documentTypes || {},
+      mediaTypes = parserConfig.mediaTypes || {},
+      mediaFeatures = parserConfig.mediaFeatures || {},
+      mediaValueKeywords = parserConfig.mediaValueKeywords || {},
+      propertyKeywords = parserConfig.propertyKeywords || {},
+      nonStandardPropertyKeywords = parserConfig.nonStandardPropertyKeywords || {},
+      fontProperties = parserConfig.fontProperties || {},
+      counterDescriptors = parserConfig.counterDescriptors || {},
+      colorKeywords = parserConfig.colorKeywords || {},
+      valueKeywords = parserConfig.valueKeywords || {},
+      allowNested = parserConfig.allowNested,
+      lineComment = parserConfig.lineComment,
+      supportsAtComponent = parserConfig.supportsAtComponent === true;
+
+  var type, override;
+  function ret(style, tp) { type = tp; return style; }
+
+  // Tokenizers
+
+  function tokenBase(stream, state) {
+    var ch = stream.next();
+    if (tokenHooks[ch]) {
+      var result = tokenHooks[ch](stream, state);
+      if (result !== false) return result;
+    }
+    if (ch == "@") {
+      stream.eatWhile(/[\w\\\-]/);
+      return ret("def", stream.current());
+    } else if (ch == "=" || (ch == "~" || ch == "|") && stream.eat("=")) {
+      return ret(null, "compare");
+    } else if (ch == "\"" || ch == "'") {
+      state.tokenize = tokenString(ch);
+      return state.tokenize(stream, state);
+    } else if (ch == "#") {
+      stream.eatWhile(/[\w\\\-]/);
+      return ret("atom", "hash");
+    } else if (ch == "!") {
+      stream.match(/^\s*\w*/);
+      return ret("keyword", "important");
+    } else if (/\d/.test(ch) || ch == "." && stream.eat(/\d/)) {
+      stream.eatWhile(/[\w.%]/);
+      return ret("number", "unit");
+    } else if (ch === "-") {
+      if (/[\d.]/.test(stream.peek())) {
+        stream.eatWhile(/[\w.%]/);
+        return ret("number", "unit");
+      } else if (stream.match(/^-[\w\\\-]+/)) {
+        stream.eatWhile(/[\w\\\-]/);
+        if (stream.match(/^\s*:/, false))
+          return ret("variable-2", "variable-definition");
+        return ret("variable-2", "variable");
+      } else if (stream.match(/^\w+-/)) {
+        return ret("meta", "meta");
+      }
+    } else if (/[,+>*\/]/.test(ch)) {
+      return ret(null, "select-op");
+    } else if (ch == "." && stream.match(/^-?[_a-z][_a-z0-9-]*/i)) {
+      return ret("qualifier", "qualifier");
+    } else if (/[:;{}\[\]\(\)]/.test(ch)) {
+      return ret(null, ch);
+    } else if (((ch == "u" || ch == "U") && stream.match(/rl(-prefix)?\(/i)) ||
+               ((ch == "d" || ch == "D") && stream.match("omain(", true, true)) ||
+               ((ch == "r" || ch == "R") && stream.match("egexp(", true, true))) {
+      stream.backUp(1);
+      state.tokenize = tokenParenthesized;
+      return ret("property", "word");
+    } else if (/[\w\\\-]/.test(ch)) {
+      stream.eatWhile(/[\w\\\-]/);
+      return ret("property", "word");
+    } else {
+      return ret(null, null);
+    }
+  }
+
+  function tokenString(quote) {
+    return function(stream, state) {
+      var escaped = false, ch;
+      while ((ch = stream.next()) != null) {
+        if (ch == quote && !escaped) {
+          if (quote == ")") stream.backUp(1);
+          break;
+        }
+        escaped = !escaped && ch == "\\";
+      }
+      if (ch == quote || !escaped && quote != ")") state.tokenize = null;
+      return ret("string", "string");
+    };
+  }
+
+  function tokenParenthesized(stream, state) {
+    stream.next(); // Must be '('
+    if (!stream.match(/\s*[\"\')]/, false))
+      state.tokenize = tokenString(")");
+    else
+      state.tokenize = null;
+    return ret(null, "(");
+  }
+
+  // Context management
+
+  function Context(type, indent, prev) {
+    this.type = type;
+    this.indent = indent;
+    this.prev = prev;
+  }
+
+  function pushContext(state, stream, type, indent) {
+    state.context = new Context(type, stream.indentation() + (indent === false ? 0 : indentUnit), state.context);
+    return type;
+  }
+
+  function popContext(state) {
+    if (state.context.prev)
+      state.context = state.context.prev;
+    return state.context.type;
+  }
+
+  function pass(type, stream, state) {
+    return states[state.context.type](type, stream, state);
+  }
+  function popAndPass(type, stream, state, n) {
+    for (var i = n || 1; i > 0; i--)
+      state.context = state.context.prev;
+    return pass(type, stream, state);
+  }
+
+  // Parser
+
+  function wordAsValue(stream) {
+    var word = stream.current().toLowerCase();
+    if (valueKeywords.hasOwnProperty(word))
+      override = "atom";
+    else if (colorKeywords.hasOwnProperty(word))
+      override = "keyword";
+    else
+      override = "variable";
+  }
+
+  var states = {};
+
+  states.top = function(type, stream, state) {
+    if (type == "{") {
+      return pushContext(state, stream, "block");
+    } else if (type == "}" && state.context.prev) {
+      return popContext(state);
+    } else if (supportsAtComponent && /@component/i.test(type)) {
+      return pushContext(state, stream, "atComponentBlock");
+    } else if (/^@(-moz-)?document$/i.test(type)) {
+      return pushContext(state, stream, "documentTypes");
+    } else if (/^@(media|supports|(-moz-)?document|import)$/i.test(type)) {
+      return pushContext(state, stream, "atBlock");
+    } else if (/^@(font-face|counter-style)/i.test(type)) {
+      state.stateArg = type;
+      return "restricted_atBlock_before";
+    } else if (/^@(-(moz|ms|o|webkit)-)?keyframes$/i.test(type)) {
+      return "keyframes";
+    } else if (type && type.charAt(0) == "@") {
+      return pushContext(state, stream, "at");
+    } else if (type == "hash") {
+      override = "builtin";
+    } else if (type == "word") {
+      override = "tag";
+    } else if (type == "variable-definition") {
+      return "maybeprop";
+    } else if (type == "interpolation") {
+      return pushContext(state, stream, "interpolation");
+    } else if (type == ":") {
+      return "pseudo";
+    } else if (allowNested && type == "(") {
+      return pushContext(state, stream, "parens");
+    }
+    return state.context.type;
+  };
+
+  states.block = function(type, stream, state) {
+    if (type == "word") {
+      var word = stream.current().toLowerCase();
+      if (propertyKeywords.hasOwnProperty(word)) {
+        override = "property";
+        return "maybeprop";
+      } else if (nonStandardPropertyKeywords.hasOwnProperty(word)) {
+        override = "string-2";
+        return "maybeprop";
+      } else if (allowNested) {
+        override = stream.match(/^\s*:(?:\s|$)/, false) ? "property" : "tag";
+        return "block";
+      } else {
+        override += " error";
+        return "maybeprop";
+      }
+    } else if (type == "meta") {
+      return "block";
+    } else if (!allowNested && (type == "hash" || type == "qualifier")) {
+      override = "error";
+      return "block";
+    } else {
+      return states.top(type, stream, state);
+    }
+  };
+
+  states.maybeprop = function(type, stream, state) {
+    if (type == ":") return pushContext(state, stream, "prop");
+    return pass(type, stream, state);
+  };
+
+  states.prop = function(type, stream, state) {
+    if (type == ";") return popContext(state);
+    if (type == "{" && allowNested) return pushContext(state, stream, "propBlock");
+    if (type == "}" || type == "{") return popAndPass(type, stream, state);
+    if (type == "(") return pushContext(state, stream, "parens");
+
+    if (type == "hash" && !/^#([0-9a-fA-f]{3,4}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8})$/.test(stream.current())) {
+      override += " error";
+    } else if (type == "word") {
+      wordAsValue(stream);
+    } else if (type == "interpolation") {
+      return pushContext(state, stream, "interpolation");
+    }
+    return "prop";
+  };
+
+  states.propBlock = function(type, _stream, state) {
+    if (type == "}") return popContext(state);
+    if (type == "word") { override = "property"; return "maybeprop"; }
+    return state.context.type;
+  };
+
+  states.parens = function(type, stream, state) {
+    if (type == "{" || type == "}") return popAndPass(type, stream, state);
+    if (type == ")") return popContext(state);
+    if (type == "(") return pushContext(state, stream, "parens");
+    if (type == "interpolation") return pushContext(state, stream, "interpolation");
+    if (type == "word") wordAsValue(stream);
+    return "parens";
+  };
+
+  states.pseudo = function(type, stream, state) {
+    if (type == "meta") return "pseudo";
+
+    if (type == "word") {
+      override = "variable-3";
+      return state.context.type;
+    }
+    return pass(type, stream, state);
+  };
+
+  states.documentTypes = function(type, stream, state) {
+    if (type == "word" && documentTypes.hasOwnProperty(stream.current())) {
+      override = "tag";
+      return state.context.type;
+    } else {
+      return states.atBlock(type, stream, state);
+    }
+  };
+
+  states.atBlock = function(type, stream, state) {
+    if (type == "(") return pushContext(state, stream, "atBlock_parens");
+    if (type == "}" || type == ";") return popAndPass(type, stream, state);
+    if (type == "{") return popContext(state) && pushContext(state, stream, allowNested ? "block" : "top");
+
+    if (type == "interpolation") return pushContext(state, stream, "interpolation");
+
+    if (type == "word") {
+      var word = stream.current().toLowerCase();
+      if (word == "only" || word == "not" || word == "and" || word == "or")
+        override = "keyword";
+      else if (mediaTypes.hasOwnProperty(word))
+        override = "attribute";
+      else if (mediaFeatures.hasOwnProperty(word))
+        override = "property";
+      else if (mediaValueKeywords.hasOwnProperty(word))
+        override = "keyword";
+      else if (propertyKeywords.hasOwnProperty(word))
+        override = "property";
+      else if (nonStandardPropertyKeywords.hasOwnProperty(word))
+        override = "string-2";
+      else if (valueKeywords.hasOwnProperty(word))
+        override = "atom";
+      else if (colorKeywords.hasOwnProperty(word))
+        override = "keyword";
+      else
+        override = "error";
+    }
+    return state.context.type;
+  };
+
+  states.atComponentBlock = function(type, stream, state) {
+    if (type == "}")
+      return popAndPass(type, stream, state);
+    if (type == "{")
+      return popContext(state) && pushContext(state, stream, allowNested ? "block" : "top", false);
+    if (type == "word")
+      override = "error";
+    return state.context.type;
+  };
+
+  states.atBlock_parens = function(type, stream, state) {
+    if (type == ")") return popContext(state);
+    if (type == "{" || type == "}") return popAndPass(type, stream, state, 2);
+    return states.atBlock(type, stream, state);
+  };
+
+  states.restricted_atBlock_before = function(type, stream, state) {
+    if (type == "{")
+      return pushContext(state, stream, "restricted_atBlock");
+    if (type == "word" && state.stateArg == "@counter-style") {
+      override = "variable";
+      return "restricted_atBlock_before";
+    }
+    return pass(type, stream, state);
+  };
+
+  states.restricted_atBlock = function(type, stream, state) {
+    if (type == "}") {
+      state.stateArg = null;
+      return popContext(state);
+    }
+    if (type == "word") {
+      if ((state.stateArg == "@font-face" && !fontProperties.hasOwnProperty(stream.current().toLowerCase())) ||
+          (state.stateArg == "@counter-style" && !counterDescriptors.hasOwnProperty(stream.current().toLowerCase())))
+        override = "error";
+      else
+        override = "property";
+      return "maybeprop";
+    }
+    return "restricted_atBlock";
+  };
+
+  states.keyframes = function(type, stream, state) {
+    if (type == "word") { override = "variable"; return "keyframes"; }
+    if (type == "{") return pushContext(state, stream, "top");
+    return pass(type, stream, state);
+  };
+
+  states.at = function(type, stream, state) {
+    if (type == ";") return popContext(state);
+    if (type == "{" || type == "}") return popAndPass(type, stream, state);
+    if (type == "word") override = "tag";
+    else if (type == "hash") override = "builtin";
+    return "at";
+  };
+
+  states.interpolation = function(type, stream, state) {
+    if (type == "}") return popContext(state);
+    if (type == "{" || type == ";") return popAndPass(type, stream, state);
+    if (type == "word") override = "variable";
+    else if (type != "variable" && type != "(" && type != ")") override = "error";
+    return "interpolation";
+  };
+
+  return {
+    startState: function(base) {
+      return {tokenize: null,
+              state: inline ? "block" : "top",
+              stateArg: null,
+              context: new Context(inline ? "block" : "top", base || 0, null)};
+    },
+
+    token: function(stream, state) {
+      if (!state.tokenize && stream.eatSpace()) return null;
+      var style = (state.tokenize || tokenBase)(stream, state);
+      if (style && typeof style == "object") {
+        type = style[1];
+        style = style[0];
+      }
+      override = style;
+      if (type != "comment")
+        state.state = states[state.state](type, stream, state);
+      return override;
+    },
+
+    indent: function(state, textAfter) {
+      var cx = state.context, ch = textAfter && textAfter.charAt(0);
+      var indent = cx.indent;
+      if (cx.type == "prop" && (ch == "}" || ch == ")")) cx = cx.prev;
+      if (cx.prev) {
+        if (ch == "}" && (cx.type == "block" || cx.type == "top" ||
+                          cx.type == "interpolation" || cx.type == "restricted_atBlock")) {
+          // Resume indentation from parent context.
+          cx = cx.prev;
+          indent = cx.indent;
+        } else if (ch == ")" && (cx.type == "parens" || cx.type == "atBlock_parens") ||
+            ch == "{" && (cx.type == "at" || cx.type == "atBlock")) {
+          // Dedent relative to current context.
+          indent = Math.max(0, cx.indent - indentUnit);
+        }
+      }
+      return indent;
+    },
+
+    electricChars: "}",
+    blockCommentStart: "/*",
+    blockCommentEnd: "*/",
+    blockCommentContinue: " * ",
+    lineComment: lineComment,
+    fold: "brace"
+  };
+});
+
+  function keySet(array) {
+    var keys = {};
+    for (var i = 0; i < array.length; ++i) {
+      keys[array[i].toLowerCase()] = true;
+    }
+    return keys;
+  }
+
+  var documentTypes_ = [
+    "domain", "regexp", "url", "url-prefix"
+  ], documentTypes = keySet(documentTypes_);
+
+  var mediaTypes_ = [
+    "all", "aural", "braille", "handheld", "print", "projection", "screen",
+    "tty", "tv", "embossed"
+  ], mediaTypes = keySet(mediaTypes_);
+
+  var mediaFeatures_ = [
+    "width", "min-width", "max-width", "height", "min-height", "max-height",
+    "device-width", "min-device-width", "max-device-width", "device-height",
+    "min-device-height", "max-device-height", "aspect-ratio",
+    "min-aspect-ratio", "max-aspect-ratio", "device-aspect-ratio",
+    "min-device-aspect-ratio", "max-device-aspect-ratio", "color", "min-color",
+    "max-color", "color-index", "min-color-index", "max-color-index",
+    "monochrome", "min-monochrome", "max-monochrome", "resolution",
+    "min-resolution", "max-resolution", "scan", "grid", "orientation",
+    "device-pixel-ratio", "min-device-pixel-ratio", "max-device-pixel-ratio",
+    "pointer", "any-pointer", "hover", "any-hover"
+  ], mediaFeatures = keySet(mediaFeatures_);
+
+  var mediaValueKeywords_ = [
+    "landscape", "portrait", "none", "coarse", "fine", "on-demand", "hover",
+    "interlace", "progressive"
+  ], mediaValueKeywords = keySet(mediaValueKeywords_);
+
+  var propertyKeywords_ = [
+    "align-content", "align-items", "align-self", "alignment-adjust",
+    "alignment-baseline", "anchor-point", "animation", "animation-delay",
+    "animation-direction", "animation-duration", "animation-fill-mode",
+    "animation-iteration-count", "animation-name", "animation-play-state",
+    "animation-timing-function", "appearance", "azimuth", "backface-visibility",
+    "background", "background-attachment", "background-blend-mode", "background-clip",
+    "background-color", "background-image", "background-origin", "background-position",
+    "background-repeat", "background-size", "baseline-shift", "binding",
+    "bleed", "bookmark-label", "bookmark-level", "bookmark-state",
+    "bookmark-target", "border", "border-bottom", "border-bottom-color",
+    "border-bottom-left-radius", "border-bottom-right-radius",
+    "border-bottom-style", "border-bottom-width", "border-collapse",
+    "border-color", "border-image", "border-image-outset",
+    "border-image-repeat", "border-image-slice", "border-image-source",
+    "border-image-width", "border-left", "border-left-color",
+    "border-left-style", "border-left-width", "border-radius", "border-right",
+    "border-right-color", "border-right-style", "border-right-width",
+    "border-spacing", "border-style", "border-top", "border-top-color",
+    "border-top-left-radius", "border-top-right-radius", "border-top-style",
+    "border-top-width", "border-width", "bottom", "box-decoration-break",
+    "box-shadow", "box-sizing", "break-after", "break-before", "break-inside",
+    "caption-side", "caret-color", "clear", "clip", "color", "color-profile", "column-count",
+    "column-fill", "column-gap", "column-rule", "column-rule-color",
+    "column-rule-style", "column-rule-width", "column-span", "column-width",
+    "columns", "content", "counter-increment", "counter-reset", "crop", "cue",
+    "cue-after", "cue-before", "cursor", "direction", "display",
+    "dominant-baseline", "drop-initial-after-adjust",
+    "drop-initial-after-align", "drop-initial-before-adjust",
+    "drop-initial-before-align", "drop-initial-size", "drop-initial-value",
+    "elevation", "empty-cells", "fit", "fit-position", "flex", "flex-basis",
+    "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap",
+    "float", "float-offset", "flow-from", "flow-into", "font", "font-feature-settings",
+    "font-family", "font-kerning", "font-language-override", "font-size", "font-size-adjust",
+    "font-stretch", "font-style", "font-synthesis", "font-variant",
+    "font-variant-alternates", "font-variant-caps", "font-variant-east-asian",
+    "font-variant-ligatures", "font-variant-numeric", "font-variant-position",
+    "font-weight", "grid", "grid-area", "grid-auto-columns", "grid-auto-flow",
+    "grid-auto-rows", "grid-column", "grid-column-end", "grid-column-gap",
+    "grid-column-start", "grid-gap", "grid-row", "grid-row-end", "grid-row-gap",
+    "grid-row-start", "grid-template", "grid-template-areas", "grid-template-columns",
+    "grid-template-rows", "hanging-punctuation", "height", "hyphens",
+    "icon", "image-orientation", "image-rendering", "image-resolution",
+    "inline-box-align", "justify-content", "justify-items", "justify-self", "left", "letter-spacing",
+    "line-break", "line-height", "line-stacking", "line-stacking-ruby",
+    "line-stacking-shift", "line-stacking-strategy", "list-style",
+    "list-style-image", "list-style-position", "list-style-type", "margin",
+    "margin-bottom", "margin-left", "margin-right", "margin-top",
+    "marks", "marquee-direction", "marquee-loop",
+    "marquee-play-count", "marquee-speed", "marquee-style", "max-height",
+    "max-width", "min-height", "min-width", "move-to", "nav-down", "nav-index",
+    "nav-left", "nav-right", "nav-up", "object-fit", "object-position",
+    "opacity", "order", "orphans", "outline",
+    "outline-color", "outline-offset", "outline-style", "outline-width",
+    "overflow", "overflow-style", "overflow-wrap", "overflow-x", "overflow-y",
+    "padding", "padding-bottom", "padding-left", "padding-right", "padding-top",
+    "page", "page-break-after", "page-break-before", "page-break-inside",
+    "page-policy", "pause", "pause-after", "pause-before", "perspective",
+    "perspective-origin", "pitch", "pitch-range", "place-content", "place-items", "place-self", "play-during", "position",
+    "presentation-level", "punctuation-trim", "quotes", "region-break-after",
+    "region-break-before", "region-break-inside", "region-fragment",
+    "rendering-intent", "resize", "rest", "rest-after", "rest-before", "richness",
+    "right", "rotation", "rotation-point", "ruby-align", "ruby-overhang",
+    "ruby-position", "ruby-span", "shape-image-threshold", "shape-inside", "shape-margin",
+    "shape-outside", "size", "speak", "speak-as", "speak-header",
+    "speak-numeral", "speak-punctuation", "speech-rate", "stress", "string-set",
+    "tab-size", "table-layout", "target", "target-name", "target-new",
+    "target-position", "text-align", "text-align-last", "text-decoration",
+    "text-decoration-color", "text-decoration-line", "text-decoration-skip",
+    "text-decoration-style", "text-emphasis", "text-emphasis-color",
+    "text-emphasis-position", "text-emphasis-style", "text-height",
+    "text-indent", "text-justify", "text-outline", "text-overflow", "text-shadow",
+    "text-size-adjust", "text-space-collapse", "text-transform", "text-underline-position",
+    "text-wrap", "top", "transform", "transform-origin", "transform-style",
+    "transition", "transition-delay", "transition-duration",
+    "transition-property", "transition-timing-function", "unicode-bidi",
+    "user-select", "vertical-align", "visibility", "voice-balance", "voice-duration",
+    "voice-family", "voice-pitch", "voice-range", "voice-rate", "voice-stress",
+    "voice-volume", "volume", "white-space", "widows", "width", "will-change", "word-break",
+    "word-spacing", "word-wrap", "z-index",
+    // SVG-specific
+    "clip-path", "clip-rule", "mask", "enable-background", "filter", "flood-color",
+    "flood-opacity", "lighting-color", "stop-color", "stop-opacity", "pointer-events",
+    "color-interpolation", "color-interpolation-filters",
+    "color-rendering", "fill", "fill-opacity", "fill-rule", "image-rendering",
+    "marker", "marker-end", "marker-mid", "marker-start", "shape-rendering", "stroke",
+    "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin",
+    "stroke-miterlimit", "stroke-opacity", "stroke-width", "text-rendering",
+    "baseline-shift", "dominant-baseline", "glyph-orientation-horizontal",
+    "glyph-orientation-vertical", "text-anchor", "writing-mode"
+  ], propertyKeywords = keySet(propertyKeywords_);
+
+  var nonStandardPropertyKeywords_ = [
+    "scrollbar-arrow-color", "scrollbar-base-color", "scrollbar-dark-shadow-color",
+    "scrollbar-face-color", "scrollbar-highlight-color", "scrollbar-shadow-color",
+    "scrollbar-3d-light-color", "scrollbar-track-color", "shape-inside",
+    "searchfield-cancel-button", "searchfield-decoration", "searchfield-results-button",
+    "searchfield-results-decoration", "zoom"
+  ], nonStandardPropertyKeywords = keySet(nonStandardPropertyKeywords_);
+
+  var fontProperties_ = [
+    "font-family", "src", "unicode-range", "font-variant", "font-feature-settings",
+    "font-stretch", "font-weight", "font-style"
+  ], fontProperties = keySet(fontProperties_);
+
+  var counterDescriptors_ = [
+    "additive-symbols", "fallback", "negative", "pad", "prefix", "range",
+    "speak-as", "suffix", "symbols", "system"
+  ], counterDescriptors = keySet(counterDescriptors_);
+
+  var colorKeywords_ = [
+    "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige",
+    "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown",
+    "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue",
+    "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod",
+    "darkgray", "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen",
+    "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen",
+    "darkslateblue", "darkslategray", "darkturquoise", "darkviolet",
+    "deeppink", "deepskyblue", "dimgray", "dodgerblue", "firebrick",
+    "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite",
+    "gold", "goldenrod", "gray", "grey", "green", "greenyellow", "honeydew",
+    "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender",
+    "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral",
+    "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightpink",
+    "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray",
+    "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta",
+    "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple",
+    "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise",
+    "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin",
+    "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered",
+    "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred",
+    "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue",
+    "purple", "rebeccapurple", "red", "rosybrown", "royalblue", "saddlebrown",
+    "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue",
+    "slateblue", "slategray", "snow", "springgreen", "steelblue", "tan",
+    "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white",
+    "whitesmoke", "yellow", "yellowgreen"
+  ], colorKeywords = keySet(colorKeywords_);
+
+  var valueKeywords_ = [
+    "above", "absolute", "activeborder", "additive", "activecaption", "afar",
+    "after-white-space", "ahead", "alias", "all", "all-scroll", "alphabetic", "alternate",
+    "always", "amharic", "amharic-abegede", "antialiased", "appworkspace",
+    "arabic-indic", "armenian", "asterisks", "attr", "auto", "auto-flow", "avoid", "avoid-column", "avoid-page",
+    "avoid-region", "background", "backwards", "baseline", "below", "bidi-override", "binary",
+    "bengali", "blink", "block", "block-axis", "bold", "bolder", "border", "border-box",
+    "both", "bottom", "break", "break-all", "break-word", "bullets", "button", "button-bevel",
+    "buttonface", "buttonhighlight", "buttonshadow", "buttontext", "calc", "cambodian",
+    "capitalize", "caps-lock-indicator", "caption", "captiontext", "caret",
+    "cell", "center", "checkbox", "circle", "cjk-decimal", "cjk-earthly-branch",
+    "cjk-heavenly-stem", "cjk-ideographic", "clear", "clip", "close-quote",
+    "col-resize", "collapse", "color", "color-burn", "color-dodge", "column", "column-reverse",
+    "compact", "condensed", "contain", "content", "contents",
+    "content-box", "context-menu", "continuous", "copy", "counter", "counters", "cover", "crop",
+    "cross", "crosshair", "currentcolor", "cursive", "cyclic", "darken", "dashed", "decimal",
+    "decimal-leading-zero", "default", "default-button", "dense", "destination-atop",
+    "destination-in", "destination-out", "destination-over", "devanagari", "difference",
+    "disc", "discard", "disclosure-closed", "disclosure-open", "document",
+    "dot-dash", "dot-dot-dash",
+    "dotted", "double", "down", "e-resize", "ease", "ease-in", "ease-in-out", "ease-out",
+    "element", "ellipse", "ellipsis", "embed", "end", "ethiopic", "ethiopic-abegede",
+    "ethiopic-abegede-am-et", "ethiopic-abegede-gez", "ethiopic-abegede-ti-er",
+    "ethiopic-abegede-ti-et", "ethiopic-halehame-aa-er",
+    "ethiopic-halehame-aa-et", "ethiopic-halehame-am-et",
+    "ethiopic-halehame-gez", "ethiopic-halehame-om-et",
+    "ethiopic-halehame-sid-et", "ethiopic-halehame-so-et",
+    "ethiopic-halehame-ti-er", "ethiopic-halehame-ti-et", "ethiopic-halehame-tig",
+    "ethiopic-numeric", "ew-resize", "exclusion", "expanded", "extends", "extra-condensed",
+    "extra-expanded", "fantasy", "fast", "fill", "fixed", "flat", "flex", "flex-end", "flex-start", "footnotes",
+    "forwards", "from", "geometricPrecision", "georgian", "graytext", "grid", "groove",
+    "gujarati", "gurmukhi", "hand", "hangul", "hangul-consonant", "hard-light", "hebrew",
+    "help", "hidden", "hide", "higher", "highlight", "highlighttext",
+    "hiragana", "hiragana-iroha", "horizontal", "hsl", "hsla", "hue", "icon", "ignore",
+    "inactiveborder", "inactivecaption", "inactivecaptiontext", "infinite",
+    "infobackground", "infotext", "inherit", "initial", "inline", "inline-axis",
+    "inline-block", "inline-flex", "inline-grid", "inline-table", "inset", "inside", "intrinsic", "invert",
+    "italic", "japanese-formal", "japanese-informal", "justify", "kannada",
+    "katakana", "katakana-iroha", "keep-all", "khmer",
+    "korean-hangul-formal", "korean-hanja-formal", "korean-hanja-informal",
+    "landscape", "lao", "large", "larger", "left", "level", "lighter", "lighten",
+    "line-through", "linear", "linear-gradient", "lines", "list-item", "listbox", "listitem",
+    "local", "logical", "loud", "lower", "lower-alpha", "lower-armenian",
+    "lower-greek", "lower-hexadecimal", "lower-latin", "lower-norwegian",
+    "lower-roman", "lowercase", "ltr", "luminosity", "malayalam", "match", "matrix", "matrix3d",
+    "media-controls-background", "media-current-time-display",
+    "media-fullscreen-button", "media-mute-button", "media-play-button",
+    "media-return-to-realtime-button", "media-rewind-button",
+    "media-seek-back-button", "media-seek-forward-button", "media-slider",
+    "media-sliderthumb", "media-time-remaining-display", "media-volume-slider",
+    "media-volume-slider-container", "media-volume-sliderthumb", "medium",
+    "menu", "menulist", "menulist-button", "menulist-text",
+    "menulist-textfield", "menutext", "message-box", "middle", "min-intrinsic",
+    "mix", "mongolian", "monospace", "move", "multiple", "multiply", "myanmar", "n-resize",
+    "narrower", "ne-resize", "nesw-resize", "no-close-quote", "no-drop",
+    "no-open-quote", "no-repeat", "none", "normal", "not-allowed", "nowrap",
+    "ns-resize", "numbers", "numeric", "nw-resize", "nwse-resize", "oblique", "octal", "opacity", "open-quote",
+    "optimizeLegibility", "optimizeSpeed", "oriya", "oromo", "outset",
+    "outside", "outside-shape", "overlay", "overline", "padding", "padding-box",
+    "painted", "page", "paused", "persian", "perspective", "plus-darker", "plus-lighter",
+    "pointer", "polygon", "portrait", "pre", "pre-line", "pre-wrap", "preserve-3d",
+    "progress", "push-button", "radial-gradient", "radio", "read-only",
+    "read-write", "read-write-plaintext-only", "rectangle", "region",
+    "relative", "repeat", "repeating-linear-gradient",
+    "repeating-radial-gradient", "repeat-x", "repeat-y", "reset", "reverse",
+    "rgb", "rgba", "ridge", "right", "rotate", "rotate3d", "rotateX", "rotateY",
+    "rotateZ", "round", "row", "row-resize", "row-reverse", "rtl", "run-in", "running",
+    "s-resize", "sans-serif", "saturation", "scale", "scale3d", "scaleX", "scaleY", "scaleZ", "screen",
+    "scroll", "scrollbar", "scroll-position", "se-resize", "searchfield",
+    "searchfield-cancel-button", "searchfield-decoration",
+    "searchfield-results-button", "searchfield-results-decoration", "self-start", "self-end",
+    "semi-condensed", "semi-expanded", "separate", "serif", "show", "sidama",
+    "simp-chinese-formal", "simp-chinese-informal", "single",
+    "skew", "skewX", "skewY", "skip-white-space", "slide", "slider-horizontal",
+    "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "slow",
+    "small", "small-caps", "small-caption", "smaller", "soft-light", "solid", "somali",
+    "source-atop", "source-in", "source-out", "source-over", "space", "space-around", "space-between", "space-evenly", "spell-out", "square",
+    "square-button", "start", "static", "status-bar", "stretch", "stroke", "sub",
+    "subpixel-antialiased", "super", "sw-resize", "symbolic", "symbols", "system-ui", "table",
+    "table-caption", "table-cell", "table-column", "table-column-group",
+    "table-footer-group", "table-header-group", "table-row", "table-row-group",
+    "tamil",
+    "telugu", "text", "text-bottom", "text-top", "textarea", "textfield", "thai",
+    "thick", "thin", "threeddarkshadow", "threedface", "threedhighlight",
+    "threedlightshadow", "threedshadow", "tibetan", "tigre", "tigrinya-er",
+    "tigrinya-er-abegede", "tigrinya-et", "tigrinya-et-abegede", "to", "top",
+    "trad-chinese-formal", "trad-chinese-informal", "transform",
+    "translate", "translate3d", "translateX", "translateY", "translateZ",
+    "transparent", "ultra-condensed", "ultra-expanded", "underline", "unset", "up",
+    "upper-alpha", "upper-armenian", "upper-greek", "upper-hexadecimal",
+    "upper-latin", "upper-norwegian", "upper-roman", "uppercase", "urdu", "url",
+    "var", "vertical", "vertical-text", "visible", "visibleFill", "visiblePainted",
+    "visibleStroke", "visual", "w-resize", "wait", "wave", "wider",
+    "window", "windowframe", "windowtext", "words", "wrap", "wrap-reverse", "x-large", "x-small", "xor",
+    "xx-large", "xx-small"
+  ], valueKeywords = keySet(valueKeywords_);
+
+  var allWords = documentTypes_.concat(mediaTypes_).concat(mediaFeatures_).concat(mediaValueKeywords_)
+    .concat(propertyKeywords_).concat(nonStandardPropertyKeywords_).concat(colorKeywords_)
+    .concat(valueKeywords_);
+  CodeMirror.registerHelper("hintWords", "css", allWords);
+
+  function tokenCComment(stream, state) {
+    var maybeEnd = false, ch;
+    while ((ch = stream.next()) != null) {
+      if (maybeEnd && ch == "/") {
+        state.tokenize = null;
+        break;
+      }
+      maybeEnd = (ch == "*");
+    }
+    return ["comment", "comment"];
+  }
+
+  CodeMirror.defineMIME("text/css", {
+    documentTypes: documentTypes,
+    mediaTypes: mediaTypes,
+    mediaFeatures: mediaFeatures,
+    mediaValueKeywords: mediaValueKeywords,
+    propertyKeywords: propertyKeywords,
+    nonStandardPropertyKeywords: nonStandardPropertyKeywords,
+    fontProperties: fontProperties,
+    counterDescriptors: counterDescriptors,
+    colorKeywords: colorKeywords,
+    valueKeywords: valueKeywords,
+    tokenHooks: {
+      "/": function(stream, state) {
+        if (!stream.eat("*")) return false;
+        state.tokenize = tokenCComment;
+        return tokenCComment(stream, state);
+      }
+    },
+    name: "css"
+  });
+
+  CodeMirror.defineMIME("text/x-scss", {
+    mediaTypes: mediaTypes,
+    mediaFeatures: mediaFeatures,
+    mediaValueKeywords: mediaValueKeywords,
+    propertyKeywords: propertyKeywords,
+    nonStandardPropertyKeywords: nonStandardPropertyKeywords,
+    colorKeywords: colorKeywords,
+    valueKeywords: valueKeywords,
+    fontProperties: fontProperties,
+    allowNested: true,
+    lineComment: "//",
+    tokenHooks: {
+      "/": function(stream, state) {
+        if (stream.eat("/")) {
+          stream.skipToEnd();
+          return ["comment", "comment"];
+        } else if (stream.eat("*")) {
+          state.tokenize = tokenCComment;
+          return tokenCComment(stream, state);
+        } else {
+          return ["operator", "operator"];
+        }
+      },
+      ":": function(stream) {
+        if (stream.match(/\s*\{/, false))
+          return [null, null]
+        return false;
+      },
+      "$": function(stream) {
+        stream.match(/^[\w-]+/);
+        if (stream.match(/^\s*:/, false))
+          return ["variable-2", "variable-definition"];
+        return ["variable-2", "variable"];
+      },
+      "#": function(stream) {
+        if (!stream.eat("{")) return false;
+        return [null, "interpolation"];
+      }
+    },
+    name: "css",
+    helperType: "scss"
+  });
+
+  CodeMirror.defineMIME("text/x-less", {
+    mediaTypes: mediaTypes,
+    mediaFeatures: mediaFeatures,
+    mediaValueKeywords: mediaValueKeywords,
+    propertyKeywords: propertyKeywords,
+    nonStandardPropertyKeywords: nonStandardPropertyKeywords,
+    colorKeywords: colorKeywords,
+    valueKeywords: valueKeywords,
+    fontProperties: fontProperties,
+    allowNested: true,
+    lineComment: "//",
+    tokenHooks: {
+      "/": function(stream, state) {
+        if (stream.eat("/")) {
+          stream.skipToEnd();
+          return ["comment", "comment"];
+        } else if (stream.eat("*")) {
+          state.tokenize = tokenCComment;
+          return tokenCComment(stream, state);
+        } else {
+          return ["operator", "operator"];
+        }
+      },
+      "@": function(stream) {
+        if (stream.eat("{")) return [null, "interpolation"];
+        if (stream.match(/^(charset|document|font-face|import|(-(moz|ms|o|webkit)-)?keyframes|media|namespace|page|supports)\b/i, false)) return false;
+        stream.eatWhile(/[\w\\\-]/);
+        if (stream.match(/^\s*:/, false))
+          return ["variable-2", "variable-definition"];
+        return ["variable-2", "variable"];
+      },
+      "&": function() {
+        return ["atom", "atom"];
+      }
+    },
+    name: "css",
+    helperType: "less"
+  });
+
+  CodeMirror.defineMIME("text/x-gss", {
+    documentTypes: documentTypes,
+    mediaTypes: mediaTypes,
+    mediaFeatures: mediaFeatures,
+    propertyKeywords: propertyKeywords,
+    nonStandardPropertyKeywords: nonStandardPropertyKeywords,
+    fontProperties: fontProperties,
+    counterDescriptors: counterDescriptors,
+    colorKeywords: colorKeywords,
+    valueKeywords: valueKeywords,
+    supportsAtComponent: true,
+    tokenHooks: {
+      "/": function(stream, state) {
+        if (!stream.eat("*")) return false;
+        state.tokenize = tokenCComment;
+        return tokenCComment(stream, state);
+      }
+    },
+    name: "css",
+    helperType: "gss"
+  });

frontend/src/assets/scss/base.scss

@@ -430,61 +430,6 @@ input.inputTags-field:focus {
   margin-left: 1rem;
 }
 
-
-@keyframes pulse_animation {
-    0% { transform: scale(1); }
-    30% { transform: scale(1); }
-    40% { transform: scale(1.02); }
-    50% { transform: scale(1); }
-    60% { transform: scale(1); }
-    70% { transform: scale(1.05); }
-    80% { transform: scale(1); }
-    100% { transform: scale(1); }
-}
-
-.pulse {
-    animation-name: pulse_animation;
-    animation-duration: 1500ms;
-    transform-origin:70% 70%;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-}
-
-
-@keyframes glow-grow {
-  0% {
-    opacity: 0;
-    transform: scale(1);
-  }
-  80% {
-    opacity: 1;
-  }
-  100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-.pulse-glow {
-    animation-name: glow-grown;
-    animation-duration: 100ms;
-    transform-origin: 70% 30%;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-}
-
-.pulse-glow:before,
-.pulse-glow:after {
-  position: absolute;
-  content: "";
-  height: 0.4rem;
-  width: 1.7rem;
-  top: 1.3rem;
-  right: 2.15rem;
-  border-radius: 0;
-  box-shadow: 0 0 6px #47d337;
-  animation: glow-grow 2s ease-out infinite;
-}
-
 .sortable_drag {
   background-color: #0000000f;
 }

frontend/src/components/API.js

@@ -40,8 +40,12 @@ class Api {
     return axios.get('/api/services/'+id+'/data?start=' + start + '&end=' + end + '&group=' + group).then(response => (response.data))
   }
 
-  async service_failures (id, start, end) {
+    async service_heatmap (id, start, end, group) {
-    return axios.get('/api/services/'+id+'/failures?start=' + start + '&end=' + end).then(response => (response.data))
+        return axios.get('/api/services/'+id+'/heatmap?start=' + start + '&end=' + end + '&group=' + group).then(response => (response.data))
+    }
+
+  async service_failures (id, start, end, limit=999, offset=0) {
+    return axios.get('/api/services/'+id+'/failures?start=' + start + '&end=' + end + '&limit=' + limit).then(response => (response.data))
   }
 
   async service_delete (id) {

frontend/src/components/Dashboard/DashboardIndex.vue

@@ -32,7 +32,14 @@
   },
     data () {
       return {
+
       }
+    },
+      computed: {
+
+      },
+      async created() {
+
       },
     methods: {
         failuresLast24Hours() {

frontend/src/components/Dashboard/DashboardUsers.vue

@@ -6,6 +6,7 @@
                 <tr>
                     <th scope="col">Username</th>
                     <th scope="col">Type</th>
+                    <th scope="col">Last Login</th>
                     <th scope="col"></th>
                 </tr>
             </thead>
@@ -15,10 +16,11 @@
                 <td>{{user.username}}</td>
                 <td v-if="user.admin"><span class="badge badge-danger">ADMIN</span></td>
                 <td v-if="!user.admin"><span class="badge badge-primary">USER</span></td>
+                <td>{{toLocal(user.updated_at)}}</td>
                 <td class="text-right">
                     <div class="btn-group">
                         <a @click.prevent="editUser(user, edit)" href="" class="btn btn-outline-secondary"><font-awesome-icon icon="user" /> Edit</a>
-                        <a v-if="index !== 0" @click.prevent="deleteUser(user)" href="" class="btn btn-danger"><font-awesome-icon icon="times" /></a>
+                        <a @click.prevent="deleteUser(user)" v-if="index !== 0" href="" class="btn btn-danger"><font-awesome-icon icon="times" /></a>
                     </div>
                 </td>
             </tr>

frontend/src/components/Dashboard/ServiceInfo.vue

@@ -1,20 +1,26 @@
 <template v-if="service">
-    <div class="col-12 card mb-3" style="min-height: 260px">
+    <div class="col-12 card mb-3" style="min-height: 260px" :class="{'offline-card': !service.online}">
         <div class="card-body">
             <h5 class="card-title"><router-link :to="serviceLink(service)">{{service.name}}</router-link>
                 <span class="badge float-right" :class="{'badge-success': service.online, 'badge-danger': !service.online}">
                     {{service.online ? "ONLINE" : "OFFLINE"}}
                 </span>
             </h5>
-            <div class="row">
+            <transition name="fade">
+            <div v-if="loaded && service.online" class="row">
                 <div class="col-6">
-                    <ServiceSparkLine :title="calc(set1)" subtitle="Last Day Latency" :series="set1"/>
+                    <ServiceSparkLine :title="set1_name" subtitle="Last Day Latency" :series="set1"/>
                 </div>
                 <div class="col-6">
-                    <ServiceSparkLine :title="calc(set2)" subtitle="Last 7 Days Latency" :series="set2"/>
+                    <ServiceSparkLine :title="set2_name" subtitle="Last 7 Days Latency" :series="set2"/>
                 </div>
             </div>
+            </transition>
         </div>
+        <span v-for="(failure, index) in failures" v-bind:key="index" class="alert alert-light">
+            Failed {{duration(current(), failure.created_at)}}<br>
+            {{failure.issue}}
+        </span>
     </div>
 </template>
 
@@ -36,16 +42,27 @@
       data () {
           return {
               set1: [],
-        set2: []
+              set2: [],
+              loaded: false,
+              set1_name: "",
+              set2_name: "",
+              failures: null
           }
       },
-  async created() {
+      async mounted () {
-    this.set1 = await this.getHits(24, "hour")
+          this.set1 = await this.getHits(24 * 2, "hour")
-    this.set2 = await this.getHits(24 * 7, "day")
+          this.set1_name = this.calc(this.set1)
+          this.set2 = await this.getHits(24 * 7, "hour")
+          this.set2_name = this.calc(this.set2)
+          this.loaded = true
       },
       methods: {
           async getHits (hours, group) {
               const start = this.ago(3600 * hours)
+              if (!this.service.online) {
+                  this.failures = await Api.service_failures(this.service.id, this.now()-360, this.now(), 5)
+                  return [ { name: "None", data: [] } ]
+              }
               const data = await Api.service_hits(this.service.id, start, this.now(), group)
               if (!data) {
                   return [ { name: "None", data: [] } ]
@@ -54,12 +71,16 @@
           },
           calc (s) {
               let data = s[0].data
+              if (data.length > 1) {
                   let total = 0
                   data.forEach((f) => {
                       total += f.y
                   });
                   total = total / data.length
                   return total.toFixed(0) + "ms Average"
+              } else {
+                  return "Offline"
+              }
           }
       }
   }
@@ -67,4 +88,13 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+    .offline-card {
+        background-color: #fff5f5;
+    }
+    .fade-enter-active, .fade-leave-active {
+        transition: opacity .75s;
+    }
+    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+        opacity: 0;
+    }
 </style>

frontend/src/components/Dashboard/ThemeEditor.vue

@@ -22,13 +22,13 @@
         </ul>
         <div class="tab-content" id="pills-tabContent">
             <div class="tab-pane show" :class="{active: tab === 'vars'}" id="pills-vars" role="tabpanel" aria-labelledby="pills-vars-tab">
-                <codemirror v-if="loaded && tab === 'vars'" v-model="vars" :options="cmOptions" class="codemirrorInput"/>
+                <codemirror v-if="loaded && tab === 'vars'" v-model="vars" ref="vars" :options="cmOptions" class="codemirrorInput"/>
             </div>
             <div class="tab-pane show" :class="{active: tab === 'base'}" id="pills-base" role="tabpanel" aria-labelledby="pills-base-tab">
-                <codemirror v-if="loaded && tab === 'base'" v-model="base" :options="cmOptions" class="codemirrorInput"/>
+                <codemirror v-if="loaded && tab === 'base'" v-model="base" ref="base" :options="cmOptions" class="codemirrorInput"/>
             </div>
             <div class="tab-pane show" :class="{active: tab === 'mobile'}" id="pills-mobile" role="tabpanel" aria-labelledby="pills-mobile-tab">
-                <codemirror v-if="loaded && tab === 'mobile'" v-model="mobile" :options="cmOptions" class="codemirrorInput"/>
+                <codemirror v-if="loaded && tab === 'mobile'" v-model="mobile" ref="mobile" :options="cmOptions" class="codemirrorInput"/>
             </div>
         </div>
         <div v-if="error" class="alert alert-danger mt-3" style="white-space: pre-line;">{{error}}</div>
@@ -93,6 +93,7 @@
       },
       async mounted () {
           await this.fetchTheme()
+          this.changeTab('vars')
       },
       methods: {
           async fetchTheme() {
@@ -111,7 +112,6 @@
           async createAssets() {
               this.pending = true
               const resp = await Api.theme_generate(true)
-              window.console.log(resp)
               this.pending = false
               await this.fetchTheme()
           },
@@ -120,7 +120,6 @@
               let c = confirm('Are you sure you want to delete all local assets?')
               if (c) {
                   const resp = await Api.theme_generate(false)
-                  window.console.log(resp)
                   await this.fetchTheme()
               }
               this.pending = false
@@ -142,6 +141,13 @@
           },
           changeTab (v) {
               this.tab = v
+              if (v === 'base') {
+                  this.$refs.base.codemirror.refresh();
+              } else if (v === 'vars') {
+                  this.$refs.vars.codemirror.refresh();
+              } else if (v === 'mobile') {
+                  this.$refs.mobile.codemirror.refresh();
+              }
           }
       }
   }

frontend/src/components/Index/Group.vue

@@ -32,4 +32,57 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+    @keyframes pulse_animation {
+        0% { transform: scale(1); }
+        30% { transform: scale(1); }
+        40% { transform: scale(1.02); }
+        50% { transform: scale(1); }
+        60% { transform: scale(1); }
+        70% { transform: scale(1.05); }
+        80% { transform: scale(1); }
+        100% { transform: scale(1); }
+    }
+
+    .pulse {
+        animation-name: pulse_animation;
+        animation-duration: 1500ms;
+        transform-origin:70% 70%;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+    }
+
+
+    @keyframes glow-grow {
+        0% {
+            opacity: 0;
+            transform: scale(1);
+        }
+        80% {
+            opacity: 1;
+        }
+        100% {
+            transform: scale(2);
+            opacity: 0;
+        }
+    }
+    .pulse-glow {
+        animation-name: glow-grown;
+        animation-duration: 100ms;
+        transform-origin: 70% 30%;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+    }
+
+    .pulse-glow:before,
+    .pulse-glow:after {
+        position: absolute;
+        content: "";
+        height: 0.4rem;
+        width: 1.7rem;
+        top: 1.3rem;
+        right: 2.15rem;
+        border-radius: 0;
+        box-shadow: 0 0 6px #47d337;
+        animation: glow-grow 2s ease-out infinite;
+    }
 </style>

frontend/src/components/Service/ServiceBlock.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="mb-4" id="service_id_1">
+    <div class="mb-4">
         <div class="card">
             <div class="card-body">
                 <div class="col-12">
                     <h4 class="mt-3">
-                        <router-link :to="`/service/${service.id}`">{{service.name}}</router-link>
+                        <router-link :to="serviceLink(service)" :in_service="service">{{service.name}}</router-link>
                         <span class="badge float-right" :class="{'bg-success': service.online, 'bg-danger': !service.online}">{{service.online ? "ONLINE" : "OFFLINE"}}</span>
                     </h4>
 

frontend/src/components/Service/ServiceChart.vue

@@ -40,21 +40,10 @@
   async created() {
     await this.chartHits()
   },
-  methods: {
-    async chartHits() {
-      const start = this.ago(3600 * 24)
-      this.data = await Api.service_hits(this.service.id, start, this.now(), "hour")
-      this.series = [{
-        name: this.service.name,
-        ...this.data
-      }]
-      this.ready = true
-    }
-  },
   data () {
     return {
       ready: false,
-      data: null,
+      data: [],
       chartOptions: {
         chart: {
           height: 210,
@@ -115,22 +104,33 @@
             show: false
           },
           fill: {
-            colors: [this.service.online ? "#48d338" : "#d3132a"],
+            colors: [this.service.online ? "#48d338" : "#dd3545"],
             opacity: 1,
             type: 'solid'
           },
           stroke: {
-            show: true,
+            show: false,
             curve: 'smooth',
             lineCap: 'butt',
-            colors: [this.service.online ? "#3aa82d" : "#a40f21"],
+            colors: [this.service.online ? "#3aa82d" : "#dd3545"],
           }
         },
       series: [{
         data: []
       }]
     }
+  },
+      methods: {
+          async chartHits() {
+              const start = this.ago((3600 * 24) * 7)
+              this.data = await Api.service_hits(this.service.id, start, this.now(), "hour")
+              this.series = [{
+                  name: this.service.name,
+                  ...this.data
+              }]
+              this.ready = true
           }
+      },
 }
 </script>
 

frontend/src/mixin.js

@@ -52,6 +52,10 @@ export default Vue.mixin({
     },
     isInt(n) {
       return n % 1 === 0;
+    },
+      loggedIn() {
+          const core = this.$store.getters.core
+          return core.logged_in === true
       }
   }
 });

frontend/src/pages/Dashboard.vue

@@ -1,11 +1,12 @@
 <template>
     <div class="container col-md-7 col-sm-12 mt-md-5 bg-light">
         <TopNav/>
-        <router-view></router-view>
+        <router-view/>
     </div>
 </template>
 
 <script>
+    import Api from "../components/API"
   import TopNav from "../components/Dashboard/TopNav";
 
   export default {
@@ -17,7 +18,13 @@
     return {
       authenticated: false
     }
+  },
+      async mounted() {
+          const core = await Api.core()
+          if (!core.logged_in) {
+              this.$router.push('/login')
           }
+      },
 }
 </script>
 

frontend/src/pages/Index.vue

@@ -12,42 +12,38 @@
         </div>
 
         <div class="col-12 full-col-12">
-
             <div v-for="(service, index) in $store.getters.services" :ref="service.id" v-bind:key="index">
                 <ServiceBlock :service=service />
             </div>
-
         </div>
+
+
     </div>
 </template>
 
 <script>
 import Api from '../components/API';
+import Group from '../components/Index/Group';
+import Header from '../components/Index/Header';
+import MessageBlock from '../components/Index/MessageBlock';
+import ServiceBlock from '../components/Service/ServiceBlock';
 
-const Header = () => import("@/components/Index/Header");
-const ServiceBlock = () => import("@/components/Service/ServiceBlock.vue");
-const MessageBlock = () => import("@/components/Index/MessageBlock");
-const Group = () => import("@/components/Index/Group");
 
 export default {
   name: 'Index',
   components: {
-    Header,
-    Group,
-    MessageBlock,
       ServiceBlock,
+      MessageBlock,
+      Group,
+      Header
   },
   data () {
     return {
-
+        logged_in: false
     }
   },
   async created() {
-      const core = await Api.core()
+      this.logged_in = this.loggedIn()
-      this.$store.commit("setCore", core);
-      if (!core.setup) {
-          this.$router.push('/setup')
-      }
   },
   async mounted() {
 
@@ -69,4 +65,10 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+    .fade-enter-active, .fade-leave-active {
+        transition: opacity .5s;
+    }
+    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+        opacity: 0;
+    }
 </style>

frontend/src/pages/Login.vue

@@ -5,7 +5,7 @@
                 <img class="col-12 mt-5 mt-md-0" src="/public/banner.png">
             </div>
 
-            <form @submit="login">
+            <form @submit.prevent="login">
                 <div class="form-group row">
                     <label for="username" class="col-sm-2 col-form-label">Username</label>
                     <div class="col-sm-10">
@@ -20,7 +20,7 @@
                 </div>
                 <div class="form-group row">
                     <div class="col-sm-12">
-                        <button @click="login" type="submit" class="btn btn-block mb-3" :class="{'btn-primary': !loading, 'btn-default': loading}" v-bind:disabled="loading">
+                        <button @click.prevent="login" type="submit" class="btn btn-block mb-3 btn-primary" :disabled="loading">
                             {{loading ? "Loading" : "Sign in"}}
                         </button>
                         <div v-if="error" class="alert alert-danger" role="alert">
@@ -52,7 +52,6 @@
   },
   methods: {
     async login (e) {
-      e.preventDefault();
       this.loading = true
       this.error = false
       const auth = await Api.login(this.username, this.password)

frontend/src/pages/Service.vue

@@ -7,7 +7,7 @@
                 {{service.online ? "ONLINE" : "OFFLINE"}}
             </span>
 
-            <h4 class="mt-2"><a href="/">{{$store.getters.core.name}}</a> - {{service.name}}
+            <h4 class="mt-2"><router-link to="/">{{$store.getters.core.name}}</router-link> - {{service.name}}
                 <span class="badge float-right d-none d-md-block" :class="{'bg-success': service.online, 'bg-danger': !service.online}">
                     {{service.online ? "ONLINE" : "OFFLINE"}}
                 </span>
@@ -32,11 +32,11 @@
                 <MessageBlock :message="message"/>
             </div>
 
-            <div class="service-chart-container">
+            <div v-if="series" class="service-chart-container">
                 <apexchart width="100%" height="420" type="area" :options="chartOptions" :series="series"></apexchart>
             </div>
 
-            <div class="service-chart-heatmap">
+            <div v-if="series" class="service-chart-heatmap">
                 <apexchart width="100%" height="215" type="heatmap" :options="chartOptions" :series="series"></apexchart>
             </div>
 
@@ -224,21 +224,21 @@ export default {
       },
       series: [{
         data: []
-      }]
+      }],
+        heatmap_data: []
     }
-  },
-    async created() {
-        await this.$store.dispatch('loadRequired')
   },
     async mounted() {
-      const id = this.$route.params.id
+      const id = this.$attrs.id
+        this.id = id
       let service;
       if (this.isInt(id)) {
-        service = await Api.service(id)
+        service = this.$store.getters.serviceById(id)
       } else {
-        service = this.$store.getters.serviceByPermalink(this.id)
+        service = this.$store.getters.serviceByPermalink(id)
       }
-      await this.getService(service)
+        this.service = service
+        this.getService(service)
         this.messages = this.$store.getters.serviceMessages(service.id)
     },
   methods: {
@@ -248,8 +248,8 @@ export default {
           return start && end
       },
     async getService(s) {
-        this.service = await Api.service(s.id)
         await this.chartHits()
+        await this.heatmapData()
         await this.serviceFailures()
     },
     async serviceFailures() {
@@ -262,6 +262,14 @@ export default {
         ...this.data
       }]
       this.ready = true
+    },
+      async heatmapData() {
+          this.data = await Api.service_heatmap(this.service.id, 0, 99999999999, "hour")
+          this.series = [{
+              name: this.service.name,
+              ...this.data
+          }]
+          this.ready = true
       }
   }
 }

frontend/src/pages/Services.vue

@@ -1,39 +0,0 @@
-<template>
-    <div v-show="core" class="container col-md-7 col-sm-12 mt-2 sm-container">
-
-    </div>
-</template>
-
-<script>
-  import Api from "../components/API"
-
-  export default {
-  name: 'Services',
-  components: {
-
-  },
-  data () {
-    return {
-      services: null,
-      groups: null,
-      core: null,
-      auth: null
-    }
-  },
-  beforeMount() {
-    this.loadAll()
-  },
-  methods: {
-    async loadAll () {
-      this.auth = Api.authToken()
-      this.core = await Api.core()
-      this.groups = await Api.groups()
-      this.services = await Api.services()
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

frontend/src/routes.js

@@ -83,8 +83,8 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   if (to.matched.some(record => record.meta.requiresAuth)) {
-    const tk = Api.token()
+      let item = localStorage.getItem("statping_user")
-    if (to.path !== '/login' && !tk.token) {
+    if (to.path !== '/login' && !item) {
       next('/login')
       return
     }

frontend/src/store.js

@@ -45,7 +45,7 @@ export default new Vuex.Store({
         groupsClean: state => state.groups.filter(g => g.name !== '').sort((a, b) => a.order_id - b.order_id),
 
         serviceById: (state) => (id) => {
-            return state.services.find(s => s.id === id)
+            return state.services.find(s => s.id == id)
         },
         serviceByPermalink: (state) => (permalink) => {
             return state.services.find(s => s.permalink === permalink)
@@ -108,13 +108,22 @@ export default new Vuex.Store({
         async loadRequired (context) {
             const core = await Api.core()
             context.commit("setCore", core);
-            const services = await Api.services()
-            context.commit("setServices", services);
             const groups = await Api.groups()
             context.commit("setGroups", groups);
+            const services = await Api.services()
+            context.commit("setServices", services);
             const messages = await Api.messages()
             context.commit("setMessages", messages)
             context.commit("setHasPublicData", true)
+            // if (core.logged_in) {
+            //     const notifiers = await Api.notifiers()
+            //     context.commit("setNotifiers", notifiers);
+            //     const users = await Api.users()
+            //     context.commit("setUsers", users);
+            //     const integrations = await Api.integrations()
+            //     context.commit("setIntegrations", integrations);
+            // }
+            window.console.log('finished loading required data')
         },
         async loadAdmin (context) {
             await context.dispatch('loadRequired')

handlers/api.go

@@ -38,6 +38,12 @@ type apiResponse struct {
 
 func apiIndexHandler(r *http.Request) interface{} {
 	coreClone := *core.CoreApp
+	var loggedIn bool
+	_, err := getJwtToken(r)
+	if err == nil {
+		loggedIn = true
+	}
+	coreClone.LoggedIn = loggedIn
 	return *coreClone.ToCore()
 }
 

handlers/benchmark_test.go

@@ -17,25 +17,24 @@ package handlers
 
 import (
 	"net/http"
-	"net/http/httptest"
 	"testing"
 )
 
 func BenchmarkHandleIndex(b *testing.B) {
-	b.ReportAllocs()
+	//b.ReportAllocs()
-	r := request(b, "/")
+	//r := request(b, "/")
-	for i := 0; i < b.N; i++ {
+	//for i := 0; i < b.N; i++ {
-		rw := httptest.NewRecorder()
+	//	rw := httptest.NewRecorder()
-		indexHandler(rw, r)
+	//	indexHandler(rw, r)
-	}
+	//}
 }
 
 func BenchmarkServicesHandlerIndex(b *testing.B) {
-	r := request(b, "/")
+	//r := request(b, "/")
-	for i := 0; i < b.N; i++ {
+	//for i := 0; i < b.N; i++ {
-		rw := httptest.NewRecorder()
+	//	rw := httptest.NewRecorder()
-		servicesHandler(rw, r)
+	//	servicesHandler(rw, r)
-	}
+	//}
 }
 
 func request(t testing.TB, url string) *http.Request {

handlers/dashboard.go

@@ -30,31 +30,6 @@ import (
 	"time"
 )
 
-func dashboardHandler(w http.ResponseWriter, r *http.Request) {
-	if !IsUser(r) {
-		err := core.ErrorResponse{}
-		ExecuteResponse(w, r, "login.gohtml", err, nil)
-	} else {
-		ExecuteResponse(w, r, "dashboard.gohtml", core.CoreApp, nil)
-	}
-}
-
-func loginHandler(w http.ResponseWriter, r *http.Request) {
-	form := parseForm(r)
-	username := form.Get("username")
-	password := form.Get("password")
-	user, auth := core.AuthUser(username, password)
-	if auth {
-		claim, stt := setJwtToken(user, w)
-		fmt.Println(claim.Username, stt)
-		utils.Log.Infoln(fmt.Sprintf("User %v logged in from IP %v", user.Username, r.RemoteAddr))
-		http.Redirect(w, r, basePath+"dashboard", http.StatusSeeOther)
-	} else {
-		err := core.ErrorResponse{Error: "Incorrect login information submitted, try again."}
-		ExecuteResponse(w, r, "login.gohtml", err, nil)
-	}
-}
-
 func logoutHandler(w http.ResponseWriter, r *http.Request) {
 	removeJwtToken(w)
 	http.Redirect(w, r, basePath, http.StatusSeeOther)

handlers/groups.go

@@ -25,21 +25,6 @@ import (
 	"net/http"
 )
 
-func groupViewHandler(w http.ResponseWriter, r *http.Request) {
-	vars := mux.Vars(r)
-
-	var group *core.Group
-	id := vars["id"]
-	group = core.SelectGroup(utils.ToInt(id))
-
-	if group == nil {
-		w.WriteHeader(http.StatusNotFound)
-		return
-	}
-
-	ExecuteResponse(w, r, "group.gohtml", group, nil)
-}
-
 // apiAllGroupHandler will show all the groups
 func apiAllGroupHandler(r *http.Request) interface{} {
 	auth, admin := IsUser(r), IsAdmin(r)

handlers/plugins.go

@@ -1,47 +0,0 @@
-// Statping
-// Copyright (C) 2018.  Hunter Long and the project contributors
-// Written by Hunter Long <info@socialeck.com> and the project contributors
-//
-// https://github.com/hunterlong/statping
-//
-// The licenses for most software and other practical works are designed
-// to take away your freedom to share and change the works.  By contrast,
-// the GNU General Public License is intended to guarantee your freedom to
-// share and change all versions of a program--to make sure it remains free
-// software for all its users.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-package handlers
-
-import (
-	"net/http"
-	"strings"
-)
-
-type PluginSelect struct {
-	Plugin string
-	Form   string
-	Params map[string]interface{}
-}
-
-func pluginSavedHandler(w http.ResponseWriter, r *http.Request) {
-	r.ParseForm()
-	//vars := mux.Vars(router)
-	//plug := SelectPlugin(vars["name"])
-	data := make(map[string]string)
-	for k, v := range r.PostForm {
-		data[k] = strings.Join(v, "")
-	}
-	//plug.OnSave(structs.Map(data))
-	http.Redirect(w, r, "/settings", http.StatusSeeOther)
-}
-
-func pluginsDownloadHandler(w http.ResponseWriter, r *http.Request) {
-	//vars := mux.Vars(router)
-	//name := vars["name"]
-	//DownloadPlugin(name)
-	//core.LoadConfig(utils.Directory)
-	http.Redirect(w, r, "/plugins", http.StatusSeeOther)
-}

types/core.go

@@ -43,6 +43,7 @@ type Core struct {
 	UseCdn        NullBool           `gorm:"column:use_cdn;default:false" json:"using_cdn,omitempty"`
 	UpdateNotify  NullBool           `gorm:"column:update_notify;default:true" json:"update_notify,omitempty"`
 	Timezone      float32            `gorm:"column:timezone;default:-8.0" json:"timezone,omitempty"`
+	LoggedIn      bool               `gorm:"-" json:"logged_in"`
 	CreatedAt     time.Time          `gorm:"column:created_at" json:"created_at"`
 	UpdatedAt     time.Time          `gorm:"column:updated_at" json:"updated_at"`
 	Started       time.Time          `gorm:"-" json:"started_on"`