diff options
Diffstat (limited to 'src/components/Global/InputPasswordToggle.vue')
-rw-r--r-- | src/components/Global/InputPasswordToggle.vue | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue new file mode 100644 index 00000000..8c522525 --- /dev/null +++ b/src/components/Global/InputPasswordToggle.vue @@ -0,0 +1,57 @@ +<template> + <div class="input-password-toggle-container"> + <slot></slot> + <b-button + :aria-label="$t('ariaLabels.showPassword')" + variant="link" + :class="{ isVisible: isVisible }" + @click="toggleVisibility" + > + <icon-view-off v-if="isVisible" aria-hidden="true" /> + <icon-view v-else aria-hidden="true" /> + </b-button> + </div> +</template> + +<script> +import IconView from '@carbon/icons-vue/es/view/20'; +import IconViewOff from '@carbon/icons-vue/es/view--off/20'; + +export default { + name: 'InputPasswordToggle', + components: { IconView, IconViewOff }, + data() { + return { + isVisible: false + }; + }, + methods: { + toggleVisibility() { + const firstChild = this.$children[0]; + const inputEl = firstChild ? firstChild.$el : null; + + this.isVisible = !this.isVisible; + + if (inputEl.nodeName === 'INPUT') { + inputEl.type = this.isVisible ? 'text' : 'password'; + } + } + } +}; +</script> + +<style lang="scss" scoped> +.input-password-toggle-container { + position: relative; +} + +.btn { + position: absolute; + right: 0; + top: 0; + + svg { + margin-left: 0; + } +} +</style> |