diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-20 09:55:51 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-20 09:55:51 +0000 |
commit | e8d2c2579383897a1dd7f9debd359abe8ae8373d (patch) | |
tree | c42be41678c2586d49a75cabce89322082698334 /app/assets/javascripts/runner/components/helpers/masked_value.vue | |
parent | fc845b37ec3a90aaa719975f607740c22ba6a113 (diff) | |
download | gitlab-ce-14.1.0-rc42.tar.gz |
Add latest changes from gitlab-org/gitlab@14-1-stable-eev14.1.0-rc42
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> |