Add Id attribute to vue components

This commit is contained in:
Bubka 2022-06-24 09:10:49 +02:00
parent abb4666361
commit 90d4532883
9 changed files with 49062 additions and 15 deletions

48987
public/js/app.js vendored

File diff suppressed because one or more lines are too long

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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'
},
]
}

View File

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