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/pages/user/group/members.vue

@@ -17,10 +17,8 @@
       hide-default-footer
       disable-pagination
     >
-      <template #item.avatar="">
-        <v-avatar>
-          <img src="https://i.pravatar.cc/300" alt="John" />
-        </v-avatar>
+      <template #item.avatar="{ item }">
+        <UserAvatar :user-id="item.id" />
       </template>
       <template #item.admin="{ item }">
         {{ item.admin ? "Admin" : "User" }}
@@ -66,8 +64,12 @@
 import { defineComponent, ref, onMounted, useContext } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import { UserOut } from "~/types/api-types/user";
+import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 
 export default defineComponent({
+  components: {
+    UserAvatar,
+  },
   setup() {
     const api = useUserApi();
 

frontend/pages/user/profile/edit.vue

@@ -2,12 +2,21 @@
   <v-container class="narrow-container">
     <BasePageTitle divider>
       <template #header>
-        <v-img max-height="200" max-width="200" class="mb-2" :src="require('~/static/svgs/manage-profile.svg')"></v-img>
+        <div class="d-flex flex-column align-center justify-center">
+          <UserAvatar size="96" :user-id="$auth.user.id" />
+          <AppButtonUpload
+            class="my-1"
+            file-name="profile"
+            accept="image/*"
+            :url="`/api/users/${$auth.user.id}/image`"
+            @uploaded="$auth.fetchUser()"
+          />
+        </div>
       </template>
       <template #title> Your Profile Settings </template>
     </BasePageTitle>
 
-    <section>
+    <section class="mt-5">
       <ToggleState tag="article">
         <template #activator="{ toggle, state }">
           <v-btn v-if="!state" color="info" class="mt-2 mb-n3" @click="toggle">
@@ -105,8 +114,12 @@
 <script lang="ts">
 import { ref, reactive, defineComponent, computed, useContext, watch } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
+import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 
 export default defineComponent({
+  components: {
+    UserAvatar,
+  },
   setup() {
     const nuxtContext = useContext();
     const user = computed(() => nuxtContext.$auth.user);

frontend/pages/user/profile/index.vue

@@ -1,9 +1,8 @@
 <template>
   <v-container v-if="user">
     <section class="d-flex flex-column align-center">
-      <v-avatar color="primary" size="75" class="mb-2">
-        <v-img :src="require(`~/static/account.png`)" />
-      </v-avatar>
+      <UserAvatar size="84" :user-id="$auth.user.id" />
+
       <h2 class="headline">👋 Welcome, {{ user.fullName }}</h2>
       <p class="subtitle-1 mb-0">
         Manage your profile, recipes, and group settings.
@@ -137,10 +136,13 @@ import UserProfileLinkCard from "@/components/Domain/User/UserProfileLinkCard.vu
 import { useUserApi } from "~/composables/api";
 import { validators } from "~/composables/use-validators";
 import { alert } from "~/composables/use-toast";
+import UserAvatar from "@/components/Domain/User/UserAvatar.vue";
 
 export default defineComponent({
+  name: "UserProfile",
   components: {
     UserProfileLinkCard,
+    UserAvatar,
   },
   scrollToTop: true,
   setup() {