From 483c5d2618c8af84cb5b9d179095e8680c9bd2f0 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Tue, 8 Jun 2021 16:37:31 +0200 Subject: [PATCH 1/8] improve validation of gdd send amount input field --- frontend/src/views/Pages/AccountOverview.vue | 2 +- .../Pages/AccountOverview/GddSend/TransactionForm.vue | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue index 5f262f627..50680f462 100644 --- a/frontend/src/views/Pages/AccountOverview.vue +++ b/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() { diff --git a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue b/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue index 3a38d49db..563827120 100644 --- a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue +++ b/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue @@ -52,9 +52,9 @@ @@ -80,6 +80,8 @@ type="number" :lang="$i18n.locale" :placeholder="$n(0.01)" + min="0.01" + :max="balance" step="0.01" style="font-size: xx-large; padding-left: 20px" > From e804aa655c8db2a40cfd05259fba3d53312adb33 Mon Sep 17 00:00:00 2001 From: ogerly Date: Tue, 8 Jun 2021 17:01:36 +0200 Subject: [PATCH 2/8] Feature: Cange Username --- frontend/src/apis/loginAPI.js | 6 ++- .../UserProfile/UserCard_FormUsername.vue | 37 +++++++++++++------ 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/frontend/src/apis/loginAPI.js b/frontend/src/apis/loginAPI.js index 91e92a2cc..3ba7b576a 100644 --- a/frontend/src/apis/loginAPI.js +++ b/frontend/src/apis/loginAPI.js @@ -120,12 +120,14 @@ const loginAPI = { } return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload) }, - changeUsernameProfile: async (sessionId, email, usernameNew) => { + changeUsernameProfile: async (sessionId, email, username) => { + console.log('changeUsernameProfile', username) + const payload = { session_id: sessionId, email, update: { - 'User.usernameNew': usernameNew, + 'User.username': username, }, } return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload) diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue index b195f6ef6..7e6b67df6 100644 --- a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue +++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue @@ -3,11 +3,11 @@ - + {{ $t('form.username') }} {{ $t('form.change') }}
- + {{ $t('form.cancel') }} @@ -20,16 +20,16 @@ {{ $t('form.username') }} - @{{ $store.state.username }} + @{{ username }} - - - + + +
{{ $t('form.change_username_info') }}
- + {{ $t('form.save') }}
@@ -47,16 +47,29 @@ 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) + console.log('onSubmit', this.form.username) + const result = await loginAPI.changeUsernameProfile( + this.$store.state.sessionId, + this.$store.state.email, + { + username: this.form.username, + }, + ) if (result.success) { - alert('changeUsername success') + this.$store.commit('username', this.form.username) + this.editUserdata = true } else { alert(result.result.message) } From a7009f935db0dcbfa10823a8836ba1469ef97510 Mon Sep 17 00:00:00 2001 From: ogerly Date: Tue, 8 Jun 2021 17:09:40 +0200 Subject: [PATCH 3/8] change api caall --- .../src/views/Pages/UserProfile/UserCard_FormUsername.vue | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue index 7e6b67df6..371d6a2e9 100644 --- a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue +++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue @@ -62,10 +62,8 @@ export default { console.log('onSubmit', this.form.username) const result = await loginAPI.changeUsernameProfile( this.$store.state.sessionId, - this.$store.state.email, - { - username: this.form.username, - }, + this.$store.state.email, + this.form.username, ) if (result.success) { this.$store.commit('username', this.form.username) From 34ba7abd42347da9fd2db18e673884199147db96 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Tue, 8 Jun 2021 22:22:02 +0200 Subject: [PATCH 4/8] refactor validation of GDD send amount input field --- frontend/package.json | 1 + frontend/src/locales/de.json | 2 +- frontend/src/locales/en.json | 2 +- frontend/src/main.js | 18 +++-- frontend/src/plugins/globalDirectives.js | 2 + .../GddSend/TransactionConfirmation.vue | 70 ++++++++++--------- .../GddSend/TransactionForm.spec.js | 4 +- .../GddSend/TransactionForm.vue | 27 ++++--- frontend/test/testSetup.js | 2 + frontend/yarn.lock | 7 ++ 10 files changed, 80 insertions(+), 55 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 68b4a5807..34ce37b76 100755 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index 81fb90972..0729cbbeb 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -48,7 +48,7 @@ "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", + "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" } }, diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index 58ebbf9f1..c99a5e204 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -48,7 +48,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" } }, diff --git a/frontend/src/main.js b/frontend/src/main.js index 5584ae508..20c8ffcb8 100755 --- a/frontend/src/main.js +++ b/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 diff --git a/frontend/src/plugins/globalDirectives.js b/frontend/src/plugins/globalDirectives.js index 47be32e27..56d8c9e13 100755 --- a/frontend/src/plugins/globalDirectives.js +++ b/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) }, } diff --git a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionConfirmation.vue b/frontend/src/views/Pages/AccountOverview/GddSend/TransactionConfirmation.vue index 4749a0a60..b4852df48 100644 --- a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionConfirmation.vue +++ b/frontend/src/views/Pages/AccountOverview/GddSend/TransactionConfirmation.vue @@ -1,44 +1,46 @@ diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js index f9c49880e..7af8631ea 100644 --- a/frontend/test/testSetup.js +++ b/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) diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 333df7d04..a3a835813 100644 --- a/frontend/yarn.lock +++ b/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" From 519d5fec2f84624de5efa08c0b1d4707003f6a09 Mon Sep 17 00:00:00 2001 From: ogerly Date: Wed, 9 Jun 2021 10:21:58 +0200 Subject: [PATCH 5/8] 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 @@ @@ -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) } From 7ea10b0c5dd6ed36ec29c62c36c0e9cb9ba0efbd Mon Sep 17 00:00:00 2001 From: ogerly Date: Wed, 9 Jun 2021 10:55:55 +0200 Subject: [PATCH 6/8] change userdata css style --- .../UserProfile/UserCard_FormUserData.vue | 114 ++++++++++-------- 1 file changed, 64 insertions(+), 50 deletions(-) diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue index a1f6a5919..79e8df37b 100644 --- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue +++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue @@ -6,59 +6,72 @@ style="background-color: #ebebeba3 !important" > - - - - {{ $t('form.edit') }} - - + + + + {{ $t('form.change') }} + + + + + + + + + + + {{ $t('form.firstname') }} + + + {{ form.firstName }} + + + + + + + + {{ $t('form.lastname') }} + + + {{ form.lastName }} + + + + + + + + {{ $t('form.description') }} + + + {{ form.description }} + + + -
- - - {{ $t('form.firstname') }} - - - {{ form.firstName }} - - - - - - - - {{ $t('form.lastname') }} - - - {{ form.lastName }} - - - - - - - - {{ $t('form.description') }} - - - {{ form.description }} - - - - - -
+ + +
+ + {{ $t('form.save') }} + +
+ +
@@ -98,6 +111,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) } From a21e88ac94175d780d68378451f23b2b040e3a2a Mon Sep 17 00:00:00 2001 From: ogerly Date: Thu, 10 Jun 2021 15:53:27 +0200 Subject: [PATCH 7/8] 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 @@
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') }} @@ -29,49 +29,57 @@ - - - {{ $t('form.firstname') }} - - - {{ form.firstName }} - - - - - - - - {{ $t('form.lastname') }} - - - {{ form.lastName }} - - - - - - - - {{ $t('form.description') }} - - - {{ form.description }} - - - - - + + + + {{ $t('form.firstname') }} + + + {{ form.firstName }} + + + + + + + + {{ $t('form.lastname') }} + + + {{ form.lastName }} + + + + + + + + {{ $t('form.description') }} + + + {{ form.description }} + + + + + - - -
- - {{ $t('form.save') }} - -
- - + + +
+ + {{ $t('form.save') }} + +
+ + +
@@ -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 @@ @@ -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') }} @@ -32,6 +32,9 @@ + + {{ $t('form.username') }} + From 0978b3e627d99871bb4ca9d0393c3f351275764b Mon Sep 17 00:00:00 2001 From: ogerly Date: Thu, 10 Jun 2021 17:45:23 +0200 Subject: [PATCH 8/8] fix lint --- .../src/views/Layout/DashboardLayout_gdd.vue | 38 +++++++++---------- .../UserProfile/UserCard_FormUserData.vue | 6 +-- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue index ce4d29768..564b4e430 100755 --- a/frontend/src/views/Layout/DashboardLayout_gdd.vue +++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue @@ -2,25 +2,25 @@
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue index 3bb1c48ae..e07313c96 100644 --- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue +++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue @@ -35,7 +35,7 @@ {{ $t('form.firstname') }} - {{ form.firstName }} + {{ $store.state.firstName }} @@ -46,7 +46,7 @@ {{ $t('form.lastname') }} - {{ form.lastName }} + {{ $store.state.lastName }} @@ -57,7 +57,7 @@ {{ $t('form.description') }} - {{ form.description }} + {{ $store.state.description }}