From 7dc5bbde6ca3f37076231a384a503c735d2a1327 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Fri, 21 May 2021 13:00:21 +0200
Subject: [PATCH] Feature Profile: Add Components

---
 frontend/src/routes/routes.js                 |  16 +-
 .../views/Layout/DashboardLayout_gdd.spec.js  |  32 ++--
 .../src/views/Layout/DashboardLayout_gdd.vue  |  10 +-
 frontend/src/views/Layout/DashboardNavbar.vue |   4 +-
 .../src/views/Pages/AccountOverview.spec.js   |   4 -
 frontend/src/views/Pages/AccountOverview.vue  |   3 +-
 frontend/src/views/Pages/Explorer.vue         |  32 ----
 .../Pages/UserProfile/EditProfileForm.vue     | 134 --------------
 .../Pages/UserProfile/ImageUploaderAvatar.vue |  72 --------
 .../src/views/Pages/UserProfile/UserCard.vue  | 167 +-----------------
 .../UserProfile/UserCard_FormUserData.vue     |  73 ++++++++
 .../UserProfile/UserCard_FormUserMail.vue     |  41 +++++
 .../UserProfile/UserCard_FormUserPasswort.vue |  59 +++++++
 .../UserProfile/UserCard_FormUsername.vue     |  46 +++++
 .../src/views/Pages/UserProfileActivity.vue   |  71 --------
 frontend/src/views/Pages/UserProfileCard.vue  |  24 ---
 frontend/src/views/Pages/UserProfileEdit.vue  |  23 ---
 .../src/views/Pages/UserProfileOverview.vue   |  33 ++++
 .../Pages/UserProfileTransactionList.vue      |   6 +-
 19 files changed, 275 insertions(+), 575 deletions(-)
 delete mode 100644 frontend/src/views/Pages/Explorer.vue
 delete mode 100755 frontend/src/views/Pages/UserProfile/EditProfileForm.vue
 delete mode 100644 frontend/src/views/Pages/UserProfile/ImageUploaderAvatar.vue
 create mode 100644 frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
 create mode 100644 frontend/src/views/Pages/UserProfile/UserCard_FormUserMail.vue
 create mode 100644 frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
 create mode 100644 frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
 delete mode 100644 frontend/src/views/Pages/UserProfileActivity.vue
 delete mode 100644 frontend/src/views/Pages/UserProfileCard.vue
 delete mode 100644 frontend/src/views/Pages/UserProfileEdit.vue
 create mode 100644 frontend/src/views/Pages/UserProfileOverview.vue

diff --git a/frontend/src/routes/routes.js b/frontend/src/routes/routes.js
index e9bcf38c8..2ba1e6b68 100755
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -16,25 +16,11 @@ const routes = [
   },
   {
     path: '/profile',
-    component: () => import('../views/Pages/UserProfileCard.vue'),
+    component: () => import('../views/Pages/UserProfileOverview.vue'),
     meta: {
       requiresAuth: true,
     },
   },
-  // {
-  //  path: '/profileedit',
-  //  component: () => import('../views/Pages/UserProfileEdit.vue'),
-  //  meta: {
-  //    requiresAuth: true,
-  //  },
-  // },
-  // {
-  //  path: '/activity',
-  //  component: () => import('../views/Pages/UserProfileActivity.vue'),
-  //  meta: {
-  //    requiresAuth: true,
-  //  },
-  // },
   {
     path: '/transactions',
     component: () => import('../views/Pages/UserProfileTransactionList.vue'),
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index 8c1e604c0..40b1beac8 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -75,7 +75,7 @@ describe('DashboardLayoutGdd', () => {
       })
 
       it('has five items in the navbar', () => {
-        expect(navbar.findAll('ul > a')).toHaveLength(2)
+        expect(navbar.findAll('ul > a')).toHaveLength(3)
       })
 
       it('has first item "send" in navbar', () => {
@@ -100,21 +100,21 @@ describe('DashboardLayoutGdd', () => {
         expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/transactions')
       })
 
-      // it('has tree items in the navbar', () => {
-      //  expect(navbar.findAll('ul > li')).toHaveLength(3)
-      // })
-      //
-      // it('has third item "My profile" in navbar', () => {
-      //  expect(navbar.findAll('ul > li').at(2).text()).toEqual('site.navbar.my-profil')
-      // })
-      //
-      // it.skip('has third item "My profile" linked to profile in navbar', async () => {
-      //  navbar.findAll('ul > li > a').at(2).trigger('click')
-      //  await flushPromises()
-      //  await jest.runAllTimers()
-      //  await flushPromises()
-      //  expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/profile')
-      // })
+       it('has tree items in the navbar', () => {
+        expect(navbar.findAll('ul > a')).toHaveLength(3)
+       })
+      
+       it('has third item "My profile" in navbar', () => {
+        expect(navbar.findAll('ul > a').at(2).text()).toEqual('site.navbar.my-profil')
+       })
+      
+       it.skip('has third item "My profile" linked to profile in navbar', async () => {
+        navbar.findAll('ul > a').at(2).trigger('click')
+        await flushPromises()
+        await jest.runAllTimers()
+        await flushPromises()
+        expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/profile')
+       })
 
       // it('has fourth item "Settigs" in navbar', () => {
       //  expect(navbar.findAll('ul > li').at(3).text()).toEqual('site.navbar.settings')
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 5dd4e86a5..81d8b6432 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper">
+  <div>
     <side-bar @logout="logout" :balance="balance" :pending="pending">
       <template slot="links">
         <sidebar-item
@@ -20,14 +20,6 @@
             path: '/profile',
           }"
         ></sidebar-item>
-        <!--    
-             <b-nav-item href="#!" to="/profileedit">
-             <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.settings') }}</b-nav-text>
-             </b-nav-item>
-             <b-nav-item href="#!" to="/activity">
-             <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.activity') }}</b-nav-text>
-             </b-nav-item>
-        -->
       </template>
     </side-bar>
     <div class="main-content">
diff --git a/frontend/src/views/Layout/DashboardNavbar.vue b/frontend/src/views/Layout/DashboardNavbar.vue
index 7c83bef1b..4cbcb3ca5 100755
--- a/frontend/src/views/Layout/DashboardNavbar.vue
+++ b/frontend/src/views/Layout/DashboardNavbar.vue
@@ -1,7 +1,7 @@
 <template>
   <base-nav
     container-classes="container-fluid"
-    class="navbar-top navbar-expand"
+    class="navbar-expand"
     :class="{ 'navbar-dark': type === 'default' }"
   >
     <!-- Navbar links -->
@@ -15,7 +15,7 @@
           <span class="pb-2 text-lg font-weight-bold">
             {{ $store.state.email }}
           </span>
-          <b-media-body class="ml-2 d-none d-lg-block">
+          <b-media-body class="ml-2">
             <span class="avatar">
               <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
             </span>
diff --git a/frontend/src/views/Pages/AccountOverview.spec.js b/frontend/src/views/Pages/AccountOverview.spec.js
index 68d91ee98..0ee75ef9f 100644
--- a/frontend/src/views/Pages/AccountOverview.spec.js
+++ b/frontend/src/views/Pages/AccountOverview.spec.js
@@ -19,10 +19,6 @@ describe('AccountOverview', () => {
       wrapper = Wrapper()
     })
 
-    it('has a header', () => {
-      expect(wrapper.find('base-header-stub').exists()).toBeTruthy()
-    })
-
     it('has a status line', () => {
       expect(wrapper.find('gdd-status-stub').exists()).toBeTruthy()
     })
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 8f6ffc4e1..5064439f2 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
-    <base-header class="pb-md-4 pt-md-2 pb-lg-4 pt-lg-2 bg-transparent"></base-header>
-    <b-container fluid class="p-lg-2 mt-lg-5">
+    <b-container fluid>
       <gdd-status
         v-if="showContext"
         :pending="pending"
diff --git a/frontend/src/views/Pages/Explorer.vue b/frontend/src/views/Pages/Explorer.vue
deleted file mode 100644
index 4d1f7ab27..000000000
--- a/frontend/src/views/Pages/Explorer.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div>
-    <!-- Header -->
-    <div class="header bg-gradient-info py-7 py-lg-3 pt-lg-2">
-      <b-container>
-        <div class="header-body text-center mb-7">
-          <p class="h1">GDD</p>
-          <p class="h4">Explorer</p>
-        </div>
-      </b-container>
-      <div class="separator separator-bottom separator-skew zindex-100">
-        <svg
-          x="0"
-          y="0"
-          viewBox="0 0 2560 100"
-          preserveAspectRatio="none"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
-        </svg>
-      </div>
-    </div>
-    <!-- Page content -->
-
-    <div>
-      <b-card>
-        <b-card-body>This is some text within a card body.</b-card-body>
-      </b-card>
-    </div>
-  </div>
-</template>
diff --git a/frontend/src/views/Pages/UserProfile/EditProfileForm.vue b/frontend/src/views/Pages/UserProfile/EditProfileForm.vue
deleted file mode 100755
index dbf9a3064..000000000
--- a/frontend/src/views/Pages/UserProfile/EditProfileForm.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<template>
-  <card style="background-color: #ebebeba3 !important">
-    <b-form @submit.prevent="updateProfile">
-      <h6 class="heading-small text-muted mb-4">User information</h6>
-
-      <div class="pl-lg-4">
-        <b-row>
-          <b-col lg="6">
-            <base-input
-              type="text"
-              label="Username"
-              placeholder="Username"
-              v-model="user.username"
-            ></base-input>
-          </b-col>
-          <b-col lg="6">
-            <base-input
-              type="email"
-              label="Email address"
-              placeholder="mike@email.com"
-              v-model="user.email"
-            ></base-input>
-          </b-col>
-        </b-row>
-        <b-row>
-          <b-col lg="6">
-            <base-input
-              type="text"
-              label="First Name"
-              placeholder="First Name"
-              v-model="user.firstName"
-            ></base-input>
-          </b-col>
-          <b-col lg="6">
-            <base-input
-              type="text"
-              label="Last Name"
-              placeholder="Last Name"
-              v-model="user.lastName"
-            ></base-input>
-          </b-col>
-        </b-row>
-      </div>
-      <hr class="my-4" />
-
-      <!-- Address -->
-      <h6 class="heading-small text-muted mb-4">Contact information</h6>
-
-      <div class="pl-lg-4">
-        <b-row>
-          <b-col md="12">
-            <base-input
-              type="text"
-              label="Address"
-              placeholder="Home Address"
-              v-model="user.address"
-            ></base-input>
-          </b-col>
-        </b-row>
-        <b-row>
-          <b-col lg="4">
-            <base-input
-              type="text"
-              label="City"
-              placeholder="City"
-              v-model="user.city"
-            ></base-input>
-          </b-col>
-          <b-col lg="4">
-            <base-input
-              type="text"
-              label="Country"
-              placeholder="Country"
-              v-model="user.country"
-            ></base-input>
-          </b-col>
-          <b-col lg="4">
-            <base-input
-              label="Postal Code"
-              placeholder="ZIP Code"
-              v-model="user.postalCode"
-            ></base-input>
-          </b-col>
-        </b-row>
-      </div>
-
-      <hr class="my-4" />
-      <!-- Description -->
-      <h6 class="heading-small text-muted mb-4">About me</h6>
-      <div class="pl-lg-4">
-        <b-form-group
-          label="About Me"
-          label-class="form-control-label"
-          class="mb-0"
-          label-for="about-form-textaria"
-        >
-          <!--  <label class="form-control-label">About Me</label> -->
-          <b-form-textarea
-            rows="4"
-            value="A beautiful premium dashboard for BootstrapVue."
-            id="about-form-textaria"
-            placeholder="A few words about you ..."
-          ></b-form-textarea>
-        </b-form-group>
-      </div>
-    </b-form>
-  </card>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      user: {
-        company: 'Creative Code Inc.',
-        username: 'michael23',
-        email: '',
-        firstName: 'Mike',
-        lastName: 'Andrew',
-        address: 'Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09',
-        city: 'New York',
-        country: 'USA',
-        postalCode: '',
-        aboutMe: `Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.`,
-      },
-    }
-  },
-  methods: {
-    updateProfile() {
-      alert('Your data: ' + JSON.stringify(this.user))
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/views/Pages/UserProfile/ImageUploaderAvatar.vue b/frontend/src/views/Pages/UserProfile/ImageUploaderAvatar.vue
deleted file mode 100644
index 8c35b918a..000000000
--- a/frontend/src/views/Pages/UserProfile/ImageUploaderAvatar.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div>
-    <!-- slot for parent component to activate the file changer -->
-    <div @click="launchFilePicker()">
-      <slot name="activator"></slot>
-    </div>
-    <!-- image input: style is set to hidden and assigned a ref so that it can be triggered -->
-    <input
-      type="file"
-      ref="file"
-      :name="uploadFieldName"
-      @change="onFileChange($event.target.name, $event.target.files)"
-      style="display: none"
-    />
-    <!-- error dialog displays any potential errors -->
-    <v-dialog v-model="errorDialog" max-width="300">
-      <v-card>
-        <v-card-text class="subheading">{{ errorText }}</v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn @click="errorDialog = false" flat>Got it!</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-<script>
-export default {
-  name: 'avatar-uploader',
-  data: () => ({
-    errorDialog: null,
-    errorText: '',
-    uploadFieldName: 'file',
-    maxSize: 1024,
-  }),
-  props: {
-    // Use "value" here to enable compatibility with v-model
-    value: Object,
-  },
-  methods: {
-    launchFilePicker() {
-      this.$refs.file.click()
-    },
-    onFileChange(fieldName, file) {
-      const { maxSize } = this
-      const imageFile = file[0]
-
-      // check if user actually selected a file
-      if (file.length > 0) {
-        const size = imageFile.size / maxSize / maxSize
-        if (!imageFile.type.match('image.*')) {
-          // check whether the upload is an image
-          this.errorDialog = true
-          this.errorText = 'Please choose an image file'
-        } else if (size > 1) {
-          // check whether the size is greater than the size limit
-          this.errorDialog = true
-          this.errorText = 'Your file is too big! Please select an image under 1MB'
-        } else {
-          // Append file into FormData & turn file into image URL
-          const formData = new FormData()
-          const imageURL = URL.createObjectURL(imageFile)
-          formData.append(fieldName, imageFile)
-          // Emit FormData & image URL to the parent component
-          this.$emit('input', { formData, imageURL })
-        }
-      }
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/views/Pages/UserProfile/UserCard.vue b/frontend/src/views/Pages/UserProfile/UserCard.vue
index 07c9794f5..1e94867e6 100755
--- a/frontend/src/views/Pages/UserProfile/UserCard.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard.vue
@@ -24,184 +24,19 @@
         </div>
       </b-col>
     </b-row>
-    <b-container>
-      <b-row class="mb-4 text-right">
-        <b-col class="text-right" @click="edit_userdata = !edit_userdata">
-          <span v-if="edit_userdata">{{ $t('form.edit') }}</span>
-          <div v-else>
-            <span>
-              {{ $t('form.edit') }}
-              <b>{{ $t('form.cancel') }}</b>
-            </span>
-            <span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
-          </div>
-        </b-col>
-      </b-row>
-    </b-container>
-    <div>
-      <b-row class="mb-3">
-        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-          <small>{{ $t('form.firstname') }}</small>
-        </b-col>
-        <b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
-          {{ UserProfileTestData.name }}
-        </b-col>
-        <b-col v-else class="col-md-9 col-sm-10">
-          <b-input type="text" v-model="UserProfileTestData.name"></b-input>
-        </b-col>
-      </b-row>
-      <b-row class="mb-3">
-        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-          <small>{{ $t('form.lastname') }}</small>
-        </b-col>
-        <b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
-          {{ UserProfileTestData.lastname }}
-        </b-col>
-        <b-col v-else class="col-md-9 col-sm-10">
-          <b-input type="text" v-model="UserProfileTestData.lastname"></b-input>
-        </b-col>
-      </b-row>
-      <b-row class="mb-3">
-        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-          <small>{{ $t('form.description') }}</small>
-        </b-col>
-        <b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
-          {{ UserProfileTestData.desc }}
-        </b-col>
-        <b-col v-else class="col-md-9 col-sm-10">
-          <b-textarea
-            v-value="UserProfileTestData.dec"
-            placeholder="Enter something..."
-            rows="3"
-            max-rows="6"
-          ></b-textarea>
-        </b-col>
-      </b-row>
-    </div>
-
-    <hr />
-
-    <b-container>
-      <b-row class="mb-4 text-right">
-        <b-col class="text-right" @click="edit_email = !edit_email">
-          <span v-if="edit_email">E-Mail {{ $t('form.change') }}</span>
-          <div v-else>
-            <span>
-              E-Mail {{ $t('form.change') }}
-              <b>{{ $t('form.cancel') }}</b>
-            </span>
-            <span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
-          </div>
-        </b-col>
-      </b-row>
-    </b-container>
-    <b-row class="mb-3">
-      <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-        <small>E-Mail</small>
-      </b-col>
-      <b-col v-if="edit_email" class="col-md-9 col-sm-10">{{ $store.state.email }}</b-col>
-      <b-col v-else class="col-md-9 col-sm-10">
-        <b-input type="text" v-model="$store.state.email"></b-input>
-      </b-col>
-    </b-row>
-
-    <hr />
-
-    <b-container>
-      <b-row class="mb-4 text-right">
-        <b-col class="text-right" @click="edit_username = !edit_username">
-          <span v-if="edit_username">{{ $t('form.username') }} {{ $t('form.change') }}</span>
-          <div v-else>
-            <span>
-              {{ $t('form.username') }} {{ $t('form.change') }}
-              <b>{{ $t('form.cancel') }}</b>
-            </span>
-            <span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
-          </div>
-        </b-col>
-      </b-row>
-    </b-container>
-    <b-row class="mb-3">
-      <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-        <small>{{ $t('form.username') }}</small>
-      </b-col>
-      <b-col v-if="edit_username" class="col-md-9 col-sm-10">
-        @{{ UserProfileTestData.username }}
-      </b-col>
-      <b-col v-else class="col-md-9 col-sm-10">
-        <b-input type="text" v-model="UserProfileTestData.username"></b-input>
-        <div>
-          {{ $t('form.change_username_info') }}
-        </div>
-      </b-col>
-    </b-row>
-
-    <hr />
-
-    <b-container>
-      <b-row class="mb-4 text-right">
-        <b-col class="text-right" @click="edit_pwd = !edit_pwd">
-          <span v-if="edit_pwd">{{ $t('form.password') }} {{ $t('form.change') }}</span>
-          <div v-else>
-            <span>
-              {{ $t('form.password') }} {{ $t('form.change') }}
-              <b>{{ $t('form.cancel') }}</b>
-            </span>
-            <span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
-          </div>
-        </b-col>
-      </b-row>
-
-      <div v-if="!edit_pwd">
-        <b-row class="mb-3">
-          <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-            <small>{{ $t('form.password_old') }}</small>
-          </b-col>
-          <b-col class="col-md-9 col-sm-10">
-            <b-input type="text" :placeholder="$t('form.password_old')"></b-input>
-          </b-col>
-        </b-row>
-        <b-row class="mb-3">
-          <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-            <small>{{ $t('form.password_new') }}</small>
-          </b-col>
-          <b-col class="col-md-9 col-sm-10">
-            <b-input type="text" :placeholder="$t('form.password_new')"></b-input>
-          </b-col>
-        </b-row>
-        <b-row class="mb-3">
-          <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
-            <small>{{ $t('form.password_new_repeat') }}</small>
-          </b-col>
-          <b-col class="col-md-9 col-sm-10">
-            <b-input type="text" :placeholder="$t('form.password_new_repeat')"></b-input>
-          </b-col>
-        </b-row>
-      </div>
-    </b-container>
   </b-card>
 </template>
 <script>
 import VueQrcode from 'vue-qrcode'
 
 export default {
-  name: 'profilecard',
+  name: 'UserCard',
   components: {
     VueQrcode,
   },
-  data() {
-    return {
-      edit_userdata: true,
-      edit_pwd: true,
-      edit_email: true,
-      edit_username: true,
-      edit_button_text: 'edit',
-    }
-  },
   props: {
     balance: { type: Number, default: 0 },
     transactionCount: { type: Number, default: 0 },
-    UserProfileTestData: { type: Object },
   },
 }
 </script>
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
new file mode 100644
index 000000000..e0d112ad3
--- /dev/null
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
@@ -0,0 +1,73 @@
+<template>
+  <b-card class="bg-transparent" style="background-color: #ebebeba3 !important">
+    <b-container>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right" @click="edit_userdata = !edit_userdata">
+          <span v-if="edit_userdata">{{ $t('form.edit') }}</span>
+          <div v-else>
+            <span>
+              {{ $t('form.edit') }}
+              <b>{{ $t('form.cancel') }}</b>
+            </span>
+            <span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
+    <div>
+      <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
+          <small>{{ $t('form.firstname') }}</small>
+        </b-col>
+        <b-col v-if="edit_userdata" class="col-lg-9 col-md-12 col-sm-12">
+          {{ UserProfileTestData.name }}
+        </b-col>
+        <b-col v-else class="col-lg-9 col-md-12 col-sm-12">
+          <b-input type="text" v-model="$props.UserProfileTestData.name"></b-input>
+        </b-col>
+      </b-row>
+      <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
+          <small>{{ $t('form.lastname') }}</small>
+        </b-col>
+        <b-col v-if="edit_userdata" class="col-lg-9 col-md-12 col-sm-12">
+          {{ UserProfileTestData.lastname }}
+        </b-col>
+        <b-col v-else class="col-lg-9 col-md-12 col-sm-12">
+          <b-input type="text" v-model="$props.UserProfileTestData.lastname"></b-input>
+        </b-col>
+      </b-row>
+      <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
+          <small>{{ $t('form.description') }}</small>
+        </b-col>
+        <b-col v-if="edit_userdata" class="col-lg-9 col-md-12 col-sm-12">
+          {{ UserProfileTestData.desc }}
+        </b-col>
+        <b-col v-else class="col-lg-9 col-md-12 col-sm-12">
+          <b-textarea
+            rows="3"
+            max-rows="6"
+            placeholder="UserProfileTestData.dec"
+            v-model="$props.UserProfileTestData.dec"
+          ></b-textarea>
+        </b-col>
+      </b-row>
+    </div>
+  </b-card>
+</template>
+<script>
+export default {
+  name: 'FormUserData',
+
+  data() {
+    return {
+      edit_userdata: true,
+    }
+  },
+  props: {
+    UserProfileTestData: { type: Object },
+  },
+}
+</script>
+<style></style>
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserMail.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserMail.vue
new file mode 100644
index 000000000..b46898907
--- /dev/null
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserMail.vue
@@ -0,0 +1,41 @@
+<template>
+  <b-card class="bg-transparent" style="background-color: #ebebeba3 !important">
+    <b-container>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right" @click="edit_email = !edit_email">
+          <span v-if="edit_email">E-Mail {{ $t('form.change') }}</span>
+          <div v-else>
+            <span>
+              E-Mail {{ $t('form.change') }}
+              <b>{{ $t('form.cancel') }}</b>
+            </span>
+            <span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
+    <b-row class="mb-3">
+      <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+        <small>E-Mail</small>
+      </b-col>
+      <b-col v-if="edit_email" class="col-md-9 col-sm-10">{{ $store.state.email }}</b-col>
+      <b-col v-else class="col-md-9 col-sm-10">
+        <b-input type="text" v-model="$store.state.email"></b-input>
+      </b-col>
+    </b-row>
+  </b-card>
+</template>
+<script>
+export default {
+  name: 'FormUserMail',
+  data() {
+    return {
+      edit_email: true,
+    }
+  },
+  props: {
+    UserProfileTestData: { type: Object },
+  },
+}
+</script>
+<style></style>
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
new file mode 100644
index 000000000..50f67976b
--- /dev/null
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
@@ -0,0 +1,59 @@
+<template>
+  <b-card class="bg-transparent" style="background-color: #ebebeba3 !important">
+    <b-container>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right" @click="edit_pwd = !edit_pwd">
+          <span v-if="edit_pwd">{{ $t('form.password') }} {{ $t('form.change') }}</span>
+          <div v-else>
+            <span>
+              {{ $t('form.password') }} {{ $t('form.change') }}
+              <b>{{ $t('form.cancel') }}</b>
+            </span>
+            <span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
+          </div>
+        </b-col>
+      </b-row>
+
+      <div v-if="!edit_pwd">
+        <b-row class="mb-3">
+          <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+            <small>{{ $t('form.password_old') }}</small>
+          </b-col>
+          <b-col class="col-md-9 col-sm-10">
+            <b-input type="text" :placeholder="$t('form.password_old')"></b-input>
+          </b-col>
+        </b-row>
+        <b-row class="mb-3">
+          <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+            <small>{{ $t('form.password_new') }}</small>
+          </b-col>
+          <b-col class="col-md-9 col-sm-10">
+            <b-input type="text" :placeholder="$t('form.password_new')"></b-input>
+          </b-col>
+        </b-row>
+        <b-row class="mb-3">
+          <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+            <small>{{ $t('form.password_new_repeat') }}</small>
+          </b-col>
+          <b-col class="col-md-9 col-sm-10">
+            <b-input type="text" :placeholder="$t('form.password_new_repeat')"></b-input>
+          </b-col>
+        </b-row>
+      </div>
+    </b-container>
+  </b-card>
+</template>
+<script>
+export default {
+  name: 'FormUserPasswort',
+  data() {
+    return {
+      edit_pwd: true,
+    }
+  },
+  props: {
+    UserProfileTestData: { type: Object },
+  },
+}
+</script>
+<style></style>
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
new file mode 100644
index 000000000..3992d993e
--- /dev/null
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
@@ -0,0 +1,46 @@
+<template>
+  <b-card class="bg-transparent" style="background-color: #ebebeba3 !important">
+    <b-container>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right" @click="edit_username = !edit_username">
+          <span v-if="edit_username">{{ $t('form.username') }} {{ $t('form.change') }}</span>
+          <div v-else>
+            <span>
+              {{ $t('form.username') }} {{ $t('form.change') }}
+              <b>{{ $t('form.cancel') }}</b>
+            </span>
+            <span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
+    <b-row class="mb-3">
+      <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+        <small>{{ $t('form.username') }}</small>
+      </b-col>
+      <b-col v-if="edit_username" class="col-md-9 col-sm-10">
+        @{{ UserProfileTestData.username }}
+      </b-col>
+      <b-col v-else class="col-md-9 col-sm-10">
+        <b-input type="text" v-model="$props.UserProfileTestData.username"></b-input>
+        <div>
+          {{ $t('form.change_username_info') }}
+        </div>
+      </b-col>
+    </b-row>
+  </b-card>
+</template>
+<script>
+export default {
+  name: 'FormUsername',
+  data() {
+    return {
+      edit_username: true,
+    }
+  },
+  props: {
+    UserProfileTestData: { type: Object },
+  },
+}
+</script>
+<style></style>
diff --git a/frontend/src/views/Pages/UserProfileActivity.vue b/frontend/src/views/Pages/UserProfileActivity.vue
deleted file mode 100644
index 6d69bc162..000000000
--- a/frontend/src/views/Pages/UserProfileActivity.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <div>
-    <div class="header pb-7 pt-5"></div>
-
-    <b-container fluid class="mt--6">
-      <div class="display-4 mb-3">{{ $t('site.profil.activity.chart') }}</div>
-      <b-row>
-        <b-col>
-          <div class="chart">
-            <line-chart :height="350" :chart-data="bigLineChart.chartData"></line-chart>
-          </div>
-        </b-col>
-      </b-row>
-      <hr />
-      <div class="display-4 mt-6">{{ $t('site.profil.activity.new') }}</div>
-      <b-row>
-        <b-col>
-          <gdd-add-work-2 />
-        </b-col>
-      </b-row>
-
-      <hr />
-      <div class="display-4 mb-3">{{ $t('site.profil.activity.list') }}</div>
-      <b-row>
-        <b-col class="mb-5">
-          {{ $t('community') }}
-          <gdd-work-table></gdd-work-table>
-        </b-col>
-      </b-row>
-    </b-container>
-  </div>
-</template>
-<script>
-import GddWorkTable from '../../views/Pages/AccountOverview/GddWorkTable.vue'
-import GddAddWork2 from '../../views/Pages/AccountOverview/GddAddWork2.vue'
-
-import * as chartConfigs from '@/components/Charts/config'
-import LineChart from '@/components/Charts/LineChart'
-
-export default {
-  components: {
-    GddWorkTable,
-    LineChart,
-    GddAddWork2,
-  },
-  data() {
-    return {
-      bigLineChart: {
-        allData: [
-          [0, 20, 10, 30, 15, 40, 20, 60, 60],
-          [0, 20, 5, 25, 10, 30, 35, 60, 40],
-          [0, 2, 5, 7, 10, 30, 15, 9, 10],
-          [0, 2, 5, 7, 10, 14, 29, 78, 120],
-        ],
-        activeIndex: 0,
-        chartData: {
-          datasets: [
-            {
-              label: 'Gemeinschaftsstunden',
-              data: [30, 20, 10, 30, 65, 40, 20, 60, 70],
-            },
-          ],
-          labels: ['2020 Aug', 'Sep', 'Okt', 'Nov', 'Dez', 'Jan', 'Feb', 'Mär 2021'],
-        },
-        extraOptions: chartConfigs.blueChartOptions,
-      },
-    }
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/views/Pages/UserProfileCard.vue b/frontend/src/views/Pages/UserProfileCard.vue
deleted file mode 100644
index aa96cdbad..000000000
--- a/frontend/src/views/Pages/UserProfileCard.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <div class="mt-sm-4 mt-lg-5">
-    <user-card
-      :balance="balance"
-      :transactionCount="transactionCount"
-      :UserProfileTestData="UserProfileTestData"
-    ></user-card>
-  </div>
-</template>
-<script>
-import UserCard from './UserProfile/UserCard.vue'
-
-export default {
-  components: {
-    UserCard,
-  },
-  props: {
-    balance: { type: Number, default: 0 },
-    transactionCount: { type: Number, default: 0 },
-    UserProfileTestData: { type: Object },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/views/Pages/UserProfileEdit.vue b/frontend/src/views/Pages/UserProfileEdit.vue
deleted file mode 100644
index 1fb1d220f..000000000
--- a/frontend/src/views/Pages/UserProfileEdit.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div>
-    <div class="header pb-8 pt-5 pt-lg-8 d-flex align-items-center profile-header"></div>
-
-    <b-container fluid class="mt--6">
-      <b-row>
-        <b-col xl="12" class="order-xl-1">
-          <edit-profile-form></edit-profile-form>
-        </b-col>
-      </b-row>
-    </b-container>
-  </div>
-</template>
-<script>
-import EditProfileForm from './UserProfile/EditProfileForm.vue'
-
-export default {
-  components: {
-    EditProfileForm,
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/views/Pages/UserProfileOverview.vue b/frontend/src/views/Pages/UserProfileOverview.vue
new file mode 100644
index 000000000..c51d38b1d
--- /dev/null
+++ b/frontend/src/views/Pages/UserProfileOverview.vue
@@ -0,0 +1,33 @@
+<template>
+  <b-container fluid>
+    <user-card :balance="balance" :transactionCount="transactionCount"></user-card>
+
+    <form-user-data :UserProfileTestData="UserProfileTestData" />
+    <form-username :UserProfileTestData="UserProfileTestData" />
+    <form-user-mail :UserProfileTestData="UserProfileTestData" />
+    <form-user-passwort :UserProfileTestData="UserProfileTestData" />
+  </b-container>
+</template>
+<script>
+import UserCard from './UserProfile/UserCard.vue'
+import FormUserData from './UserProfile/UserCard_FormUserData.vue'
+import FormUserMail from './UserProfile/UserCard_FormUserMail.vue'
+import FormUsername from './UserProfile/UserCard_FormUsername.vue'
+import FormUserPasswort from './UserProfile/UserCard_FormUserPasswort.vue'
+
+export default {
+  components: {
+    UserCard,
+    FormUserData,
+    FormUserMail,
+    FormUsername,
+    FormUserPasswort,
+  },
+  props: {
+    balance: { type: Number, default: 0 },
+    transactionCount: { type: Number, default: 0 },
+    UserProfileTestData: { type: Object },
+  },
+}
+</script>
+<style></style>
diff --git a/frontend/src/views/Pages/UserProfileTransactionList.vue b/frontend/src/views/Pages/UserProfileTransactionList.vue
index 6b1a32d48..1da6c2831 100644
--- a/frontend/src/views/Pages/UserProfileTransactionList.vue
+++ b/frontend/src/views/Pages/UserProfileTransactionList.vue
@@ -1,10 +1,6 @@
 <template>
   <div>
-    <div
-      class="header pb-8 pt-lg-4 d-flex align-items-center profile-header"
-      style="max-height: 200px"
-    ></div>
-    <b-container fluid class="mt--6">
+    <b-container fluid>
       <b-row>
         <b-col class="order-xl-1">
           <gdd-table