input username component

frontend/src/components/Inputs/InputUsername.vue

@@ -0,0 +1,72 @@
+<template>
+  <validation-provider
+    tag="div"
+    :rules="rules"
+    :name="name"
+    :bails="!showAllErrors"
+    :immediate="immediate"
+    v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
+  >
+    <b-form-group :label-for="labelFor">
+      <b-input-group>
+        <b-form-input
+          v-model="currentValue"
+          v-bind="ariaInput"
+          :id="labelFor"
+          :name="name"
+          :placeholder="placeholder"
+          type="text"
+          :state="validated ? valid : false"
+        ></b-form-input>
+        <b-form-invalid-feedback v-bind="ariaMsg">
+          <div v-if="showAllErrors">
+            <span v-for="error in errors" :key="error">
+              {{ error }}
+              <br />
+            </span>
+          </div>
+          <div v-else>
+            {{ errors[0] }}
+          </div>
+        </b-form-invalid-feedback>
+      </b-input-group>
+    </b-form-group>
+  </validation-provider>
+</template>
+<script>
+export default {
+  name: 'InputPassword',
+  props: {
+    rules: {
+      default: () => {
+        return {
+          required: true,
+          min: 3,
+          max: 20,
+        }
+      },
+    },
+    name: { type: String, default: 'username' },
+    label: { type: String, default: 'Username' },
+    placeholder: { type: String, default: 'Username' },
+    value: { required: true, type: String },
+    showAllErrors: { type: Boolean, default: false },
+    immediate: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      currentValue: this.value,
+    }
+  },
+  computed: {
+    labelFor() {
+      return this.name + '-input-field'
+    },
+  },
+  watch: {
+    currentValue() {
+      this.$emit('input', this.currentValue)
+    },
+  },
+}
+</script>

frontend/src/components/UserSettings/UserName.vue

@@ -16,54 +16,59 @@
     </div>
 
     <div>
-      <b-form @keyup.prevent="loadSubmitButton">
-        <b-row class="mb-3">
-          <b-col class="col-12">
-            <small>
-              <b>{{ $t('form.username') }}</b>
-            </small>
-          </b-col>
-          <b-col v-if="showUserData" class="col-12">
-            <span v-if="username">
-              {{ username }}
-            </span>
-            <div v-else class="alert">
-              {{ $t('settings.username.no-username') }}
-            </div>
-          </b-col>
-          <b-col v-else class="col-12">
-            <b-input type="text" v-model="username"></b-input>
-          </b-col>
-        </b-row>
-        <b-row class="text-right" v-if="!showUserData">
-          <b-col>
-            <div class="text-right" ref="submitButton">
-              <b-button
-                :variant="loading ? 'light' : 'success'"
-                @click="onSubmit"
-                type="submit"
-                class="mt-4"
-                :disabled="loading"
-              >
-                {{ $t('form.save') }}
-              </b-button>
-            </div>
-          </b-col>
-        </b-row>
-      </b-form>
+      <validation-observer ref="observer" v-slot="{ handleSubmit, invalid }">
+        <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
+          <b-row class="mb-3">
+            <b-col class="col-12">
+              <small>
+                <b>{{ $t('form.username') }}</b>
+              </small>
+            </b-col>
+            <b-col v-if="showUserData" class="col-12">
+              <span v-if="username">
+                {{ username }}
+              </span>
+              <div v-else class="alert">
+                {{ $t('settings.username.no-username') }}
+              </div>
+            </b-col>
+            <b-col v-else class="col-12">
+              <input-username v-model="username" />
+            </b-col>
+          </b-row>
+          <b-row class="text-right" v-if="!showUserData">
+            <b-col>
+              <div class="text-right" ref="submitButton">
+                <b-button
+                  :variant="disabled(invalid) ? 'light' : 'success'"
+                  @click="onSubmit"
+                  type="submit"
+                  class="mt-4"
+                  :disabled="disabled(invalid)"
+                >
+                  {{ $t('form.save') }}
+                </b-button>
+              </div>
+            </b-col>
+          </b-row>
+        </b-form>
+      </validation-observer>
     </div>
   </b-card>
 </template>
 <script>
 import { updateUserInfos } from '@/graphql/mutations'
+import InputUsername from '@/components/Inputs/InputUsername'
 
 export default {
   name: 'UserName',
+  components: {
+    InputUsername,
+  },
   data() {
     return {
       showUserData: true,
-      username: this.$store.state.username,
-      loading: true,
+      username: this.$store.state.username || '',
     }
   },
   methods: {
@@ -71,13 +76,6 @@ export default {
       this.username = this.$store.state.username
       this.showUserData = true
     },
-    loadSubmitButton() {
-      if (this.username !== this.$store.state.username) {
-        this.loading = false
-      } else {
-        this.loading = true
-      }
-    },
     async onSubmit(event) {
       event.preventDefault()
       this.$apollo
@@ -96,6 +94,14 @@ export default {
           this.toastError(error.message)
         })
     },
+    disabled(invalid) {
+      return !this.newUsername || invalid
+    },
+  },
+  computed: {
+    newUsername() {
+      return this.username !== this.$store.state.username
+    },
   },
 }
 </script>