send pfpFilename in login response; Fixed loading correct pfp with players

src/server/routes/UserRouter.js

@@ -125,8 +125,8 @@ router.post("/signup", (req, res)=>{
 router.post("/login", (req, res)=>{
     if( req.session.user !== undefined ){
         userController.findUser( req.session.user )
-        .then( ( res ) => {
-            res.send({success: true, user: { username: req.session.user } } );
+        .then( ( user ) => {
+            res.send({success: true, user: { username: user.username, pfpFilename: user.pfpFilename } } );
         })
         .catch( ( err ) => {
             console.error( err );
@@ -138,7 +138,7 @@ router.post("/login", (req, res)=>{
             return setSessionUser( req, user );
         })
         .then( ( user ) => {
-            res.send({success: true, user: { username: user.username } } );
+            res.send({success: true, user: { username: user.username, pfpFilename: user.pfpFilename } } );
         })
         .catch( (err) => {
             if( err.name === "WrongCredentialsError" ){

src/webapp/components/blocks/ChangeProfilePicture.vue

@@ -91,7 +91,7 @@ function handleModalButtonClick( buttonIndex ){
                         Save
                     </button>
                     <button class="btn btn-danger" :disabled="userStore.pfpFilename === null" @click="deleteProfilePicture">
-                        <font-awesome-icon icon="fa-solid fa-floppy-disk" />
+                        <font-awesome-icon icon="fa-solid fa-trash" />
                         Delete Current Profile Picture
                     </button>
                 </div>

src/webapp/components/blocks/PlayerListEntry.vue

@@ -1,5 +1,6 @@
 <script setup>
 import ProfilePicture from '@/components/blocks/ProfilePicture.vue';
+import defaultPfp from '@/assets/images/PFP_BearHead.svg';
 
 const props = defineProps({
   player: Object,
@@ -52,7 +53,7 @@ function letPlayerChoose(){
 						</template>
 						<ProfilePicture 
 							:sizing="'2em'"
-							:srcOverride="API_URL + '/user/pfp/' + props.player.pfpFilename"
+							:srcOverride="(props.player.pfpFilename ? API_URL + '/user/pfp/' + props.player.pfpFilename : defaultPfp)"
 						/>
 						<h5 class="mb-0 ms-2 text-truncate align-self-center">
 							{{ props.player.name }}

src/webapp/components/blocks/ProfilePicture.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 
+import defaultPfp from '@/assets/images/PFP_BearHead.svg';
 import { useUserStore } from "@/stores/UserStore"
 
 const props = defineProps({
@@ -31,23 +32,14 @@ if( window.location.hostname.includes("localhost" ) ){
 }
 const API_URL = `${protocol}${hostname}/api`;
 
-const pfpSrc = computed( () => {
-    if( props.srcOverride !== null ){
-        return props.srcOverride;
-    } else if( userStore.pfpFilename === null ){
-        return "/src/webapp/assets/images/PFP_BearHead.svg";
-    } else {
-        return `${API_URL}/user/pfp/${userStore.pfpFilename}`;
-    }
-})
-
-
 </script>
 
 <template>
     <div>
         <div class="border border-1 border-white rounded-3 overflow-hidden" :style="[ { 'width': props.sizing }, { 'height': props.sizing } ]" >
-            <img :src="pfpSrc" alt="Profile Picture of the user"  class="pfp" :style="[ { 'width': props.sizing }, { 'height': props.sizing } ]" />
+            <img v-if="props.srcOverride !== null" :src="props.srcOverride" alt="Profile Picture of the user"  class="pfp" :style="[ { 'width': props.sizing }, { 'height': props.sizing } ]" />
+            <img v-else-if="userStore.pfpFilename === null" :src="defaultPfp" alt="Profile Picture of the user"  class="pfp" :style="[ { 'width': props.sizing }, { 'height': props.sizing } ]" />
+            <img v-else :src="`${API_URL}/user/pfp/${userStore.pfpFilename}`" alt="Profile Picture of the user"  class="pfp" :style="[ { 'width': props.sizing }, { 'height': props.sizing } ]" />
             <div v-show="props.isPreview" class="position-relative">
                 <span class="position-absolute bottom-0 end-0 bg-black bg-opacity-50 px-1 rounded-2">
                     Preview

src/webapp/components/pages/Lobby.vue

@@ -5,6 +5,7 @@ import { useRouter, onBeforeRouteLeave, useRoute } from 'vue-router';
 import { useGameStore } from '@/stores/GameStore';
 import BoardListView from "@/components/views/BoardListView.vue";
 import ProfilePicture from '@/components/blocks/ProfilePicture.vue';
+import defaultPfp from '@/assets/images/PFP_BearHead.svg';
 
 const router = useRouter();
 const route = useRoute();
@@ -136,7 +137,7 @@ onBeforeRouteLeave((to, from) => {
             <div class="card-body fs-4 text-center">
               <div class="d-flex justify-content-center align-items-center">
                 <ProfilePicture 
-                :srcOverride="API_URL + '/user/pfp/' + player.pfpFilename"
+                :srcOverride="(player.pfpFilename ? API_URL + '/user/pfp/' + player.pfpFilename : defaultPfp)"
                 :sizing="'2.5em'"
                 />
                 <span class="ms-3">