From de4931e1e0828c8df36e08988f8b759666794bb4 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 12 Apr 2022 09:12:19 +0200
Subject: [PATCH] avatar added with the first letters of the first and last
 name

---
 frontend/src/components/UserCard.spec.js | 10 +++++++++-
 frontend/src/components/UserCard.vue     |  9 ++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/UserCard.spec.js b/frontend/src/components/UserCard.spec.js
index c78d77943..6977917f5 100644
--- a/frontend/src/components/UserCard.spec.js
+++ b/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')
+    })
   })
 })
diff --git a/frontend/src/components/UserCard.vue b/frontend/src/components/UserCard.vue
index e1c872cc8..2ed17403b 100755
--- a/frontend/src/components/UserCard.vue
+++ 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>