purchase view progress, cleanup

src/webapp/main/notes.md

@@ -10,5 +10,4 @@
 
 
 
-
 - add webpack to project website to decrease file size

src/webapp/main/src/router/index.js

@@ -38,8 +38,6 @@ let authRequired = false;
 
 router.beforeEach( ( to, from ) => {
     let userStore = useUserStore();
-    let backendStore = useBackendStore();
-    backendStore.loadVisitedSetupPages();
     let isUserAuthenticated = userStore.getUserAuthenticated;
     let isAdminAuthenticated = userStore.getAdminAuthenticated;
 
@@ -53,8 +51,6 @@ router.beforeEach( ( to, from ) => {
         return { name: 'account' };
     } else if ( !isUserAuthenticated && to.name === 'pay' ) {
         return { name: 'purchase' };
-    } else if ( to.name.substring( 0, 5 ) === 'setup' && !backendStore.getVisitedSetupPages[ to.name.substring( 5 ).toLowerCase() ] && to.name.substring( 5 ).toLowerCase() !== 'start' && to.name.substring( 5 ).toLowerCase() !== 'root' ) {
-        return { name: 'setupStart' };
     } else if ( to.name === '2fa' && !userStore.getUserTwoFACompliant ) {
         return { name: 'login' };
     } else if ( to.name === 'Admin2fa' && !userStore.getAdminTwoFACompliant ) {

src/webapp/main/src/router/mainRoutes.js

@@ -116,15 +116,6 @@ export default [
             transition: 'scale'
         }
     },
-    {
-        path: '/pay',
-        name: 'pay',
-        component: () => import( '@/views/purchasing/PaymentView.vue' ),
-        meta: {
-            title: 'Pay - libreevent',
-            transition: 'scale',
-        }
-    },
     {
         path: '/admin/seatplan',
         name: 'adminSeatplanEditor',

src/webapp/main/src/stores/backendStore.js

@@ -10,19 +10,13 @@
 import { defineStore } from "pinia";
 
 export const useBackendStore = defineStore ( 'backend', {
-    state: () => ( { 'visitedSetupPages': {}, 'guestPurchase': false, 'guestPurchaseAllowed': true } ),
+    state: () => ( { 'guestPurchase': false, 'guestPurchaseAllowed': true } ),
     getters: {
         getVisitedSetupPages: ( state ) => state.visitedSetupPages,
         getIsGuestPurchase: ( state ) => state.guestPurchase,
         getIsGuestPurchaseAllowed: ( state ) => state.guestPurchaseAllowed,
     },
-    actions: { 
+    // actions: { 
-        addVisitedSetupPages ( page, data ) {
+        
-            this.visitedSetupPages[ page ] = data;
+    // }
-            sessionStorage.setItem( 'visitedSetupPages', JSON.stringify( this.visitedSetupPages ) );
-        },
-        loadVisitedSetupPages () {
-            this.visitedSetupPages = sessionStorage.getItem( 'visitedSetupPages' ) ? JSON.parse( sessionStorage.getItem( 'visitedSetupPages' ) ) : {};
-        }
-    }
 } );

src/webapp/main/src/views/purchasing/CartView.vue

@@ -85,6 +85,10 @@
         font-size: 110%;
         margin: 0;
     }
+
+    .tickets-table {
+        margin-left: 3%;
+    }
 </style>
 
 <script>

src/webapp/main/src/views/purchasing/PaymentView.vue

@@ -1,71 +0,0 @@
-<!--
-*				libreevent - PaymentView.vue
-*
-*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
-*			https://janishutz.com, development@janishutz.com
-*
-*
--->
-
-<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>
-
-
-<style>
-    nav {
-        display: initial;
-    }
-</style>

src/webapp/main/src/views/purchasing/PurchaseView.vue

@@ -20,12 +20,28 @@
                 <div class="data">
                     <h2>Billing</h2>
                     <table class="billing-info-table">
-                        <tr>
+                        <tr v-if="settings.requiresAddress">
                             <td>Street and house number</td>
-                            <td><input type="text" name="address" id="address"></td>
+                            <td><input type="text" name="street" id="street" v-bind="userData.street" placeholder="Street"> <input type="text" name="houseNumber" id="houseNumber" v-bind="userData.houseNumber" placeholder="House number"></td>
+                        </tr>
+                        <tr v-if="settings.requiresAddress">
+                            <td>Zip Code and City</td>
+                            <td><input type="text" name="zip" id="zip" v-bind="userData.zip" placeholder="Zip Code"> <input type="text" name="city" id="city" v-bind="userData.city" placeholder="City"></td>
+                        </tr>
+                        <tr v-if="settings.requiresAddress">
+                            <td>Country</td>
+                            <td><input type="text" name="country" id="country" v-bind="userData.zip" placeholder="Country"></td>
+                        </tr>
+                        <tr v-if="settings.requiresAge">
+                            <td>Birth date</td>
+                            <td><input type="date" name="bday" id="bday" v-bind="userData.bday"></td>
                         </tr>
                     </table>
-                    <router-link to="/pay" id="buy-button">Buy now</router-link>
+
+                    <div v-if="settings.requiresSpecialToken">
+                        <!-- TODO: Implement -->
+                    </div>
+                    <button id="buy-button" @click="preparePayment();">Buy now</button>
                 </div>
                 <div class="cart">
                     <div class="cart-list">
@@ -181,7 +197,7 @@ export default {
     name: 'PurchaseView',
     data () {
         return {
-            settings: { 'accountRequired': true, 'requiresAddress': true, 'requiresAge': true, 'requiresSpecialNumber': true, 'specialRequirement': { 'display': { 'de': '', 'en': 'id number' }, 'rules': {} } },
+            settings: { 'accountRequired': true, 'requiresAddress': true, 'requiresAge': true, 'requiresSpecialToken': true, 'specialRequirement': { 'display': { 'de': '', 'en': 'id number' }, 'rules': {} } },
             isAuthenticated: false,
             cart: {},
             backend: { 'currency': 'CHF' },
@@ -196,18 +212,17 @@ export default {
     methods: {
         loadData () {
             this.cartNotEmpty = false;
-            let tickets = JSON.parse( localStorage.getItem( 'cart' ) );
+            let cart = JSON.parse( localStorage.getItem( 'cart' ) );
 
-            console.log( tickets );
+            for ( let event in cart ) {
-            for ( let event in tickets ) {
+                if ( Object.keys( cart[ event ][ 'tickets' ] ).length  ) {
-                if ( Object.keys( tickets[ event ][ 'tickets' ] ).length  ) {
                     this.cartNotEmpty = true;
                 };
             }
 
             
             if ( this.cartNotEmpty ) {
-                this.cart = tickets;
+                this.cart = cart;
                 this.isAuthenticated = this.userStore.getUserAuthenticated;
                 this.settings.accountRequired = !this.backendStore.getIsGuestPurchaseAllowed;
                 this.calculateTotal();
@@ -225,6 +240,14 @@ export default {
         },
         setRedirect () {
             sessionStorage.setItem( 'redirect', '/purchase' );
+        },
+        preparePayment () {
+            /* 
+                How it works: Request to payment handling route of server -> get URL for payment
+                -> Redirect to that URL -> On completion payment provider redirects to complete
+                route (plain HTML document) which then awaits processing completion and gives the
+                user a link to download the ticket. A mail has been sent to user automatically.
+            */
         }
     },
     created () {

src/webapp/main/src/views/user/TwoFA.vue

@@ -61,6 +61,7 @@
                     }, false)
                 }, 300 );
             } else {
+                // TODO: Add ping method (pings every 5 sec)
                 setTimeout( () => {
                     this.$refs.notification.createNotification( 'Unsupported browser detected. Redirection might take longer to occur!', 20, 'warning', 'normal' );
                 }, 300 );

src/webapp/main/tos.md

@@ -0,0 +1,4 @@
+# Terms of Service
+
+libreevent is a free and open source event management solution that is hosted by the operator of this website. The libreevent developers take no responsibility for the content of this website, nor are they affiliated with the seller in any shape or form. As Software licensed under the GNU General Public License Version 3, it comes with ABSOLUTELY NO WARRANTY to the extent permitted by applicable law. 
+