From 3b0c3ee53f096403ddae9a7703a31e7dde227b0e Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 28 Jul 2021 13:19:56 +0200
Subject: [PATCH] mobile friendly, add text, change text

---
 frontend/src/locales/de.json                  |  1 +
 frontend/src/locales/en.json                  |  1 +
 .../src/views/Pages/UserProfile/UserCard.vue  | 37 +++++++++----------
 .../UserProfile/UserCard_FormUserData.spec.js |  6 +--
 .../UserProfile/UserCard_FormUserData.vue     | 31 ++++++----------
 .../UserProfile/UserCard_FormUserPasswort.vue | 20 +++++++---
 .../src/views/Pages/UserProfileOverview.vue   |  9 +++--
 7 files changed, 54 insertions(+), 51 deletions(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 75c07acf8..daf2bf2e9 100644
--- a/frontend/src/locales/de.json
+++ b/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",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 7286c8153..9e574a9ce 100644
--- a/frontend/src/locales/en.json
+++ b/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",
diff --git a/frontend/src/views/Pages/UserProfile/UserCard.vue b/frontend/src/views/Pages/UserProfile/UserCard.vue
index 891bddf6a..6beee221a 100755
--- a/frontend/src/views/Pages/UserProfile/UserCard.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard.vue
@@ -3,26 +3,23 @@
     <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">
-              {{ $n(balance, 'decimal') }}
-            </span>
-            <span class="description">GDD</span>
-          </div>
-          <div>
-            <span class="heading">{{ transactionCount }}</span>
-            <span class="description">{{ $t('transactions') }}</span>
-          </div>
-          <div>
-            <span class="heading">--</span>
-            <span class="description">{{ $t('community') }}</span>
-          </div>
-        </div>
-      </b-col>
-    </b-row>
+
+    <div class="card-profile-stats d-flex justify-content-center mt-md-5">
+      <div>
+        <span class="heading">
+          {{ $n(balance, 'decimal') }}
+        </span>
+        <span class="description">GDD</span>
+      </div>
+      <div>
+        <span class="heading">{{ transactionCount }}</span>
+        <span class="description">{{ $t('transactions') }}</span>
+      </div>
+      <div>
+        <span class="heading">--</span>
+        <span class="description">{{ $t('community') }}</span>
+      </div>
+    </div>
   </b-card>
 </template>
 <script>
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js
index 5237a8d63..6df58c8e3 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js
+++ b/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', () => {
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
index 3ad93470d..8f278a4f6 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
+++ b/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"
-            >
-              {{ $t('form.change') }}
-            </b-icon>
+            <a href="#!" @click="showUserData = !showUserData">
+              <span class="pointer mr-3">{{ $t('form.change-name') }}</span>
 
-            <b-icon
-              v-else
-              @click="cancelEdit"
-              class="pointer"
-              icon="x-circle"
-              variant="danger"
-            ></b-icon>
+              <b-icon v-if="showUserData" class="pointer" icon="pencil">
+                {{ $t('form.change') }}
+              </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>
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
index 7921f4037..09b816396 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
+++ b/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'
diff --git a/frontend/src/views/Pages/UserProfileOverview.vue b/frontend/src/views/Pages/UserProfileOverview.vue
index 67073fa60..8768086ff 100644
--- a/frontend/src/views/Pages/UserProfileOverview.vue
+++ b/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'