1 files changed, 62 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/confirmation_input.vue b/app/assets/javascripts/vue_shared/components/confirmation_input.vue
new file mode 100644
index 00000000000..1aa03ea6317
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/confirmation_input.vue
@@ -0,0 +1,62 @@
+<script>
+  import _ from 'underscore';
+  import { __, sprintf } from '~/locale';
+
+  export default {
+    props: {
+      inputId: {
+        type: String,
+        required: true,
+      },
+      confirmationKey: {
+        type: String,
+        required: true,
+      },
+      confirmationValue: {
+        type: String,
+        required: true,
+      },
+      shouldEscapeConfirmationValue: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+    },
+    computed: {
+      inputLabel() {
+        let value = this.confirmationValue;
+        if (this.shouldEscapeConfirmationValue) {
+          value = _.escape(value);
+        }
+
+        return sprintf(
+          __('Type %{value} to confirm:'),
+          { value: `<code>${value}</code>` },
+          false,
+        );
+      },
+    },
+    methods: {
+      hasCorrectValue() {
+        return this.$refs.enteredValue.value === this.confirmationValue;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div>
+    <label
+      v-html="inputLabel"
+      :for="inputId"
+    >
+    </label>
+    <input
+      :id="inputId"
+      :name="confirmationKey"
+      type="text"
+      ref="enteredValue"
+      class="form-control"
+    />
+  </div>
+</template>