Dashboard work and related
This commit is contained in:
Dragory
parent
7bda2b1763
commit
b230a73a6f
44 changed files with 637 additions and 272 deletions
|
|
@ -1,15 +1,25 @@
|
|||
import { NavigationGuard } from "vue-router";
|
||||
import { RootStore } from "./store";
|
||||
|
||||
export const authGuard: NavigationGuard = async (to, from, next) => {
|
||||
if (RootStore.state.auth.apiKey) return next(); // We have an API key -> authenticated
|
||||
if (RootStore.state.auth.loadedInitialAuth) return next("/login"); // No API key and initial auth data was already loaded -> not authenticated
|
||||
const isAuthenticated = async () => {
|
||||
if (RootStore.state.auth.apiKey) return true; // We have an API key -> authenticated
|
||||
if (RootStore.state.auth.loadedInitialAuth) return false; // No API key and initial auth data was already loaded -> not authenticated
|
||||
await RootStore.dispatch("auth/loadInitialAuth"); // Initial auth data wasn't loaded yet (per above check) -> load it now
|
||||
if (RootStore.state.auth.apiKey) return next();
|
||||
next("/login"); // Still no API key -> not authenticated
|
||||
if (RootStore.state.auth.apiKey) return true;
|
||||
return false; // Still no API key -> not authenticated
|
||||
};
|
||||
|
||||
export const authGuard: NavigationGuard = async (to, from, next) => {
|
||||
if (await isAuthenticated()) return next();
|
||||
next("/");
|
||||
};
|
||||
|
||||
export const loginCallbackGuard: NavigationGuard = async (to, from, next) => {
|
||||
await RootStore.dispatch("auth/setApiKey", to.query.apiKey);
|
||||
next("/dashboard");
|
||||
};
|
||||
|
||||
export const authRedirectGuard: NavigationGuard = async (to, form, next) => {
|
||||
if (await isAuthenticated()) return next("/dashboard");
|
||||
window.location.href = `${process.env.API_URL}/auth/login`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,46 @@
|
|||
<template>
|
||||
<div v-if="loading">
|
||||
Loading...
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1>Guilds</h1>
|
||||
<table v-for="guild in guilds">
|
||||
<tr>
|
||||
<td>{{ guild.guild_id }}</td>
|
||||
<td>{{ guild.name }}</td>
|
||||
<td>
|
||||
<a v-bind:href="'/dashboard/guilds/' + guild.guild_id + '/config'">Config</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="dashboard">
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<div class="navbar-item">
|
||||
<img class="dashboard-logo" src="../img/logo.png" aria-hidden="true">
|
||||
<h1 class="dashboard-title">Zeppelin Dashboard</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-menu is-active">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
<style scoped>
|
||||
.dashboard-logo {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
export default {
|
||||
async mounted() {
|
||||
await this.$store.dispatch("guilds/loadAvailableGuilds");
|
||||
this.loading = false;
|
||||
},
|
||||
data() {
|
||||
return { loading: true };
|
||||
},
|
||||
computed: {
|
||||
...mapState('guilds', {
|
||||
guilds: 'available',
|
||||
}),
|
||||
},
|
||||
};
|
||||
.dashboard-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
async mounted() {
|
||||
await import("../style/dashboard.scss");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,23 @@
|
|||
Loading...
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1>Config for {{ guild.name }}</h1>
|
||||
<h2 class="title is-1">Config for {{ guild.name }}</h2>
|
||||
<codemirror v-model="editableConfig" :options="cmConfig"></codemirror>
|
||||
<button v-on:click="save" :disabled="saving">Save</button>
|
||||
<button class="button" v-on:click="save" :disabled="saving">Save</button>
|
||||
<span v-if="saving">Saving...</span>
|
||||
<span v-else-if="saved">Saved!</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.vue-codemirror {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
>>> .CodeMirror {
|
||||
height: 70vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import { codemirror } from "vue-codemirror";
|
||||
|
|
@ -37,7 +46,6 @@
|
|||
return {
|
||||
loading: true,
|
||||
saving: false,
|
||||
saved: false,
|
||||
editableConfig: null,
|
||||
cmConfig: {
|
||||
indentWithTabs: false,
|
||||
|
|
@ -51,7 +59,7 @@
|
|||
computed: {
|
||||
...mapState('guilds', {
|
||||
guild() {
|
||||
return this.$store.state.guilds.available.find(g => g.guild_id === this.$route.params.guildId);
|
||||
return this.$store.state.guilds.available.find(g => g.id === this.$route.params.guildId);
|
||||
},
|
||||
config() {
|
||||
return this.$store.state.guilds.configs[this.$route.params.guildId];
|
||||
|
|
@ -65,9 +73,7 @@
|
|||
guildId: this.$route.params.guildId,
|
||||
config: this.editableConfig,
|
||||
});
|
||||
this.saving = false;
|
||||
this.saved = true;
|
||||
setTimeout(() => this.saved = false, 2500);
|
||||
this.$router.push("/dashboard");
|
||||
},
|
||||
},
|
||||
};
|
||||
61
dashboard/src/components/DashboardGuildList.vue
Normal file
61
dashboard/src/components/DashboardGuildList.vue
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<div v-if="loading">
|
||||
Loading...
|
||||
</div>
|
||||
<div v-else>
|
||||
<h2 class="title is-2">Guilds</h2>
|
||||
<table class="table">
|
||||
<tr v-for="guild in guilds">
|
||||
<td>
|
||||
<img v-if="guild.icon" class="guild-logo" :src="guild.icon" :aria-label="'Logo for guild ' + guild.name">
|
||||
</td>
|
||||
<td>
|
||||
<div class="guild-name">{{ guild.name }}</div>
|
||||
<div class="guild-id">{{ guild.id }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<router-link class="button" :to="'/dashboard/guilds/' + guild.id + '/config'">Config</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.guild-logo {
|
||||
display: block;
|
||||
width: 42px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.guild-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.guild-id {
|
||||
color: hsla(220, 100%, 95%, 0.6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
async mounted() {
|
||||
await this.$store.dispatch("guilds/loadAvailableGuilds");
|
||||
this.loading = false;
|
||||
},
|
||||
data() {
|
||||
return { loading: true };
|
||||
},
|
||||
computed: {
|
||||
...mapState('guilds', {
|
||||
guilds: 'available',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<template>
|
||||
<p>Redirecting...</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
created() {
|
||||
this.$router.push('/login');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<template>
|
||||
<a v-bind:href="env.API_URL + '/auth/login'">Login</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
computed: {
|
||||
blah() {
|
||||
return this.$state.apiKey;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
19
dashboard/src/components/Splash.vue
Normal file
19
dashboard/src/components/Splash.vue
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<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>
|
||||
<div class="actions">
|
||||
<a class="btn" href="/login">Dashboard</a>
|
||||
<a class="btn disabled" href="#">Docs</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "../style/splash.scss";
|
||||
</script>
|
||||
BIN
dashboard/src/img/logo.png
Normal file
BIN
dashboard/src/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
|
|
@ -1,3 +1,5 @@
|
|||
import "./style/base.scss";
|
||||
|
||||
import Vue from "vue";
|
||||
import { RootStore } from "./store";
|
||||
import { router } from "./routes";
|
||||
|
|
|
|||
|
|
@ -1,30 +1,37 @@
|
|||
import Vue from "vue";
|
||||
import VueRouter, { RouteConfig } from "vue-router";
|
||||
import Index from "./components/Index.vue";
|
||||
import Splash from "./components/Splash.vue";
|
||||
import Login from "./components/Login.vue";
|
||||
import LoginCallback from "./components/LoginCallback.vue";
|
||||
import GuildConfigEditor from "./components/GuildConfigEditor.vue";
|
||||
import DashboardGuildList from "./components/DashboardGuildList.vue";
|
||||
import DashboardGuildConfigEditor from "./components/DashboardGuildConfigEditor.vue";
|
||||
import Dashboard from "./components/Dashboard.vue";
|
||||
import { authGuard, loginCallbackGuard } from "./auth";
|
||||
import { authGuard, authRedirectGuard, loginCallbackGuard } from "./auth";
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const publicRoutes: RouteConfig[] = [
|
||||
{ path: "/", component: Index },
|
||||
{ path: "/login", component: Login },
|
||||
{ path: "/login-callback", beforeEnter: loginCallbackGuard },
|
||||
];
|
||||
|
||||
const authenticatedRoutes: RouteConfig[] = [
|
||||
{ path: "/dashboard", component: Dashboard },
|
||||
{ path: "/dashboard/guilds/:guildId/config", component: GuildConfigEditor },
|
||||
];
|
||||
|
||||
authenticatedRoutes.forEach(route => {
|
||||
route.beforeEnter = authGuard;
|
||||
});
|
||||
|
||||
export const router = new VueRouter({
|
||||
mode: "history",
|
||||
routes: [...publicRoutes, ...authenticatedRoutes],
|
||||
routes: [
|
||||
{ path: "/", component: Splash },
|
||||
{ path: "/login", beforeEnter: authRedirectGuard },
|
||||
{ path: "/login-callback", beforeEnter: loginCallbackGuard },
|
||||
|
||||
// Dashboard
|
||||
{
|
||||
path: "/dashboard",
|
||||
component: Dashboard,
|
||||
beforeEnter: authGuard,
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
component: DashboardGuildList,
|
||||
},
|
||||
{
|
||||
path: "guilds/:guildId/config",
|
||||
component: DashboardGuildConfigEditor,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
|
|
|||
6
dashboard/src/style/base.scss
Normal file
6
dashboard/src/style/base.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap');
|
||||
@import "~bulma/sass/base/minireset";
|
||||
|
||||
body {
|
||||
font: normal 16px/1.4 'Open Sans', sans-serif;
|
||||
}
|
||||
0
dashboard/src/style/dark-bulma-variables.scss
Normal file
0
dashboard/src/style/dark-bulma-variables.scss
Normal file
5
dashboard/src/style/dashboard.scss
Normal file
5
dashboard/src/style/dashboard.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
$family-primary: 'Open Sans', sans-serif;
|
||||
|
||||
@import "~bulmaswatch/superhero/_variables";
|
||||
@import "~bulma/bulma";
|
||||
@import "~bulmaswatch/superhero/_overrides";
|
||||
72
dashboard/src/style/splash.scss
Normal file
72
dashboard/src/style/splash.scss
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
.splash {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
background-color: #7289da;
|
||||
background-image: linear-gradient(225deg, #7289da 0%, #5d70b4 100%);
|
||||
color: #fff;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: auto 400px;
|
||||
grid-template-rows: auto repeat(4, 1fr);
|
||||
align-items: start;
|
||||
|
||||
.logo {
|
||||
grid-column: 1;
|
||||
grid-row: 1/-1; // Span all
|
||||
|
||||
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;
|
||||
|
||||
.btn {
|
||||
margin: 12px;
|
||||
text-decoration: none;
|
||||
padding: 8px 24px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
transition: all 120ms ease-in-out;
|
||||
background-color: hsla(0, 0%, 100%, 0.05);
|
||||
|
||||
&:not(.disabled):hover {
|
||||
background-color: hsla(0, 0%, 100%, 0.25);
|
||||
box-shadow: 0 3px 12px -2px hsla(0, 0%, 0%, 0.2);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue