feat: Ask to confirm with name before inbox/team deletion (#2370)

app/javascript/dashboard/components/index.js

@@ -6,6 +6,7 @@ import Button from './ui/WootButton';
 import Code from './Code';
 import ColorPicker from './widgets/ColorPicker';
 import DeleteModal from './widgets/modal/DeleteModal.vue';
+import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
 import DropdownItem from 'shared/components/ui/dropdown/DropdownItem';
 import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
 import Input from './widgets/forms/Input.vue';
@@ -42,6 +43,7 @@ const WootUIKit = {
   Tabs,
   TabsItem,
   Thumbnail,
+  ConfirmDeleteModal,
   install(Vue) {
     const keys = Object.keys(this);
     keys.pop(); // remove 'install' from keys

app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue

@@ -0,0 +1,86 @@
+<template>
+  <modal :show.sync="show" :on-close="closeModal">
+    <woot-modal-header :header-title="title" :header-content="message" />
+    <form @submit.prevent="onConfirm">
+      <woot-input
+        v-model="value"
+        type="text"
+        :class="{ error: $v.value.$error }"
+        :placeholder="confirmPlaceHolderText"
+        @blur="$v.value.$touch"
+      />
+      <div class="button-wrapper">
+        <woot-button color-scheme="alert" :is-disabled="$v.value.$invalid">
+          {{ confirmText }}
+        </woot-button>
+        <woot-button class="clear" @click.prevent="closeModal">
+          {{ rejectText }}
+        </woot-button>
+      </div>
+    </form>
+  </modal>
+</template>
+
+<script>
+import { required } from 'vuelidate/lib/validators';
+import Modal from '../../Modal';
+
+export default {
+  components: {
+    Modal,
+  },
+
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    message: {
+      type: String,
+      default: '',
+    },
+    confirmText: {
+      type: String,
+      default: '',
+    },
+    rejectText: {
+      type: String,
+      default: '',
+    },
+    confirmValue: {
+      type: String,
+      default: '',
+    },
+    confirmPlaceHolderText: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      value: '',
+    };
+  },
+  validations: {
+    value: {
+      required,
+      isEqual(value) {
+        return value === this.confirmValue;
+      },
+    },
+  },
+  methods: {
+    closeModal() {
+      this.value = '';
+      this.$emit('on-close');
+    },
+    onConfirm() {
+      this.$emit('on-confirm');
+    },
+  },
+};
+</script>