Initial FE Views; Initial API endpoint

src/server/routes/UserRouter.js

@@ -72,24 +72,6 @@ const fileFilterFn = function( req, file, cb ){
                 return;
             }
         
-            let indices = file.originalname.split(":");
-            if( indices.length !== 3 ){
-                cb( new Error( "Image index not found" ) );
-                return;
-            }
-            if(
-
-                board.categories[indices[0]] === undefined ||
-                board.categories[indices[0]].boardEntries[indices[1]] === undefined ||
-                ( 
-                    board.categories[indices[0]].boardEntries[indices[1]].questions[indices[2]] === undefined &&
-                    indices[2] !== 'answer'
-                )
-            ){
-                cb( new Error( "No entry found for image" ) );
-                return;
-            }
-
             cb( null, true );
         }
     });
@@ -257,6 +239,27 @@ router.get("/boards/:id", (req, res) => {
     }
 });
 
+
+router.post("/pfp", upload.single( "pfp" ), (req, res) => {
+    if( req.session.user === undefined ){
+        res.send( { success: false, error: "Not logged in!" } );
+    } else {
+        let imageFile = null;
+        if( !req.file ){
+            console.error( "No file attached" );
+            return;
+        }
+        imageFile = req.file;
+        return userController.updateProfilePicture( req.session.user, imageFile.filename )
+        .then( ( user ) => {
+            res.send( { success: true, newProfilePicture: user.profilePicture } );
+        })
+        .catch( ( err ) => {
+            res.send( { success: false, error: err } );
+        });
+    }
+});
+
 module.exports = router;
 
 function setSessionUser( req, user ){

src/webapp/components/blocks/ChangeProfilePicture.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue';
+
+
+const emit = defineEmits(["profilePictureChanged"]);
+
+let uploadedFileUrl = ref(null);
+
+
+function newImageUploaded( event ){
+    let files = event.target.files || event.dataTransfer.files;
+    if (!files.length){
+        return;
+    }
+    let fileObj = {
+        data: files[0],
+        url: URL.createObjectURL( files[0] ),
+    };
+    uploadedFileUrl.value = fileObj;
+}
+
+function revealAnswer(){
+    emit("profilePictureChanged");
+}
+
+revealAnswer();
+
+</script>
+
+<template>
+    <div class="row">
+        <div class="col">
+            <h3>
+                Profile Picture
+            </h3>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-2">
+            <div class="ratio ratio-16x9">
+                <img src="" alt="Current Profile Picture">
+            </div>
+        </div>
+        <div class="col">
+            <div class="row">
+                <div class="col">
+                    <img src="" alt="Standard Profile Picture">
+                </div>
+            </div>
+            <div>
+                <label class="form-label fs-4 mt-3" for="question-image">Upload new profile picture</label>
+                <input class="form-control bg-dark-blue" type="file" name="question-image" id="question-image" @change="newImageUploaded( questionIndex, $event )" accept="image/*">
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>

src/webapp/components/pages/Profile.vue

@@ -1,9 +1,11 @@
 <script setup>
+import { useRouter } from 'vue-router';
 
 import BoardListView from '@/components/views/BoardListView.vue';
+import UserCustomizationView from '@/components/views/UserCustomizationView.vue';
 import { useUserStore } from "@/stores/UserStore";
 import { useLoginCheck } from "@/composables/loginCheck";
-import { useRouter } from 'vue-router';
+
 
 useLoginCheck();
 
@@ -39,6 +41,11 @@ function boardSelected( boardId ){
         </button>
       </div>
     </div>
+    <div class="row">
+      <div class="col">
+        <UserCustomizationView />
+      </div>
+    </div>
   </div>
 </template>
 

src/webapp/components/views/UserCustomizationView.vue

@@ -0,0 +1,18 @@
+<script setup>
+
+import ChangeProfilePicture from '@/components/blocks/ChangeProfilePicture.vue';
+
+</script>
+
+<template>
+    <div class="row mt-5">
+        <div class="col">
+            <h2>
+                Customizations
+            </h2>
+        </div>
+    </div>
+    <ChangeProfilePicture />
+</template>
+
+<style scoped></style>