diff options
Diffstat (limited to 'app/assets/javascripts/runner/components/helpers/masked_value.vue')
-rw-r--r-- | app/assets/javascripts/runner/components/helpers/masked_value.vue | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/app/assets/javascripts/runner/components/helpers/masked_value.vue b/app/assets/javascripts/runner/components/helpers/masked_value.vue new file mode 100644 index 00000000000..feccb37de81 --- /dev/null +++ b/app/assets/javascripts/runner/components/helpers/masked_value.vue @@ -0,0 +1,60 @@ +<script> +import { GlButton } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + components: { + GlButton, + }, + props: { + value: { + type: String, + required: false, + default: '', + }, + }, + data() { + return { + isMasked: true, + }; + }, + computed: { + label() { + if (this.isMasked) { + return __('Click to reveal'); + } + return __('Click to hide'); + }, + icon() { + if (this.isMasked) { + return 'eye'; + } + return 'eye-slash'; + }, + displayedValue() { + if (this.isMasked && this.value?.length) { + return '*'.repeat(this.value.length); + } + return this.value; + }, + }, + methods: { + toggleMasked() { + this.isMasked = !this.isMasked; + }, + }, +}; +</script> +<template> + <span + >{{ displayedValue }} + <gl-button + :aria-label="label" + :icon="icon" + class="gl-text-body!" + data-testid="toggle-masked" + variant="link" + @click="toggleMasked" + /> + </span> +</template> |