From a21e88ac94175d780d68378451f23b2b040e3a2a Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Thu, 10 Jun 2021 15:53:27 +0200
Subject: [PATCH] fix profil page bugs

---
 .../src/views/Layout/DashboardLayout_gdd.vue  |  37 ++--
 .../UserProfile/UserCard_FormUserData.vue     | 106 ++++++-----
 .../UserProfile/UserCard_FormUserPasswort.vue | 169 ++++++++++++------
 .../UserProfile/UserCard_FormUsername.vue     |   5 +-
 4 files changed, 202 insertions(+), 115 deletions(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 70a35a40a..ce4d29768 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -2,24 +2,25 @@
   <div>
     <side-bar @logout="logout" :balance="balance" :pending="pending">
       <template slot="links">
-        <sidebar-item
-          :link="{
-            name: $t('send'),
-            path: '/overview',
-          }"
-        ></sidebar-item>
-        <sidebar-item
-          :link="{
-            name: $t('transactions'),
-            path: '/transactions',
-          }"
-        ></sidebar-item>
-        <sidebar-item
-          :link="{
-            name: $t('site.navbar.my-profil'),
-            path: '/profile',
-          }"
-        ></sidebar-item>
+          <p></p>
+          <sidebar-item
+            :link="{
+              name: $t('send'),
+              path: '/overview',
+            }"
+          ></sidebar-item>
+          <sidebar-item
+            :link="{
+              name: $t('transactions'),
+              path: '/transactions',
+            }"
+          ></sidebar-item>
+          <sidebar-item
+            :link="{
+              name: $t('site.navbar.my-profil'),
+              path: '/profile',
+            }"
+          ></sidebar-item>
       </template>
     </side-bar>
     <div class="main-content">
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
index 79e8df37b..3bb1c48ae 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
@@ -12,7 +12,7 @@
               v-if="editUserdata"
               @click="editUserdata = !editUserdata"
               class="pointer"
-              icon="gear-fill"
+              icon="pencil"
             >
               {{ $t('form.change') }}
             </b-icon>
@@ -29,49 +29,57 @@
       </b-container>
 
       <b-container>
-        <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="editUserdata" class="col-md-9 col-sm-10">
-            {{ form.firstName }}
-          </b-col>
-          <b-col v-else class="col-md-9 col-sm-10">
-            <b-input type="text" v-model="form.firstName"></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="editUserdata" class="col-md-9 col-sm-10">
-            {{ form.lastName }}
-          </b-col>
-          <b-col v-else class="col-md-9 col-sm-10">
-            <b-input type="text" v-model="form.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="editUserdata" class="col-md-9 col-sm-10">
-            {{ form.description }}
-          </b-col>
-          <b-col v-else class="col-md-9 col-sm-10">
-            <b-textarea rows="3" max-rows="6" v-model="form.description"></b-textarea>
-          </b-col>
-        </b-row>
+        <b-form @keyup.prevent="loadSubmitButton">
+          <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="editUserdata" class="col-sm-10 col-md-9">
+              {{ form.firstName }}
+            </b-col>
+            <b-col v-else class="col-md-9 col-sm-10">
+              <b-input type="text" v-model="form.firstName"></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="editUserdata" class="col-sm-10 col-md-9">
+              {{ form.lastName }}
+            </b-col>
+            <b-col v-else class="col-md-9 col-sm-10">
+              <b-input type="text" v-model="form.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="editUserdata" class="col-sm-10 col-md-9">
+              {{ form.description }}
+            </b-col>
+            <b-col v-else class="col-sm-10 col-md-9">
+              <b-textarea rows="3" max-rows="6" v-model="form.description"></b-textarea>
+            </b-col>
+          </b-row>
 
-        <b-row class="text-right" v-if="!editUserdata">
-          <b-col>
-            <div class="text-right" ref="submitButton">
-              <b-button variant="info" @click="onSubmit" class="mt-4">
-                {{ $t('form.save') }}
-              </b-button>
-            </div>
-          </b-col>
-        </b-row>
+          <b-row class="text-right" v-if="!editUserdata">
+            <b-col>
+              <div class="text-right" ref="submitButton">
+                <b-button
+                  variant="info"
+                  @click="onSubmit"
+                  type="submit"
+                  class="mt-4"
+                  :disabled="loading"
+                >
+                  {{ $t('form.save') }}
+                </b-button>
+              </div>
+            </b-col>
+          </b-row>
+        </b-form>
       </b-container>
     </b-card>
   </div>
@@ -93,9 +101,21 @@ export default {
         lastName: this.$store.state.lastName,
         description: this.$store.state.description,
       },
+      loading: true,
     }
   },
   methods: {
+    loadSubmitButton() {
+      if (
+        this.form.firstName !== this.$store.state.firstName ||
+        this.form.lastName !== this.$store.state.lastName ||
+        this.form.description !== this.$store.state.description
+      ) {
+        this.loading = false
+      } else {
+        this.loading = true
+      }
+    },
     async onSubmit() {
       const result = await loginAPI.updateUserInfos(
         this.$store.state.sessionId,
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
index e1ade4ae0..6bc1d8942 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
@@ -1,62 +1,105 @@
 <template>
   <b-card id="change_pwd" class="bg-transparent" style="background-color: #ebebeba3 !important">
     <b-container>
-      <b-row class="mb-4 text-right">
-        <b-col class="text-right">
-          <a href="#change_pwd" v-if="edit_pwd" @click="edit_pwd = !edit_pwd">
-            <span>{{ $t('form.password') }} {{ $t('form.change') }}</span>
-          </a>
-          <div v-else>
-            <a href="#change_pwd" @click="onSubmit">
-              <span class="mr-4 text-success display-4">{{ $t('form.save') }}</span>
+      <b-form @keyup.prevent="loadSubmitButton">
+        <b-row class="mb-4 text-right">
+          <b-col class="text-right">
+            <a href="#change_pwd" v-if="edit_pwd" @click="edit_pwd = !edit_pwd">
+              <span>{{ $t('form.password') }} {{ $t('form.change') }}</span>
+              <b-icon class="pointer ml-3" icon="pencil" />
             </a>
-            <a href="#change_pwd" @click="edit_pwd = !edit_pwd">
-              <span>
-                <b>{{ $t('form.cancel') }}</b>
-              </span>
-            </a>
-          </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')"
-              v-model="password"
-            ></b-input>
+            <b-icon
+              v-else
+              @click="edit_pwd = !edit_pwd"
+              class="pointer"
+              icon="x-circle"
+              variant="danger"
+            ></b-icon>
           </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')"
-              v-model="passwordNew"
-            ></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')"
-              v-model="passwordNew2"
-            ></b-input>
-          </b-col>
-        </b-row>
-      </div>
+
+        <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-group>
+                <b-form-input
+                  class="mb-0"
+                  v-model="password"
+                  name="Password"
+                  :type="passwordVisibleOldPwd ? 'text' : 'password'"
+                  prepend-icon="ni ni-lock-circle-open"
+                  :placeholder="$t('form.password_old')"
+                ></b-form-input>
+
+                <b-input-group-append>
+                  <b-button variant="outline-primary" @click="togglePasswordVisibilityOldPwd">
+                    <b-icon :icon="passwordVisibleOldPwd ? 'eye' : 'eye-slash'" />
+                  </b-button>
+                </b-input-group-append>
+              </b-input-group>
+            </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-group>
+                <b-form-input
+                  class="mb-0"
+                  v-model="passwordNew"
+                  name="Password"
+                  :type="passwordVisibleNewPwd ? 'text' : 'password'"
+                  prepend-icon="ni ni-lock-circle-open"
+                  :placeholder="$t('form.password_new')"
+                ></b-form-input>
+
+                <b-input-group-append>
+                  <b-button variant="outline-primary" @click="togglePasswordVisibilityNewPwd">
+                    <b-icon :icon="passwordVisibleNewPwd ? 'eye' : 'eye-slash'" />
+                  </b-button>
+                </b-input-group-append>
+              </b-input-group>
+            </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-group>
+                <b-form-input
+                  class="mb-0"
+                  v-model="passwordNewRepeat"
+                  name="Password"
+                  :type="passwordVisibleNewPwdRepeat ? 'text' : 'password'"
+                  prepend-icon="ni ni-lock-circle-open"
+                  :placeholder="$t('form.password_new_repeat')"
+                ></b-form-input>
+
+                <b-input-group-append>
+                  <b-button variant="outline-primary" @click="togglePasswordVisibilityNewPwdRepeat">
+                    <b-icon :icon="passwordVisibleNewPwdRepeat ? 'eye' : 'eye-slash'" />
+                  </b-button>
+                </b-input-group-append>
+              </b-input-group>
+            </b-col>
+          </b-row>
+          <b-row class="text-right" v-if="!edit_pwd">
+            <b-col>
+              <div class="text-right" ref="submitButton">
+                <b-button variant="info" @click="onSubmit" class="mt-4">
+                  {{ $t('form.save') }}
+                </b-button>
+              </div>
+            </b-col>
+          </b-row>
+        </div>
+      </b-form>
     </b-container>
   </b-card>
 </template>
@@ -71,10 +114,30 @@ export default {
       email: null,
       password: '',
       passwordNew: '',
-      passwordNew2: '',
+      passwordNewRepeat: '',
+      passwordVisibleOldPwd: false,
+      passwordVisibleNewPwd: false,
+      passwordVisibleNewPwdRepeat: false,
+      loading: true,
     }
   },
   methods: {
+    togglePasswordVisibilityNewPwd() {
+      this.passwordVisibleNewPwd = !this.passwordVisibleNewPwd
+    },
+    togglePasswordVisibilityNewPwdRepeat() {
+      this.passwordVisibleNewPwdRepeat = !this.passwordVisibleNewPwdRepeat
+    },
+    togglePasswordVisibilityOldPwd() {
+      this.passwordVisibleOldPwd = !this.passwordVisibleOldPwd
+    },
+    loadSubmitButton() {
+      if (this.passwordVisibleNewPwd === this.passwordVisibleNewPwdRepeat) {
+        this.loading = false
+      } else {
+        this.loading = true
+      }
+    },
     async onSubmit() {
       // console.log(this.data)
       const result = await loginAPI.changePasswordProfile(
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
index 445c69f8e..38738e54a 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
@@ -7,7 +7,7 @@
             v-if="editUsername"
             @click="editUsername = !editUsername"
             class="pointer"
-            icon="gear-fill"
+            icon="pencil"
           >
             {{ $t('form.change') }}
           </b-icon>
@@ -32,6 +32,9 @@
     </b-container>
     <b-container v-else>
       <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 class="col-md-9 col-sm-10">
           <validation-observer ref="formValidator">
             <b-form role="form">