From abe181db8795c819a5d482345cc69699e5128079 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Sat, 3 Jun 2023 12:10:54 +0200
Subject: [PATCH] settings & fixes

---
 src/webapp/src/App.vue                        |  8 ++---
 .../src/components/settings/settings.vue      | 25 +++++++++++---
 src/webapp/src/stores/backendStore.js         |  2 +-
 src/webapp/src/views/SetupView.vue            |  1 -
 src/webapp/src/views/admin/AdminView.vue      |  3 ++
 src/webapp/src/views/admin/SettingsView.vue   | 33 +++++++++++--------
 .../views/admin/events/EventsDetailsView.vue  | 24 +++++++++++---
 .../src/views/setup/SetupCompleteView.vue     |  5 ++-
 .../src/views/setup/SetupEventsView.vue       |  4 +--
 src/webapp/src/views/setup/SetupPageView.vue  |  4 +--
 .../src/views/setup/SetupPaymentsView.vue     |  4 +--
 src/webapp/src/views/setup/SetupRootView.vue  |  4 +--
 src/webapp/src/views/setup/SetupStartView.vue |  6 ++--
 src/webapp/src/views/setup/SetupTOSView.vue   |  1 -
 website/src/how-it-works.md                   |  5 ++-
 15 files changed, 89 insertions(+), 40 deletions(-)

diff --git a/src/webapp/src/App.vue b/src/webapp/src/App.vue
index 6e31e55..2f8c875 100644
--- a/src/webapp/src/App.vue
+++ b/src/webapp/src/App.vue
@@ -40,8 +40,8 @@
 
 :root.dark {
     --primary-color: white;
-    --accent-background: rgb(100, 100, 190);
-    --secondary-color: black;
+    --accent-background: rgb(56, 56, 112);
+    --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);
-        --secondary-color: black;
+        --accent-background: rgb(56, 56, 112);
+        --secondary-color: white;
         --background-color: rgb(32, 32, 32);
         --accent-color: #42b983;
         --hover-color: rgb(83, 83, 83);
diff --git a/src/webapp/src/components/settings/settings.vue b/src/webapp/src/components/settings/settings.vue
index a964b2a..6b01e74 100644
--- a/src/webapp/src/components/settings/settings.vue
+++ b/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 {
diff --git a/src/webapp/src/stores/backendStore.js b/src/webapp/src/stores/backendStore.js
index 70ffaee..919f3db 100644
--- a/src/webapp/src/stores/backendStore.js
+++ b/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,
diff --git a/src/webapp/src/views/SetupView.vue b/src/webapp/src/views/SetupView.vue
index 126b7c5..25cdb0b 100644
--- a/src/webapp/src/views/SetupView.vue
+++ b/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">
diff --git a/src/webapp/src/views/admin/AdminView.vue b/src/webapp/src/views/admin/AdminView.vue
index 66796c7..c68ca3c 100644
--- a/src/webapp/src/views/admin/AdminView.vue
+++ b/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 );
diff --git a/src/webapp/src/views/admin/SettingsView.vue b/src/webapp/src/views/admin/SettingsView.vue
index 17b6b79..1927eb8 100644
--- a/src/webapp/src/views/admin/SettingsView.vue
+++ b/src/webapp/src/views/admin/SettingsView.vue
@@ -25,19 +25,26 @@
         data () {
             return {
                 settings: { 
-                    'guest-purchase': { 
-                        'display': 'Enable guest purchase', 
-                        'id': 'guest-purchase', 
-                        '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', 
-                        'value': true,
-                        'type': 'toggle'
-                    },
-                    'overbooking': { 
-                        'display': 'Enable overbooking of event', 
-                        'id': 'overbooking', 
-                        'tooltip':'Allow more ticket reservations than you have tickets available. Currently only available for events without seatplans. Default: Off', 
-                        'value': false,
-                        'type': 'toggle'
+                    '2fa': { 
+                        'display': 'Require Two-Factor-Authentication of user', 
+                        'id': '2fa', 
+                        'tooltip':'Control whether or not users are required to use Two-Factor-Authentication. Defaults to "User can decide", which is recommended', 
+                        'value': 'always',
+                        'type': 'select',
+                        'restrictions': {
+                            'always': { 
+                                'displayName':'Always require',
+                                'value': 'always'
+                            },
+                            'userDecided': { 
+                                'displayName':'User can decide',
+                                'value': 'userDecided'
+                            },
+                            'never': { 
+                                'displayName':'Disable',
+                                'value': 'never'
+                            },
+                        }
                     }
                 }
             }
diff --git a/src/webapp/src/views/admin/events/EventsDetailsView.vue b/src/webapp/src/views/admin/events/EventsDetailsView.vue
index b9dce75..96f5f34 100644
--- a/src/webapp/src/views/admin/events/EventsDetailsView.vue
+++ b/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="special-settings"><settings v-model:settings="settings"></settings></div>
+        <div class="ticket-settings">
+            <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,
+                        }
+                    },
                 }
             }
         }
diff --git a/src/webapp/src/views/setup/SetupCompleteView.vue b/src/webapp/src/views/setup/SetupCompleteView.vue
index 616b814..af659e7 100644
--- a/src/webapp/src/views/setup/SetupCompleteView.vue
+++ b/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>
diff --git a/src/webapp/src/views/setup/SetupEventsView.vue b/src/webapp/src/views/setup/SetupEventsView.vue
index 3b92ae7..8cd7c6c 100644
--- a/src/webapp/src/views/setup/SetupEventsView.vue
+++ b/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' );
             }
         },
diff --git a/src/webapp/src/views/setup/SetupPageView.vue b/src/webapp/src/views/setup/SetupPageView.vue
index d16bac6..7387b8a 100644
--- a/src/webapp/src/views/setup/SetupPageView.vue
+++ b/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' );
             }
         },
diff --git a/src/webapp/src/views/setup/SetupPaymentsView.vue b/src/webapp/src/views/setup/SetupPaymentsView.vue
index 7161ff9..e13321a 100644
--- a/src/webapp/src/views/setup/SetupPaymentsView.vue
+++ b/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' );
             }
         },
diff --git a/src/webapp/src/views/setup/SetupRootView.vue b/src/webapp/src/views/setup/SetupRootView.vue
index c2f865f..c00a057 100644
--- a/src/webapp/src/views/setup/SetupRootView.vue
+++ b/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' );
             }
         },
diff --git a/src/webapp/src/views/setup/SetupStartView.vue b/src/webapp/src/views/setup/SetupStartView.vue
index fe1405f..3934c15 100644
--- a/src/webapp/src/views/setup/SetupStartView.vue
+++ b/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 );
             }
         },
     };
diff --git a/src/webapp/src/views/setup/SetupTOSView.vue b/src/webapp/src/views/setup/SetupTOSView.vue
index 64526c5..a3cce76 100644
--- a/src/webapp/src/views/setup/SetupTOSView.vue
+++ b/src/webapp/src/views/setup/SetupTOSView.vue
@@ -31,7 +31,6 @@
         },
         methods: {
             submit () {
-                this.backendStore.addVisitedSetupPages( 'complete', true );
                 this.$router.push( '/setup/complete' );
             }
         },
diff --git a/website/src/how-it-works.md b/website/src/how-it-works.md
index 1fa7f46..34326d7 100644
--- a/website/src/how-it-works.md
+++ b/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.
\ No newline at end of file
+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.
\ No newline at end of file