diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-02-20 18:29:58 +0300 |
---|---|---|
committer | Gunnar Mills <gmills@us.ibm.com> | 2020-02-22 00:28:11 +0300 |
commit | 4ee8d290a5d45ce93419c819a6e7544d3a009b99 (patch) | |
tree | 8cfbfcb861adb2d67104b34bf6cb5ab08aa079fc /src/components/Global | |
parent | 8048c9a0c469f04cacc8a777416a707540de90f8 (diff) | |
download | webui-vue-4ee8d290a5d45ce93419c819a6e7544d3a009b99.tar.xz |
Create password visibility toggle
Reusable component to show/hide password input fields,
added to local user form.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I90fb865e51d99788a225812b057f4d8bacad1bc8
Diffstat (limited to 'src/components/Global')
-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> |