Add Id attribute to vue components

resources/js/components/App.vue

@@ -7,7 +7,7 @@
         <div v-if="this.$root.isTestingApp" class="demo has-background-warning has-text-centered is-size-7-mobile">
             {{ $t('commons.testing_do_not_post_sensitive_data') }}
         </div>
-        <notifications width="100%" position="top" :duration="4000" :speed="0" :max="1" classes="notification is-radiusless" />
+        <notifications id="vueNotification" width="100%" position="top" :duration="4000" :speed="0" :max="1" classes="notification is-radiusless" />
         <main class="main-section">
             <router-view></router-view>
         </main>

resources/js/components/FieldError.vue

@@ -1,5 +1,5 @@
 <template>
-    <p class="help is-danger" v-if="form.errors.has(field)" v-html="form.errors.get(field)" />
+    <p :id="'valError' + field[0].toUpperCase() + field.toLowerCase().slice(1)" class="help is-danger" v-if="form.errors.has(field)" v-html="form.errors.get(field)" />
 </template>
 
 <script>

resources/js/components/Footer.vue

@@ -13,9 +13,9 @@
             </router-link>
         </div>
         <div v-else class="content has-text-centered">
-            <router-link :to="{ name: 'settings.options' }" class="has-text-grey">{{ $t('settings.settings') }}</router-link>
+            <router-link id="lnkSettings"  :to="{ name: 'settings.options' }" class="has-text-grey">{{ $t('settings.settings') }}</router-link>
             <span v-if="!this.$root.appConfig.proxyAuth || (this.$root.appConfig.proxyAuth && this.$root.appConfig.proxyLogoutUrl)">
-                 - <a class="has-text-grey" @click="logout">{{ $t('auth.sign_out') }}</a>
+                 - <a id="lnkSignOut" class="has-text-grey" @click="logout">{{ $t('auth.sign_out') }}</a>
             </span>
         </div>
     </footer>

resources/js/components/FormButtons.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="field is-grouped">
         <div class="control">
-            <v-button :color="color" :isLoading="isBusy" :disabled="isDisabled" >{{ caption }}</v-button>
+            <v-button :id="submitId" :color="color" :isLoading="isBusy" :disabled="isDisabled" >{{ caption }}</v-button>
         </div>
         <div class="control" v-if="showCancelButton">
-            <router-link :to="{ name: cancelLandingView }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
+            <router-link :id="cancelId" :to="{ name: cancelLandingView }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
         </div>
     </div>
 </template>
@@ -49,6 +49,16 @@
                 type: String,
                 default: 'is-link'
             },
+
+            submitId: {
+                type: String,
+                default: 'btnSubmit'
+            },
+
+            cancelId: {
+                type: String,
+                default: 'btnCancel'
+            },
         }
     }
 </script>

resources/js/components/FormField.vue

@@ -2,7 +2,7 @@
     <div class="field" :class="{ 'pt-3' : hasOffset }">
         <label class="label" v-html="label"></label>
         <div class="control">
-            <input :disabled="isDisabled" :id="fieldName" :type="inputType" class="input" v-model="form[fieldName]" :placeholder="placeholder" v-bind="$attrs" v-on:change="$emit('field-changed', form[fieldName])"/>
+            <input :disabled="isDisabled" :id="this.inputId(inputType,fieldName)" :type="inputType" class="input" v-model="form[fieldName]" :placeholder="placeholder" v-bind="$attrs" v-on:change="$emit('field-changed', form[fieldName])"/>
         </div>
         <field-error :form="form" :field="fieldName" />
         <p class="help" v-html="help" v-if="help"></p>

resources/js/components/FormWrapper.vue

@@ -2,7 +2,7 @@
     <div class="columns is-centered">
         <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
             <h1 class="title has-text-grey-dark" v-html="title" v-if="title"></h1>
-            <div v-if="punchline" class="block" v-html="punchline"></div>
+            <div id="punchline" v-if="punchline" class="block" v-html="punchline"></div>
             <slot />
         </div>
     </div>    

resources/js/components/SettingTabs.vue

@@ -5,7 +5,7 @@
                 <div class="tabs is-centered is-fullwidth">
                     <ul>
                         <li v-for="tab in tabs" :key="tab.view" :class="{ 'is-active': tab.view === activeTab }">
-                            <a @click="selectTab(tab.view)">{{ tab.name }}</a>
+                            <a :id="tab.id" @click="selectTab(tab.view)">{{ tab.name }}</a>
                         </li>
                     </ul>
                 </div>
@@ -24,19 +24,23 @@
                 tabs: [
                 	{
                 		'name' : this.$t('settings.options'),
-                        'view' : 'settings.options'
+                        'view' : 'settings.options',
+                        'id'   : 'lnkTabOptions'
                 	},
                 	{
                 		'name' : this.$t('settings.account'),
-                        'view' : 'settings.account'
+                        'view' : 'settings.account',
+                        'id'   : 'lnkTabAccount'
                 	},
                 	{
                 		'name' : this.$t('settings.oauth'),
-                        'view' : 'settings.oauth.tokens'
+                        'view' : 'settings.oauth.tokens',
+                        'id'   : 'lnkTabOAuth'
                 	},
                 	{
                 		'name' : this.$t('settings.webauthn'),
-                        'view' : 'settings.webauthn.devices'
+                        'view' : 'settings.webauthn.devices',
+                        'id'   : 'lnkTabWebauthn'
                 	},
             	]
             }

resources/js/mixins.js

@@ -154,6 +154,56 @@ Vue.mixin({
 
             return window.atob(input);
         },
+        
+        /**
+         * Encodes an array of bytes to a BASE64 URL string
+         *
+         * @param arrayBuffer {ArrayBuffer|Uint8Array}
+         * @returns {string}
+         */
+        inputId(fieldType, fieldName) {
+            let prefix
+
+            switch (fieldType) {
+                case 'button':
+                    prefix = 'txt'
+                    break
+                case 'button':
+                    prefix = 'btn'
+                    break
+                case 'email':
+                    prefix = 'eml'
+                    break
+                case 'password':
+                    prefix = 'pwd'
+                    break
+                default:
+                    prefix = 'txt'
+                    break
+            }
+
+            return prefix + fieldName[0].toUpperCase() + fieldName.toLowerCase().slice(1);
+            // button
+            // checkbox
+            // color
+            // date 
+            // datetime-local
+            // file
+            // hidden
+            // image
+            // month
+            // number
+            // radio
+            // range
+            // reset
+            // search
+            // submit
+            // tel
+            // text
+            // time
+            // url
+            // week
+        },
     }
 
 })