load payment gateway settings

src/server/admin/api/getHandler.js

@@ -93,7 +93,11 @@ class GETHandler {
                     reject( { 'code': 500, 'message': 'ERR_DB: ' + err } );
                 } );
             } else if ( call === 'getPaymentGatewaySettings' ) {
-                pluginManager.loadPaymentGatewaySettings();
+                this.pluginManager.loadPaymentGatewaySettings().then( dat => {
+                    resolve( dat );
+                } ).catch( err => {
+                    reject( { 'code': 500, 'error': err } );
+                } );
             } else if ( call === 'getSettings' ) {
                 resolve( this.settings );
             } else {

src/server/admin/api/postHandler.js

@@ -143,6 +143,8 @@ class POSTHandler {
                     db.writeJSONData( 'events', updated );
                 } );
                 resolve( 'ok' );
+            } else if ( call === 'updatePaymentGatewaySettings' ) {
+                resolve( 'ok' );
             } else {
                 reject( { 'code': 404, 'error': 'Route not found' } );
             }

src/server/backend/plugins/manager.js

@@ -41,22 +41,32 @@ class PluginManager {
 
     loadPaymentGatewaySettings () {
         return new Promise( ( resolve, reject ) => {
-            fs.readFile( path.join( __dirname + '/payments/' + this.paymentGateway + '/configOptions.json' ), ( err, options ) => {
+            fs.readFile( path.join( __dirname + '/payments/' + this.paymentGateway + '/configOptions.json' ), ( err, optionsBuffer ) => {
                 if ( err ) reject( err );
-                fs.readFile( path.join( __dirname + '/payments/' + this.paymentGateway + '/config.payments.json' ), ( err, config ) => {
+                fs.readFile( path.join( __dirname + '/payments/' + this.paymentGateway + '/config.payments.json' ), ( err, configBuffer ) => {
                     if ( err ) reject( err );
+                    let options, config;
+                    try { 
+                        options = JSON.parse( optionsBuffer );
+                        config = JSON.parse( configBuffer );
+                    } catch ( err ) {
+                        reject( err );
+                        return;
+                    }
                     let f = options;
                     for ( let s in f ) {
                         f[ s ][ 'value' ] = config[ s ];
                     }
-                    resolve( f );
+                    resolve( { 'data': f, 'gateway': this.paymentGateway } );
                 } );
             } );
         } );
     }
 
     savePaymentGatewaySettings () {
+        return new Promise( ( resolve, reject ) => {
             
+        } );
     }
 
     saveSettings ( plugin, settings ) {

src/server/backend/plugins/payments/payrexx/configOptions.json

@@ -0,0 +1,16 @@
+{
+    "APIKey": { 
+        "display": "API key", 
+        "id": "APIKey", 
+        "tooltip":"This is the secret key API key you can get from the stripe dashboard. Please make a test purchase (FREE) before you go live!", 
+        "value": "",
+        "type": "text"
+    },
+    "instance": { 
+        "display": "Instance", 
+        "id": "instance", 
+        "tooltip":"Please specify the instance name you used to create the payrexx account. (e.g. libreevent)", 
+        "value": "",
+        "type": "text"
+    }
+}

src/server/backend/plugins/payments/stripe/configOptions.json

@@ -0,0 +1,16 @@
+{
+    "APIKey": { 
+        "display": "API key", 
+        "id": "APIKey", 
+        "tooltip":"This is the secret key API key you can get from the stripe dashboard. Please make a test purchase (FREE) before you go live!", 
+        "value": "",
+        "type": "text"
+    },
+    "endpointSecret": { 
+        "display": "Webhook endpoint secret", 
+        "id": "endpointSecret", 
+        "tooltip":"Please specify the endpoint secret that you can get from the stripe dashboard when creating the webhook integration", 
+        "value": "",
+        "type": "text"
+    }
+}

src/server/ui/home/active/en/index.html

@@ -7,7 +7,13 @@
         <title>libreevent</title>
     </head>
     <body>
-        <nav></nav>
+        <nav>
+            <a href="/">Home</a> |
+            <router-link to="/tickets">Tickets</router-link> |
+            <router-link to="/cart">Cart</router-link> |
+            <router-link to="/account">Account</router-link> |
+            <button @click="changeTheme();" v-html="theme" id="themeSelector"></button>
+        </nav>
         <img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
         <h1>Welcome to libreevent!</h1>
         <p>No start page has been configured yet! Please configure one either by using the configurator in the settings or by uploading your own HTML page to the correct folder as detailed <a href="https://libreevent.janishutz.com/docs/admin-panel/pages">here</a></p>

src/server/ui/home/main.css

@@ -0,0 +1,62 @@
+:root, :root.light {
+    --primary-color: #2c3e50;
+    --accent-background: rgb(30, 30, 82);
+    --secondary-color: white;
+    --background-color: white;
+    --popup-color: rgb(224, 224, 224);
+    --accent-color: #42b983;
+    --hover-color: rgb(165, 165, 165);
+    --accent-background-hover: rgb(124, 140, 236);
+    --overlay-color: rgba(0, 0, 0, 0.7);
+    --inactive-color: rgb(100, 100, 100);
+    --highlight-backdrop: rgb(143, 134, 192);
+    --hint-color: rgb(174, 210, 221);
+    --PI: 3.14159265358979;
+}
+
+:root.dark {
+    --primary-color: white;
+    --accent-background: rgb(56, 56, 112);
+    --secondary-color: white;
+    --background-color: rgb(32, 32, 32);
+    --popup-color: rgb(58, 58, 58);
+    --accent-color: #42b983;
+    --hover-color: rgb(83, 83, 83);
+    --accent-background-hover: #4380a8;
+    --overlay-color: rgba(104, 104, 104, 0.575);
+    --inactive-color: rgb(190, 190, 190);
+    --highlight-backdrop: rgb(85, 63, 207);
+    --hint-color: rgb(88, 91, 110);
+}
+
+@media ( prefers-color-scheme: dark ) {
+    :root {
+        --primary-color: white;
+        --accent-background: rgb(56, 56, 112);
+        --secondary-color: white;
+        --background-color: rgb(32, 32, 32);
+        --popup-color: rgb(58, 58, 58);
+        --accent-color: #42b983;
+        --hover-color: rgb(83, 83, 83);
+        --accent-background-hover: #4380a8;
+        --overlay-color: rgba(104, 104, 104, 0.575);
+        --inactive-color: rgb(190, 190, 190);
+        --highlight-backdrop: rgb(85, 63, 207);
+        --hint-color: rgb(88, 91, 110);
+    }
+}
+
+::selection {
+    background-color: var( --highlight-backdrop );
+    color: var( --secondary-color );
+}
+
+#themeSelector {
+    background-color: rgba( 0, 0, 0, 0 );
+    color: var( --primary-color );
+    font-size: 130%;
+    padding: 0;
+    margin: 0;
+    border: none;
+    cursor: pointer;
+}

src/webapp/main/src/App.vue

@@ -9,7 +9,7 @@
 
 <template>
     <nav>
-        <router-link to="/">Home</router-link> |
+        <a href="/">Home</a> |
         <router-link to="/tickets">Tickets</router-link> |
         <router-link to="/cart">Cart</router-link> |
         <router-link to="/account">Account</router-link> |

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

@@ -27,7 +27,7 @@
             </tr>
         </table>
         <button @click="save()">Save</button>
-        <p>Detailed explanation of payment gateways can be found <a href="https://libreevent.janishutz.com/docs/payments" target="_blank">here</a>. You may install more payment gateway integrations in the plugins section. Only one may be used at any given time.</p>
+        <p>Detailed explanation of payment gateways can be found <a href="https://libreevent.janishutz.com/docs/payments" target="_blank">here</a>. Please note that you need to save the settings before you can edit settings of the payment gateway after changing it.</p>
 
         <div class="admin-settings">
             <h2>Admin Accounts</h2>
@@ -181,8 +181,15 @@
             , 'settings' );
             },
             showPaymentSettings () {
-                // TODO: Load payment gateway settings from server
+                fetch( '/admin/getAPI/getPaymentGatewaySettings' ).then( res => {
-                this.$refs.popup.openPopup( 'Payment gateway settings', {}, 'string' );
+                    if ( res.status === 200 ) {
+                        res.json().then( json => {
+                            this.$refs.popup.openPopup( 'Payment gateway settings for ' + json.gateway, json.data, 'settings' );
+                        } );
+                    } else if ( res.status === 500 ) {
+                        this.$refs.notification.createNotification( 'This payment gateway does not appear to have settings', 10, 'error', 'normal' );
+                    }
+                } )
             },
             createAccount() {
                 this.$refs.popup.openPopup( 'Create new admin user', {