Migrate the bare minimum

- follow @alina-beck PR review

webapp/components/Avatar/Avatar.vue

@@ -1,28 +0,0 @@
-<template>
-  <ds-avatar
-    :image="user && user.avatar | proxyApiUrl"
-    :name="userName"
-    class="avatar"
-    :size="size"
-  />
-</template>
-
-<script>
-export default {
-  name: 'HcAvatar',
-  props: {
-    user: { type: Object, default: null },
-    size: { type: String, default: 'small' },
-  },
-  computed: {
-    userName() {
-      const { name } = this.user || {}
-      // The name is used to display the initials in case
-      // the image cannot be loaded.
-      return name
-      // If the name is undefined, then our styleguide will
-      // display an icon for the anonymous user.
-    },
-  },
-}
-</script>

webapp/components/AvatarMenu/AvatarMenu.vue

@@ -11,7 +11,7 @@
         "
         @click.prevent="toggleMenu"
       >
-        <hc-avatar :user="user" />
+        <user-avatar :image="user && user.avatar" />
         <base-icon class="dropdown-arrow" name="angle-down" />
       </a>
     </template>
@@ -49,12 +49,12 @@
 <script>
 import { mapGetters } from 'vuex'
 import Dropdown from '~/components/Dropdown'
-import HcAvatar from '~/components/Avatar/Avatar.vue'
+import UserAvatar from '~/components/UserAvatar/UserAvatar.vue'
 
 export default {
   components: {
     Dropdown,
-    HcAvatar,
+    UserAvatar,
   },
   props: {
     placement: { type: String, default: 'top-end' },

webapp/components/User/User.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="user" v-if="displayAnonymous">
-    <hc-avatar v-if="showAvatar" class="avatar" />
+    <user-avatar v-if="showAvatar" class="avatar" />
     <div>
       <b class="username">{{ $t('profile.userAnonym') }}</b>
     </div>
@@ -9,7 +9,7 @@
     <template slot="default" slot-scope="{ openMenu, closeMenu, isOpen }">
       <nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
         <div @mouseover="showPopover ? openMenu(true) : () => {}" @mouseleave="closeMenu(true)">
-          <hc-avatar v-if="showAvatar" class="avatar" :user="user" />
+          <user-avatar v-if="showAvatar" class="avatar" :image="user && user.avatar" />
           <div>
             <ds-text class="userinfo">
               <b>{{ userSlug }}</b>
@@ -89,7 +89,7 @@ import { mapGetters } from 'vuex'
 import HcRelativeDateTime from '~/components/RelativeDateTime'
 import HcFollowButton from '~/components/FollowButton'
 import HcBadges from '~/components/Badges'
-import HcAvatar from '~/components/Avatar/Avatar.vue'
+import UserAvatar from '~/components/UserAvatar/UserAvatar.vue'
 import Dropdown from '~/components/Dropdown'
 
 export default {
@@ -97,7 +97,7 @@ export default {
   components: {
     HcRelativeDateTime,
     HcFollowButton,
-    HcAvatar,
+    UserAvatar,
     HcBadges,
     Dropdown,
   },

webapp/components/UserAvatar/UserAvatar.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="ds-avatar avatar" :class="[`ds-size-${this.size}`, online && 'is-online']">
+    <ds-flex v-if="!hasImage || error" style="height: 100%">
+      <ds-flex-item centered>
+        <template v-if="isAnonymus">
+          <ds-icon name="eye-slash" />
+        </template>
+        <template v-else>
+          {{ userInitials }}
+        </template>
+      </ds-flex-item>
+    </ds-flex>
+    <img v-if="image && !error" :src="image | proxyApiUrl" @error="onError" :size="size" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserAvatar',
+  props: {
+    name: { type: String, default: 'Anonymus' },
+    /**
+     * The size used for the avatar.
+     * @options small|base|large
+     */
+    size: {
+      type: String,
+      default: 'base',
+      validator: value => {
+        return value.match(/(small|base|large|x-large)/)
+      },
+    },
+    image: { type: String, default: null },
+    online: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      error: false,
+    }
+  },
+  computed: {
+    isAnonymus() {
+      return !this.name || this.name.toLowerCase() === 'anonymus'
+    },
+    hasImage() {
+      return Boolean(this.image) && !this.error
+    },
+  },
+  methods: {
+    onError() {
+      this.error = true
+    },
+  },
+}
+</script>

webapp/pages/profile/_id/_slug.vue

@@ -11,9 +11,13 @@
           style="position: relative; height: auto;"
         >
           <hc-upload v-if="myProfile" :user="user">
-            <hc-avatar :user="user" class="profile-avatar" size="x-large"></hc-avatar>
+            <user-avatar
+              :image="user && user.avatar"
+              class="profile-avatar"
+              size="x-large"
+            ></user-avatar>
           </hc-upload>
-          <hc-avatar v-else :user="user" class="profile-avatar" size="x-large" />
+          <user-avatar v-else :image="user && user.avatar" class="profile-avatar" size="x-large" />
           <!-- Menu -->
           <client-only>
             <content-menu
@@ -279,7 +283,7 @@ import HcBadges from '~/components/Badges.vue'
 import HcEmpty from '~/components/Empty/Empty'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import HcUpload from '~/components/Upload'
-import HcAvatar from '~/components/Avatar/Avatar.vue'
+import UserAvatar from '~/components/UserAvatar/UserAvatar.vue'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
 import { profilePagePosts } from '~/graphql/PostQuery'
@@ -305,7 +309,7 @@ export default {
     HcCountTo,
     HcBadges,
     HcEmpty,
-    HcAvatar,
+    UserAvatar,
     ContentMenu,
     HcUpload,
     MasonryGrid,

webapp/pages/settings/blocked-users.vue

@@ -33,7 +33,7 @@
               params: { id: scope.row.id, slug: scope.row.slug },
             }"
           >
-            <hc-avatar :user="scope.row" size="small" />
+            <user-avatar :image="scope.row && scope.row.avatar" size="small" />
           </nuxt-link>
         </template>
         <template slot="name" slot-scope="scope">
@@ -79,11 +79,11 @@
 
 <script>
 import { BlockedUsers, Unblock } from '~/graphql/settings/BlockedUsers'
-import HcAvatar from '~/components/Avatar/Avatar.vue'
+import UserAvatar from '~/components/UserAvatar/UserAvatar.vue'
 
 export default {
   components: {
-    HcAvatar,
+    UserAvatar,
   },
   data() {
     return {