Add confirmation input componentadd-confirmation-input-for-modals

3 files changed, 138 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..d27c35e55f6
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/confirmation_input.vue
@@ -0,0 +1,66 @@
+<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,
+      },
+      escapeValue: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+    },
+    data() {
+      return {
+        enteredValue: '',
+      };
+    },
+    computed: {
+      inputLabel() {
+        let value = this.confirmationValue;
+        if (this.escapeValue) {
+          value = _.escape(value);
+        }
+
+        return sprintf(
+          __('Type %{value} to confirm:'),
+          { value: `<code>${value}</code>` },
+          false,
+        );
+      },
+    },
+    methods: {
+      hasCorrectValue() {
+        return this.enteredValue === this.confirmationValue;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div>
+    <label
+      v-html="inputLabel"
+      :for="inputId"></label>
+    <input
+      :id="inputId"
+      :name="confirmationKey"
+      type="text"
+      v-model="enteredValue"
+      class="form-control"
+    />
+  </div>
+</template>
diff --git a/changelogs/unreleased/add-confirmation-input-for-modals.yml b/changelogs/unreleased/add-confirmation-input-for-modals.yml
new file mode 100644
index 00000000000..ff1027bc55a
--- /dev/null
+++ b/changelogs/unreleased/add-confirmation-input-for-modals.yml
@@ -0,0 +1,5 @@
+---
+title: Add confirmation-input component
+merge_request: 16816
+author:
+type: other
diff --git a/spec/javascripts/vue_shared/components/confirmation_input_spec.js b/spec/javascripts/vue_shared/components/confirmation_input_spec.js
new file mode 100644
index 00000000000..b31ab487234
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/confirmation_input_spec.js
@@ -0,0 +1,67 @@
+import Vue from 'vue';
+
+import confirmationInput from '~/vue_shared/components/confirmation_input.vue';
+
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('confirmation_input.vue', () => {
+  const Component = Vue.extend(confirmationInput);
+  const props = {
+    inputId: 'dummy-id',
+    confirmationKey: 'confirmation-key',
+    confirmationValue: 'confirmation-value',
+  };
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('props', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, props);
+    });
+
+    it('sets id of the input field to inputId', () => {
+      const inputField = vm.$el.querySelector('input');
+      expect(inputField.id).toBe(props.inputId);
+    });
+
+    it('sets name of the input field to confirmationKey', () => {
+      const inputField = vm.$el.querySelector('input');
+      expect(inputField.name).toBe(props.confirmationKey);
+    });
+  });
+
+  describe('computed', () => {
+    describe('inputLabel', () => {
+      it('escapes confirmationValue by default', () => {
+        vm = mountComponent(Component, { ...props, confirmationValue: 'n<e></e>ds escap"ng' });
+        expect(vm.inputLabel).toBe('Type <code>n&lt;e&gt;&lt;/e&gt;ds escap&quot;ng</code> to confirm:');
+      });
+
+      it('does not escape confirmationValue if escapeValue is false', () => {
+        vm = mountComponent(Component, { ...props, confirmationValue: 'n<e></e>ds escap"ng', escapeValue: false });
+        expect(vm.inputLabel).toBe('Type <code>n<e></e>ds escap"ng</code> to confirm:');
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('hasCorrectValue', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, props);
+      });
+
+      it('returns false if entered value is incorrect', () => {
+        vm.enteredValue = 'incorrect';
+        expect(vm.hasCorrectValue()).toBe(false);
+      });
+
+      it('returns true if entered value is correct', () => {
+        vm.enteredValue = props.confirmationValue;
+        expect(vm.hasCorrectValue()).toBe(true);
+      });
+    });
+  });
+});