Feature/user photo storage (#877)

* add default assets for user profile

* add recipe avatar

* change user_id to UUID

* add profile image upload

* setup image cache keys

* cleanup tests and add image tests

* purge user data on delete

* new user repository tests

* add user_id validator for int -> UUID conversion

* delete depreciated route

* force set content type

* refactor tests to use temp directory

* validate parent exists before createing

* set user_id to correct type

* update instruction id

* reset primary key on migration

frontend/components/Domain/Recipe/RecipeComments.vue

@@ -9,9 +9,8 @@
     <v-divider class="mx-2"></v-divider>
     <div class="d-flex flex-column">
       <div class="d-flex mt-3" style="gap: 10px">
-        <v-avatar size="40">
-          <img alt="user" src="https://cdn.pixabay.com/photo/2020/06/24/19/12/cabbage-5337431_1280.jpg" />
-        </v-avatar>
+        <UserAvatar size="40" :user-id="$auth.user.id" />
+
         <v-textarea
           v-model="comment"
           hide-details=""
@@ -32,9 +31,7 @@
       </div>
     </div>
     <div v-for="comment in comments" :key="comment.id" class="d-flex my-2" style="gap: 10px">
-      <v-avatar size="40">
-        <img alt="user" src="https://cdn.pixabay.com/photo/2020/06/24/19/12/cabbage-5337431_1280.jpg" />
-      </v-avatar>
+      <UserAvatar size="40" :user-id="comment.userId" />
       <v-card outlined class="flex-grow-1">
         <v-card-text class="pa-3 pb-0">
           <p class="">{{ comment.user.username }} • {{ $d(Date.parse(comment.createdAt), "medium") }}</p>
@@ -60,8 +57,12 @@
 import { defineComponent, ref, toRefs, onMounted, reactive } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import { RecipeComment } from "~/api/class-interfaces/recipes/types";
+import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 
 export default defineComponent({
+  components: {
+    UserAvatar,
+  },
   props: {
     slug: {
       type: String,

frontend/components/Domain/User/UserAvatar.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-list-item-avatar v-if="list && userId">
+    <v-img :src="imageURL" :alt="userId" @load="error = false" @error="error = true"> </v-img>
+  </v-list-item-avatar>
+  <v-avatar v-else-if="userId" :size="size">
+    <v-img :src="imageURL" :alt="userId" @load="error = false" @error="error = true"> </v-img>
+  </v-avatar>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive, useContext, computed } from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  props: {
+    userId: {
+      type: String,
+      required: true,
+    },
+    list: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: "42",
+    },
+  },
+  setup(props) {
+    const state = reactive({
+      error: false,
+    });
+
+    const { $auth } = useContext();
+
+    const imageURL = computed(() => {
+      const key = $auth?.user?.cacheKey || "";
+      return `/api/media/users/${props.userId}/profile.webp?cacheKey=${key}`;
+    });
+
+    return {
+      imageURL,
+      ...toRefs(state),
+    };
+  },
+});
+</script>