Validate Change Username

frontend/src/apis/loginAPI.js

@@ -15,7 +15,7 @@ const apiGet = async (url) => {
     if (result.status !== 200) {
       throw new Error('HTTP Status Error ' + result.status)
     }
-    if (result.data.state !== 'success') {
+    if (!['success', 'warning'].includes(result.data.state)) {
       throw new Error(result.data.msg)
     }
     return { success: true, result }
@@ -139,6 +139,9 @@ const loginAPI = {
     }
     return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
   },
+  checkUsername: async (username, groupId = 1) => {
+    return apiGet(CONFIG.LOGIN_API_URL + `checkUsername?username=${username}&group_id=${groupId}`)
+  },
 }
 
 export default loginAPI

frontend/src/locales/de.json

@@ -57,9 +57,11 @@
     "send_transaction_error":"Leider konnte die Transaktion nicht ausgeführt werden!",
     "validation": {
       "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"
+      "is-not": "Du kannst dir selbst keine Gradidos überweisen",
+      "usernmae-unique": "Der Username ist bereits vergeben.",
+      "usernmae-regex": "Der Username muss mit einem Buchstaben beginnen auf den mindestens zwei alfanumerische Zeichen folgen müssen."
     },
-    "change_username_info": "Das ändern des Usernamens bedarf mehrerer Schritte."
+    "change_username_info": "Einmal gespeichert, kann der Username ncht mehr geändert werden!"
   },
   "error": {
     "error":"Fehler"

frontend/src/locales/en.json

@@ -57,9 +57,11 @@
     "send_transaction_error":"Unfortunately, the transaction could not be executed!",
     "validation": {
       "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"
+      "is-not": "You cannot send Gradidos to yourself",
+      "usernmae-unique": "The username is already taken.",
+      "usernmae-regex": "The username must start with a letter, followed by at least two alphanumeric characters."
     },
-    "change_username_info": "Changing the username requires several steps."
+    "change_username_info": "Once saved, the username cannot be changed again!"
   },
   "error": {
     "error":"Error"

frontend/src/main.js

@@ -9,6 +9,8 @@ import { required, email, min, max, is_not } from 'vee-validate/dist/rules'
 // store
 import { store } from './store/store'
 
+import loginAPI from './apis/loginAPI'
+
 // router setup
 import router from './routes/router'
 
@@ -64,6 +66,21 @@ extend('gddSendAmount', {
   },
 })
 
+extend('gddUsernameUnique', {
+  async validate(value) {
+    const result = await loginAPI.checkUsername(value)
+    return result.result.data.state === 'success'
+  },
+  message: (_, values) => i18n.t('form.validation.usernmae-unique', values),
+})
+
+extend('gddUsernameRgex', {
+  validate(value) {
+    return !!value.match(/^[a-zA-Z][-_a-zA-Z0-9]{2,}$/)
+  },
+  message: (_, values) => i18n.t('form.validation.usernmae-regex', values),
+})
+
 // eslint-disable-next-line camelcase
 extend('is_not', {
   // eslint-disable-next-line camelcase

frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue

@@ -1,20 +1,19 @@
 <template>
   <b-card id="formusername" class="bg-transparent" style="background-color: #ebebeba3 !important">
-    <b-container>
+    <b-container v-if="username === ''">
       <b-row class="text-right">
         <b-col class="mb-3">
           <b-icon
-            v-if="editUsername"
+            v-if="showUsername"
-            @click="editUsername = !editUsername"
+            @click="showUsername = !showUsername"
             class="pointer"
             icon="pencil"
           >
             {{ $t('form.change') }}
           </b-icon>
-
           <b-icon
             v-else
-            @click="editUsername = !editUsername"
+            @click="cancelEdit"
             class="pointer"
             icon="x-circle"
             variant="danger"
@@ -22,40 +21,48 @@
         </b-col>
       </b-row>
     </b-container>
-    <b-container v-if="editUsername">
+    <b-container v-if="showUsername">
       <b-row class="mb-3">
         <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
           <small>{{ $t('form.username') }}</small>
         </b-col>
-        <b-col class="col-md-9 col-sm-10">@{{ username }}</b-col>
+        <b-col class="col-md-9 col-sm-10">@{{ form.username }}</b-col>
       </b-row>
     </b-container>
     <b-container v-else>
+      <validation-observer ref="formValidator" v-slot="{ handleSubmit, valid }">
+        <b-form role="form" @submit.stop.prevent="handleSubmit(onSubmit)">
           <b-row class="mb-3">
             <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
               <small>{{ $t('form.username') }}</small>
             </b-col>
             <b-col class="col-md-9 col-sm-10">
-          <validation-observer ref="formValidator">
+              <validation-provider
-            <b-form role="form">
+                name="Username"
-              <b-form-input v-model="form.username" :placeholder="username"></b-form-input>
+                :rules="{ gddUsernameRgex: true, gddUsernameUnique: true }"
+                v-slot="{ errors }"
+              >
+                <div v-if="errors" class="text-right p-3 p-sm-1">
+                  <span v-for="error in errors" :key="error" class="errors">{{ error }}</span>
+                </div>
+                <b-form-input v-model="form.username" placeholder="Username"></b-form-input>
                 <div>
                   {{ $t('form.change_username_info') }}
                 </div>
-            </b-form>
+              </validation-provider>
-          </validation-observer>
             </b-col>
           </b-row>
-
           <b-row class="text-right">
             <b-col>
               <div class="text-right" ref="submitButton">
-            <b-button variant="info" @click="onSubmit" class="mt-4">
+                <b-button variant="info" type="submit" class="mt-4" :disabled="!valid">
                   {{ $t('form.save') }}
                 </b-button>
               </div>
             </b-col>
           </b-row>
+        </b-form>
+      </validation-observer>
     </b-container>
   </b-card>
 </template>
@@ -66,7 +73,7 @@ export default {
   name: 'FormUsername',
   data() {
     return {
-      editUsername: true,
+      showUsername: true,
       username: this.$store.state.username,
       form: {
         username: this.$store.state.username,
@@ -74,6 +81,10 @@ export default {
     }
   },
   methods: {
+    cancelEdit() {
+      this.username = this.$store.state.username
+      this.showUsername = true
+    },
     async onSubmit() {
       const result = await loginAPI.changeUsernameProfile(
         this.$store.state.sessionId,
@@ -82,8 +93,9 @@ export default {
       )
       if (result.success) {
         this.$store.commit('username', this.form.username)
-        this.editUserdata = this.editUsername = !this.editUsername
+        this.username = this.form.username
-        alert('Dein Username wurde geändert.')
+        this.showUsername = true
+        this.$toast.success(this.$t('site.profil.user-data.change-success'))
       } else {
         alert(result.result.message)
       }
@@ -91,4 +103,8 @@ export default {
   },
 }
 </script>
-<style></style>
+<style>
+span.errors {
+  color: red;
+}
+</style>