Dashboard styling; don't allow login if you have no guild perms; allow logging out

dashboard/src/auth.ts

@@ -15,8 +15,17 @@ export const authGuard: NavigationGuard = async (to, from, next) => {
 };
 
 export const loginCallbackGuard: NavigationGuard = async (to, from, next) => {
-  await RootStore.dispatch("auth/setApiKey", to.query.apiKey);
-  next("/dashboard");
+  if (to.query.apiKey) {
+    await RootStore.dispatch("auth/setApiKey", to.query.apiKey);
+    next("/dashboard");
+  } else {
+    next({
+      path: "/",
+      query: {
+        error: "noaccess",
+      },
+    });
+  }
 };
 
 export const authRedirectGuard: NavigationGuard = async (to, form, next) => {

dashboard/src/components/Dashboard.vue

@@ -13,7 +13,7 @@
           <div class="navbar-start">
             <router-link to="/dashboard" class="navbar-item">Guilds</router-link>
             <a href="#" class="navbar-item">Docs</a>
-            <a href="#" class="navbar-item">Log out</a>
+            <a href="javascript:void(0)" class="navbar-item" v-on:click="logout()">Log out</a>
           </div>
         </div>
       </div>
@@ -41,6 +41,12 @@
   export default {
     async mounted() {
       await import("../style/dashboard.scss");
-    }
+    },
+    methods: {
+      async logout() {
+        await this.$store.dispatch("auth/logout");
+        this.$router.push('/');
+      }
+    },
   };
 </script>

dashboard/src/components/Splash.vue

@@ -1,14 +1,22 @@
 <template>
   <div class="splash">
     <div class="wrapper">
-      <img class="logo" src="../img/logo.png" alt="Zeppelin Logo">
-      <h1>Zeppelin</h1>
-      <div class="description">
-        Zeppelin is a private moderation bot for Discord, designed with large servers and reliability in mind.
+      <div class="logo-column">
+        <img class="logo" src="../img/logo.png" alt="Zeppelin Logo">
       </div>
-      <div class="actions">
-        <a class="btn" href="/login">Dashboard</a>
-        <a class="btn disabled" href="#">Docs</a>
+      <div class="info-column">
+        <h1>Zeppelin</h1>
+        <div class="description">
+          Zeppelin is a private moderation bot for Discord, designed with large servers and reliability in mind.
+        </div>
+        <div class="actions">
+          <a class="btn" href="/login">Dashboard</a>
+          <a class="btn disabled" href="#">Docs</a>
+        </div>
+        <div class="error" v-if="error">
+          <strong>Error</strong>
+          <div v-if="error === 'noaccess'">No access</div>
+        </div>
       </div>
     </div>
   </div>
@@ -16,4 +24,12 @@
 
 <script>
   import "../style/splash.scss";
+
+  export default {
+    computed: {
+      error() {
+        return this.$route.query.error;
+      },
+    },
+  }
 </script>

dashboard/src/store/auth.ts

@@ -35,6 +35,16 @@ export const AuthStore: Module<AuthState, RootState> = {
       localStorage.setItem("apiKey", newKey);
       commit("setApiKey", newKey);
     },
+
+    clearApiKey({ commit }) {
+      localStorage.removeItem("apiKey");
+      commit("setApiKey", null);
+    },
+
+    async logout({ dispatch }) {
+      await post("auth/logout");
+      await dispatch("clearApiKey");
+    },
   },
 
   mutations: {

dashboard/src/style/splash.scss

@@ -7,46 +7,50 @@
   color: #fff;
 
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
 
   a {
     color: #fff;
   }
 
   .wrapper {
-    display: grid;
-    grid-template-columns: auto 400px;
-    grid-template-rows: auto repeat(4, 1fr);
+    flex: 0 1 750px;
+
+    display: flex;
+    flex-direction: row;
     align-items: start;
 
-    .logo {
-      grid-column: 1;
-      grid-row: 1/-1; // Span all
+    .logo-column {
+      flex: 0 0 auto;
+    }
 
+    .info-column {
+      flex: 1 1 100%;
+    }
+
+    .logo {
       width: 300px;
       height: 300px;
       margin-right: 64px;
     }
 
     h1 {
-      grid-column: 2;
-
       font-size: 80px;
       font-weight: 300;
       margin-top: 40px
     }
 
     .description {
-      grid-column: 2;
-
       color: #f1f5ff;
     }
 
     .actions {
-      grid-column: 2;
-
       display: flex;
+      flex-wrap: wrap;
+      margin-top: 8px;
+      margin-left: -12px; // Negative button margin
 
       .btn {
         margin: 12px;
@@ -68,5 +72,12 @@
         }
       }
     }
+
+    .error {
+      margin-top: 8px;
+      background-color: hsl(224, 52%, 32%);
+      padding: 12px;
+      border-radius: 4px;
+    }
   }
 }