From e91c514696f68e94b7cf660c392c86f60a644075 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 11 May 2023 14:38:37 +0200
Subject: [PATCH] feat(wallet): set username

---
 .../src/components/UserSettings/UserName.vue  | 101 ++++++++++++++++++
 frontend/src/graphql/mutations.js             |   3 +
 frontend/src/locales/de.json                  |   7 +-
 frontend/src/locales/en.json                  |   7 +-
 frontend/src/pages/Settings.vue               |   4 +
 frontend/src/store/store.js                   |  10 +-
 frontend/src/store/store.test.js              |  58 ++++++----
 7 files changed, 164 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/components/UserSettings/UserName.vue

diff --git a/frontend/src/components/UserSettings/UserName.vue b/frontend/src/components/UserSettings/UserName.vue
new file mode 100644
index 000000000..ffc2680ef
--- /dev/null
+++ b/frontend/src/components/UserSettings/UserName.vue
@@ -0,0 +1,101 @@
+<template>
+  <b-card id="username_form" class="card-border-radius card-background-gray">
+    <div>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right">
+          <a
+            class="cursor-pointer"
+            @click="showUserData ? (showUserData = !showUserData) : cancelEdit()"
+          >
+            <span class="pointer mr-3">{{ $t('settings.username.change-username') }}</span>
+            <b-icon v-if="showUserData" class="pointer ml-3" icon="pencil"></b-icon>
+            <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
+          </a>
+        </b-col>
+      </b-row>
+    </div>
+
+    <div>
+      <b-form @keyup.prevent="loadSubmitButton">
+        <b-row class="mb-3">
+          <b-col class="col-12">
+            <small>
+              <b>{{ $t('form.username') }}</b>
+            </small>
+          </b-col>
+          <b-col v-if="showUserData" class="col-12">
+            {{ username }}
+          </b-col>
+          <b-col v-else class="col-12">
+            <b-input type="text" v-model="username"></b-input>
+          </b-col>
+        </b-row>
+        <b-row class="text-right" v-if="!showUserData">
+          <b-col>
+            <div class="text-right" ref="submitButton">
+              <b-button
+                :variant="loading ? 'light' : 'success'"
+                @click="onSubmit"
+                type="submit"
+                class="mt-4"
+                :disabled="loading"
+              >
+                {{ $t('form.save') }}
+              </b-button>
+            </div>
+          </b-col>
+        </b-row>
+      </b-form>
+    </div>
+  </b-card>
+</template>
+<script>
+import { updateUserInfos } from '@/graphql/mutations'
+
+export default {
+  name: 'UserName',
+  data() {
+    return {
+      showUserData: true,
+      username: this.$store.state.username,
+      loading: true,
+    }
+  },
+  methods: {
+    cancelEdit() {
+      this.username = this.$store.state.username
+      this.showUserData = true
+    },
+    loadSubmitButton() {
+      if (this.username !== this.$store.state.username) {
+        this.loading = false
+      } else {
+        this.loading = true
+      }
+    },
+    async onSubmit(event) {
+      event.preventDefault()
+      this.$apollo
+        .mutate({
+          mutation: updateUserInfos,
+          variables: {
+            alias: this.username,
+          },
+        })
+        .then(() => {
+          this.$store.commit('username', this.username)
+          this.showUserData = true
+          this.toastSuccess(this.$t('settings.username.change-success'))
+        })
+        .catch((error) => {
+          this.toastError(error.message)
+        })
+    },
+  },
+}
+</script>
+<style>
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>
diff --git a/frontend/src/graphql/mutations.js b/frontend/src/graphql/mutations.js
index 802ea1818..8a281aad9 100644
--- a/frontend/src/graphql/mutations.js
+++ b/frontend/src/graphql/mutations.js
@@ -26,6 +26,7 @@ export const forgotPassword = gql`
 
 export const updateUserInfos = gql`
   mutation(
+    $alias: String
     $firstName: String
     $lastName: String
     $password: String
@@ -35,6 +36,7 @@ export const updateUserInfos = gql`
     $hideAmountGDT: Boolean
   ) {
     updateUserInfos(
+      alias: $alias
       firstName: $firstName
       lastName: $lastName
       password: $password
@@ -145,6 +147,7 @@ export const login = gql`
   mutation($email: String!, $password: String!, $publisherId: Int) {
     login(email: $email, password: $password, publisherId: $publisherId) {
       gradidoID
+      alias
       firstName
       lastName
       language
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index a5357e6d9..bfddf4405 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -166,6 +166,7 @@
     "thx": "Danke",
     "to": "bis",
     "to1": "an",
+    "username": "Nutzername",
     "validation": {
       "gddCreationTime": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens einer Nachkommastelle sein",
       "gddSendAmount": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens zwei Nachkommastellen sein",
@@ -319,7 +320,11 @@
       "subtitle": "Wenn du dein Passwort vergessen hast, kannst du es hier zurücksetzen."
     },
     "showAmountGDD": "Dein GDD Betrag ist sichtbar.",
-    "showAmountGDT": "Dein GDT Betrag ist sichtbar."
+    "showAmountGDT": "Dein GDT Betrag ist sichtbar.",
+    "username": {
+      "change-username": "Nutzername ändern",
+      "change-success": "Dein Nutzername wurde erfolgreich geändert."
+    }
   },
   "signin": "Anmelden",
   "signup": "Registrieren",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 42f22f709..b8c71a768 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -166,6 +166,7 @@
     "thx": "Thank you",
     "to": "to",
     "to1": "to",
+    "username": "Username",
     "validation": {
       "gddCreationTime": "The field {_field_} must be a number between {min} and {max} with at most one decimal place.",
       "gddSendAmount": "The {_field_} field must be a number between {min} and {max} with at most two digits after the decimal point",
@@ -319,7 +320,11 @@
       "subtitle": "If you have forgotten your password, you can reset it here."
     },
     "showAmountGDD": "Your GDD amount is visible.",
-    "showAmountGDT": "Your GDT amount is visible."
+    "showAmountGDT": "Your GDT amount is visible.",
+    "username": {
+      "change-username": "Change username",
+      "change-success": "Your username has been successfully changed."
+    }
   },
   "signin": "Sign in",
   "signup": "Sign up",
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index 530484d9a..c5ca00f08 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -3,6 +3,8 @@
     <user-card :balance="balance" :transactionCount="transactionCount"></user-card>
     <user-data />
     <hr />
+    <user-name />
+    <hr />
     <user-password />
     <hr />
     <user-language />
@@ -13,6 +15,7 @@
 <script>
 import UserCard from '@/components/UserSettings/UserCard'
 import UserData from '@/components/UserSettings/UserData'
+import UserName from '@/components/UserSettings/UserName'
 import UserPassword from '@/components/UserSettings/UserPassword'
 import UserLanguage from '@/components/UserSettings/UserLanguage'
 import UserNewsletter from '@/components/UserSettings/UserNewsletter'
@@ -22,6 +25,7 @@ export default {
   components: {
     UserCard,
     UserData,
+    UserName,
     UserPassword,
     UserLanguage,
     UserNewsletter,
diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
index f4fea20b7..7716d00de 100644
--- a/frontend/src/store/store.js
+++ b/frontend/src/store/store.js
@@ -16,9 +16,9 @@ export const mutations = {
   gradidoID: (state, gradidoID) => {
     state.gradidoID = gradidoID
   },
-  // username: (state, username) => {
-  //   state.username = username
-  // },
+  username: (state, username) => {
+    state.username = username
+  },
   firstName: (state, firstName) => {
     state.firstName = firstName
   },
@@ -59,7 +59,7 @@ export const actions = {
   login: ({ dispatch, commit }, data) => {
     commit('gradidoID', data.gradidoID)
     commit('language', data.language)
-    // commit('username', data.username)
+    commit('username', data.alias)
     commit('firstName', data.firstName)
     commit('lastName', data.lastName)
     commit('newsletterState', data.klickTipp.newsletterState)
@@ -71,7 +71,7 @@ export const actions = {
   },
   logout: ({ commit, state }) => {
     commit('token', null)
-    // commit('username', '')
+    commit('username', '')
     commit('gradidoID', null)
     commit('firstName', '')
     commit('lastName', '')
diff --git a/frontend/src/store/store.test.js b/frontend/src/store/store.test.js
index cc4d6a284..116594e77 100644
--- a/frontend/src/store/store.test.js
+++ b/frontend/src/store/store.test.js
@@ -26,6 +26,7 @@ const {
   token,
   firstName,
   lastName,
+  username,
   newsletterState,
   publisherId,
   isAdmin,
@@ -104,6 +105,14 @@ describe('Vuex store', () => {
       })
     })
 
+    describe('username', () => {
+      it('sets the state of username', () => {
+        const state = { username: null }
+        username(state, 'peter')
+        expect(state.username).toEqual('peter')
+      })
+    })
+
     describe('newsletterState', () => {
       it('sets the state of newsletterState', () => {
         const state = { newsletterState: null }
@@ -166,6 +175,7 @@ describe('Vuex store', () => {
       const commitedData = {
         gradidoID: 'my-gradido-id',
         language: 'de',
+        alias: 'peter',
         firstName: 'Peter',
         lastName: 'Lustig',
         klickTipp: {
@@ -180,7 +190,7 @@ describe('Vuex store', () => {
 
       it('calls eleven commits', () => {
         login({ commit, state }, commitedData)
-        expect(commit).toHaveBeenCalledTimes(10)
+        expect(commit).toHaveBeenCalledTimes(11)
       })
 
       it('commits gradidoID', () => {
@@ -193,44 +203,49 @@ describe('Vuex store', () => {
         expect(commit).toHaveBeenNthCalledWith(2, 'language', 'de')
       })
 
+      it('commits username', () => {
+        login({ commit, state }, commitedData)
+        expect(commit).toHaveBeenNthCalledWith(3, 'username', 'peter')
+      })
+
       it('commits firstName', () => {
         login({ commit, state }, commitedData)
-        expect(commit).toHaveBeenNthCalledWith(3, 'firstName', 'Peter')
+        expect(commit).toHaveBeenNthCalledWith(4, 'firstName', 'Peter')
       })
 
       it('commits lastName', () => {
         login({ commit, state }, commitedData)
-        expect(commit).toHaveBeenNthCalledWith(4, 'lastName', 'Lustig')
+        expect(commit).toHaveBeenNthCalledWith(5, 'lastName', 'Lustig')
       })
 
       it('commits newsletterState', () => {
         login({ commit, state }, commitedData)
-        expect(commit).toHaveBeenNthCalledWith(5, 'newsletterState', true)
+        expect(commit).toHaveBeenNthCalledWith(6, 'newsletterState', true)
       })
 
       it('commits hasElopage', () => {
         login({ commit, state }, commitedData)
-        expect(commit).toHaveBeenNthCalledWith(6, 'hasElopage', false)
+        expect(commit).toHaveBeenNthCalledWith(7, 'hasElopage', false)
       })
 
       it('commits publisherId', () => {
         login({ commit, state }, commitedData)
-        expect(commit).toHaveBeenNthCalledWith(7, 'publisherId', 1234)
+        expect(commit).toHaveBeenNthCalledWith(8, 'publisherId', 1234)
       })
 
       it('commits isAdmin', () => {
         login({ commit, state }, commitedData)
-        expect(commit).toHaveBeenNthCalledWith(8, 'isAdmin', true)
+        expect(commit).toHaveBeenNthCalledWith(9, 'isAdmin', true)
       })
 
       it('commits hideAmountGDD', () => {
         login({ commit, state }, commitedData)
-        expect(commit).toHaveBeenNthCalledWith(9, 'hideAmountGDD', false)
+        expect(commit).toHaveBeenNthCalledWith(10, 'hideAmountGDD', false)
       })
 
       it('commits hideAmountGDT', () => {
         login({ commit, state }, commitedData)
-        expect(commit).toHaveBeenNthCalledWith(10, 'hideAmountGDT', true)
+        expect(commit).toHaveBeenNthCalledWith(11, 'hideAmountGDT', true)
       })
     })
 
@@ -240,7 +255,7 @@ describe('Vuex store', () => {
 
       it('calls eleven commits', () => {
         logout({ commit, state })
-        expect(commit).toHaveBeenCalledTimes(10)
+        expect(commit).toHaveBeenCalledTimes(11)
       })
 
       it('commits token', () => {
@@ -248,49 +263,54 @@ describe('Vuex store', () => {
         expect(commit).toHaveBeenNthCalledWith(1, 'token', null)
       })
 
+      it('commits username', () => {
+        logout({ commit, state })
+        expect(commit).toHaveBeenNthCalledWith(2, 'username', '')
+      })
+
       it('commits gradidoID', () => {
         logout({ commit, state })
-        expect(commit).toHaveBeenNthCalledWith(2, 'gradidoID', null)
+        expect(commit).toHaveBeenNthCalledWith(3, 'gradidoID', null)
       })
 
       it('commits firstName', () => {
         logout({ commit, state })
-        expect(commit).toHaveBeenNthCalledWith(3, 'firstName', '')
+        expect(commit).toHaveBeenNthCalledWith(4, 'firstName', '')
       })
 
       it('commits lastName', () => {
         logout({ commit, state })
-        expect(commit).toHaveBeenNthCalledWith(4, 'lastName', '')
+        expect(commit).toHaveBeenNthCalledWith(5, 'lastName', '')
       })
 
       it('commits newsletterState', () => {
         logout({ commit, state })
-        expect(commit).toHaveBeenNthCalledWith(5, 'newsletterState', null)
+        expect(commit).toHaveBeenNthCalledWith(6, 'newsletterState', null)
       })
 
       it('commits hasElopage', () => {
         logout({ commit, state })
-        expect(commit).toHaveBeenNthCalledWith(6, 'hasElopage', false)
+        expect(commit).toHaveBeenNthCalledWith(7, 'hasElopage', false)
       })
 
       it('commits publisherId', () => {
         logout({ commit, state })
-        expect(commit).toHaveBeenNthCalledWith(7, 'publisherId', null)
+        expect(commit).toHaveBeenNthCalledWith(8, 'publisherId', null)
       })
 
       it('commits isAdmin', () => {
         logout({ commit, state })
-        expect(commit).toHaveBeenNthCalledWith(8, 'isAdmin', false)
+        expect(commit).toHaveBeenNthCalledWith(9, 'isAdmin', false)
       })
 
       it('commits hideAmountGDD', () => {
         logout({ commit, state })
-        expect(commit).toHaveBeenNthCalledWith(9, 'hideAmountGDD', false)
+        expect(commit).toHaveBeenNthCalledWith(10, 'hideAmountGDD', false)
       })
 
       it('commits hideAmountGDT', () => {
         logout({ commit, state })
-        expect(commit).toHaveBeenNthCalledWith(10, 'hideAmountGDT', true)
+        expect(commit).toHaveBeenNthCalledWith(11, 'hideAmountGDT', true)
       })
       // how to get this working?
       it.skip('calls localStorage.clear()', () => {