From 2320486d6c64ebbfff5f1ec16ea14c6a83a45cb0 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 16 May 2023 05:56:12 +0200
Subject: [PATCH 01/10] identifier input field

---
 frontend/package.json                         |   1 +
 .../components/GddSend/TransactionForm.vue    | 206 +++++++++---------
 .../src/components/Inputs/InputIdentifier.vue |  69 ++++++
 frontend/src/locales/de.json                  |   4 +-
 frontend/src/locales/en.json                  |   4 +-
 frontend/src/validation-rules.js              |  16 ++
 frontend/yarn.lock                            |   5 +
 7 files changed, 200 insertions(+), 105 deletions(-)
 create mode 100644 frontend/src/components/Inputs/InputIdentifier.vue

diff --git a/frontend/package.json b/frontend/package.json
index 7d89fba7c..fb9b4885f 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -50,6 +50,7 @@
     "prettier": "^2.2.1",
     "qrcanvas-vue": "2.1.1",
     "regenerator-runtime": "^0.13.7",
+    "uuid": "^9.0.0",
     "vee-validate": "^3.4.5",
     "vue": "2.6.12",
     "vue-apollo": "^3.0.7",
diff --git a/frontend/src/components/GddSend/TransactionForm.vue b/frontend/src/components/GddSend/TransactionForm.vue
index e887c47e6..41fb400e7 100644
--- a/frontend/src/components/GddSend/TransactionForm.vue
+++ b/frontend/src/components/GddSend/TransactionForm.vue
@@ -51,10 +51,10 @@
                   <b-row>
                     <b-col cols="12" v-if="radioSelected === sendTypes.send">
                       <div v-if="!gradidoID">
-                        <input-email
+                        <input-identifier
                           :name="$t('form.recipient')"
                           :label="$t('form.recipient')"
-                          :placeholder="$t('form.email')"
+                          :placeholder="$t('form.identifier')"
                           v-model="form.identifier"
                           :disabled="isBalanceDisabled"
                           @onValidation="onValidation"
@@ -125,108 +125,108 @@
   </div>
 </template>
 <script>
-import { SEND_TYPES } from '@/pages/Send'
-import InputEmail from '@/components/Inputs/InputEmail'
-import InputAmount from '@/components/Inputs/InputAmount'
-import InputTextarea from '@/components/Inputs/InputTextarea'
-import { user as userQuery } from '@/graphql/queries'
-import { isEmpty } from 'lodash'
+ import { SEND_TYPES } from '@/pages/Send'
+ import InputIdentifier from '@/components/Inputs/InputIdentifier'
+ import InputAmount from '@/components/Inputs/InputAmount'
+ import InputTextarea from '@/components/Inputs/InputTextarea'
+ import { user as userQuery } from '@/graphql/queries'
+ import { isEmpty } from 'lodash'
 
-export default {
-  name: 'TransactionForm',
-  components: {
-    InputEmail,
-    InputAmount,
-    InputTextarea,
-  },
-  props: {
-    balance: { type: Number, default: 0 },
-    identifier: { type: String, default: '' },
-    amount: { type: Number, default: 0 },
-    memo: { type: String, default: '' },
-    selected: { type: String, default: 'send' },
-  },
-  data() {
-    return {
-      form: {
-        identifier: this.identifier,
-        amount: this.amount ? String(this.amount) : '',
-        memo: this.memo,
-      },
-      radioSelected: this.selected,
-      userName: '',
-    }
-  },
-  methods: {
-    onValidation() {
-      this.$refs.formValidator.validate()
-    },
-    onSubmit() {
-      if (this.gradidoID) this.form.identifier = this.gradidoID
-      this.$emit('set-transaction', {
-        selected: this.radioSelected,
-        identifier: this.form.identifier,
-        amount: Number(this.form.amount.replace(',', '.')),
-        memo: this.form.memo,
-        userName: this.userName,
-      })
-    },
-    onReset(event) {
-      event.preventDefault()
-      this.form.identifier = ''
-      this.form.amount = ''
-      this.form.memo = ''
-      this.$refs.formValidator.validate()
-      if (this.$route.query && !isEmpty(this.$route.query))
-        this.$router.replace({ query: undefined })
-    },
-  },
-  apollo: {
-    UserName: {
-      query() {
-        return userQuery
-      },
-      fetchPolicy: 'network-only',
-      variables() {
-        return { identifier: this.gradidoID }
-      },
-      skip() {
-        return !this.gradidoID
-      },
-      update({ user }) {
-        this.userName = `${user.firstName} ${user.lastName}`
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-  },
-  computed: {
-    disabled() {
-      if (
-        this.form.identifier.length > 5 &&
-        parseInt(this.form.amount) <= parseInt(this.balance) &&
-        this.form.memo.length > 5 &&
-        this.form.memo.length <= 255
-      ) {
-        return false
-      }
-      return true
-    },
-    isBalanceDisabled() {
-      return this.balance <= 0 ? 'disabled' : false
-    },
-    sendTypes() {
-      return SEND_TYPES
-    },
-    gradidoID() {
-      return this.$route.query && this.$route.query.gradidoID
-    },
-  },
-  mounted() {
-    if (this.form.identifier !== '') this.$refs.formValidator.validate()
-  },
-}
+ export default {
+   name: 'TransactionForm',
+   components: {
+     InputIdentifier,
+     InputAmount,
+     InputTextarea,
+   },
+   props: {
+     balance: { type: Number, default: 0 },
+     identifier: { type: String, default: '' },
+     amount: { type: Number, default: 0 },
+     memo: { type: String, default: '' },
+     selected: { type: String, default: 'send' },
+   },
+   data() {
+     return {
+       form: {
+         identifier: this.identifier,
+         amount: this.amount ? String(this.amount) : '',
+         memo: this.memo,
+       },
+       radioSelected: this.selected,
+       userName: '',
+     }
+   },
+   methods: {
+     onValidation() {
+       this.$refs.formValidator.validate()
+     },
+     onSubmit() {
+       if (this.gradidoID) this.form.identifier = this.gradidoID
+       this.$emit('set-transaction', {
+         selected: this.radioSelected,
+         identifier: this.form.identifier,
+         amount: Number(this.form.amount.replace(',', '.')),
+         memo: this.form.memo,
+         userName: this.userName,
+       })
+     },
+     onReset(event) {
+       event.preventDefault()
+       this.form.identifier = ''
+       this.form.amount = ''
+       this.form.memo = ''
+       this.$refs.formValidator.validate()
+       if (this.$route.query && !isEmpty(this.$route.query))
+         this.$router.replace({ query: undefined })
+     },
+   },
+   apollo: {
+     UserName: {
+       query() {
+         return userQuery
+       },
+       fetchPolicy: 'network-only',
+       variables() {
+         return { identifier: this.gradidoID }
+       },
+       skip() {
+         return !this.gradidoID
+       },
+       update({ user }) {
+         this.userName = `${user.firstName} ${user.lastName}`
+       },
+       error({ message }) {
+         this.toastError(message)
+       },
+     },
+   },
+   computed: {
+     disabled() {
+       if (
+         this.form.identifier.length > 5 &&
+         parseInt(this.form.amount) <= parseInt(this.balance) &&
+         this.form.memo.length > 5 &&
+         this.form.memo.length <= 255
+       ) {
+         return false
+       }
+       return true
+     },
+     isBalanceDisabled() {
+       return this.balance <= 0 ? 'disabled' : false
+     },
+     sendTypes() {
+       return SEND_TYPES
+     },
+     gradidoID() {
+       return this.$route.query && this.$route.query.gradidoID
+     },
+   },
+   mounted() {
+     if (this.form.identifier !== '') this.$refs.formValidator.validate()
+   },
+ }
 </script>
 <style>
 span.errors {
diff --git a/frontend/src/components/Inputs/InputIdentifier.vue b/frontend/src/components/Inputs/InputIdentifier.vue
new file mode 100644
index 000000000..84ed9eaee
--- /dev/null
+++ b/frontend/src/components/Inputs/InputIdentifier.vue
@@ -0,0 +1,69 @@
+<template>
+  <validation-provider
+    tag="div"
+    :rules="rules"
+    :name="name"
+    v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
+  >
+    <b-form-group :label="label" :label-for="labelFor" data-test="input-email">
+      <b-form-input
+        v-model="currentValue"
+        v-bind="ariaInput"
+        data-test="input-identifier"
+        :id="labelFor"
+        :name="name"
+        :placeholder="placeholder"
+        type="text"
+        :state="validated ? valid : false"
+        trim
+        class="bg-248"
+        :disabled="disabled"
+        autocomplete="off"
+      ></b-form-input>
+      <b-form-invalid-feedback v-bind="ariaMsg">
+        {{ errors[0] }}
+      </b-form-invalid-feedback>
+    </b-form-group>
+  </validation-provider>
+</template>
+<script>
+ export default {
+   name: 'InputEmail',
+   props: {
+     rules: {
+       default: () => {
+         return {
+           required: true,
+           validIdentifier: true,
+         }
+       },
+     },
+     name: { type: String, required: true },
+     label: { type: String, required: true },
+     placeholder: { type: String, required: true },
+     value: { type: String, required: true },
+     disabled: { type: Boolean, required: false, default: false },
+   },
+   data() {
+     return {
+       currentValue: this.value,
+     }
+   },
+   computed: {
+     labelFor() {
+       return this.name + '-input-field'
+     },
+   },
+   watch: {
+     currentValue() {
+       this.$emit('input', this.currentValue)
+     },
+     value() {
+       if (this.value !== this.currentValue) {
+         this.currentValue = this.value
+       }
+       this.$emit('onValidation')
+     },
+   },
+ }
+</script>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index c571fa0c2..d05253ce8 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -142,6 +142,7 @@
     "from": "Von",
     "generate_now": "Jetzt generieren",
     "hours": "Stunden",
+    "identifier": "Email, Nutzername oder Gradido ID",
     "lastname": "Nachname",
     "memo": "Nachricht",
     "message": "Nachricht",
@@ -174,7 +175,8 @@
       "is-not": "Du kannst dir selbst keine Gradidos überweisen",
       "username-allowed-chars": "Der Nutzername darf nur aus Buchstaben (ohne Umlaute), Zahlen, Binde- oder Unterstrichen bestehen.",
       "username-hyphens": "Binde- oder Unterstriche müssen zwischen Buchstaben oder Zahlen stehen.",
-      "username-unique": "Der Nutzername ist bereits vergeben."
+      "username-unique": "Der Nutzername ist bereits vergeben.",
+      "valid-identifier": "Muss eine Email, ein Nutzernamen oder eine gradido ID sein."
     },
     "your_amount": "Dein Betrag"
   },
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 806e2a5e1..bec3055db 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -142,6 +142,7 @@
     "from": "from",
     "generate_now": "Generate now",
     "hours": "Hours",
+    "identifier": "Email, username or gradido ID",
     "lastname": "Lastname",
     "memo": "Message",
     "message": "Message",
@@ -174,7 +175,8 @@
       "is-not": "You cannot send Gradidos to yourself",
       "username-allowed-chars": "The username may contain letters, numbers, hyphens or underscores.",
       "username-hyphens": "Hyphens or underscores must be in between letters or numbers.",
-      "username-unique": "This username is already taken."
+      "username-unique": "This username is already taken.",
+      "valid-identifier": "Must be a valid email, username or gradido ID."
     },
     "your_amount": "Your amount"
   },
diff --git a/frontend/src/validation-rules.js b/frontend/src/validation-rules.js
index 53b301676..d0bec1ac9 100644
--- a/frontend/src/validation-rules.js
+++ b/frontend/src/validation-rules.js
@@ -2,6 +2,12 @@ import { configure, extend } from 'vee-validate'
 // eslint-disable-next-line camelcase
 import { required, email, min, max, is_not } from 'vee-validate/dist/rules'
 import { checkUsername } from '@/graphql/queries'
+import { validate as validateUuid, version as versionUuid } from 'uuid'
+
+// taken from vee-validate
+const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+
+const usernameRegex = /^(?=.{3,20}$)[a-zA-Z0-9]+(?:[_-][a-zA-Z0-9])*$/
 
 export const loadAllRules = (i18nCallback, apollo) => {
   configure({
@@ -158,4 +164,14 @@ export const loadAllRules = (i18nCallback, apollo) => {
     },
     message: (_, values) => i18nCallback.t('form.validation.username-unique', values),
   })
+
+  extend('validIdentifier', {
+    validate(value) {
+      const isEmail = !!value.match(emailRegex)
+      const isUsername = !!value.match(usernameRegex)
+      // const isGradidoId = validateUuid(value) && versionUuid(value) === 4
+      return isEmail || isUsername // || isGradidoId
+    },
+    message: (_, values) => i18nCallback.t('form.validation.valid-identifier', values),
+  })
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 7cc8e5fe5..8eff12aaf 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -14176,6 +14176,11 @@ uuid@^8.3.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+
 v8-compile-cache@^2.0.3, v8-compile-cache@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"

From b0fb6f88587180cdbbfdb3fc0d9d380372be9363 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 16 May 2023 06:09:30 +0200
Subject: [PATCH 02/10] validate identifier

---
 .../components/GddSend/TransactionForm.vue    | 202 +++++++++---------
 .../src/components/Inputs/InputIdentifier.vue |  78 +++----
 frontend/src/validation-rules.js              |   9 +-
 3 files changed, 145 insertions(+), 144 deletions(-)

diff --git a/frontend/src/components/GddSend/TransactionForm.vue b/frontend/src/components/GddSend/TransactionForm.vue
index 41fb400e7..2f369c9ca 100644
--- a/frontend/src/components/GddSend/TransactionForm.vue
+++ b/frontend/src/components/GddSend/TransactionForm.vue
@@ -125,108 +125,108 @@
   </div>
 </template>
 <script>
- import { SEND_TYPES } from '@/pages/Send'
- import InputIdentifier from '@/components/Inputs/InputIdentifier'
- import InputAmount from '@/components/Inputs/InputAmount'
- import InputTextarea from '@/components/Inputs/InputTextarea'
- import { user as userQuery } from '@/graphql/queries'
- import { isEmpty } from 'lodash'
+import { SEND_TYPES } from '@/pages/Send'
+import InputIdentifier from '@/components/Inputs/InputIdentifier'
+import InputAmount from '@/components/Inputs/InputAmount'
+import InputTextarea from '@/components/Inputs/InputTextarea'
+import { user as userQuery } from '@/graphql/queries'
+import { isEmpty } from 'lodash'
 
- export default {
-   name: 'TransactionForm',
-   components: {
-     InputIdentifier,
-     InputAmount,
-     InputTextarea,
-   },
-   props: {
-     balance: { type: Number, default: 0 },
-     identifier: { type: String, default: '' },
-     amount: { type: Number, default: 0 },
-     memo: { type: String, default: '' },
-     selected: { type: String, default: 'send' },
-   },
-   data() {
-     return {
-       form: {
-         identifier: this.identifier,
-         amount: this.amount ? String(this.amount) : '',
-         memo: this.memo,
-       },
-       radioSelected: this.selected,
-       userName: '',
-     }
-   },
-   methods: {
-     onValidation() {
-       this.$refs.formValidator.validate()
-     },
-     onSubmit() {
-       if (this.gradidoID) this.form.identifier = this.gradidoID
-       this.$emit('set-transaction', {
-         selected: this.radioSelected,
-         identifier: this.form.identifier,
-         amount: Number(this.form.amount.replace(',', '.')),
-         memo: this.form.memo,
-         userName: this.userName,
-       })
-     },
-     onReset(event) {
-       event.preventDefault()
-       this.form.identifier = ''
-       this.form.amount = ''
-       this.form.memo = ''
-       this.$refs.formValidator.validate()
-       if (this.$route.query && !isEmpty(this.$route.query))
-         this.$router.replace({ query: undefined })
-     },
-   },
-   apollo: {
-     UserName: {
-       query() {
-         return userQuery
-       },
-       fetchPolicy: 'network-only',
-       variables() {
-         return { identifier: this.gradidoID }
-       },
-       skip() {
-         return !this.gradidoID
-       },
-       update({ user }) {
-         this.userName = `${user.firstName} ${user.lastName}`
-       },
-       error({ message }) {
-         this.toastError(message)
-       },
-     },
-   },
-   computed: {
-     disabled() {
-       if (
-         this.form.identifier.length > 5 &&
-         parseInt(this.form.amount) <= parseInt(this.balance) &&
-         this.form.memo.length > 5 &&
-         this.form.memo.length <= 255
-       ) {
-         return false
-       }
-       return true
-     },
-     isBalanceDisabled() {
-       return this.balance <= 0 ? 'disabled' : false
-     },
-     sendTypes() {
-       return SEND_TYPES
-     },
-     gradidoID() {
-       return this.$route.query && this.$route.query.gradidoID
-     },
-   },
-   mounted() {
-     if (this.form.identifier !== '') this.$refs.formValidator.validate()
-   },
- }
+export default {
+  name: 'TransactionForm',
+  components: {
+    InputIdentifier,
+    InputAmount,
+    InputTextarea,
+  },
+  props: {
+    balance: { type: Number, default: 0 },
+    identifier: { type: String, default: '' },
+    amount: { type: Number, default: 0 },
+    memo: { type: String, default: '' },
+    selected: { type: String, default: 'send' },
+  },
+  data() {
+    return {
+      form: {
+        identifier: this.identifier,
+        amount: this.amount ? String(this.amount) : '',
+        memo: this.memo,
+      },
+      radioSelected: this.selected,
+      userName: '',
+    }
+  },
+  methods: {
+    onValidation() {
+      this.$refs.formValidator.validate()
+    },
+    onSubmit() {
+      if (this.gradidoID) this.form.identifier = this.gradidoID
+      this.$emit('set-transaction', {
+        selected: this.radioSelected,
+        identifier: this.form.identifier,
+        amount: Number(this.form.amount.replace(',', '.')),
+        memo: this.form.memo,
+        userName: this.userName,
+      })
+    },
+    onReset(event) {
+      event.preventDefault()
+      this.form.identifier = ''
+      this.form.amount = ''
+      this.form.memo = ''
+      this.$refs.formValidator.validate()
+      if (this.$route.query && !isEmpty(this.$route.query))
+        this.$router.replace({ query: undefined })
+    },
+  },
+  apollo: {
+    UserName: {
+      query() {
+        return userQuery
+      },
+      fetchPolicy: 'network-only',
+      variables() {
+        return { identifier: this.gradidoID }
+      },
+      skip() {
+        return !this.gradidoID
+      },
+      update({ user }) {
+        this.userName = `${user.firstName} ${user.lastName}`
+      },
+      error({ message }) {
+        this.toastError(message)
+      },
+    },
+  },
+  computed: {
+    disabled() {
+      if (
+        this.form.identifier.length > 5 &&
+        parseInt(this.form.amount) <= parseInt(this.balance) &&
+        this.form.memo.length > 5 &&
+        this.form.memo.length <= 255
+      ) {
+        return false
+      }
+      return true
+    },
+    isBalanceDisabled() {
+      return this.balance <= 0 ? 'disabled' : false
+    },
+    sendTypes() {
+      return SEND_TYPES
+    },
+    gradidoID() {
+      return this.$route.query && this.$route.query.gradidoID
+    },
+  },
+  mounted() {
+    if (this.form.identifier !== '') this.$refs.formValidator.validate()
+  },
+}
 </script>
 <style>
 span.errors {
diff --git a/frontend/src/components/Inputs/InputIdentifier.vue b/frontend/src/components/Inputs/InputIdentifier.vue
index 84ed9eaee..d598dad1c 100644
--- a/frontend/src/components/Inputs/InputIdentifier.vue
+++ b/frontend/src/components/Inputs/InputIdentifier.vue
@@ -27,43 +27,43 @@
   </validation-provider>
 </template>
 <script>
- export default {
-   name: 'InputEmail',
-   props: {
-     rules: {
-       default: () => {
-         return {
-           required: true,
-           validIdentifier: true,
-         }
-       },
-     },
-     name: { type: String, required: true },
-     label: { type: String, required: true },
-     placeholder: { type: String, required: true },
-     value: { type: String, required: true },
-     disabled: { type: Boolean, required: false, default: false },
-   },
-   data() {
-     return {
-       currentValue: this.value,
-     }
-   },
-   computed: {
-     labelFor() {
-       return this.name + '-input-field'
-     },
-   },
-   watch: {
-     currentValue() {
-       this.$emit('input', this.currentValue)
-     },
-     value() {
-       if (this.value !== this.currentValue) {
-         this.currentValue = this.value
-       }
-       this.$emit('onValidation')
-     },
-   },
- }
+export default {
+  name: 'InputEmail',
+  props: {
+    rules: {
+      default: () => {
+        return {
+          required: true,
+          validIdentifier: true,
+        }
+      },
+    },
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    placeholder: { type: String, required: true },
+    value: { type: String, required: true },
+    disabled: { type: Boolean, required: false, default: false },
+  },
+  data() {
+    return {
+      currentValue: this.value,
+    }
+  },
+  computed: {
+    labelFor() {
+      return this.name + '-input-field'
+    },
+  },
+  watch: {
+    currentValue() {
+      this.$emit('input', this.currentValue)
+    },
+    value() {
+      if (this.value !== this.currentValue) {
+        this.currentValue = this.value
+      }
+      this.$emit('onValidation')
+    },
+  },
+}
 </script>
diff --git a/frontend/src/validation-rules.js b/frontend/src/validation-rules.js
index d27d1f6fb..a23d69215 100644
--- a/frontend/src/validation-rules.js
+++ b/frontend/src/validation-rules.js
@@ -5,9 +5,10 @@ import { checkUsername } from '@/graphql/queries'
 import { validate as validateUuid, version as versionUuid } from 'uuid'
 
 // taken from vee-validate
+// eslint-disable-next-line no-useless-escape
 const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
-const usernameRegex = /^(?=.{3,20}$)[a-zA-Z0-9]+(?:[_-][a-zA-Z0-9])*$/
+const usernameRegex = /^(?=.{3,20}$)[a-zA-Z0-9]+(?:[_-][a-zA-Z0-9]+?)*$/
 
 export const loadAllRules = (i18nCallback, apollo) => {
   configure({
@@ -147,7 +148,7 @@ export const loadAllRules = (i18nCallback, apollo) => {
 
   extend('usernameUnique', {
     validate(value) {
-      if (value.match(/^(?=.{3,20}$)[a-zA-Z0-9]+(?:[_-][a-zA-Z0-9]+?)*$/)) {
+      if (value.match(usernameRegex)) {
         return apollo
           .query({
             query: checkUsername,
@@ -169,8 +170,8 @@ export const loadAllRules = (i18nCallback, apollo) => {
     validate(value) {
       const isEmail = !!value.match(emailRegex)
       const isUsername = !!value.match(usernameRegex)
-      // const isGradidoId = validateUuid(value) && versionUuid(value) === 4
-      return isEmail || isUsername // || isGradidoId
+      const isGradidoId = validateUuid(value) && versionUuid(value) === 4
+      return isEmail || isUsername || isGradidoId
     },
     message: (_, values) => i18nCallback.t('form.validation.valid-identifier', values),
   })

From 5493cb06ff00b6ca73973b84b41198f19c662674 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 16 May 2023 06:36:06 +0200
Subject: [PATCH 03/10] fix gdd send unit tests

---
 .../src/components/Inputs/InputAmount.vue     |  3 ++-
 frontend/src/pages/Send.spec.js               | 19 ++++++++++++-------
 frontend/src/validation-rules.js              |  2 +-
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Inputs/InputAmount.vue b/frontend/src/components/Inputs/InputAmount.vue
index 3268a0ec1..4a77474d7 100644
--- a/frontend/src/components/Inputs/InputAmount.vue
+++ b/frontend/src/components/Inputs/InputAmount.vue
@@ -7,8 +7,9 @@
       :name="name"
       v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
     >
-      <b-form-group :label="label" :label-for="labelFor" data-test="input-amount">
+      <b-form-group :label="label" :label-for="labelFor">
         <b-form-input
+          data-test="input-amount"
           v-model="currentValue"
           v-bind="ariaInput"
           :id="labelFor"
diff --git a/frontend/src/pages/Send.spec.js b/frontend/src/pages/Send.spec.js
index 3aae5a83e..ced3d808a 100644
--- a/frontend/src/pages/Send.spec.js
+++ b/frontend/src/pages/Send.spec.js
@@ -66,8 +66,8 @@ describe('Send', () => {
       beforeEach(async () => {
         const transactionForm = wrapper.findComponent({ name: 'TransactionForm' })
         await transactionForm.findAll('input[type="radio"]').at(0).setChecked()
-        await transactionForm.find('input[type="email"]').setValue('user@example.org')
-        await transactionForm.find('input[type="text"]').setValue('23.45')
+        await transactionForm.find('[data-test="input-identifier"]').setValue('user@example.org')
+        await transactionForm.find('[data-test="input-amount"]').setValue('23.45')
         await transactionForm.find('textarea').setValue('Make the best of it!')
         await transactionForm.find('form').trigger('submit')
         await flushPromises()
@@ -91,8 +91,10 @@ describe('Send', () => {
           })
 
           it('restores the previous data in the formular', () => {
-            expect(wrapper.find("input[type='email']").vm.$el.value).toBe('user@example.org')
-            expect(wrapper.find("input[type='text']").vm.$el.value).toBe('23.45')
+            expect(wrapper.find('[data-test="input-identifier"]').vm.$el.value).toBe(
+              'user@example.org',
+            )
+            expect(wrapper.find('[data-test="input-amount"]').vm.$el.value).toBe('23.45')
             expect(wrapper.find('textarea').vm.$el.value).toBe('Make the best of it!')
           })
         })
@@ -175,7 +177,10 @@ describe('Send', () => {
 
       it('has no email input field', () => {
         expect(
-          wrapper.findComponent({ name: 'TransactionForm' }).find('input[type="email"]').exists(),
+          wrapper
+            .findComponent({ name: 'TransactionForm' })
+            .find('[data-test="input-identifier"]')
+            .exists(),
         ).toBe(false)
       })
 
@@ -183,7 +188,7 @@ describe('Send', () => {
         beforeEach(async () => {
           jest.clearAllMocks()
           const transactionForm = wrapper.findComponent({ name: 'TransactionForm' })
-          await transactionForm.find('input[type="text"]').setValue('34.56')
+          await transactionForm.find('[data-test="input-amount"]').setValue('34.56')
           await transactionForm.find('textarea').setValue('Make the best of it!')
           await transactionForm.find('form').trigger('submit')
           await flushPromises()
@@ -243,7 +248,7 @@ describe('Send', () => {
         })
         const transactionForm = wrapper.findComponent({ name: 'TransactionForm' })
         await transactionForm.findAll('input[type="radio"]').at(1).setChecked()
-        await transactionForm.find('input[type="text"]').setValue('56.78')
+        await transactionForm.find('[data-test="input-amount"]').setValue('56.78')
         await transactionForm.find('textarea').setValue('Make the best of the link!')
         await transactionForm.find('form').trigger('submit')
         await flushPromises()
diff --git a/frontend/src/validation-rules.js b/frontend/src/validation-rules.js
index a23d69215..2dbd5368e 100644
--- a/frontend/src/validation-rules.js
+++ b/frontend/src/validation-rules.js
@@ -168,7 +168,7 @@ export const loadAllRules = (i18nCallback, apollo) => {
 
   extend('validIdentifier', {
     validate(value) {
-      const isEmail = !!value.match(emailRegex)
+      const isEmail = !!emailRegex.test(value)
       const isUsername = !!value.match(usernameRegex)
       const isGradidoId = validateUuid(value) && versionUuid(value) === 4
       return isEmail || isUsername || isGradidoId

From eda6e686f31514c71d65b1903f7c550628de3b8a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 16 May 2023 06:46:38 +0200
Subject: [PATCH 04/10] fix transaction form test

---
 .../GddSend/TransactionForm.spec.js           | 49 ++++++++++---------
 .../src/components/Inputs/InputAmount.vue     |  3 +-
 .../src/components/Inputs/InputIdentifier.vue |  3 +-
 frontend/src/pages/Send.spec.js               | 17 ++++---
 4 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/GddSend/TransactionForm.spec.js b/frontend/src/components/GddSend/TransactionForm.spec.js
index 41f69960e..0255207cc 100644
--- a/frontend/src/components/GddSend/TransactionForm.spec.js
+++ b/frontend/src/components/GddSend/TransactionForm.spec.js
@@ -71,9 +71,9 @@ describe('TransactionForm', () => {
     })
 
     describe('with balance <= 0.00 GDD the form is disabled', () => {
-      it('has a disabled input field of type email', () => {
+      it('has a disabled input field of type text', () => {
         expect(
-          wrapper.find('div[data-test="input-email"]').find('input').attributes('disabled'),
+          wrapper.find('div[data-test="input-identifier"]').find('input').attributes('disabled'),
         ).toBe('disabled')
       })
 
@@ -116,51 +116,54 @@ describe('TransactionForm', () => {
           expect(wrapper.vm.radioSelected).toBe(SEND_TYPES.send)
         })
 
-        describe('email field', () => {
-          it('has an input field of type email', () => {
+        describe('identifier field', () => {
+          it('has an input field of type text', () => {
             expect(
-              wrapper.find('div[data-test="input-email"]').find('input').attributes('type'),
-            ).toBe('email')
+              wrapper.find('div[data-test="input-identifier"]').find('input').attributes('type'),
+            ).toBe('text')
           })
 
           it('has a label form.receiver', () => {
-            expect(wrapper.find('div[data-test="input-email"]').find('label').text()).toBe(
+            expect(wrapper.find('div[data-test="input-identifier"]').find('label').text()).toBe(
               'form.recipient',
             )
           })
 
-          it('has a placeholder "E-Mail"', () => {
+          it('has a placeholder for identifier', () => {
             expect(
-              wrapper.find('div[data-test="input-email"]').find('input').attributes('placeholder'),
-            ).toBe('form.email')
+              wrapper
+                .find('div[data-test="input-identifier"]')
+                .find('input')
+                .attributes('placeholder'),
+            ).toBe('form.identifier')
           })
 
-          it('flushes an error message when no valid email is given', async () => {
-            await wrapper.find('div[data-test="input-email"]').find('input').setValue('a')
+          it('flushes an error message when no valid identifier is given', async () => {
+            await wrapper.find('div[data-test="input-identifier"]').find('input').setValue('a')
             await flushPromises()
             expect(
-              wrapper.find('div[data-test="input-email"]').find('.invalid-feedback').text(),
-            ).toBe('validations.messages.email')
+              wrapper.find('div[data-test="input-identifier"]').find('.invalid-feedback').text(),
+            ).toBe('form.validation.valid-identifier')
           })
 
           // TODO:SKIPPED there is no check that the email being sent to is the same as the user's email.
           it.skip('flushes an error message when email is the email of logged in user', async () => {
             await wrapper
-              .find('div[data-test="input-email"]')
+              .find('div[data-test="input-identifier"]')
               .find('input')
               .setValue('user@example.org')
             await flushPromises()
             expect(
-              wrapper.find('div[data-test="input-email"]').find('.invalid-feedback').text(),
+              wrapper.find('div[data-test="input-identifier"]').find('.invalid-feedback').text(),
             ).toBe('form.validation.is-not')
           })
 
-          it('trims the email after blur', async () => {
+          it('trims the identifier after blur', async () => {
             await wrapper
-              .find('div[data-test="input-email"]')
+              .find('div[data-test="input-identifier"]')
               .find('input')
               .setValue('  valid@email.com  ')
-            await wrapper.find('div[data-test="input-email"]').find('input').trigger('blur')
+            await wrapper.find('div[data-test="input-identifier"]').find('input').trigger('blur')
             await flushPromises()
             expect(wrapper.vm.form.identifier).toBe('valid@email.com')
           })
@@ -304,7 +307,7 @@ Die ganze Welt bezwingen.“`)
 
           it('clears all fields on click', async () => {
             await wrapper
-              .find('div[data-test="input-email"]')
+              .find('div[data-test="input-identifier"]')
               .find('input')
               .setValue('someone@watches.tv')
             await wrapper.find('div[data-test="input-amount"]').find('input').setValue('87.23')
@@ -327,7 +330,7 @@ Die ganze Welt bezwingen.“`)
         describe('submit', () => {
           beforeEach(async () => {
             await wrapper
-              .find('div[data-test="input-email"]')
+              .find('div[data-test="input-identifier"]')
               .find('input')
               .setValue('someone@watches.tv')
             await wrapper.find('div[data-test="input-amount"]').find('input').setValue('87.23')
@@ -380,8 +383,8 @@ Die ganze Welt bezwingen.“`)
       })
 
       describe('query for username with success', () => {
-        it('has no email input field', () => {
-          expect(wrapper.find('div[data-test="input-email"]').exists()).toBe(false)
+        it('has no identifier input field', () => {
+          expect(wrapper.find('div[data-test="input-identifier"]').exists()).toBe(false)
         })
 
         it('queries the username', () => {
diff --git a/frontend/src/components/Inputs/InputAmount.vue b/frontend/src/components/Inputs/InputAmount.vue
index 4a77474d7..3268a0ec1 100644
--- a/frontend/src/components/Inputs/InputAmount.vue
+++ b/frontend/src/components/Inputs/InputAmount.vue
@@ -7,9 +7,8 @@
       :name="name"
       v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
     >
-      <b-form-group :label="label" :label-for="labelFor">
+      <b-form-group :label="label" :label-for="labelFor" data-test="input-amount">
         <b-form-input
-          data-test="input-amount"
           v-model="currentValue"
           v-bind="ariaInput"
           :id="labelFor"
diff --git a/frontend/src/components/Inputs/InputIdentifier.vue b/frontend/src/components/Inputs/InputIdentifier.vue
index d598dad1c..27b301cb5 100644
--- a/frontend/src/components/Inputs/InputIdentifier.vue
+++ b/frontend/src/components/Inputs/InputIdentifier.vue
@@ -5,11 +5,10 @@
     :name="name"
     v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
   >
-    <b-form-group :label="label" :label-for="labelFor" data-test="input-email">
+    <b-form-group :label="label" :label-for="labelFor" data-test="input-identifier">
       <b-form-input
         v-model="currentValue"
         v-bind="ariaInput"
-        data-test="input-identifier"
         :id="labelFor"
         :name="name"
         :placeholder="placeholder"
diff --git a/frontend/src/pages/Send.spec.js b/frontend/src/pages/Send.spec.js
index ced3d808a..1001d0c58 100644
--- a/frontend/src/pages/Send.spec.js
+++ b/frontend/src/pages/Send.spec.js
@@ -66,8 +66,11 @@ describe('Send', () => {
       beforeEach(async () => {
         const transactionForm = wrapper.findComponent({ name: 'TransactionForm' })
         await transactionForm.findAll('input[type="radio"]').at(0).setChecked()
-        await transactionForm.find('[data-test="input-identifier"]').setValue('user@example.org')
-        await transactionForm.find('[data-test="input-amount"]').setValue('23.45')
+        await transactionForm
+          .find('[data-test="input-identifier"]')
+          .find('input')
+          .setValue('user@example.org')
+        await transactionForm.find('[data-test="input-amount"]').find('input').setValue('23.45')
         await transactionForm.find('textarea').setValue('Make the best of it!')
         await transactionForm.find('form').trigger('submit')
         await flushPromises()
@@ -91,10 +94,12 @@ describe('Send', () => {
           })
 
           it('restores the previous data in the formular', () => {
-            expect(wrapper.find('[data-test="input-identifier"]').vm.$el.value).toBe(
+            expect(wrapper.find('[data-test="input-identifier"]').find('input').vm.$el.value).toBe(
               'user@example.org',
             )
-            expect(wrapper.find('[data-test="input-amount"]').vm.$el.value).toBe('23.45')
+            expect(wrapper.find('[data-test="input-amount"]').find('input').vm.$el.value).toBe(
+              '23.45',
+            )
             expect(wrapper.find('textarea').vm.$el.value).toBe('Make the best of it!')
           })
         })
@@ -188,7 +193,7 @@ describe('Send', () => {
         beforeEach(async () => {
           jest.clearAllMocks()
           const transactionForm = wrapper.findComponent({ name: 'TransactionForm' })
-          await transactionForm.find('[data-test="input-amount"]').setValue('34.56')
+          await transactionForm.find('[data-test="input-amount"]').find('input').setValue('34.56')
           await transactionForm.find('textarea').setValue('Make the best of it!')
           await transactionForm.find('form').trigger('submit')
           await flushPromises()
@@ -248,7 +253,7 @@ describe('Send', () => {
         })
         const transactionForm = wrapper.findComponent({ name: 'TransactionForm' })
         await transactionForm.findAll('input[type="radio"]').at(1).setChecked()
-        await transactionForm.find('[data-test="input-amount"]').setValue('56.78')
+        await transactionForm.find('[data-test="input-amount"]').find('input').setValue('56.78')
         await transactionForm.find('textarea').setValue('Make the best of the link!')
         await transactionForm.find('form').trigger('submit')
         await flushPromises()

From 22f7a6928759830b414b2b83068e44d0e3d47f45 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 19 May 2023 09:00:09 +0200
Subject: [PATCH 05/10] Update
 frontend/src/components/GddSend/TransactionForm.spec.js

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
---
 frontend/src/components/GddSend/TransactionForm.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/GddSend/TransactionForm.spec.js b/frontend/src/components/GddSend/TransactionForm.spec.js
index 0255207cc..e4cee20be 100644
--- a/frontend/src/components/GddSend/TransactionForm.spec.js
+++ b/frontend/src/components/GddSend/TransactionForm.spec.js
@@ -123,7 +123,7 @@ describe('TransactionForm', () => {
             ).toBe('text')
           })
 
-          it('has a label form.receiver', () => {
+          it('has a label form.recipient', () => {
             expect(wrapper.find('div[data-test="input-identifier"]').find('label').text()).toBe(
               'form.recipient',
             )

From 8172a813d06f391dcede7fe9c1bf93339472ba8b Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 19 May 2023 09:00:35 +0200
Subject: [PATCH 06/10] Update frontend/src/validation-rules.js

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
---
 frontend/src/validation-rules.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/validation-rules.js b/frontend/src/validation-rules.js
index 5d7a5f065..853cadf5c 100644
--- a/frontend/src/validation-rules.js
+++ b/frontend/src/validation-rules.js
@@ -6,7 +6,7 @@ import { validate as validateUuid, version as versionUuid } from 'uuid'
 
 // taken from vee-validate
 // eslint-disable-next-line no-useless-escape
-const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+const EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
 const usernameRegex = /^(?=.{3,20}$)[a-zA-Z0-9]+(?:[_-][a-zA-Z0-9]+?)*$/
 

From a9c35a4c125b111032fb02ed8e83f2c1faefcbaa Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 19 May 2023 09:00:46 +0200
Subject: [PATCH 07/10] Update frontend/src/validation-rules.js

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
---
 frontend/src/validation-rules.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/validation-rules.js b/frontend/src/validation-rules.js
index 853cadf5c..8d2c7d397 100644
--- a/frontend/src/validation-rules.js
+++ b/frontend/src/validation-rules.js
@@ -8,7 +8,7 @@ import { validate as validateUuid, version as versionUuid } from 'uuid'
 // eslint-disable-next-line no-useless-escape
 const EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
-const usernameRegex = /^(?=.{3,20}$)[a-zA-Z0-9]+(?:[_-][a-zA-Z0-9]+?)*$/
+const USERNAME_REGEX = /^(?=.{3,20}$)[a-zA-Z0-9]+(?:[_-][a-zA-Z0-9]+?)*$/
 
 export const loadAllRules = (i18nCallback, apollo) => {
   configure({

From e007c2a19349d2757bdc1d737aa1ec99af0d238d Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 19 May 2023 09:00:56 +0200
Subject: [PATCH 08/10] Update frontend/src/validation-rules.js

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
---
 frontend/src/validation-rules.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/validation-rules.js b/frontend/src/validation-rules.js
index 8d2c7d397..d75ca6dc3 100644
--- a/frontend/src/validation-rules.js
+++ b/frontend/src/validation-rules.js
@@ -148,7 +148,7 @@ export const loadAllRules = (i18nCallback, apollo) => {
 
   extend('usernameUnique', {
     validate(value) {
-      if (!value.match(usernameRegex)) return true
+      if (!value.match(USERNAME_REGEX)) return true
       return apollo
         .query({
           query: checkUsername,

From 36b1a3fb72a6f3719a3046c2e83d5aa01cff7b5a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 19 May 2023 09:01:07 +0200
Subject: [PATCH 09/10] Update frontend/src/validation-rules.js

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
---
 frontend/src/validation-rules.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/validation-rules.js b/frontend/src/validation-rules.js
index d75ca6dc3..a2976c859 100644
--- a/frontend/src/validation-rules.js
+++ b/frontend/src/validation-rules.js
@@ -165,7 +165,7 @@ export const loadAllRules = (i18nCallback, apollo) => {
 
   extend('validIdentifier', {
     validate(value) {
-      const isEmail = !!emailRegex.test(value)
+      const isEmail = !!EMAIL_REGEX.test(value)
       const isUsername = !!value.match(usernameRegex)
       const isGradidoId = validateUuid(value) && versionUuid(value) === 4
       return isEmail || isUsername || isGradidoId

From e446ad7e6dbc5d17c4bcc2a0687bc53edc0bacbe Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 19 May 2023 09:01:15 +0200
Subject: [PATCH 10/10] Update frontend/src/validation-rules.js

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
---
 frontend/src/validation-rules.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/validation-rules.js b/frontend/src/validation-rules.js
index a2976c859..adb4dc431 100644
--- a/frontend/src/validation-rules.js
+++ b/frontend/src/validation-rules.js
@@ -166,7 +166,7 @@ export const loadAllRules = (i18nCallback, apollo) => {
   extend('validIdentifier', {
     validate(value) {
       const isEmail = !!EMAIL_REGEX.test(value)
-      const isUsername = !!value.match(usernameRegex)
+      const isUsername = !!value.match(USERNAME_REGEX)
       const isGradidoId = validateUuid(value) && versionUuid(value) === 4
       return isEmail || isUsername || isGradidoId
     },