Merge branch 'master' into change_password_require_password

frontend/package.json

@@ -64,6 +64,7 @@
     "vue-clickaway": "^2.2.2",
     "vue-clipboard2": "^0.3.0",
     "vue-flatpickr-component": "^8.1.2",
+    "vue-focus": "^2.1.0",
     "vue-good-table": "^2.21.3",
     "vue-i18n": "^8.22.4",
     "vue-jest": "^3.0.7",

frontend/src/apis/loginAPI.js

@@ -120,12 +120,12 @@ const loginAPI = {
     }
     return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
   },
-  changeUsernameProfile: async (sessionId, email, usernameNew) => {
+  changeUsernameProfile: async (sessionId, email, username) => {
     const payload = {
       session_id: sessionId,
       email,
       update: {
-        'User.usernameNew': usernameNew,
+        'User.username': username,
       },
     }
     return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)

frontend/src/locales/de.json

@@ -56,8 +56,8 @@
     "send_transaction_success":"Deine Transaktion wurde erfolgreich ausgeführt",
     "send_transaction_error":"Leider konnte die Transaktion nicht ausgeführt werden!",
     "validation": {
-      "double": "Das Feld {field} muss eine Dezimalzahl mit zwei Nachkommastellen sein",
-      "is-not": "Du kannst Dir selbst keine Gradidos überweisen"
+      "gddSendAmount": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens zwei Nachkommastellen sein",
+      "is-not": "Du kannst dir selbst keine Gradidos überweisen"
     },
     "change_username_info": "Das ändern des Usernamens bedarf mehrerer Schritte."
   },

frontend/src/locales/en.json

@@ -56,7 +56,7 @@
     "send_transaction_success":"Your transaction was successfully completed",
     "send_transaction_error":"Unfortunately, the transaction could not be executed!",
     "validation": {
-      "double": "The {field} field must be a decimal with two digits",
+      "gddSendAmount": "The {_field_} field must be a number between {min} and {max} with at most two digits",
       "is-not": "You cannot send Gradidos to yourself"
     },
     "change_username_info": "Changing the username requires several steps."

frontend/src/main.js

@@ -4,7 +4,7 @@ import App from './App.vue'
 import i18n from './i18n.js'
 import { configure, extend } from 'vee-validate'
 // eslint-disable-next-line camelcase
-import { required, email, min, between, double, is_not } from 'vee-validate/dist/rules'
+import { required, email, min, max, is_not } from 'vee-validate/dist/rules'
 
 // store
 import { store } from './store/store'
@@ -46,14 +46,18 @@ extend('min', {
   message: (_, values) => i18n.t('validations.messages.min', values),
 })
 
-extend('double', {
-  ...double,
-  message: (_, values) => i18n.t('form.validation.double', values),
+extend('max', {
+  ...max,
+  message: (_, values) => i18n.t('validations.messages.max', values),
 })
 
-extend('between', {
-  ...between,
-  message: (_, values) => i18n.t('validations.messages.between', values),
+extend('gddSendAmount', {
+  validate(value, { min, max }) {
+    value = value.replace(',', '.')
+    return value.match(/^[0-9]+(\.[0-9]{1,2})?$/) && Number(value) >= min && Number(value) <= max
+  },
+  params: ['min', 'max'],
+  message: (_, values) => i18n.t('form.validation.gddSendAmount', values),
 })
 
 // eslint-disable-next-line camelcase

frontend/src/plugins/globalDirectives.js

@@ -1,4 +1,5 @@
 import clickOutside from '@/directives/click-ouside.js'
+import { focus } from 'vue-focus'
 
 /**
  * You can register global directives here and use them as a plugin in your main Vue instance
@@ -7,6 +8,7 @@ import clickOutside from '@/directives/click-ouside.js'
 const GlobalDirectives = {
   install(Vue) {
     Vue.directive('click-outside', clickOutside)
+    Vue.directive('focus', focus)
   },
 }
 

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -2,6 +2,7 @@
   <div>
     <side-bar @logout="logout" :balance="balance" :pending="pending">
       <template slot="links">
+        <p></p>
         <sidebar-item
           :link="{
             name: $t('send'),

frontend/src/views/Pages/AccountOverview.vue

@@ -97,7 +97,7 @@ export default {
   methods: {
     setTransaction(data) {
       data.target_date = new Date(Date.now()).toISOString()
-      this.transactionData = { ...data }
+      this.transactionData = data
       this.currentTransactionStep = 1
     },
     async sendTransaction() {

frontend/src/views/Pages/AccountOverview/GddSend/TransactionConfirmation.vue

@@ -1,44 +1,46 @@
 <template>
-  <b-row>
-    <b-col>
-      <div class="display-4 p-4">{{ $t('form.send_check') }}</div>
-      <b-list-group>
-        <b-list-group-item class="d-flex justify-content-between align-items-center">
-          {{ email }}
-          <b-badge variant="primary" pill>{{ $t('form.receiver') }}</b-badge>
-        </b-list-group-item>
-        <b-list-group-item class="d-flex justify-content-between align-items-center">
-          {{ amount }} GDD
-          <b-badge variant="primary" pill>{{ $t('form.amount') }}</b-badge>
-        </b-list-group-item>
-        <b-list-group-item class="d-flex justify-content-between align-items-center">
-          {{ memo ? memo : '-' }}
-          <b-badge variant="primary" pill>{{ $t('form.message') }}</b-badge>
-        </b-list-group-item>
-        <b-list-group-item class="d-flex justify-content-between align-items-center">
-          {{ $d($moment(date), 'long') }}
-          <b-badge variant="primary" pill>{{ $t('form.date') }}</b-badge>
-        </b-list-group-item>
-      </b-list-group>
-      <b-row>
-        <b-col>
-          <b-button @click="$emit('on-reset')">{{ $t('form.cancel') }}</b-button>
-        </b-col>
-        <b-col class="text-right">
-          <b-button variant="success" :disabled="loading" @click="$emit('send-transaction')">
-            {{ $t('form.send_now') }}
-          </b-button>
-        </b-col>
-      </b-row>
-    </b-col>
-  </b-row>
+  <div>
+    <b-row>
+      <b-col>
+        <div class="display-4 p-4">{{ $t('form.send_check') }}</div>
+        <b-list-group>
+          <b-list-group-item class="d-flex justify-content-between align-items-center">
+            {{ email }}
+            <b-badge variant="primary" pill>{{ $t('form.receiver') }}</b-badge>
+          </b-list-group-item>
+          <b-list-group-item class="d-flex justify-content-between align-items-center">
+            {{ $n(amount, 'decimal') }} GDD
+            <b-badge variant="primary" pill>{{ $t('form.amount') }}</b-badge>
+          </b-list-group-item>
+          <b-list-group-item class="d-flex justify-content-between align-items-center">
+            {{ memo ? memo : '-' }}
+            <b-badge variant="primary" pill>{{ $t('form.message') }}</b-badge>
+          </b-list-group-item>
+          <b-list-group-item class="d-flex justify-content-between align-items-center">
+            {{ $d($moment(date), 'long') }}
+            <b-badge variant="primary" pill>{{ $t('form.date') }}</b-badge>
+          </b-list-group-item>
+        </b-list-group>
+      </b-col>
+    </b-row>
+    <b-row class="mt-4">
+      <b-col>
+        <b-button @click="$emit('on-reset')">{{ $t('form.cancel') }}</b-button>
+      </b-col>
+      <b-col class="text-right">
+        <b-button variant="success" :disabled="loading" @click="$emit('send-transaction')">
+          {{ $t('form.send_now') }}
+        </b-button>
+      </b-col>
+    </b-row>
+  </div>
 </template>
 <script>
 export default {
   name: 'TransactionConfirmation',
   props: {
     email: { type: String, default: '' },
-    amount: { type: String, default: '' },
+    amount: { type: Number, default: 0 },
     memo: { type: String, default: '' },
     date: { type: String, default: '' },
     loading: { type: Boolean, default: false },

frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js

@@ -56,8 +56,8 @@ describe('GddSend', () => {
       })
 
       describe('ammount field', () => {
-        it('has an input field of type number', () => {
-          expect(wrapper.find('#input-group-2').find('input').attributes('type')).toBe('number')
+        it('has an input field of type text', () => {
+          expect(wrapper.find('#input-group-2').find('input').attributes('type')).toBe('text')
         })
 
         it('has an GDD text icon', () => {

frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue

@@ -53,10 +53,9 @@
                 :name="$t('form.amount')"
                 :rules="{
                   required: true,
-                  double: [2, $i18n.locale === 'de' ? ',' : '.'],
-                  between: [0.01, balance],
+                  gddSendAmount: [0.01, balance],
                 }"
-                v-slot="{ errors }"
+                v-slot="{ errors, valid }"
               >
                 <b-row>
                   <b-col class="text-left p-3 p-sm-1">{{ $t('form.amount') }}</b-col>
@@ -77,10 +76,11 @@
                   <b-form-input
                     id="input-2"
                     v-model="form.amount"
-                    type="number"
-                    :lang="$i18n.locale"
+                    type="text"
+                    v-focus="amountFocused"
+                    @focus="amountFocused = !amountFocused"
+                    @blur="normalizeAmount(valid)"
                     :placeholder="$n(0.01)"
-                    step="0.01"
                     style="font-size: xx-large; padding-left: 20px"
                   ></b-form-input>
                 </b-input-group>
@@ -152,18 +152,21 @@ export default {
   },
   data() {
     return {
+      amountFocused: false,
       form: {
         email: '',
         amount: '',
         memo: '',
+        amountValue: 0.0,
       },
     }
   },
   methods: {
     onSubmit() {
+      this.normalizeAmount()
       this.$emit('set-transaction', {
         email: this.form.email,
-        amount: this.form.amount,
+        amount: this.form.amountValue,
         memo: this.form.memo,
       })
     },
@@ -177,6 +180,12 @@ export default {
       this.form.email = data.email
       this.form.amount = data.amount
     },
+    normalizeAmount(isValid) {
+      this.amountFocused = !this.amountFocused
+      if (!isValid) return
+      this.form.amountValue = Number(this.form.amount.replace(',', '.'))
+      this.form.amount = this.$n(this.form.amountValue, 'decimal')
+    },
   },
 }
 </script>

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

@@ -6,31 +6,36 @@
       style="background-color: #ebebeba3 !important"
     >
       <b-container>
-        <b-row class="mb-4 text-right">
-          <b-col class="text-right">
-            <a href="#userdata_form" v-if="editUserdata" @click="editUserdata = !editUserdata">
-              <span>{{ $t('form.edit') }}</span>
-            </a>
-            <div v-else>
-              <a href="#userdata_form" @click="onSubmit">
-                <span class="mr-4 text-success display-4">{{ $t('form.save') }}</span>
-              </a>
-              <a href="#userdata_form" @click="editUserdata = !editUserdata">
-                <span>
-                  <b>{{ $t('form.cancel') }}</b>
-                </span>
-              </a>
-            </div>
+        <b-row class="text-right">
+          <b-col class="mb-3">
+            <b-icon
+              v-if="editUserdata"
+              @click="editUserdata = !editUserdata"
+              class="pointer"
+              icon="pencil"
+            >
+              {{ $t('form.change') }}
+            </b-icon>
+
+            <b-icon
+              v-else
+              @click="editUserdata = !editUserdata"
+              class="pointer"
+              icon="x-circle"
+              variant="danger"
+            ></b-icon>
           </b-col>
         </b-row>
+      </b-container>
 
-        <div>
+      <b-container>
+        <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-md-9 col-sm-10">
-              {{ form.firstName }}
+            <b-col v-if="editUserdata" class="col-sm-10 col-md-9">
+              {{ $store.state.firstName }}
             </b-col>
             <b-col v-else class="col-md-9 col-sm-10">
               <b-input type="text" v-model="form.firstName"></b-input>
@@ -40,8 +45,8 @@
             <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 v-if="editUserdata" class="col-sm-10 col-md-9">
+              {{ $store.state.lastName }}
             </b-col>
             <b-col v-else class="col-md-9 col-sm-10">
               <b-input type="text" v-model="form.lastName"></b-input>
@@ -51,14 +56,30 @@
             <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 v-if="editUserdata" class="col-sm-10 col-md-9">
+              {{ $store.state.description }}
             </b-col>
-            <b-col v-else class="col-md-9 col-sm-10">
+            <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>
-        </div>
+
+          <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>
@@ -80,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,
@@ -98,6 +131,7 @@ export default {
         this.$store.commit('lastName', this.form.lastName)
         this.$store.commit('description', this.form.description)
         this.editUserdata = true
+        alert('Deine Daten wurden gespeichert und sind geändert.')
       } else {
         alert(result.result.message)
       }

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(

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

@@ -1,42 +1,61 @@
 <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="edit_username" @click="edit_username = !edit_username">
-            <span>{{ $t('form.username') }} {{ $t('form.change') }}</span>
-          </a>
-          <div v-else>
-            <a href="#formusername" @click="edit_username = !edit_username">
-              <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="pencil"
+          >
+            {{ $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="edit_username" class="col-md-9 col-sm-10">@{{ $store.state.username }}</b-col>
-        <b-col v-else class="col-md-9 col-sm-10">
-          <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
-            <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-              <b-form-input v-model="username" :placeholder="$store.state.username"></b-form-input>
+        <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-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">
+              <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="submit" 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>
@@ -47,16 +66,27 @@ export default {
   name: 'FormUsername',
   data() {
     return {
-      edit_username: true,
-      username: '',
+      editUsername: true,
+      username: this.$store.state.username,
+      form: {
+        username: this.$store.state.username,
+      },
     }
   },
+  props: {
+    UserProfileTestData: { type: Object },
+  },
   methods: {
     async onSubmit() {
-      // console.log(this.data)
-      const result = await loginAPI.changeUsernameProfile(this.username)
+      const result = await loginAPI.changeUsernameProfile(
+        this.$store.state.sessionId,
+        this.$store.state.email,
+        this.form.username,
+      )
       if (result.success) {
-        alert('changeUsername success')
+        this.$store.commit('username', this.form.username)
+        this.editUserdata = this.editUsername = !this.editUsername
+        alert('Dein Username wurde geändert.')
       } else {
         alert(result.result.message)
       }

frontend/test/testSetup.js

@@ -19,6 +19,7 @@ import StatsCard from '@/components/Cards/StatsCard.vue'
 import VueMoment from 'vue-moment'
 
 import clickOutside from '@/directives/click-ouside.js'
+import { focus } from 'vue-focus'
 
 global.localVue = createLocalVue()
 
@@ -47,3 +48,4 @@ global.localVue.component(BaseHeader.name, BaseHeader)
 global.localVue.component(StatsCard.name, StatsCard)
 
 global.localVue.directive('click-outside', clickOutside)
+global.localVue.directive('focus', focus)

frontend/yarn.lock

@@ -13342,6 +13342,13 @@ vue-flatpickr-component@^8.1.2:
   dependencies:
     flatpickr "^4.6.6"
 
+vue-focus@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/vue-focus/-/vue-focus-2.1.0.tgz#7a0337ce9074d5ef03d15a4b5b862cf45e5e04e3"
+  integrity sha1-egM3zpB01e8D0VpLW4Ys9F5eBOM=
+  dependencies:
+    loose-envify "^1.2.0"
+
 vue-functional-data-merge@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz#08a7797583b7f35680587f8a1d51d729aa1dc657"