1 files changed, 74 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/mixins/confirmation_input_mixin.vue b/app/assets/javascripts/vue_shared/mixins/confirmation_input_mixin.vue
new file mode 100644
index 00000000000..5bfb825fbe3
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/mixins/confirmation_input_mixin.vue
@@ -0,0 +1,74 @@
+<script>
+  import _ from 'underscore';
+  import { __, sprintf } from '~/locale';
+
+  export default {
+    data() {
+      return {
+        enteredValue: '',
+      };
+    },
+    computed: {
+      id() {
+        if (!this.$parent.id) {
+          throw new Error('Extending component needs to override this!');
+        }
+        return `${this.$parent.id}-input`;
+      },
+      // eslint-disable-next-line vue/return-in-computed-property
+      confirmationValue() {
+        throw new Error('Extending component needs to override this!');
+      },
+      inputLabel() {
+        let value = this.confirmationValue;
+        if (this.shouldEscapeConfirmationValue) {
+          value = _.escape(value);
+        }
+
+        return sprintf(
+          __('Type %{value} to confirm:'),
+          { value: `<code>${value}</code>` },
+          false,
+        );
+      },
+      shouldEscapeConfirmationValue() {
+        return true;
+      },
+    },
+    mounted() {
+      this.$parent.$on('clearInputs', this.clear);
+    },
+    beforeDestroy() {
+      this.$parent.$off('clearInputs', this.clear);
+    },
+    created() {
+      this.onInput();
+    },
+    methods: {
+      clear() {
+        this.enteredValue = '';
+      },
+      onInput() {
+        this.$parent.$emit(
+          'toggleCanSubmit',
+          this.enteredValue === this.confirmationValue,
+        );
+      },
+    },
+  };
+</script>
+
+<template>
+  <div>
+    <label
+      v-html="inputLabel"
+      :for="id"></label>
+    <input
+      :id="id"
+      type="text"
+      class="form-control"
+      v-model="enteredValue"
+      @input="onInput"
+    />
+  </div>
+</template>