From a84e4197d455a24dec60d5e2ffca1c14a772dd88 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Sat, 30 Sep 2023 14:01:34 +0200
Subject: [PATCH] add logo upload

---
 src/server/admin/adminAPIRoutes.js            | 41 +++++++++++++------
 src/server/backend/helperRoutes.js            |  7 +++-
 .../home/templates/default/assets/README.md   |  3 ++
 .../ui/home/templates/fancy/assets/README.md  |  3 ++
 .../ui/home/templates/modern/assets/README.md |  3 ++
 src/webapp/main/src/views/admin/PagesView.vue | 40 +++++++++++++++++-
 6 files changed, 81 insertions(+), 16 deletions(-)
 create mode 100644 src/server/ui/home/templates/default/assets/README.md
 create mode 100644 src/server/ui/home/templates/fancy/assets/README.md
 create mode 100644 src/server/ui/home/templates/modern/assets/README.md

diff --git a/src/server/admin/adminAPIRoutes.js b/src/server/admin/adminAPIRoutes.js
index ea28f85..35ed113 100644
--- a/src/server/admin/adminAPIRoutes.js
+++ b/src/server/admin/adminAPIRoutes.js
@@ -49,26 +49,43 @@ module.exports = ( app ) => {
     } );
 
     app.post( '/admin/events/uploadImages', multer.array( 'image', 2 ), ( req, res ) => {
-        if ( req.query.event.includes( '/' ) || req.query.event.includes( '.' ) ) {
-            res.status( 400 ).send( 'fp_wrong' );
-        } else {
-            for ( let file in req.files ) {
-                if ( req.files[ file ].originalname === req.body.logo ) {
-                    fs.writeFileSync( path.join( __dirname + '/../assets/events/' + req.query.event + 'Logo.jpg' ), req.files[ file ].buffer );
-                } else {
-                    fs.writeFileSync( path.join( __dirname + '/../assets/events/' + req.query.event + 'Banner.jpg' ), req.files[ file ].buffer );
+        if ( req.session.loggedInAdmin ) {
+            if ( req.query.event.includes( '/' ) || req.query.event.includes( '.' ) ) {
+                res.status( 400 ).send( 'fp_wrong' );
+            } else {
+                for ( let file in req.files ) {
+                    if ( req.files[ file ].originalname === req.body.logo ) {
+                        fs.writeFileSync( path.join( __dirname + '/../assets/events/' + req.query.event + 'Logo.jpg' ), req.files[ file ].buffer );
+                    } else {
+                        fs.writeFileSync( path.join( __dirname + '/../assets/events/' + req.query.event + 'Banner.jpg' ), req.files[ file ].buffer );
+                    }
                 }
+                res.send( 'ok' );
             }
-            res.send( 'ok' );
+        } else {
+            res.status( 403 ).send( 'unauthorized' );
         }
     } );
 
     app.post( '/admin/pages/uploadImages', multer.array( 'image', 1 ), ( req, res ) => {
-        if ( req.query.image.includes( '/' ) || req.query.image.includes( '.' ) || req.query.template.includes( '/' ) || req.query.template.includes( '.' )  ) {
-            res.status( 400 ).send( 'fp_wrong' );
+        if ( req.session.loggedInAdmin ) {
+            if ( req.query.image.includes( '/' ) || req.query.image.includes( '.' ) || req.query.template.includes( '/' ) || req.query.template.includes( '.' )  ) {
+                res.status( 400 ).send( 'fp_wrong' );
+            } else {
+                fs.writeFileSync( path.join( __dirname + '/../ui/home/templates/' + req.query.template + '/assets/' + req.query.image + '.jpg' ), req.files[ 0 ].buffer );
+                res.send( 'ok' );
+            }
         } else {
-            fs.writeFileSync( path.join( __dirname + '/../ui/home/templates/' + req.query.template + '/' + req.query.image + '.jpg' ), req.files[ 0 ].buffer );
+            res.status( 403 ).send( 'unauthorized' );
+        }
+    } );
+
+    app.post( '/admin/logo/upload', multer.array( 'image', 1 ), ( req, res ) => {
+        if ( req.session.loggedInAdmin ) {
+            fs.writeFileSync( path.join( __dirname + '/../assets/logo.png' ), req.files[ 0 ].buffer );
             res.send( 'ok' );
+        } else {
+            res.status( 403 ).send( 'unauthorized' );
         }
     } );
 };
\ No newline at end of file
diff --git a/src/server/backend/helperRoutes.js b/src/server/backend/helperRoutes.js
index e8b689a..3a57858 100644
--- a/src/server/backend/helperRoutes.js
+++ b/src/server/backend/helperRoutes.js
@@ -26,7 +26,10 @@ module.exports = ( app, settings ) => {
     } );
 
     app.get( '/startPage/preview/:template', ( req, res ) => {
-        // TODO: only allow when logged in
-        res.sendFile( path.join( __dirname + '/../ui/home/templates/' + req.params.template + '/index.html' ) );
+        if ( req.session.loggedInAdmin ) {
+            res.sendFile( path.join( __dirname + '/../ui/home/templates/' + req.params.template + '/index.html' ) );
+        } else {
+            res.status( 403 ).send( 'unauthorized' );
+        }
     } );
 };
\ No newline at end of file
diff --git a/src/server/ui/home/templates/default/assets/README.md b/src/server/ui/home/templates/default/assets/README.md
new file mode 100644
index 0000000..5c3f617
--- /dev/null
+++ b/src/server/ui/home/templates/default/assets/README.md
@@ -0,0 +1,3 @@
+# Assets directory
+
+Inside of the assets directory, the start page assets can be found.
\ No newline at end of file
diff --git a/src/server/ui/home/templates/fancy/assets/README.md b/src/server/ui/home/templates/fancy/assets/README.md
new file mode 100644
index 0000000..5c3f617
--- /dev/null
+++ b/src/server/ui/home/templates/fancy/assets/README.md
@@ -0,0 +1,3 @@
+# Assets directory
+
+Inside of the assets directory, the start page assets can be found.
\ No newline at end of file
diff --git a/src/server/ui/home/templates/modern/assets/README.md b/src/server/ui/home/templates/modern/assets/README.md
new file mode 100644
index 0000000..5c3f617
--- /dev/null
+++ b/src/server/ui/home/templates/modern/assets/README.md
@@ -0,0 +1,3 @@
+# Assets directory
+
+Inside of the assets directory, the start page assets can be found.
\ No newline at end of file
diff --git a/src/webapp/main/src/views/admin/PagesView.vue b/src/webapp/main/src/views/admin/PagesView.vue
index f83a5dd..2e46492 100644
--- a/src/webapp/main/src/views/admin/PagesView.vue
+++ b/src/webapp/main/src/views/admin/PagesView.vue
@@ -15,6 +15,23 @@
         <select name="templateSel" id="templateSel" v-model="selectedTemplate">
             <option v-for="el in startPageTemplates" :value="el">{{ el }}</option>
         </select>
+        <div>
+            <h4>Upload your website's logo here (png image)</h4>
+            <picture-input
+            ref="logoUpload"
+            width="350"
+            height="350"
+            :removable="false"
+            removeButtonClass="ui red button"
+            accept="image/png"
+            buttonClass="ui button primary"
+            :customStrings="{
+                upload: '<h1>Upload your image!</h1>',
+                drag: 'Drag and drop your image here'
+            }">
+            </picture-input><br>
+            <button @click="saveLogo()" class="button">Upload logo</button>
+        </div>
         <h3>Change the settings of the start page here</h3>
         <button @click="save()" class="button">Save</button>
         <!-- Start page settings -> Defined by startPage.json file -->
@@ -157,11 +174,30 @@
                     } );
                     return true;
                 } else {
-                    console.log( this.$refs[ image ][ 0 ] );
-                    console.log( image );
                     return false;
                 }
             },
+            saveLogo() {
+                if ( this.$refs.logoUpload.file ) {
+                    let fd = new FormData();
+                    fd.append( 'image', this.$refs.logoUpload.file );
+                    let fetchOptions = {
+                        method: 'post',
+                        body: fd,
+                    };
+                    fetch( localStorage.getItem( 'url' ) + '/admin/logo/upload', fetchOptions ).then( res => {
+                        if ( res.status === 200 ) {
+                            this.$refs.notification.createNotification( 'Logo uploaded successfully', 5, 'ok', 'normal' );
+                        } else {
+                            this.$refs.notification.createNotification( 'There was an error uploading the image', 5, 'error', 'normal' );
+                        }
+                    } ).catch( err => {
+                        console.error( err );
+                    } );
+                } else {
+                    this.$refs.notification.createNotification( 'No logo selected. Please select one and try again!', 10, 'error', 'normal' );
+                }
+            }
         },
         watch: {
             selectedTemplate( value ) {