avatar added with the first letters of the first and last name

frontend/src/components/UserCard.spec.js

@@ -11,7 +11,8 @@ describe('UserCard', () => {
     $n: jest.fn((n) => String(n)),
     $store: {
       state: {
-        email: 'user@example.org',
+        firstName: 'Bibi',
+        lastName: 'Bloxberg',
       },
     },
   }
@@ -28,5 +29,12 @@ describe('UserCard', () => {
     it('renders the Div Element ".userdata-card"', () => {
       expect(wrapper.find('div.userdata-card').exists()).toBeTruthy()
     })
+    it('renders the SPAN Element ".b-avatar"', () => {
+      expect(wrapper.find('span.b-avatar').exists()).toBeTruthy()
+    })
+
+    it('find the first letters of the firstName and lastName', () => {
+      expect(wrapper.find('span.b-avatar').text()).toBe('B  B')
+    })
   })
 })

frontend/src/components/UserCard.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="userdata-card">
     <b-card class="bg-transparent border-0">
-      <div class="w-100 text-center">firstName + lastName</div>
+      <div class="w-100 text-center">
+        <b-avatar variant="primary" :text="avatar" size="6rem"></b-avatar>
+      </div>
 
       <b-container class="d-flex justify-content-center mt-md-5">
         <b-row>
@@ -37,5 +39,10 @@ export default {
     balance: { type: Number, default: 0 },
     transactionCount: { type: Number, default: 0 },
   },
+  computed: {
+    avatar() {
+      return `${this.$store.state.firstName[0]}  ${this.$store.state.lastName[0]}`
+    },
+  },
 }
 </script>