1 files changed, 49 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/runner/components/registration/registration_token.vue b/app/assets/javascripts/ci/runner/components/registration/registration_token.vue
new file mode 100644
index 00000000000..6b4e6a929b7
--- /dev/null
+++ b/app/assets/javascripts/ci/runner/components/registration/registration_token.vue
@@ -0,0 +1,49 @@
+<script>
+import { s__ } from '~/locale';
+import InputCopyToggleVisibility from '~/vue_shared/components/form/input_copy_toggle_visibility.vue';
+
+export default {
+  components: {
+    InputCopyToggleVisibility,
+  },
+  i18n: {
+    registrationToken: s__('Runners|Registration token'),
+  },
+  props: {
+    inputId: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    formInputGroupProps() {
+      return {
+        id: this.inputId,
+      };
+    },
+  },
+  methods: {
+    onCopy() {
+      // value already in the clipboard, simply notify the user
+      this.$toast?.show(s__('Runners|Registration token copied!'));
+    },
+  },
+  I18N_COPY_BUTTON_TITLE: s__('Runners|Copy registration token'),
+};
+</script>
+<template>
+  <input-copy-toggle-visibility
+    class="gl-m-0"
+    :value="value"
+    :label="$options.i18n.registrationToken"
+    :label-for="inputId"
+    :copy-button-title="$options.I18N_COPY_BUTTON_TITLE"
+    :form-input-group-props="formInputGroupProps"
+    @copy="onCopy"
+  />
+</template>