dashboard: use webpack for builds; use tailwindcss instead of bulma; all sorts of tweaks

dashboard/src/main.ts

@@ -1,29 +1,32 @@
-import "./style/base.scss";
+import "./style/initial.pcss";
+const splashHtml = require("./splash.html");
 
-import Vue from "vue";
-import { RootStore } from "./store";
-import { router } from "./routes";
+if (window.location.pathname !== "/") {
+  import("./init-vue");
+} else {
+  // @ts-ignore
+  document.querySelector("#app").innerHTML = splashHtml;
 
-// Set up a read-only global variable to access specific env vars
-Vue.mixin({
-  data() {
-    return {
-      get env() {
-        return Object.freeze({
-          API_URL: process.env.API_URL,
-        });
-      },
+  const queryParams: any = window.location.search
+    .slice(1)
+    .split("&")
+    .reduce((map, str) => {
+      const pair = str.split("=");
+      map[pair[0]] = pair[1];
+      return map;
+    }, {});
+
+  if (queryParams.error) {
+    const errorElement = document.querySelector("#error") as HTMLElement;
+    errorElement.classList.add("has-error");
+
+    const errorMessages = {
+      noAccess: "No dashboard access. If you think this is a mistake, please contact your server owner.",
     };
-  },
-});
 
-import App from "./components/App.vue";
-
-const app = new Vue({
-  router,
-  store: RootStore,
-  el: "#app",
-  render(h) {
-    return h(App);
-  },
-});
+    const errorMessageElem = document.createElement("div");
+    errorMessageElem.classList.add("message");
+    errorMessageElem.innerText = errorMessages[queryParams.error] || "Unexpected error";
+    errorElement.appendChild(errorMessageElem);
+  }
+}