Admin panel progress

src/webapp/src/components/HelloWorld.vue

@@ -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>

src/webapp/src/components/initial.vue

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

src/webapp/src/router/index.js

@@ -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 ) {

src/webapp/src/stores/userStore.js

@@ -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,

src/webapp/src/views/AdminLoginView.vue

@@ -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>

src/webapp/src/views/HomeView.vue

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

src/webapp/src/views/SetupView.vue

@@ -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>

src/webapp/src/views/admin/AccountView.vue

@@ -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>

src/webapp/src/views/admin/AdminView.vue

@@ -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 );
             }
         }
     };

src/webapp/src/views/admin/EventsView.vue

@@ -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>

src/webapp/src/views/admin/HomeView.vue

@@ -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>
+<style scoped>
-    export default {
+    .bigButton-container {
-        data () {
+        display: flex;
-            return {
+        align-items: center;
-                formData: {}
+        flex-wrap: wrap;
-            }
+        justify-content: center;
-        },
+    }
-        methods: {
+
-            setup () {
+    .bigButton {
-                
+        background-color: var( --accent-background );
-            }
+        width: 40%;
-        }
+        height: 30vh;
-    };
+        border-color: black;
-</script>
+        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>

src/webapp/src/views/admin/PagesView.vue

@@ -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>

src/webapp/src/views/admin/PluginsView.vue

@@ -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>

src/webapp/src/views/admin/SettingsView.vue

@@ -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>