From 4ee158bf3281bb52b49d3d5c4ef8f86e932fccdb Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 10 May 2021 20:55:30 +0200
Subject: [PATCH] validation of input fields of GddSend

---
 frontend/src/locales/de.json                  |   5 +-
 frontend/src/locales/en.json                  |   5 +-
 frontend/src/main.js                          |  34 +++++
 frontend/src/vee-validate.js                  |  25 ----
 .../Pages/AccountOverview/GddSend.spec.js     |   4 +
 .../views/Pages/AccountOverview/GddSend.vue   | 136 ++++++++++--------
 6 files changed, 123 insertions(+), 86 deletions(-)
 delete mode 100644 frontend/src/vee-validate.js

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index b297bfc81..f3897f112 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -44,7 +44,10 @@
     "max_gdd_info":"maximale anzahl GDD zum versenden erreicht!",
     "send_check":"Bestätige deine Zahlung. Prüfe bitte nochmal alle Daten!",
     "thx":"Danke,",
-    "send_success":"deine Transaktion wurde erfolgreich ausgeführt"
+    "send_success":"deine Transaktion wurde erfolgreich ausgeführt",
+    "validation": {
+      "double": "Das Feld {field} muss eine Dezimalzahl mit zwei Nachkommastellen sein"
+    }
   },
   "error": {
     "error":"Fehler"
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index a49d6fc3d..a5173c2be 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -44,7 +44,10 @@
     "max_gdd_info":"maximale anzahl GDD zum versenden erreicht!",
     "send_check":"Bestätige deine Zahlung. Prüfe bitte nochmal alle Daten!",
     "thx":"Thank you,",
-    "send_success":"your transaction was successfully completed"
+    "send_success":"your transaction was successfully completed",
+    "validation": {
+      "double": "The {field} field must be a decimal with two digits"
+    }
   },
   "error": {
     "error":"Error"
diff --git a/frontend/src/main.js b/frontend/src/main.js
index bd57c6e57..94889e390 100755
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -2,6 +2,8 @@ import Vue from 'vue'
 import DashboardPlugin from './plugins/dashboard-plugin'
 import App from './App.vue'
 import i18n from './i18n.js'
+import { configure, extend } from 'vee-validate'
+import { required, email, min, between, double } from 'vee-validate/dist/rules'
 
 // store
 import { store } from './store/store'
@@ -21,6 +23,38 @@ router.beforeEach((to, from, next) => {
   }
 })
 
+configure({
+  defaultMessage: (field, values) => {
+    values._field_ = i18n.t(`fields.${field}`)
+    return i18n.t(`validations.messages.${values._rule_}`, values)
+  },
+})
+
+extend('email', {
+  ...email,
+  message: (_, values) => i18n.t('validations.messages.email', values),
+})
+
+extend('required', {
+  ...required,
+  message: (_, values) => i18n.t('validations.messages.required', values),
+})
+
+extend('min', {
+  ...min,
+  message: (_, values) => i18n.t('validations.messages.min', values),
+})
+
+extend('double', {
+  ...double,
+  message: (_, values) => i18n.t('form.validation.double', values),
+})
+
+extend('between', {
+  ...between,
+  message: (_, values) => i18n.t('validations.messages.between', values),
+})
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
diff --git a/frontend/src/vee-validate.js b/frontend/src/vee-validate.js
deleted file mode 100644
index 42e4c9c94..000000000
--- a/frontend/src/vee-validate.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { configure, extend } from 'vee-validate'
-import { required, email, min } from 'vee-validate/dist/rules'
-import i18n from './i18n'
-
-configure({
-  defaultMessage: (field, values) => {
-    values._field_ = i18n.t(`fields.${field}`)
-    return i18n.t(`validations.messages.${values._rule_}`, values)
-  },
-})
-
-extend('email', {
-  ...email,
-  message: (_, values) => i18n.t('validations.messages.email', values),
-})
-
-extend('required', {
-  ...required,
-  message: (_, values) => i18n.t('validations.messages.required', values),
-})
-
-extend('min', {
-  ...min,
-  message: (_, values) => i18n.t('validations.messages.min', values),
-})
diff --git a/frontend/src/views/Pages/AccountOverview/GddSend.spec.js b/frontend/src/views/Pages/AccountOverview/GddSend.spec.js
index ffc8fd211..c281f5176 100644
--- a/frontend/src/views/Pages/AccountOverview/GddSend.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GddSend.spec.js
@@ -24,6 +24,10 @@ describe('GddSend', () => {
     $moment: jest.fn((m) => ({
       format: () => m,
     })),
+    $i18n: {
+      locale: jest.fn(() => 'en'),
+    },
+    $n: jest.fn((n) => String(n)),
   }
 
   const Wrapper = () => {
diff --git a/frontend/src/views/Pages/AccountOverview/GddSend.vue b/frontend/src/views/Pages/AccountOverview/GddSend.vue
index b7d805988..3693e8930 100644
--- a/frontend/src/views/Pages/AccountOverview/GddSend.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddSend.vue
@@ -53,69 +53,84 @@
               </div>
               <br />
               <div>
-                <b-col class="text-left p-3 p-sm-1">{{ $t('form.receiver') }}</b-col>
-
-                <b-input-group
-                  id="input-group-1"
-                  label="Empfänger:"
-                  label-for="input-1"
-                  description="We'll never share your email with anyone else."
-                  size="lg"
-                  class="mb-3"
-                >
-                  <b-input-group-prepend class="p-3 d-none d-md-block">
-                    <b-icon icon="envelope" class="display-3"></b-icon>
-                  </b-input-group-prepend>
-                  <b-form-input
-                    id="input-1"
-                    v-model="form.email"
-                    type="email"
-                    placeholder="E-Mail"
-                    :rules="{ required: true, email: true }"
-                    required
-                    style="font-size: xx-large; padding-left: 20px"
-                  ></b-form-input>
-                </b-input-group>
+                <validation-provider name="Email" rules="required|email" v-slot="{ errors }">
+                  <b-row>
+                    <b-col class="text-left p-3 p-sm-1">{{ $t('form.receiver') }}</b-col>
+                    <b-col v-if="errors" class="text-right p-3 p-sm-1">
+                      <span v-for="error in errors" :key="error" class="errors">{{ error }}</span>
+                    </b-col>
+                  </b-row>
+                  <b-input-group
+                    id="input-group-1"
+                    label="Empfänger:"
+                    label-for="input-1"
+                    description="We'll never share your email with anyone else."
+                    size="lg"
+                    class="mb-3"
+                  >
+                    <b-input-group-prepend class="p-3 d-none d-md-block">
+                      <b-icon icon="envelope" class="display-3"></b-icon>
+                    </b-input-group-prepend>
+                    <b-form-input
+                      id="input-1"
+                      v-model="form.email"
+                      type="email"
+                      placeholder="E-Mail"
+                      style="font-size: xx-large; padding-left: 20px"
+                    ></b-form-input>
+                  </b-input-group>
+                </validation-provider>
               </div>
               <br />
               <div>
-                <b-col class="text-left p-3 p-sm-1">{{ $t('form.amount') }}</b-col>
-                <b-col v-if="balance == form.amount" class="text-right">
-                  <b-badge variant="primary">{{ $t('form.max_gdd_info') }}</b-badge>
-                </b-col>
-                <b-input-group
-                  id="input-group-2"
-                  label="Betrag:"
-                  label-for="input-2"
-                  size="lg"
-                  class="mb-3"
+                <validation-provider
+                  :name="$t('form.amount')"
+                  :rules="{
+                    required: true,
+                    double: [2, $i18n.locale === 'de' ? ',' : '.'],
+                    between: [0.01, balance],
+                  }"
+                  v-slot="{ errors }"
                 >
-                  <b-input-group-prepend class="p-2 d-none d-md-block">
-                    <div class="h3 pt-3 pr-3">GDD</div>
-                  </b-input-group-prepend>
-                  <b-form-input
-                    id="input-2"
-                    v-model="form.amount"
-                    type="number"
-                    placeholder="0.01"
-                    step="0.01"
-                    min="0.01"
-                    :max="balance"
-                    style="font-size: xx-large; padding-left: 20px"
-                  ></b-form-input>
-                </b-input-group>
-                <b-col class="text-left p-3 p-sm-1">{{ $t('form.memo') }}</b-col>
-                <b-input-group id="input-group-3">
-                  <b-input-group-prepend class="p-3 d-none d-md-block">
-                    <b-icon icon="chat-right-text" class="display-3"></b-icon>
-                  </b-input-group-prepend>
-                  <b-form-textarea
-                    rows="3"
-                    v-model="form.memo"
-                    class="pl-3"
-                    style="font-size: x-large"
-                  ></b-form-textarea>
-                </b-input-group>
+                  <b-row>
+                    <b-col class="text-left p-3 p-sm-1">{{ $t('form.amount') }}</b-col>
+                    <b-col v-if="errors" class="text-right p-3 p-sm-1">
+                      <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
+                    </b-col>
+                  </b-row>
+                  <b-input-group
+                    id="input-group-2"
+                    label="Betrag:"
+                    label-for="input-2"
+                    size="lg"
+                    class="mb-3"
+                  >
+                    <b-input-group-prepend class="p-2 d-none d-md-block">
+                      <div class="h3 pt-3 pr-3">GDD</div>
+                    </b-input-group-prepend>
+                    <b-form-input
+                      id="input-2"
+                      v-model="form.amount"
+                      type="number"
+                      :lang="$i18n.locale"
+                      :placeholder="$n(0.01)"
+                      step="0.01"
+                      style="font-size: xx-large; padding-left: 20px"
+                    ></b-form-input>
+                  </b-input-group>
+                  <b-col class="text-left p-3 p-sm-1">{{ $t('form.memo') }}</b-col>
+                  <b-input-group id="input-group-3">
+                    <b-input-group-prepend class="p-3 d-none d-md-block">
+                      <b-icon icon="chat-right-text" class="display-3"></b-icon>
+                    </b-input-group-prepend>
+                    <b-form-textarea
+                      rows="3"
+                      v-model="form.memo"
+                      class="pl-3"
+                      style="font-size: x-large"
+                    ></b-form-textarea>
+                  </b-input-group>
+                </validation-provider>
               </div>
 
               <br />
@@ -294,4 +309,7 @@ video {
   max-height: 665px;
   max-width: 665px;
 }
+span.errors {
+  color: red;
+}
 </style>