identifier input field

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",

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"
@@ -126,7 +126,7 @@
 </template>
 <script>
  import { SEND_TYPES } from '@/pages/Send'
-import InputEmail from '@/components/Inputs/InputEmail'
+ 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'
@@ -135,7 +135,7 @@ import { isEmpty } from 'lodash'
  export default {
    name: 'TransactionForm',
    components: {
-    InputEmail,
+     InputIdentifier,
      InputAmount,
      InputTextarea,
    },

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>

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"
   },

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"
   },

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),
+  })
 }

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"