Copy over Avatar component from phoenix

This component should move to ODS soon, so that we can just use it. At
the moment we have to copy it here to get proper avatars loaded.

ui/components/accounts/AccountsList.vue

@@ -15,7 +15,7 @@
       <oc-table-group>
         <oc-table-row v-for="account in accounts" :key="`account-list-row-${account.id}`">
           <oc-table-cell>
-            <oc-avatar :userName="account.displayName || account.preferredName" :width="35" />
+            <avatar :user-name="account.displayName || account.preferredName" :userid="account.id" :width="35" />
           </oc-table-cell>
           <oc-table-cell v-text="account.preferredName" />
           <oc-table-cell v-text="account.displayName || '-'" />
@@ -33,8 +33,10 @@
 </template>
 
 <script>
+import Avatar from './Avatar.vue'
 export default {
   name: 'AccountsList',
+  components: { Avatar },
   props: {
     accounts: {
       type: Array,

ui/components/accounts/Avatar.vue

@@ -0,0 +1,130 @@
+<template>
+  <component :is="type" v-if="enabled">
+    <oc-spinner
+      v-if="loading"
+      key="avatar-loading"
+      size="small"
+      :aria-label="$gettext('Loading')"
+      :style="`width: ${width}px; height: ${width}px;`"
+    />
+    <oc-avatar
+      v-else
+      key="avatar-loaded"
+      :width="width"
+      :src="avatarSource"
+      :user-name="userName"
+    />
+  </component>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  /**
+   * FIXME: this component has been copied over from phoenix. It should be moved over to ODS, then we can reuse it in
+   * this extension.
+   */
+  name: 'Avatar',
+  props: {
+    /**
+       * The html element used for the avatar container.
+       * `div, span`
+       */
+    type: {
+      type: String,
+      default: 'div',
+      validator: value => {
+        return value.match(/(div|span)/)
+      }
+    },
+    userName: {
+      type: String,
+      default: ''
+    },
+    userid: {
+      /**
+         * Allow empty string to show placeholder
+         */
+      type: String,
+      default: ''
+    },
+    width: {
+      type: Number,
+      required: false,
+      default: 42
+    }
+  },
+  data () {
+    return {
+      /**
+         * Set to object URL when loaded, or on failure, icon placeholder is shown
+         */
+      avatarSource: '',
+      /**
+         * Shows spinner in place whilst loading avatar from server
+         */
+      loading: true
+    }
+  },
+  computed: {
+    ...mapGetters(['getToken']),
+    enabled: function () {
+      return this.$root.config.enableAvatars || true
+    }
+  },
+  watch: {
+    userid: function (userid, old) {
+      this.setUser(userid)
+    }
+  },
+  mounted: function () {
+    // Handled mounted situation. Userid might not be set yet so try placeholder
+    if (this.userid !== '') {
+      this.setUser(this.userid)
+    } else {
+      this.loading = false
+    }
+  },
+  methods: {
+    /**
+     * Load a new avatar from this userid
+     */
+    setUser (userid) {
+      this.loading = true
+      this.avatarSource = ''
+      if (!this.enabled || userid === '') {
+        this.loading = false
+        return
+      }
+      const headers = new Headers()
+      const instance = this.$root.config.server || window.location.origin
+      const url = instance + '/remote.php/dav/avatars/' + this.userid + '/128.png'
+      headers.append('Authorization', 'Bearer ' + this.getToken)
+      headers.append('X-Requested-With', 'XMLHttpRequest')
+      fetch(url, { headers })
+        .then(response => {
+          if (response.ok) {
+            return response.blob()
+          }
+          if (response.status !== 404) {
+            throw new Error(`Unexpected status code ${response.status}`)
+          }
+        })
+        .then(blob => {
+          this.loading = false
+          if (blob) {
+            this.avatarSource = window.URL.createObjectURL(blob)
+          } else {
+            // 404, none found
+            this.avatarSource = ''
+          }
+        })
+        .catch(error => {
+          this.avatarSource = ''
+          this.loading = false
+          console.error(`Error loading avatar image for user "${this.userid}": `, error.message)
+        })
+    }
+  }
+}
+</script>