dashboard: auth fixes, guild listing, config editing

dashboard/package-lock.json

@@ -2193,6 +2193,11 @@
         "q": "^1.1.2"
       }
     },
+    "codemirror": {
+      "version": "5.48.0",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.48.0.tgz",
+      "integrity": "sha512-3Ter+tYtRlTNtxtYdYNPxGxBL/b3cMcvPdPm70gvmcOO2Rauv/fUEewWa0tT596Hosv6ea2mtpx28OXBy1mQCg=="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -2935,6 +2940,11 @@
         "repeating": "^2.0.0"
       }
     },
+    "diff-match-patch": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.4.tgz",
+      "integrity": "sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg=="
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -7540,6 +7550,15 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-codemirror": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/vue-codemirror/-/vue-codemirror-4.0.6.tgz",
+      "integrity": "sha512-ilU7Uf0mqBNSSV3KT7FNEeRIxH4s1fmpG4TfHlzvXn0QiQAbkXS9lLfwuZpaBVEnpP5CSE62iGJjoliTuA8poQ==",
+      "requires": {
+        "codemirror": "^5.41.0",
+        "diff-match-patch": "^1.0.0"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",

dashboard/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "js-cookie": "^2.2.0",
     "vue": "^2.6.10",
+    "vue-codemirror": "^4.0.6",
     "vue-hot-reload-api": "^2.3.3",
     "vue-router": "^3.0.6"
   },

dashboard/src/api.ts

@@ -1,3 +1,4 @@
+import { RootStore } from "./store";
 const apiUrl = process.env.API_URL;
 
 type QueryParamObject = { [key: string]: string | null };
@@ -13,27 +14,14 @@ function buildQueryString(params: QueryParamObject) {
   );
 }
 
-let apiKey = null;
-export function setApiKey(newKey) {
-  apiKey = newKey;
-}
-export function hasApiKey() {
-  return apiKey != null;
-}
-export function resetApiKey() {
-  apiKey = null;
-}
-
 export function request(resource, fetchOpts: RequestInit = {}) {
-  return fetch(`${apiUrl}/${resource}`, fetchOpts)
-    .then(res => res.json())
-    .catch(err => {
-      console.log(err);
-    });
+  return fetch(`${apiUrl}/${resource}`, fetchOpts).then(res => res.json());
 }
 
 export function get(resource: string, params: QueryParamObject = {}) {
-  const headers: Record<string, string> = apiKey ? { "X-Api-Key": (apiKey as unknown) as string } : {};
+  const headers: Record<string, string> = RootStore.state.auth.apiKey
+    ? { "X-Api-Key": RootStore.state.auth.apiKey }
+    : {};
   return request(resource + buildQueryString(params), {
     method: "GET",
     headers,
@@ -41,7 +29,9 @@ export function get(resource: string, params: QueryParamObject = {}) {
 }
 
 export function post(resource: string, params: QueryParamObject = {}) {
-  const headers: Record<string, string> = apiKey ? { "X-Api-Key": (apiKey as unknown) as string } : {};
+  const headers: Record<string, string> = RootStore.state.auth.apiKey
+    ? { "X-Api-Key": RootStore.state.auth.apiKey }
+    : {};
   return request(resource + buildQueryString(params), {
     method: "POST",
     body: JSON.stringify(params),

dashboard/src/components/Dashboard.vue

@@ -6,10 +6,10 @@
 		<h1>Guilds</h1>
 		<table v-for="guild in guilds">
 			<tr>
-				<td>{{ guild.id }}</td>
+				<td>{{ guild.guild_id }}</td>
 				<td>{{ guild.name }}</td>
 				<td>
-					<a v-bind:href="'/dashboard/guilds/' + guild.id + '/config'">Config</a>
+					<a v-bind:href="'/dashboard/guilds/' + guild.guild_id + '/config'">Config</a>
 				</td>
 			</tr>
 		</table>
@@ -17,19 +17,19 @@
 </template>
 
 <script>
-	import {mapGetters, mapState} from "vuex";
-    import {LoadStatus} from "../store/types";
+	import {mapState} from "vuex";
 
 	export default {
-	  mounted() {
-	    this.$store.dispatch("guilds/loadAvailableGuilds");
+	  async mounted() {
+	    await this.$store.dispatch("guilds/loadAvailableGuilds");
+	    this.loading = false;
+	  },
+	  data() {
+	    return { loading: true };
 	  },
 	  computed: {
-	    loading() {
-	      return this.$state.guilds.availableGuildsLoadStatus !== LoadStatus.Done;
-	    },
-	    ...mapState({
-	      guilds: 'guilds/available',
+	    ...mapState('guilds', {
+	      guilds: 'available',
 	    }),
 	  },
 	};

dashboard/src/components/GuildConfigEditor.vue

@@ -0,0 +1,74 @@
+<template>
+	<div v-if="loading">
+		Loading...
+	</div>
+	<div v-else>
+		<h1>Config for {{ guild.name }}</h1>
+		<codemirror v-model="editableConfig" :options="cmConfig"></codemirror>
+		<button v-on:click="save" :disabled="saving">Save</button>
+		<span v-if="saving">Saving...</span>
+		<span v-else-if="saved">Saved!</span>
+	</div>
+</template>
+
+<script>
+	import {mapState} from "vuex";
+	import { codemirror } from "vue-codemirror";
+	import "codemirror/lib/codemirror.css";
+	import "codemirror/theme/oceanic-next.css";
+	import "codemirror/mode/yaml/yaml.js";
+
+	export default {
+	  components: {
+	    codemirror,
+	  },
+	  async mounted() {
+        await this.$store.dispatch("guilds/loadAvailableGuilds");
+        if (this.guild == null) {
+          this.$router.push('/dashboard/guilds');
+          return;
+        }
+
+	    await this.$store.dispatch("guilds/loadConfig", this.$route.params.guildId);
+	    this.editableConfig = this.config || "";
+	    this.loading = false;
+	  },
+	  data() {
+	    return {
+	      loading: true,
+	      saving: false,
+	      saved: false,
+	      editableConfig: null,
+	      cmConfig: {
+	        indentWithTabs: false,
+	        indentUnit: 2,
+	        lineNumbers: true,
+	        mode: "text/x-yaml",
+	        theme: "oceanic-next",
+	      },
+	    };
+	  },
+	  computed: {
+	    ...mapState('guilds', {
+	      guild() {
+	        return this.$store.state.guilds.available.find(g => g.guild_id === this.$route.params.guildId);
+	      },
+	      config() {
+	        return this.$store.state.guilds.configs[this.$route.params.guildId];
+	      },
+	    }),
+	  },
+	  methods: {
+	    async save() {
+	      this.saving = true;
+	      await this.$store.dispatch("guilds/saveConfig", {
+	        guildId: this.$route.params.guildId,
+	        config: this.editableConfig,
+	      });
+	      this.saving = false;
+	      this.saved = true;
+	      setTimeout(() => this.saved = false, 2500);
+	    },
+	  },
+	};
+</script>

dashboard/src/main.ts

@@ -2,8 +2,6 @@ import Vue from "vue";
 import { RootStore } from "./store";
 import { router } from "./routes";
 
-get("/foo", { bar: "baz" });
-
 // Set up a read-only global variable to access specific env vars
 Vue.mixin({
   data() {

dashboard/src/routes.ts

@@ -3,8 +3,8 @@ import VueRouter, { RouteConfig } from "vue-router";
 import Index from "./components/Index.vue";
 import Login from "./components/Login.vue";
 import LoginCallback from "./components/LoginCallback.vue";
+import GuildConfigEditor from "./components/GuildConfigEditor.vue";
 import Dashboard from "./components/Dashboard.vue";
-import store from "./store";
 import { authGuard, loginCallbackGuard } from "./auth";
 
 Vue.use(VueRouter);
@@ -15,7 +15,10 @@ const publicRoutes: RouteConfig[] = [
   { path: "/login-callback", beforeEnter: loginCallbackGuard },
 ];
 
-const authenticatedRoutes: RouteConfig[] = [{ path: "/dashboard", component: Dashboard }];
+const authenticatedRoutes: RouteConfig[] = [
+  { path: "/dashboard", component: Dashboard },
+  { path: "/dashboard/guilds/:guildId/config", component: GuildConfigEditor },
+];
 
 authenticatedRoutes.forEach(route => {
   route.beforeEnter = authGuard;

dashboard/src/store/auth.ts

@@ -16,11 +16,11 @@ export const AuthStore: Module<AuthState, RootState> = {
 
       const storedKey = localStorage.getItem("apiKey");
       if (storedKey) {
-        console.log("key?", storedKey);
         const result = await post("auth/validate-key", { key: storedKey });
-        if (result.isValid) {
+        if (result.valid) {
           await dispatch("setApiKey", storedKey);
         } else {
+          console.log("Unable to validate key, removing from localStorage");
           localStorage.removeItem("apiKey");
         }
       }

dashboard/src/store/guilds.ts

@@ -1,4 +1,4 @@
-import { get } from "../api";
+import { get, post } from "../api";
 import { Module } from "vuex";
 import { GuildState, LoadStatus, RootState } from "./types";
 
@@ -19,6 +19,15 @@ export const GuildStore: Module<GuildState, RootState> = {
       const availableGuilds = await get("guilds/available");
       commit("setAvailableGuilds", availableGuilds);
     },
+
+    async loadConfig({ commit }, guildId) {
+      const result = await get(`guilds/${guildId}/config`);
+      commit("setConfig", { guildId, config: result.config });
+    },
+
+    async saveConfig({ commit }, { guildId, config }) {
+      await post(`guilds/${guildId}/config`, { config });
+    },
   },
 
   mutations: {
@@ -30,5 +39,9 @@ export const GuildStore: Module<GuildState, RootState> = {
       state.available = guilds;
       state.availableGuildsLoadStatus = LoadStatus.Done;
     },
+
+    setConfig(state: GuildState, { guildId, config }) {
+      state.configs[guildId] = config;
+    },
   },
 };