Fix profile picture when missing gravatar url

#128

src/components/AppHeader.vue

@@ -3,6 +3,7 @@ import { useUserStore } from "@/stores/users";
 import { useRoute, useRouter } from "vue-router";
 import { watch, ref, computed } from "vue";
 import { OpenAPI } from "@/client";
+import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
 
 const userRepository = useUserStore();
 const route = useRoute();
@@ -265,12 +266,18 @@ watch(
         >
           <strong class="me-2">{{ userRepository.user.display_name }}</strong>
           <img
+            v-if="userRepository.user.gravatar_url"
             :src="userRepository.user.gravatar_url + '?d=mp&s=32'"
             class="rounded-circle"
             height="32"
             width="32"
             alt="profile picture"
           />
+          <font-awesome-icon
+            v-else
+            icon="fa-solid fa-circle-user"
+            class="text-secondary fs-4"
+          />
         </a>
         <ul
           class="dropdown-menu text-small shadow"

src/views/admin/AdminUsersView.vue

@@ -213,12 +213,19 @@ onMounted(() => {
       <tr v-for="(user, index) in userState.users" :key="user.uid">
         <th scope="row">
           <img
+            v-if="user.gravatar_url"
             :src="user.gravatar_url + '?d=mp&s=32'"
-            class="rounded-circle me-2"
+            class="rounded-circle"
             height="32"
             width="32"
             alt="profile picture"
-          />{{ user.display_name }}
+          />
+          <font-awesome-icon
+            v-else
+            icon="fa-solid fa-circle-user"
+            class="text-secondary fs-4"
+          />
+          <span class="ms-2">{{ user.display_name }}</span>
         </th>
         <td>{{ user.uid }}</td>
         <td