From f8ff40148cba563562b67736bdf18ea6238f0145 Mon Sep 17 00:00:00 2001
From: aonomike <aonomike@gmail.com>
Date: Fri, 3 May 2019 16:21:33 +0300
Subject: [PATCH 1/6] Add implementation to prefix relative image urls with
 '/api'

---
 webapp/components/Image/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/components/Image/index.vue b/webapp/components/Image/index.vue
index de05c5eda..fa95ab345 100644
--- a/webapp/components/Image/index.vue
+++ b/webapp/components/Image/index.vue
@@ -15,8 +15,8 @@ export default {
   },
   computed: {
     imageSrc() {
-      // TODO implement
-      return 'this should be an image source attribute'
+      const src = this.imageProps.src
+      return src.startsWith('/') ? src.replace('/','/api/') : src
     }
   }
 }

From f4b054d4c5096457f8f8880f00e83d381f8a10a6 Mon Sep 17 00:00:00 2001
From: aonomike <aonomike@gmail.com>
Date: Fri, 3 May 2019 20:46:58 +0300
Subject: [PATCH 2/6] Fix linting error

---
 webapp/components/Image/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/Image/index.vue b/webapp/components/Image/index.vue
index fa95ab345..e2f504578 100644
--- a/webapp/components/Image/index.vue
+++ b/webapp/components/Image/index.vue
@@ -16,7 +16,7 @@ export default {
   computed: {
     imageSrc() {
       const src = this.imageProps.src
-      return src.startsWith('/') ? src.replace('/','/api/') : src
+      return src.startsWith('/') ? src.replace('/', '/api/') : src
     }
   }
 }

From 3ff034d0140f2d4ceb653e233dec8b4b5740a1e3 Mon Sep 17 00:00:00 2001
From: aonomike <aonomike@gmail.com>
Date: Tue, 7 May 2019 15:21:42 +0300
Subject: [PATCH 3/6] Refactor <img> tags to use Image component

---
 webapp/components/Badges.vue              | 15 ++++++++++++---
 webapp/components/Empty.vue               | 13 ++++++++++---
 webapp/pages/login.vue                    | 13 +++++++++----
 webapp/pages/logout.vue                   | 15 ++++++++++++---
 webapp/pages/settings/my-social-media.vue | 13 ++++++++++---
 5 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/webapp/components/Badges.vue b/webapp/components/Badges.vue
index d0cb30e91..b30dba309 100644
--- a/webapp/components/Badges.vue
+++ b/webapp/components/Badges.vue
@@ -10,22 +10,31 @@
       :key="badge.key"
       class="hc-badge-container"
     >
-      <img
+      <hc-image
         :title="badge.key"
-        :src="badge.icon"
+        :imageProps="imageProps(badge.icon)"
         class="hc-badge"
-      >
+      />
     </div>
   </div>
 </template>
 
 <script>
+import HcImage from './Image'
 export default {
+  components: {
+    HcImage
+  },
   props: {
     badges: {
       type: Array,
       default: () => []
     }
+  },
+  methods: {
+    imageProps(icon) {
+      return { src: icon}
+    }
   }
 }
 </script>
diff --git a/webapp/components/Empty.vue b/webapp/components/Empty.vue
index 8755a11bd..c1044137e 100644
--- a/webapp/components/Empty.vue
+++ b/webapp/components/Empty.vue
@@ -5,13 +5,13 @@
     :margin="margin"
   >
     <ds-text>
-      <img
-        :src="iconPath"
+      <hc-image
+        :imageProps="imageProps"
         width="80"
         class="hc-empty-icon"
         style="margin-bottom: 5px"
         alt="Empty"
-      ><br>
+      /><br>
       <ds-text
         v-show="message"
         class="hc-empty-message"
@@ -24,7 +24,11 @@
 </template>
 
 <script>
+import HcImage from '~/components/Image'
 export default {
+  components: {
+    HcImage
+  },
   name: 'HcEmpty',
   props: {
     /**
@@ -56,6 +60,9 @@ export default {
   computed: {
     iconPath() {
       return `/img/empty/${this.icon}.svg`
+    },
+    imageProps: {
+      src: iconPath
     }
   }
 }
diff --git a/webapp/pages/login.vue b/webapp/pages/login.vue
index 846191c40..951aa10a6 100644
--- a/webapp/pages/login.vue
+++ b/webapp/pages/login.vue
@@ -30,11 +30,11 @@
               margin-bottom="xxx-small"
               centered
             >
-              <img
+              <hc-image
                 class="login-image"
-                src="/img/sign-up/humanconnection.svg"
                 alt="Human Connection"
-              >
+                :imageProps="imageProps" 
+              />
             </ds-space>
           </ds-flex-item>
           <ds-flex-item
@@ -96,12 +96,14 @@
 
 <script>
 import LocaleSwitch from '~/components/LocaleSwitch'
+import HcImage from '~/components/Image'
 
 import gql from 'graphql-tag'
 
 export default {
   components: {
-    LocaleSwitch
+    LocaleSwitch,
+    HcImage
   },
   layout: 'blank',
   data() {
@@ -116,6 +118,9 @@ export default {
   computed: {
     pending() {
       return this.$store.getters['auth/pending']
+    },
+    imageProps() {
+      return {src:"/img/sign-up/humanconnection.svg"}
     }
   },
   asyncData({ store, redirect }) {
diff --git a/webapp/pages/logout.vue b/webapp/pages/logout.vue
index 008908360..54585d599 100644
--- a/webapp/pages/logout.vue
+++ b/webapp/pages/logout.vue
@@ -11,11 +11,11 @@
           margin-bottom="xxx-small"
           centered
         >
-          <img
+          <hc-image
             style="width: 200px;"
-            src="/img/sign-up/onourjourney.png"
+            :imageProps="imageProps"
             alt="Human Connection"
-          >
+          />
         </ds-space>
         <ds-space
           style="text-align: center;"
@@ -36,11 +36,20 @@
 </template>
 
 <script>
+import HcImage from '~/components/Image'
 export default {
+  components: {
+    HcImage
+  },
   layout: 'blank',
   async beforeCreate() {
     await this.$store.dispatch('auth/logout')
     this.$router.replace('/')
+  },
+  computed: {
+    imageProps(){
+      return { src: "/img/sign-up/onourjourney.png"}
+    }
   }
 }
 </script>
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index c031f54a4..c13d0eeb5 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -11,12 +11,12 @@
           :key="link.url"
         >
           <a :href="link.url">
-            <img
-              :src="link.favicon"
+            <hc-image
+              :imageProps="imageProps(link.favicon)"
               alt="Social Media link"
               width="16"
               height="16"
-            >
+            />
             {{ link.url }}
           </a>
         </ds-list-item>
@@ -45,8 +45,12 @@
 <script>
 import gql from 'graphql-tag'
 import { mapGetters, mapMutations } from 'vuex'
+import HcImage from '~/components/Image'
 
 export default {
+  components: {
+    HcImage
+  },
   data() {
     return {
       value: ''
@@ -101,6 +105,9 @@ export default {
           this.$toast.success(this.$t('settings.social-media.success')),
           (this.value = '')
         )
+    },
+    imageProps(favicon) {
+      return { src: favicon}
     }
   }
 }

From 399507c7fb67a8a8df021bdb8122b41a58fb6bdd Mon Sep 17 00:00:00 2001
From: aonomike <aonomike@gmail.com>
Date: Tue, 7 May 2019 15:56:31 +0300
Subject: [PATCH 4/6] Fix linting issues

---
 webapp/components/Badges.vue              |  4 ++--
 webapp/components/Empty.vue               |  4 ++--
 webapp/pages/login.vue                    |  4 ++--
 webapp/pages/logout.vue                   | 12 ++++++------
 webapp/pages/settings/my-social-media.vue |  4 ++--
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/webapp/components/Badges.vue b/webapp/components/Badges.vue
index b30dba309..9c7689aca 100644
--- a/webapp/components/Badges.vue
+++ b/webapp/components/Badges.vue
@@ -12,7 +12,7 @@
     >
       <hc-image
         :title="badge.key"
-        :imageProps="imageProps(badge.icon)"
+        :image-props="imageProps(badge.icon)"
         class="hc-badge"
       />
     </div>
@@ -33,7 +33,7 @@ export default {
   },
   methods: {
     imageProps(icon) {
-      return { src: icon}
+      return { src: icon }
     }
   }
 }
diff --git a/webapp/components/Empty.vue b/webapp/components/Empty.vue
index c1044137e..7f818e2f7 100644
--- a/webapp/components/Empty.vue
+++ b/webapp/components/Empty.vue
@@ -6,7 +6,7 @@
   >
     <ds-text>
       <hc-image
-        :imageProps="imageProps"
+        :image-props="imageProps"
         width="80"
         class="hc-empty-icon"
         style="margin-bottom: 5px"
@@ -26,10 +26,10 @@
 <script>
 import HcImage from '~/components/Image'
 export default {
+  name: 'HcEmpty',
   components: {
     HcImage
   },
-  name: 'HcEmpty',
   props: {
     /**
      * Icon that should be shown
diff --git a/webapp/pages/login.vue b/webapp/pages/login.vue
index 951aa10a6..537ef7d85 100644
--- a/webapp/pages/login.vue
+++ b/webapp/pages/login.vue
@@ -33,7 +33,7 @@
               <hc-image
                 class="login-image"
                 alt="Human Connection"
-                :imageProps="imageProps" 
+                :image-props="imageProps" 
               />
             </ds-space>
           </ds-flex-item>
@@ -120,7 +120,7 @@ export default {
       return this.$store.getters['auth/pending']
     },
     imageProps() {
-      return {src:"/img/sign-up/humanconnection.svg"}
+      return { src: '/img/sign-up/humanconnection.svg' }
     }
   },
   asyncData({ store, redirect }) {
diff --git a/webapp/pages/logout.vue b/webapp/pages/logout.vue
index 54585d599..1dc088c61 100644
--- a/webapp/pages/logout.vue
+++ b/webapp/pages/logout.vue
@@ -13,7 +13,7 @@
         >
           <hc-image
             style="width: 200px;"
-            :imageProps="imageProps"
+            :image-props="imageProps"
             alt="Human Connection"
           />
         </ds-space>
@@ -42,14 +42,14 @@ export default {
     HcImage
   },
   layout: 'blank',
+  computed: {
+    imageProps() {
+      return { src: '/img/sign-up/onourjourney.png' }
+    }
+  },
   async beforeCreate() {
     await this.$store.dispatch('auth/logout')
     this.$router.replace('/')
-  },
-  computed: {
-    imageProps(){
-      return { src: "/img/sign-up/onourjourney.png"}
-    }
   }
 }
 </script>
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index c13d0eeb5..f991305a6 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -12,7 +12,7 @@
         >
           <a :href="link.url">
             <hc-image
-              :imageProps="imageProps(link.favicon)"
+              :image-props="imageProps(link.favicon)"
               alt="Social Media link"
               width="16"
               height="16"
@@ -107,7 +107,7 @@ export default {
         )
     },
     imageProps(favicon) {
-      return { src: favicon}
+      return { src: favicon }
     }
   }
 }

From bf571988158fa0b22d3fe3d5653d373f5bfca021 Mon Sep 17 00:00:00 2001
From: aonomike <aonomike@gmail.com>
Date: Thu, 9 May 2019 02:27:03 +0300
Subject: [PATCH 5/6] Refactor code based on comments from PR review

---
 webapp/components/Badges.vue              | 7 +------
 webapp/components/Empty.vue               | 7 ++-----
 webapp/pages/settings/my-social-media.vue | 5 +----
 3 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/webapp/components/Badges.vue b/webapp/components/Badges.vue
index 9c7689aca..b28412abe 100644
--- a/webapp/components/Badges.vue
+++ b/webapp/components/Badges.vue
@@ -12,7 +12,7 @@
     >
       <hc-image
         :title="badge.key"
-        :image-props="imageProps(badge.icon)"
+        :image-props="{ src: badge.icon}"
         class="hc-badge"
       />
     </div>
@@ -30,11 +30,6 @@ export default {
       type: Array,
       default: () => []
     }
-  },
-  methods: {
-    imageProps(icon) {
-      return { src: icon }
-    }
   }
 }
 </script>
diff --git a/webapp/components/Empty.vue b/webapp/components/Empty.vue
index 7f818e2f7..f8608c965 100644
--- a/webapp/components/Empty.vue
+++ b/webapp/components/Empty.vue
@@ -58,11 +58,8 @@ export default {
     }
   },
   computed: {
-    iconPath() {
-      return `/img/empty/${this.icon}.svg`
-    },
-    imageProps: {
-      src: iconPath
+    imageProps() {
+      return { src: `/img/empty/${this.icon}.svg` }
     }
   }
 }
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index f991305a6..a7b954182 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -12,7 +12,7 @@
         >
           <a :href="link.url">
             <hc-image
-              :image-props="imageProps(link.favicon)"
+              :image-props="{ src: link.favicon }"
               alt="Social Media link"
               width="16"
               height="16"
@@ -105,9 +105,6 @@ export default {
           this.$toast.success(this.$t('settings.social-media.success')),
           (this.value = '')
         )
-    },
-    imageProps(favicon) {
-      return { src: favicon }
     }
   }
 }

From 6445c534b432ea0f150ea9bd6774975886dd6dff Mon Sep 17 00:00:00 2001
From: aonomike <aonomike@gmail.com>
Date: Thu, 9 May 2019 21:04:07 +0300
Subject: [PATCH 6/6] Refactor to pass imageProps as an object without the
 computed section

---
 webapp/components/Empty.vue | 7 +------
 webapp/pages/login.vue      | 5 +----
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/webapp/components/Empty.vue b/webapp/components/Empty.vue
index f8608c965..669676862 100644
--- a/webapp/components/Empty.vue
+++ b/webapp/components/Empty.vue
@@ -6,7 +6,7 @@
   >
     <ds-text>
       <hc-image
-        :image-props="imageProps"
+        :image-props="{ src: `/img/empty/${this.icon}.svg` }"
         width="80"
         class="hc-empty-icon"
         style="margin-bottom: 5px"
@@ -56,11 +56,6 @@ export default {
       type: [String, Object],
       default: 'x-large'
     }
-  },
-  computed: {
-    imageProps() {
-      return { src: `/img/empty/${this.icon}.svg` }
-    }
   }
 }
 </script>
diff --git a/webapp/pages/login.vue b/webapp/pages/login.vue
index 537ef7d85..083c1cb71 100644
--- a/webapp/pages/login.vue
+++ b/webapp/pages/login.vue
@@ -33,7 +33,7 @@
               <hc-image
                 class="login-image"
                 alt="Human Connection"
-                :image-props="imageProps" 
+                :image-props="{ src: '/img/sign-up/humanconnection.svg' }" 
               />
             </ds-space>
           </ds-flex-item>
@@ -118,9 +118,6 @@ export default {
   computed: {
     pending() {
       return this.$store.getters['auth/pending']
-    },
-    imageProps() {
-      return { src: '/img/sign-up/humanconnection.svg' }
     }
   },
   asyncData({ store, redirect }) {