From f072af2ea48b192ee479f1caca394b84a2c9402c Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas <jvargas@gitlab.com>
Date: Tue, 30 Jan 2018 16:52:36 -0600
Subject: [PATCH] Add confirmation input component

---
 .../components/confirmation_input.vue         | 62 ++++++++++++++++++
 .../add-confirmation-input-for-modals.yml     |  5 ++
 .../components/confirmation_input_spec.js     | 63 +++++++++++++++++++
 3 files changed, 130 insertions(+)
 create mode 100644 app/assets/javascripts/vue_shared/components/confirmation_input.vue
 create mode 100644 changelogs/unreleased/add-confirmation-input-for-modals.yml
 create mode 100644 spec/javascripts/vue_shared/components/confirmation_input_spec.js

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>
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..a6a12614e77
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/confirmation_input_spec.js
@@ -0,0 +1,63 @@
+import Vue from 'vue';
+import confirmationInput from '~/vue_shared/components/confirmation_input.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Confirmation input component', () => {
+  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', () => {
+      expect(vm.$refs.enteredValue.id).toBe(props.inputId);
+    });
+
+    it('sets name of the input field to confirmationKey', () => {
+      expect(vm.$refs.enteredValue.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', shouldEscapeConfirmationValue: 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.$refs.enteredValue.value = 'incorrect';
+        expect(vm.hasCorrectValue()).toBe(false);
+      });
+
+      it('returns true if entered value is correct', () => {
+        vm.$refs.enteredValue.value = props.confirmationValue;
+        expect(vm.hasCorrectValue()).toBe(true);
+      });
+    });
+  });
+});