diff options
Diffstat (limited to 'app/assets/javascripts/runner/components/registration')
-rw-r--r-- | app/assets/javascripts/runner/components/registration/registration_token.vue | 74 |
1 files changed, 12 insertions, 62 deletions
diff --git a/app/assets/javascripts/runner/components/registration/registration_token.vue b/app/assets/javascripts/runner/components/registration/registration_token.vue index d54a66ff0e4..68c6429a056 100644 --- a/app/assets/javascripts/runner/components/registration/registration_token.vue +++ b/app/assets/javascripts/runner/components/registration/registration_token.vue @@ -1,16 +1,10 @@ <script> -import { GlButtonGroup, GlButton, GlTooltipDirective } from '@gitlab/ui'; -import { s__, __ } from '~/locale'; -import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; +import { s__ } from '~/locale'; +import InputCopyToggleVisibility from '~/vue_shared/components/form/input_copy_toggle_visibility.vue'; export default { components: { - GlButtonGroup, - GlButton, - ModalCopyButton, - }, - directives: { - GlTooltip: GlTooltipDirective, + InputCopyToggleVisibility, }, props: { value: { @@ -19,65 +13,21 @@ export default { default: '', }, }, - data() { - return { - isMasked: true, - }; - }, - computed: { - maskLabel() { - if (this.isMasked) { - return __('Click to reveal'); - } - return __('Click to hide'); - }, - maskIcon() { - if (this.isMasked) { - return 'eye'; - } - return 'eye-slash'; - }, - displayedValue() { - if (this.isMasked && this.value?.length) { - return '*'.repeat(this.value.length); - } - return this.value; - }, - }, methods: { - onToggleMasked() { - this.isMasked = !this.isMasked; - }, - onCopied() { + onCopy() { // value already in the clipboard, simply notify the user this.$toast?.show(s__('Runners|Registration token copied!')); }, }, - i18n: { - copyLabel: s__('Runners|Copy registration token'), - }, + I18N_COPY_BUTTON_TITLE: s__('Runners|Copy registration token'), }; </script> <template> - <gl-button-group> - <gl-button class="gl-font-monospace" data-testid="token-value" label> - {{ displayedValue }} - </gl-button> - <gl-button - v-gl-tooltip - :aria-label="maskLabel" - :title="maskLabel" - :icon="maskIcon" - class="gl-w-auto! gl-flex-shrink-0!" - data-testid="toggle-masked" - @click.stop="onToggleMasked" - /> - <modal-copy-button - class="gl-w-auto! gl-flex-shrink-0!" - :aria-label="$options.i18n.copyLabel" - :title="$options.i18n.copyLabel" - :text="value" - @success="onCopied" - /> - </gl-button-group> + <input-copy-toggle-visibility + class="gl-m-0" + :value="value" + data-testid="token-value" + :copy-button-title="$options.I18N_COPY_BUTTON_TITLE" + @copy="onCopy" + /> </template> |