From 519d5fec2f84624de5efa08c0b1d4707003f6a09 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Wed, 9 Jun 2021 10:21:58 +0200
Subject: [PATCH] username change and save

---
 frontend/src/apis/loginAPI.js                 |  2 -
 .../UserProfile/UserCard_FormUsername.vue     | 62 ++++++++++++-------
 2 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/frontend/src/apis/loginAPI.js b/frontend/src/apis/loginAPI.js
index 3ba7b576a..2eeec754e 100644
--- a/frontend/src/apis/loginAPI.js
+++ b/frontend/src/apis/loginAPI.js
@@ -121,8 +121,6 @@ const loginAPI = {
     return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
   },
   changeUsernameProfile: async (sessionId, email, username) => {
-    console.log('changeUsernameProfile', username)
-
     const payload = {
       session_id: sessionId,
       email,
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
index 371d6a2e9..445c69f8e 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
@@ -1,42 +1,58 @@
 <template>
   <b-card id="formusername" class="bg-transparent" style="background-color: #ebebeba3 !important">
     <b-container>
-      <b-row class="mb-4 text-right">
-        <b-col class="text-right">
-          <a href="#formusername" v-if="editUsername" @click="editUsername = !editUsername">
-            <span>{{ $t('form.username') }} {{ $t('form.change') }}</span>
-          </a>
-          <div v-else>
-            <a href="#formusername" @click="editUsername = !editUsername">
-              <span>
-                <b>{{ $t('form.cancel') }}</b>
-              </span>
-            </a>
-          </div>
+      <b-row class="text-right">
+        <b-col class="mb-3">
+          <b-icon
+            v-if="editUsername"
+            @click="editUsername = !editUsername"
+            class="pointer"
+            icon="gear-fill"
+          >
+            {{ $t('form.change') }}
+          </b-icon>
+
+          <b-icon
+            v-else
+            @click="editUsername = !editUsername"
+            class="pointer"
+            icon="x-circle"
+            variant="danger"
+          ></b-icon>
         </b-col>
       </b-row>
-
+    </b-container>
+    <b-container v-if="editUsername">
       <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="editUsername" class="col-md-9 col-sm-10">@{{ username }}</b-col>
-        <b-col v-else class="col-md-9 col-sm-10">
+        <b-col class="col-md-9 col-sm-10">@{{ username }}</b-col>
+      </b-row>
+    </b-container>
+    <b-container v-else>
+      <b-row class="mb-3">
+        <b-col class="col-md-9 col-sm-10">
           <validation-observer ref="formValidator">
             <b-form role="form">
               <b-form-input v-model="form.username" :placeholder="username"></b-form-input>
               <div>
                 {{ $t('form.change_username_info') }}
               </div>
-              <div class="text-center" ref="submitButton">
-                <b-button type="button" @click="onSubmit" class="mt-4">
-                  {{ $t('form.save') }}
-                </b-button>
-              </div>
             </b-form>
           </validation-observer>
         </b-col>
       </b-row>
+
+      <b-row class="text-right">
+        <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-container>
   </b-card>
 </template>
@@ -59,15 +75,15 @@ export default {
   },
   methods: {
     async onSubmit() {
-      console.log('onSubmit', this.form.username)
       const result = await loginAPI.changeUsernameProfile(
         this.$store.state.sessionId,
-        this.$store.state.email,      
+        this.$store.state.email,
         this.form.username,
       )
       if (result.success) {
         this.$store.commit('username', this.form.username)
-        this.editUserdata = true
+        this.editUserdata = this.editUsername = !this.editUsername
+        alert('Dein Username wurde geändert.')
       } else {
         alert(result.result.message)
       }