1<template>
2  <div class="input-password-toggle-container">
3    <slot></slot>
4    <b-button
5      :aria-label="$t('global.ariaLabel.showPassword')"
6      variant="link"
7      :class="{ isVisible: isVisible }"
8      @click="toggleVisibility"
9    >
10      <icon-view-off
11        v-if="isVisible"
12        aria-hidden="true"
13        :title="$t('global.ariaLabel.hidePassword')"
14      />
15      <icon-view
16        v-else
17        aria-hidden="true"
18        :title="$t('global.ariaLabel.showPassword')"
19      />
20    </b-button>
21  </div>
22</template>
23
24<script>
25import IconView from '@carbon/icons-vue/es/view/20';
26import IconViewOff from '@carbon/icons-vue/es/view--off/20';
27
28export default {
29  name: 'InputPasswordToggle',
30  components: { IconView, IconViewOff },
31  data() {
32    return {
33      isVisible: false
34    };
35  },
36  methods: {
37    toggleVisibility() {
38      const firstChild = this.$children[0];
39      const inputEl = firstChild ? firstChild.$el : null;
40
41      this.isVisible = !this.isVisible;
42
43      if (inputEl.nodeName === 'INPUT') {
44        inputEl.type = this.isVisible ? 'text' : 'password';
45      }
46    }
47  }
48};
49</script>
50
51<style lang="scss" scoped>
52.input-password-toggle-container {
53  position: relative;
54}
55
56.btn {
57  position: absolute;
58  right: 0;
59  top: 0;
60  padding: 0.4rem 1rem;
61  svg {
62    margin-left: 0;
63    vertical-align: sub;
64  }
65}
66</style>
67