add plugin settings page

src/server/admin/api/getHandler.js

@@ -100,6 +100,8 @@ class GETHandler {
                 } );
             } else if ( call === 'getSettings' ) {
                 resolve( this.settings );
+            } else if ( call === 'getAllPlugins' ) {
+                resolve( this.pluginManager.getPlugins() );
             } else {
                 reject( { 'code': 404, 'error': 'Route not found' } );
             }

src/server/admin/api/postHandler.js

@@ -144,7 +144,11 @@ class POSTHandler {
                 } );
                 resolve( 'ok' );
             } else if ( call === 'updatePaymentGatewaySettings' ) {
+                this.pluginManager.savePaymentGatewaySettings( data ).then( () => {
                     resolve( 'ok' );
+                } ).catch( err => {
+                    reject( { 'code': 500, 'message': err } );
+                } );
             } else {
                 reject( { 'code': 404, 'error': 'Route not found' } );
             }

src/server/backend/plugins/README.md

@@ -2,4 +2,4 @@
 
 If you want to create a new plugin for libreevent, please follow our guide and guidelines in the official documentation [here](https://libreevent.janishutz.com/docs/contributing/plugins)
 
-Each plugin should have a plugin.json file that uses the layout of the plugin.json file in this directory. As future libreevent might change what is required by the plugin.json file, please follow this repository to get news when this is about to happen. To retain backwards compatibility, we will for as long as possible not remove anything from the plugin.json files as possible, which means you can already update your plugin.json file before the next version of libreevent is released.
+Each plugin should have a plugin.json file that uses the layout of the plugin.json file in this directory. As future libreevent might change what is required by the plugin.json file, please follow this repository to get news when this is about to happen. To retain backwards compatibility, we will for as long as possible not remove anything from the plugin.json files as possible, which means you can already update your plugin.json file before the next version of libreevent is released. The plugin.json file already contains a "mainPluginURL" parameter which currently is not in use.

src/server/backend/plugins/manager.js

@@ -17,26 +17,17 @@ const path = require( 'path' );
 class PluginManager {
     constructor ( settings ) {
         this.paymentGateway = settings.payments;
-        this.allPlugins = {};
+        this.pluginDetails = {};
         fs.readdir( path.join( __dirname + '/others' ), ( err, ls ) => {
             for ( let file in ls ) {
-                const pluginSettings = JSON.parse( fs.readFileSync( path.join( __dirname + '/others/' + ls[ file ] + '/plugin.json' ) ) );
+                const pluginDetail = JSON.parse( fs.readFileSync( path.join( __dirname + '/others/' + ls[ file ] + '/plugin.json' ) ) );
-                this.allPlugins[ ls[ file ] ] = pluginSettings;
+                this.pluginDetails[ ls[ file ] ] = pluginDetail;
             }
         } );
     }
 
     getPlugins () {
-        
+        return this.pluginDetails;
-    }
-
-    getPluginDetails ( plugin ) {
-        return new Promise( ( resolve, reject ) => {
-            fs.readFile( path.join( __dirname + '/others/' + plugin + '/plugin.json' ), ( err, file ) => {
-                if ( err ) reject( err );
-                resolve( file );
-            } );
-        } );
     }
 
     loadPaymentGatewaySettings () {
@@ -63,14 +54,13 @@ class PluginManager {
         } );
     }
 
-    savePaymentGatewaySettings () {
+    savePaymentGatewaySettings ( settings ) {
         return new Promise( ( resolve, reject ) => {
-            
+            fs.writeFile( path.join( __dirname + '/payments/' + this.paymentGateway + '/config.payments.json' ), JSON.stringify( settings ), {}, ( err ) => {
+                if ( err ) reject( err );
+                resolve( 'ok' );
+            } );
         } );
-    }
-
-    saveSettings ( plugin, settings ) {
-        
     }
 }
 

src/server/backend/plugins/others/newsletter/plugin.json

@@ -6,7 +6,8 @@
     "pluginWebsite": "https://libreevent.janishutz.com/plugins/newsletter",
     "pluginDocs": "https://libreevent.janishutz.com/docs/plugins/newsletter",
     "gitURL": "https://github.com/simplePCBuilding/libreevent/tree/master/src/server/backend/plugins/others/newsletter",
-    "settingsURL": "/admin/plugins/newsletter/settings",
+    "settingsURL": "/admin/plugins/newsletter",
     "mainPluginURL": "/admin/plugins/newsletter",
+    "logo": "",
     "version": "1.0.0"
 }

src/server/backend/plugins/others/poll/plugin.json

@@ -8,5 +8,6 @@
     "gitURL": "https://github.com/simplePCBuilding/libreevent/tree/master/src/server/backend/plugins/others/poll",
     "settingsURL": "/admin/plugins/polls/settings",
     "mainPluginURL": "/polls",
+    "logo": "",
     "version": "1.0.0"
 }

src/server/backend/plugins/plugin.json

@@ -8,5 +8,6 @@
     "gitURL": "",
     "settingsURL": "",
     "mainPluginURL": "",
+    "logo": "",
     "version": ""
 }

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

@@ -11,7 +11,16 @@
     <div>
         <h2>Plugins</h2>
         <p>Here you can manage installed plugins. If you want to install more plugins, please follow the guide <a href="https://librevent.janishutz.com/docs/plugins/install">here</a></p>
-        <div class="bigButtons"></div>
+        <div class="bigButton-container">
+            <a class="bigButton" v-for="plugin in allPlugins" :href="plugin.settingsURL">
+                <object data="/otherAssets/libreeventLogo.png" type="image/png" class="plugin-logo">
+                    <img :src="plugin.logo">
+                </object>
+                <h3 style="margin-bottom: 0;">{{ plugin.pluginName }}</h3>
+                <p>{{ plugin.pluginDescription }}</p>
+                <p style="margin: 0">(Version V{{ plugin.version }}, maintained by {{ plugin.maintainer }})</p>
+            </a>
+        </div>
         <!-- TODO: Get all installed plugins -->
     </div>
 </template>
@@ -20,13 +29,59 @@
     export default {
         data () {
             return {
-                formData: {}
+                allPlugins: {}
             }
         },
         methods: {
-            setup () {
+            loadData () {
-                
+                fetch( '/admin/getAPI/getAllPlugins' ).then( res => {
+                    if ( res.status === 200 ) {
+                        res.json().then( json => {
+                            this.allPlugins = json;
+                        } ).catch( err => {
+                            console.error( err );
+                        } );
                     }
+                } );
+            }
+        },
+        created () {
+            this.loadData();
         }
     };
 </script>
+
+<style scoped>
+    .plugin-logo {
+        height: 50%;
+        margin: 0;
+        cursor: pointer;
+    }
+
+    .bigButton-container {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .bigButton {
+        background-color: var( --accent-background );
+        width: 40%;
+        height: 40vh;
+        border-color: black;
+        margin: 0.02%;
+        border-style: inset;
+        color: var( --secondary-color );
+        text-decoration: none;
+        border-width: 2px;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .bigButton:hover {
+        background-color: var( --accent-background-hover );
+    }
+</style>

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

@@ -65,6 +65,7 @@
             return {
                 adminAccounts: { 'janis': { 'username': 'janis', 'email': 'info@janishutz.com', 'permissions': [  ] }, 'admin': { 'username': 'admin', 'email': 'development@janishutz.com', 'permissions': [  ] } },
                 currentlyOpenMenu: '',
+                currentPopup: '',
                 settings: { 
                     '2fa': { 
                         'display': 'Require Two-Factor-Authentication of user', 
@@ -148,6 +149,7 @@
         },
         methods: {
             showAccountSettings ( account ) {
+                this.currentPopup = 'account';
                 this.$refs.popup.openPopup( 'Edit user permissions for ' + this.adminAccounts[ account ][ 'username' ], {
                     'pagesSettings': { 
                         'display': 'Modify pages', 
@@ -181,6 +183,7 @@
             , 'settings' );
             },
             showPaymentSettings () {
+                this.currentPopup = 'payments';
                 fetch( '/admin/getAPI/getPaymentGatewaySettings' ).then( res => {
                     if ( res.status === 200 ) {
                         res.json().then( json => {
@@ -192,6 +195,7 @@
                 } )
             },
             createAccount() {
+                this.currentPopup = 'createAccount';
                 this.$refs.popup.openPopup( 'Create new admin user', {
                     'role': { 
                         'display': 'User role',
@@ -245,7 +249,33 @@
                     console.log( 'user canceled' );
                     return;
                 } else if ( data.status === 'settings' ) {
+                    console.log( this.currentPopup );
+                    if ( this.currentPopup === 'account' ) { 
                         console.log( 'settings processing' )
+                    } else if ( this.currentPopup === 'payments' ) {
+                        for ( let setting in data.data ) {
+                            if ( !data.data[ setting ] ) {
+                                this.$refs.notification.createNotification( 'Settings for the payment gateway are missing!', 10, 'error', 'normal' );
+                                this.showPaymentSettings();
+                                return;
+                            }
+                        }
+                        let fetchOptions = {
+                            method: 'post',
+                            body: JSON.stringify( data.data ),
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'charset': 'utf-8'
+                            }
+                        };
+                        fetch( '/admin/API/updatePaymentGatewaySettings', fetchOptions ).then( res => {
+                            if ( res.status === 200 ) {
+                                this.$refs.notification.createNotification( 'Payment gateway settings saved!', 5, 'ok', 'normal' );
+                            }
+                        } )
+                    } else if ( this.currentPopup === 'createAccount' ) {
+
+                    }
                 } else {
                     console.log( 'hi' );
                 }