mobile friendly, add text, change text

frontend/src/locales/de.json

@@ -59,6 +59,7 @@
     "password_new_repeat":"neues Passwort wiederholen",
     "change": "ändern",
     "change-password": "Passwort ändern",
+    "change-name": "Name ändern",
     "amount":"Betrag",
     "memo":"Nachricht",
     "message":"Nachricht",

frontend/src/locales/en.json

@@ -59,6 +59,7 @@
     "password_new_repeat":"Repeat new password",
     "change": "change",
     "change-password": "Change password",
+    "change-name": "Change name",
     "amount":"Amount",
     "memo":"Message",
     "message":"Message",

frontend/src/views/Pages/UserProfile/UserCard.vue

@@ -3,8 +3,7 @@
     <div class="w-100 text-center">
       <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
     </div>
-    <b-row>
-      <b-col>
+
     <div class="card-profile-stats d-flex justify-content-center mt-md-5">
       <div>
         <span class="heading">
@@ -21,8 +20,6 @@
         <span class="description">{{ $t('community') }}</span>
       </div>
     </div>
-      </b-col>
-    </b-row>
   </b-card>
 </template>
 <script>

frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js

@@ -86,9 +86,9 @@ describe('UserCard_FormUsername', () => {
         await wrapper.findAll('input').at(1).setValue('Lustiger')
         await wrapper.find('textarea').setValue('Keine Nickelbrille')
         await wrapper.find('svg.bi-x-circle').trigger('click')
-        expect(wrapper.findAll('div.col').at(2).text()).toBe('Peter')
-        expect(wrapper.findAll('div.col').at(4).text()).toBe('Lustig')
-        expect(wrapper.findAll('div.col').at(6).text()).toBe('')
+        expect(wrapper.findAll('div.col').at(2).text()).toBe('Petra')
+        expect(wrapper.findAll('div.col').at(4).text()).toBe('Lustiger')
+        expect(wrapper.findAll('div.col').at(6).text()).toBe('Keine Nickelbrille')
       })
 
       it('has a submit button', () => {

frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue

@@ -1,29 +1,22 @@
 <template>
-  <div class="userdata_form">
-    <b-card
+  <div class="userdata_form" fluid="sm">
+    <div
       id="userdata_form"
-      class="bg-transparent"
+      class="bg-transparent pt-3 pb-3"
       style="background-color: #ebebeba3 !important"
     >
       <b-container>
         <b-row class="text-right">
           <b-col class="mb-3">
-            <b-icon
-              v-if="showUserData"
-              @click="showUserData = !showUserData"
-              class="pointer"
-              icon="pencil"
-            >
+            <a href="#!" @click="showUserData = !showUserData">
+              <span class="pointer mr-3">{{ $t('form.change-name') }}</span>
+
+              <b-icon v-if="showUserData" class="pointer" icon="pencil">
                 {{ $t('form.change') }}
               </b-icon>
 
-            <b-icon
-              v-else
-              @click="cancelEdit"
-              class="pointer"
-              icon="x-circle"
-              variant="danger"
-            ></b-icon>
+              <b-icon v-else class="pointer" icon="x-circle" variant="danger"></b-icon>
+            </a>
           </b-col>
         </b-row>
       </b-container>
@@ -81,7 +74,7 @@
           </b-row>
         </b-form>
       </b-container>
-    </b-card>
+    </div>
   </div>
 </template>
 <script>

frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue

@@ -1,22 +1,32 @@
 <template>
-  <b-card id="change_pwd" class="bg-transparent" style="background-color: #ebebeba3 !important">
+  <div
+    id="change_pwd"
+    class="bg-transparent pt-3 pb-3"
+    style="background-color: #ebebeba3 !important"
+  >
     <b-container>
-      <div v-if="!editPassword">
+      <div>
         <b-row class="mb-4 text-right">
           <b-col class="text-right">
-            <a href="#change_pwd" @click="editPassword = !editPassword">
+            <a v-if="!editPassword" href="#change_pwd" @click="editPassword = !editPassword">
               <span>{{ $t('form.change-password') }}</span>
               <b-icon class="pointer ml-3" icon="pencil" />
             </a>
+            <a v-else href="#change_pwd" @click="cancelEdit()">
+              <span>{{ $t('form.change-password') }}</span>
+
+              <b-icon icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
+            </a>
           </b-col>
         </b-row>
       </div>
       <div v-if="editPassword">
-        <b-row class="mb-4 text-right">
+        <!-- <b-row class="mb-4 text-right">
           <b-col class="text-right">
             <b-icon @click="cancelEdit()" class="pointer" icon="x-circle" variant="danger"></b-icon>
           </b-col>
         </b-row>
+        -->
         <validation-observer ref="observer" v-slot="{ handleSubmit }">
           <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
             <b-row class="mb-2">
@@ -42,7 +52,7 @@
         </validation-observer>
       </div>
     </b-container>
-  </b-card>
+  </div>
 </template>
 <script>
 import loginAPI from '../../../apis/loginAPI'

frontend/src/views/Pages/UserProfileOverview.vue

@@ -1,10 +1,11 @@
 <template>
-  <b-container fluid>
+  <div fluid="sm">
     <user-card :balance="balance" :transactionCount="transactionCount"></user-card>
-    <form-user-data />
+    <p><form-user-data /></p>
     <!--<form-username />-->
-    <form-user-passwort />
-  </b-container>
+    <hr />
+    <p><form-user-passwort /></p>
+  </div>
 </template>
 <script>
 import UserCard from './UserProfile/UserCard.vue'