From 34ba7abd42347da9fd2db18e673884199147db96 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Tue, 8 Jun 2021 22:22:02 +0200 Subject: [PATCH] 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"