1 files changed, 55 insertions, 0 deletions
diff --git a/app/assets/javascripts/access_tokens/components/token.vue b/app/assets/javascripts/access_tokens/components/token.vue
new file mode 100644
index 00000000000..3954e541fe0
--- /dev/null
+++ b/app/assets/javascripts/access_tokens/components/token.vue
@@ -0,0 +1,55 @@
+<script>
+import InputCopyToggleVisibility from '~/vue_shared/components/form/input_copy_toggle_visibility.vue';
+
+export default {
+  components: { InputCopyToggleVisibility },
+  props: {
+    token: {
+      type: String,
+      required: true,
+    },
+    inputId: {
+      type: String,
+      required: true,
+    },
+    inputLabel: {
+      type: String,
+      required: true,
+    },
+    copyButtonTitle: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    formInputGroupProps() {
+      return { id: this.inputId };
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-lg-12">
+      <hr />
+    </div>
+    <div class="col-lg-4">
+      <h4 class="gl-mt-0"><slot name="title"></slot></h4>
+      <slot name="description"></slot>
+    </div>
+    <div class="col-lg-8">
+      <input-copy-toggle-visibility
+        :label="inputLabel"
+        :label-for="inputId"
+        :form-input-group-props="formInputGroupProps"
+        :value="token"
+        :copy-button-title="copyButtonTitle"
+      >
+        <template #description>
+          <slot name="input-description"></slot>
+        </template>
+      </input-copy-toggle-visibility>
+    </div>
+  </div>
+</template>