settings & fixes

src/webapp/src/App.vue

@@ -40,8 +40,8 @@
 
 :root.dark {
     --primary-color: white;
-    --accent-background: rgb(100, 100, 190);
+    --accent-background: rgb(56, 56, 112);
-    --secondary-color: black;
+    --secondary-color: white;
     --background-color: rgb(32, 32, 32);
     --popup-color: rgb(58, 58, 58);
     --accent-color: #42b983;
@@ -56,8 +56,8 @@
     :root {
         --primary-color: white;
         --popup-color: rgb(58, 58, 58);
-        --accent-background: rgb(100, 100, 190);
+        --accent-background: rgb(56, 56, 112);
-        --secondary-color: black;
+        --secondary-color: white;
         --background-color: rgb(32, 32, 32);
         --accent-color: #42b983;
         --hover-color: rgb(83, 83, 83);

src/webapp/src/components/settings/settings.vue

@@ -1,5 +1,5 @@
 <!--
-*				libreevent - SettingsView.vue
+*				libreevent - settings.vue
 *
 *	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
 *			https://janishutz.com, development@janishutz.com
@@ -22,12 +22,29 @@
                         </div>
                     </div>
                 </td> 
-                <td>
+                <td v-if="setting.type == 'toggle'">
                     <label class="switch">
                         <input type="checkbox" v-model="setting.value">
                         <span class="slider round"></span>
                     </label>
                 </td>
+                <td v-else-if="setting.type == 'select'">
+                    <select v-model="setting.value">
+                        <option v-for="option in setting.restrictions" :value="option.value">{{ option.displayName }}</option>
+                    </select>
+                </td>
+                <td v-else-if="setting.type == 'number'">
+                    <input type="number" v-model="setting.value" :min="setting.restrictions.min" :max="setting.restrictions.max">
+                </td>
+                <td v-else-if="setting.type == 'text'">
+                    <input type="text" v-model="setting.value">
+                </td>
+                <td v-else-if="setting.type == 'textbox'">
+                    <textarea v-model="setting.value"></textarea>
+                </td>
+                <td v-else-if="setting.type == 'date'">
+                    <input type="date" v-model="setting.value">
+                </td>
             </tr>
         </table>
     </div>
@@ -58,11 +75,11 @@
 
 .info-wrapper {
     display: inline;
-    position: relative;
 }
 
 .info-container {
     display: inline;
+    position: relative;
 }
 
 .info-icon {
@@ -79,7 +96,7 @@
     background-color: var( --popup-color );
     border-radius: 20px;
     top: 125%;
-    left: -50%
+    right: -9.3vw;
 }
 
 .info-box::before {

src/webapp/src/stores/backendStore.js

@@ -10,7 +10,7 @@
 import { defineStore } from "pinia";
 
 export const useBackendStore = defineStore ( 'backend', {
-    state: () => ( { 'visitedSetupPages': {}, 'guestPurchase': false, 'guestPurchaseAllowed': false } ),
+    state: () => ( { 'visitedSetupPages': { 'root': true }, 'guestPurchase': false, 'guestPurchaseAllowed': false } ),
     getters: {
         getVisitedSetupPages: ( state ) => state.visitedSetupPages,
         getIsGuestPurchase: ( state ) => state.guestPurchase,

src/webapp/src/views/SetupView.vue

@@ -24,7 +24,6 @@
             <router-link to="/setup/complete" v-if="backendStore.getVisitedSetupPages[ 'complete' ]">Complete</router-link>
             <a v-else class="inactive">Complete</a>
         </nav>
-        <h1>Setup</h1>
         <div class="main-view">
             <router-view v-slot="{ Component, route }">
                 <transition :name="route.meta.transition || 'scale'" mode="out-in">

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

@@ -13,6 +13,7 @@
             <h1>Admin panel</h1>
         </div>
         <nav class="side-nav">
+            <img src="@/assets/logo.png" alt="libreevent logo" style="width: 80%; margin-left: 10%; margin-bottom: 5%;">
             <router-link to="/admin" class="admin-menu">Home</router-link>
             <router-link to="/admin/admin-accounts" class="admin-menu">Admin Accounts</router-link>
             <router-link to="/admin/pages" class="admin-menu">Pages</router-link>
@@ -58,6 +59,7 @@
     .main-view {
         grid-area: main;
         height: 100%;
+        width: 80vw;
         min-height: 80vh;
         overflow: scroll;
     }
@@ -67,6 +69,7 @@
         display: flex;
         flex-direction: column;
         height: 100%;
+        width: 20vw;
         padding: 0;
         margin: 0;
         background-color: var( --accent-background );

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

@@ -25,19 +25,26 @@
         data () {
             return {
                 settings: { 
-                    'guest-purchase': { 
+                    '2fa': { 
-                        'display': 'Enable guest purchase', 
+                        'display': 'Require Two-Factor-Authentication of user', 
-                        'id': 'guest-purchase', 
+                        'id': '2fa', 
-                        'tooltip':'Allowing guest purchase means that a user does not have to create an account in order for them to be able to make a purchase. Default: On', 
+                        'tooltip':'Control whether or not users are required to use Two-Factor-Authentication. Defaults to "User can decide", which is recommended', 
-                        'value': true,
+                        'value': 'always',
-                        'type': 'toggle'
+                        'type': 'select',
-                    },
+                        'restrictions': {
-                    'overbooking': { 
+                            'always': { 
-                        'display': 'Enable overbooking of event', 
+                                'displayName':'Always require',
-                        'id': 'overbooking', 
+                                'value': 'always'
-                        'tooltip':'Allow more ticket reservations than you have tickets available. Currently only available for events without seatplans. Default: Off', 
+                            },
-                        'value': false,
+                            'userDecided': { 
-                        'type': 'toggle'
+                                'displayName':'User can decide',
+                                'value': 'userDecided'
+                            },
+                            'never': { 
+                                'displayName':'Disable',
+                                'value': 'never'
+                            },
+                        }
                     }
                 }
             }

src/webapp/src/views/admin/events/EventsDetailsView.vue

@@ -15,8 +15,13 @@
             <input v-model="event.location" class="small-text">
             <input v-model="event.date" class="small-text" type="date">
         </div>
-        <div class="ticket-settings"></div>
+        <div class="ticket-settings">
-        <div class="special-settings"><settings v-model:settings="settings"></settings></div>
+            <h3>Ticket Settings</h3>
+        </div>
+        <div class="special-settings">
+            <h3>Special Settings</h3>
+            <settings v-model:settings="specialSettings"></settings>
+        </div>
     </div>
 </template>
 
@@ -43,7 +48,7 @@
         data() {
             return {
                 event: { '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' },
-                settings: {
+                specialSettings: {
                     'guest-purchase': { 
                         'display': 'Enable guest purchase', 
                         'id': 'guest-purchase', 
@@ -57,7 +62,18 @@
                         'tooltip':'Allow more ticket reservations than you have tickets available. Currently only available for events without seatplans. Default: Off', 
                         'value': false,
                         'type': 'toggle'
-                    }
+                    },
+                    'maxTickets': { 
+                        'display': 'Maximum ticket count per account', 
+                        'id': 'maxTickets', 
+                        'tooltip':'With this setting you can control how many tickets a person can buy. Defaults to 0, which means do not limit.', 
+                        'value': 0,
+                        'type': 'number',
+                        'restrictions': {
+                            'min': 0,
+                            'max': 100,
+                        }
+                    },
                 }
             }
         }

src/webapp/src/views/setup/SetupCompleteView.vue

@@ -9,7 +9,10 @@
 
 <template>
     <div>
-        <h2>Setup was completed!</h2>
+        <img src="@/assets/logo.png" alt="libreevent logo" style="height: 30vh;">
+        <h1>Setup complete!</h1>
+        <p>Congratulations on finishing the setup of libreǝvent!</p>
+        <p>It is now time to head to the admin panel to add more accounts and to familiarise yourself with the admin portal</p>
         <router-link to="/admin">To the admin panel</router-link>
     </div>
 </template>

src/webapp/src/views/setup/SetupEventsView.vue

@@ -9,7 +9,7 @@
 
 <template>
     <div>
-        <h3>Setting up Events</h3>
+        <h1>Events</h1>
         <p>You may choose all of the below payment methods, but we recommend to only select one payment gateway for simplicity. Recommended: Either Stripe or Adyen. See the comparison of the different payment methods <a href="https://libreevent.janishutz.com/docs/payments">here</a></p>
         <p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#payment-methods" target="_blank">here</a></p>
         <button @click="submit()">Continue</button>
@@ -31,7 +31,7 @@
         },
         methods: {
             submit () {
-                this.backendStore.addVisitedSetupPages( 'tos', true );
+                this.backendStore.addVisitedSetupPages( 'complete', true );
                 this.$router.push( '/setup/tos' );
             }
         },

src/webapp/src/views/setup/SetupPageView.vue

@@ -9,7 +9,7 @@
 
 <template>
     <div>
-        <h3>Setting up the landing page</h3>
+        <h1>Landing page</h1>
         <p>The landing page is the page your customers see when they visit your webpage. You may select a page template <a href="https://libreevent.janishutz.com/docs/homepage/templates">here</a>.</p>
         <p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#page-setup" target="_blank">here</a></p>
 
@@ -37,7 +37,7 @@
         },
         methods: {
             submit () {
-                this.backendStore.addVisitedSetupPages( 'payments', true );
+                this.backendStore.addVisitedSetupPages( 'events', true );
                 this.$router.push( '/setup/payments' );
             }
         },

src/webapp/src/views/setup/SetupPaymentsView.vue

@@ -9,7 +9,7 @@
 
 <template>
     <div>
-        <h3>Setting up payment methods</h3>
+        <h1>Setting up payment methods</h1>
         <p>You may choose all of the below payment methods, but we recommend to only select one payment gateway for simplicity. Recommended: Either Stripe or Adyen. See the comparison of the different payment methods <a href="https://libreevent.janishutz.com/docs/payments">here</a></p>
         <p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#payment-methods" target="_blank">here</a></p>
         <button @click="submit()">Continue</button>
@@ -31,7 +31,7 @@
         },
         methods: {
             submit () {
-                this.backendStore.addVisitedSetupPages( 'events', true );
+                this.backendStore.addVisitedSetupPages( 'tos', true );
                 this.$router.push( '/setup/events' );
             }
         },

src/webapp/src/views/setup/SetupRootView.vue

@@ -9,7 +9,7 @@
 
 <template>
     <div>
-        <h3>Setting up the root account</h3>
+        <h1>Root account</h1>
         <p>The root account is the most powerful account. Therefore, it should only be used if really necessary and should have a strong password. It also always requires Two Factor Authentication for added security. You may log into the root account by typing 'root' into the Email/Username field on the admin login screen.</p>
         <p>You may find more infos about this part <a href="https://libreevent.janishutz.com/docs/setup/setup#root-account" target="_blank">here</a></p>
         <p>Password requirements:</p>
@@ -46,7 +46,7 @@
         },
         methods: {
             submit () {
-                this.backendStore.addVisitedSetupPages( 'page', true );
+                this.backendStore.addVisitedSetupPages( 'payments', true );
                 this.$router.push( 'page' );
             }
         },

src/webapp/src/views/setup/SetupStartView.vue

@@ -9,8 +9,10 @@
 
 <template>
     <div>
-        <h2>Welcome to libreevent!</h2>
+        <img src="@/assets/logo.png" alt="libreevent logo" style="height: 30vh;">
+        <h1>Welcome to libreǝvent!</h1>
         <i style="font-size: small;">All links during setup open in separate tabs</i>
+        <p>Thank you for downloading libreǝvent, the free & open source event management solution. libreǝvent aims to help you save both time and money when hosting events, so you can focus on what really matters.</p>
         <p>Let's start by setting it up. We strongly encourage you to also have a look at the extensive documentation of the setup process <a href="https://libreevent.janishutz.com/docs/setup/setup" target="_blank">here</a></p>
         <router-link to="/setup/root" @click="setup();">Start setup</router-link>
     </div>
@@ -31,7 +33,7 @@
         },
         methods: {
             setup () {
-                this.backendStore.addVisitedSetupPages( 'root', true );
+                this.backendStore.addVisitedSetupPages( 'page', true );
             }
         },
     };

src/webapp/src/views/setup/SetupTOSView.vue

@@ -31,7 +31,6 @@
         },
         methods: {
             submit () {
-                this.backendStore.addVisitedSetupPages( 'complete', true );
                 this.$router.push( '/setup/complete' );
             }
         },

website/src/how-it-works.md

@@ -1,2 +1,5 @@
 # How it works
 This page gives you a somewhat detailed overview on how the system operates. Note that this page is not made with user-legibility in mind, as this page is oriented to give possible contributors an introduction to the project to help them getting started. Therefore we expect you to have quite decent understanding of the underlying programming languages and concepts.
+
+# Programming languages
+This project is written in a variety of different programming languages. First of all, the backend is written in Node.js with express.js routing. It also uses nodemysql to interact with the MySQL database, if the user chose to use one. For authentication, it uses express-session, for which a new session secret is generated whenever the server restarts to increase security.