add login store

src/webapp/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.8.3",
+        "pinia": "^2.0.34",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3"
       },
@@ -7120,6 +7121,56 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.0.34",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.34.tgz",
+      "integrity": "sha512-cgOoGUiyqX0SSgX8XelK9+Ri4XA2/YyNtgjogwfzIx1g7iZTaZPxm7/bZYMCLU2qHRiHhxG7SuQO0eBacFNc2Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -11575,7 +11626,8 @@
       "version": "5.0.8",
       "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
       "integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "5.0.8",
@@ -12101,7 +12153,8 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmmirror.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "8.2.0",
@@ -12160,7 +12213,8 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ansi-escapes": {
       "version": "3.2.0",
@@ -12930,7 +12984,8 @@
       "version": "6.4.0",
       "resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz",
       "integrity": "sha512-jDfsatwWMWN0MODAFuHszfjphEXfNw9JUAhmY4pLu3TyTU+ohUpsbVtbU+1MZn4a47D9kqh03i4eyOm+74+zew==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "css-loader": {
       "version": "6.7.3",
@@ -13116,7 +13171,8 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
       "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -14132,7 +14188,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -15357,6 +15414,23 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.0.34",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.34.tgz",
+      "integrity": "sha512-cgOoGUiyqX0SSgX8XelK9+Ri4XA2/YyNtgjogwfzIx1g7iZTaZPxm7/bZYMCLU2qHRiHhxG7SuQO0eBacFNc2Q==",
+      "requires": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -15434,25 +15508,29 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
       "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
       "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
       "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
       "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-loader": {
       "version": "6.2.1",
@@ -15557,7 +15635,8 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -15592,7 +15671,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
       "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -17217,7 +17297,8 @@
           "version": "8.13.0",
           "resolved": "https://registry.npmmirror.com/ws/-/ws-8.13.0.tgz",
           "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -17338,7 +17419,8 @@
       "version": "7.5.9",
       "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
       "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "y18n": {
       "version": "5.0.8",

src/webapp/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "pinia": "^2.0.34",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3"
   },

src/webapp/src/main.js

@@ -1,5 +1,29 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
+import { createPinia } from 'pinia';
+import { useUserStore } from '@/stores/userStore';
 
-createApp( App ).use( router ).mount('#app');
+let app = createApp( App );
+
+app.use( createPinia() );
+
+let userStore = useUserStore();
+
+let prod = false;
+
+if ( prod ) {
+    fetch( '/api/getAuth' ).then( res => {
+        res.json().then( data => {
+            userStore.setUserAuth( data.user );
+            userStore.setAdminAuth( data.admin );
+
+            app.use( router );
+            app.mount( '#app' );
+        } );
+    } );
+} else {
+    userStore.setUserAuth( true );
+    app.use( router );
+    app.mount( '#app' );
+}

src/webapp/src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import { useUserStore } from '@/stores/userStore';
 
 /* 
     This is the Vue.js router file. Here, all valid routes are defined.
@@ -42,7 +43,8 @@ const routes = [
         name: 'admin',
         component: () => import( '../views/admin/AdminView.vue' ),
         meta: {
-            title: 'Admin - myevent'
+            title: 'Admin - myevent',
+            adminAuthRequired: true,
         },
         children: [
             {
@@ -50,7 +52,8 @@ const routes = [
                 name: 'adminMain',
                 component: () => import( '../views/admin/HomeView.vue' ),
                 meta: {
-                    title: 'Home :: Admin - myevent'
+                    title: 'Home :: Admin - myevent',
+                    adminAuthRequired: true,
                 }
             },
             {
@@ -58,7 +61,8 @@ const routes = [
                 name: 'adminAccounts',
                 component: () => import( '../views/AdminLoginView.vue' ),
                 meta: {
-                    title: 'Accounts :: Admin - myevent'
+                    title: 'Accounts :: Admin - myevent',
+                    adminAuthRequired: true,
                 }
             },
             {
@@ -66,7 +70,8 @@ const routes = [
                 name: 'adminPages',
                 component: () => import( '../views/AdminLoginView.vue' ),
                 meta: {
-                    title: 'Pages :: Admin - myevent'
+                    title: 'Pages :: Admin - myevent',
+                    adminAuthRequired: true,
                 }
             },
             {
@@ -74,7 +79,8 @@ const routes = [
                 name: 'adminEvents',
                 component: () => import( '../views/AdminLoginView.vue' ),
                 meta: {
-                    title: 'Events :: Admin - myevent'
+                    title: 'Events :: Admin - myevent',
+                    adminAuthRequired: true,
                 }
             },
             {
@@ -82,7 +88,8 @@ const routes = [
                 name: 'adminPlugins',
                 component: () => import( '../views/AdminLoginView.vue' ),
                 meta: {
-                    title: 'Plugins :: Admin - myevent'
+                    title: 'Plugins :: Admin - myevent',
+                    adminAuthRequired: true,
                 }
             },
             {
@@ -90,7 +97,8 @@ const routes = [
                 name: 'adminSettings',
                 component: () => import( '../views/AdminLoginView.vue' ),
                 meta: {
-                    title: 'Admin - myevent'
+                    title: 'Admin - myevent',
+                    adminAuthRequired: true,
                 }
             },
         ]
@@ -126,9 +134,18 @@ const routes = [
         name: 'purchase',
         component: () => import( '@/views/PurchaseView.vue' ),
         meta: {
-            title: 'Purchase - myevent',
+            title: 'Pay - myevent',
             transition: 'scale'
         }
+    },
+    {
+        path: '/pay',
+        name: 'pay',
+        component: () => import( '@/views/PaymentView.vue' ),
+        meta: {
+            title: 'Pay - myevent',
+            transition: 'scale',
+        }
     }
 ]
 
@@ -147,16 +164,24 @@ router.afterEach( ( to, from ) => {
 */
 
 let AdminPages = [ 'admin', 'adminMain' ];
-let isAdminAuthenticated = true;
 
 let UserAccountPages = [ 'account' ];
-let isUserAuthenticated = true;
+
+let authRequired = false;
 
 router.beforeEach( ( to, from ) => {
-    if ( AdminPages.includes( to.name ) && !isAdminAuthenticated ) {
+    let userStore = useUserStore();
+    let isUserAuthenticated = userStore.getUserAuthenticated;
+    let isAdminAuthenticated = userStore.getAdminAuthenticated;
+
+    if ( to.meta.adminAuthRequired && !isAdminAuthenticated ) {
         return { name: 'adminLogin' };
     } else if ( UserAccountPages.includes( to.name ) && !isUserAuthenticated ) {
         return { name: 'login' };
+    } else if ( !isUserAuthenticated && to.name === 'purchase' && authRequired ) {
+        return { name: 'login' };
+    } else if ( !isUserAuthenticated && to.name === 'pay' ) {
+        return { name: 'purchase' };
     }
 } );
 

src/webapp/src/stores/userStore.js

@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+
+export const useUserStore = defineStore ( 'user', {
+    state: () => ( { 'isUserAuth': false, 'isAdminAuth': false } ),
+    getters: {
+        getUserAuthenticated: ( state ) => state.isUserAuth,
+        getAdminAuthenticated: ( state ) => state.isAdminAuth,
+    },
+    actions: { 
+        setUserAuth ( auth ) {
+            this.isUserAuth = auth;
+        },
+        setAdminAuth ( auth ) {
+            this.isAdminAuth = auth;
+        }
+    }
+} );

src/webapp/src/views/CartView.vue

@@ -14,17 +14,22 @@
 </template>
 
 <style scoped>
-    .order-app {
+    .cart {
         text-align: justify;
         width: 100%;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
     }
 
     .cart-list {
+        width: 50%;
+    }
+    
+    ul {
         list-style: none;
-        width: 80%;
+        text-align: justify;
     }
 
     .ticket {

src/webapp/src/views/OrderView.vue

@@ -2,19 +2,19 @@
     <div class="order">
         <h1>Order tickets</h1>
         <div class="order-app">
-            <ul>
+            <ul v-for="event in events">
                 <li>
                     <router-link to="/tickets/details" class="ticket" @click="setActiveTicket( 'test' );">
                         <div class="ticket-name">
-                            <h3>Event name</h3>
+                            <h3>{{ event.name }}</h3>
-                            <p>Event description</p>
+                            <p>{{ event.description }}</p>
                         </div>
                         <div class="ticket-info">
-                            <p>Free seats / max seats</p>
+                            <p>Free seats: {{ event.freeSeats }} / {{ event.maxSeats }}</p>
-                            <p>Date & time of event</p>
+                            <p>{{ event.location }}, {{ event.date }}</p>
-                            <h4>Starting at CHF 20.00</h4>
+                            <h4>Starting at {{ event.currency }} {{ event.startingPrice }}</h4>
                         </div>
-                        <img src="../assets/logo.png" alt="event logo" class="ticket-logo">
+                        <img :src="require( '@/assets/' + event.logo )" alt="event logo" class="ticket-logo">
                     </router-link>
                 </li>
             </ul>
@@ -63,6 +63,7 @@
 
     .ticket-name {
         margin-right: auto;
+        max-width: 35%;
     }
 
     .ticket-info {
@@ -78,6 +79,11 @@
             setActiveTicket ( id ) {
                 sessionStorage.setItem( 'selectedTicket', id );
             }
+        },
+        data () {
+            return {
+                events: { 'test':{ 'name': 'TestEvent', 'description': 'This is a description for the TestEvent to test multiline support and proper positioning of the Fields', 'freeSeats': 2, 'maxSeats': 2, 'date':'TestDate', 'startingPrice':15, 'location': 'TestLocation', 'eventID': 'test', 'currency': 'CHF', 'logo': 'logo.png' } }
+            }
         }
     };
 </script>

src/webapp/src/views/PaymentView.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="order">
+        <h1>Purchase</h1>
+        <h3>Please choose a payment option</h3>
+    </div>
+</template>
+
+<style scoped>
+    .order-app {
+        text-align: justify;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    ul {
+        list-style: none;
+        width: 80%;
+    }
+
+    .ticket {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+        color: var( --primary-color );
+        border-color: var( --primary-color );
+        border-width: 1px;
+        height: fit-content;
+        border-style: solid;
+        padding: 10px;
+        transition: 0.4s;
+    }
+
+    .ticket:hover {
+        background-color: var( --hover-color );
+        transition: 0.4s;
+    }
+
+    .ticket-logo {
+        height: 20vh;
+        width: auto;
+        margin-left: auto;
+    }
+
+    .ticket-name {
+        margin-right: auto;
+    }
+
+    .ticket-info {
+        margin-left: auto;
+        margin-right: auto
+    }
+</style>

src/webapp/src/views/PurchaseView.vue

@@ -1,12 +1,21 @@
 <template>
-    <div class="order">
+    <div class="purchase">
         <h1>Purchase</h1>
-        <h3>Please choose a payment option</h3>
+        <h3>Personal information</h3>
+        <div class="purchase-app">
+            <form>
+                <div v-if="!isAuthenticated">
+                    <label for="email">Email address *</label><br>
+                    <input type="email" name="email" id="email" required v-model="formData.email">
+                </div>
+            </form>
+        </div>
+
     </div>
 </template>
 
 <style scoped>
-    .order-app {
+    .purchase-app {
         text-align: justify;
         width: 100%;
         display: flex;
@@ -53,3 +62,16 @@
         margin-right: auto
     }
 </style>
+
+<script>
+export default {
+    name: 'PurchaseView',
+    data () {
+        return {
+            settings: { 'accountRequired':true },
+            isAuthenticated: false,
+            formData: {}
+        }
+    }
+};
+</script>