Admin panel progress

This commit is contained in:
2023-04-15 17:48:19 +02:00
parent 7a81b94438
commit 13924e3abb
14 changed files with 224 additions and 90 deletions

View File

@@ -1,63 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank"
rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank"
rel="noopener">router</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a>
</li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}</style>

View File

@@ -15,8 +15,10 @@
<script>
export default {
props: {
formData: Object
data() {
return {
formData: {},
}
},
methods: {
setup () {

View File

@@ -38,6 +38,15 @@ const routes = [
title: 'Login :: Admin - myevent'
}
},
{
path: '/setup',
name: 'setup',
component: () => import( '../views/SetupView.vue' ),
meta: {
title: 'Login :: Admin - myevent',
requiresSetupKey: true,
}
},
{
path: '/admin',
name: 'admin',
@@ -59,16 +68,17 @@ const routes = [
{
path: 'admin-accounts',
name: 'adminAccounts',
component: () => import( '../views/AdminLoginView.vue' ),
component: () => import( '../views/admin/AccountView.vue' ),
meta: {
title: 'Accounts :: Admin - myevent',
adminAuthRequired: true,
permissions: 'root'
}
},
{
path: 'pages',
name: 'adminPages',
component: () => import( '../views/AdminLoginView.vue' ),
component: () => import( '../views/admin/PagesView.vue' ),
meta: {
title: 'Pages :: Admin - myevent',
adminAuthRequired: true,
@@ -77,7 +87,7 @@ const routes = [
{
path: 'events',
name: 'adminEvents',
component: () => import( '../views/AdminLoginView.vue' ),
component: () => import( '../views/admin/EventsView.vue' ),
meta: {
title: 'Events :: Admin - myevent',
adminAuthRequired: true,
@@ -86,7 +96,7 @@ const routes = [
{
path: 'plugins',
name: 'adminPlugins',
component: () => import( '../views/AdminLoginView.vue' ),
component: () => import( '../views/admin/PluginsView.vue' ),
meta: {
title: 'Plugins :: Admin - myevent',
adminAuthRequired: true,
@@ -95,7 +105,7 @@ const routes = [
{
path: 'settings',
name: 'adminSettings',
component: () => import( '../views/AdminLoginView.vue' ),
component: () => import( '../views/admin/SettingsView.vue' ),
meta: {
title: 'Admin - myevent',
adminAuthRequired: true,
@@ -176,6 +186,8 @@ router.beforeEach( ( to, from ) => {
if ( to.meta.adminAuthRequired && !isAdminAuthenticated ) {
return { name: 'adminLogin' };
} else if ( to.name === 'adminLogin' && isAdminAuthenticated ) {
return { name: 'admin' };
} else if ( UserAccountPages.includes( to.name ) && !isUserAuthenticated ) {
return { name: 'login' };
} else if ( !isUserAuthenticated && to.name === 'purchase' && authRequired ) {

View File

@@ -1,7 +1,7 @@
import { defineStore } from "pinia";
export const useUserStore = defineStore ( 'user', {
state: () => ( { 'isUserAuth': false, 'isAdminAuth': false } ),
state: () => ( { 'isUserAuth': false, 'isAdminAuth': true, 'userPermissions': {} } ),
getters: {
getUserAuthenticated: ( state ) => state.isUserAuth,
getAdminAuthenticated: ( state ) => state.isAdminAuth,

View File

@@ -22,7 +22,7 @@
},
methods: {
login () {
this.$router.push( '/admin' );
}
},
}
@@ -56,4 +56,10 @@
padding: 5px 10px;
margin-top: 2%;
}
</style>
<style>
nav {
display: block;
}
</style>

View File

@@ -1,5 +1,5 @@
<template>
<initial :formData="formData"></initial>
<initial></initial>
</template>
<script>

View File

@@ -0,0 +1,27 @@
<template>
<div>
<h1>Setup</h1>
<div class="main-view">
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transition || 'scale'" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</div>
</div>
</template>
<script>
export default {
data () {
return {
formData: {}
}
},
methods: {
setup () {
}
},
};
</script>

View File

@@ -0,0 +1,22 @@
<template>
<div>
<h2>Admin Accounts</h2>
<p>Here you can change everything regarding admin accounts. You may create, modify or delete admin accounts.</p>
<div class="bigButtons"></div>
</div>
</template>
<script>
export default {
data () {
return {
formData: {}
}
},
methods: {
setup () {
}
}
};
</script>

View File

@@ -10,6 +10,7 @@
<router-link to="/admin/events" class="admin-menu">Events</router-link>
<router-link to="/admin/plugins" class="admin-menu">Plugins</router-link>
<router-link to="/admin/settings" class="admin-menu">Settings</router-link>
<router-link to="/admin/login" class="admin-menu" @click="logout()">Logout</router-link>
</nav>
<div class="main-view">
<router-view v-slot="{ Component, route }">
@@ -49,6 +50,7 @@
grid-area: main;
height: 100%;
min-height: 80vh;
overflow: scroll;
}
.side-nav {
@@ -60,6 +62,7 @@
margin: 0;
background-color: var( --accent-background );
justify-content: center;
overflow: scroll;
}
.admin-menu {
@@ -82,16 +85,28 @@
</style>
<style>
nav {
display: none;
}
</style>
<script>
import { useUserStore } from '@/stores/userStore';
import { mapStores } from 'pinia';
export default {
data () {
return {
formData: {}
}
},
computed: {
...mapStores( useUserStore )
},
methods: {
setup () {
logout () {
this.userStore.setAdminAuth( false );
}
}
};

View File

@@ -0,0 +1,22 @@
<template>
<div>
<h2>Events</h2>
<p>Welcome to the admin panel!</p>
<div class="bigButtons"></div>
</div>
</template>
<script>
export default {
data () {
return {
formData: {}
}
},
methods: {
setup () {
}
}
};
</script>

View File

@@ -1,18 +1,43 @@
<template>
<h2>Home</h2>
<div>
<h2>Home</h2>
<p>Welcome to the admin panel!</p>
<div class="bigButton-container">
<router-link to="/admin/admin-accounts" class="bigButton">Admin-accounts</router-link>
<router-link to="/admin/pages" class="bigButton">Pages</router-link>
<router-link to="/admin/events" class="bigButton">Events</router-link>
<router-link to="/admin/events" class="bigButton">Plugins</router-link>
<router-link to="/admin/events" class="bigButton">Settings</router-link>
<a href="https://myevent.janishutz.com/docs" class="bigButton" target="_blank">Documentation</a>
</div>
</div>
</template>
<script>
export default {
data () {
return {
formData: {}
}
},
methods: {
setup () {
}
}
};
</script>
<style scoped>
.bigButton-container {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.bigButton {
background-color: var( --accent-background );
width: 40%;
height: 30vh;
border-color: black;
margin: 0.02%;
border-style: inset;
color: var( --secondary-color );
text-decoration: none;
border-width: 2px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.bigButton:hover {
background-color: var( --accent-background-hover );
}
</style>

View File

@@ -0,0 +1,22 @@
<template>
<div>
<h2>Pages</h2>
<p>Welcome to the admin panel!</p>
<div class="bigButtons"></div>
</div>
</template>
<script>
export default {
data () {
return {
formData: {}
}
},
methods: {
setup () {
}
}
};
</script>

View File

@@ -0,0 +1,22 @@
<template>
<div>
<h2>Plugins</h2>
<p>Welcome to the admin panel!</p>
<div class="bigButtons"></div>
</div>
</template>
<script>
export default {
data () {
return {
formData: {}
}
},
methods: {
setup () {
}
}
};
</script>

View File

@@ -0,0 +1,22 @@
<template>
<div>
<h2>Settings</h2>
<p>Welcome to the admin panel!</p>
<div class="bigButtons"></div>
</div>
</template>
<script>
export default {
data () {
return {
formData: {}
}
},
methods: {
setup () {
}
}
};
</script>