1 files changed, 151 insertions, 0 deletions
diff --git a/app/assets/javascripts/admin/users/components/modals/delete_user_modal.vue b/app/assets/javascripts/admin/users/components/modals/delete_user_modal.vue
new file mode 100644
index 00000000000..413163c8536
--- /dev/null
+++ b/app/assets/javascripts/admin/users/components/modals/delete_user_modal.vue
@@ -0,0 +1,151 @@
+<script>
+import { GlModal, GlButton, GlFormInput, GlSprintf } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
+import { s__, sprintf } from '~/locale';
+import OncallSchedulesList from '~/vue_shared/components/oncall_schedules_list.vue';
+
+export default {
+  components: {
+    GlModal,
+    GlButton,
+    GlFormInput,
+    GlSprintf,
+    OncallSchedulesList,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    content: {
+      type: String,
+      required: true,
+    },
+    action: {
+      type: String,
+      required: true,
+    },
+    secondaryAction: {
+      type: String,
+      required: true,
+    },
+    deleteUserUrl: {
+      type: String,
+      required: true,
+    },
+    blockUserUrl: {
+      type: String,
+      required: true,
+    },
+    username: {
+      type: String,
+      required: true,
+    },
+    csrfToken: {
+      type: String,
+      required: true,
+    },
+    oncallSchedules: {
+      type: String,
+      required: false,
+      default: '[]',
+    },
+  },
+  data() {
+    return {
+      enteredUsername: '',
+    };
+  },
+  computed: {
+    modalTitle() {
+      return sprintf(this.title, { username: this.username }, false);
+    },
+    secondaryButtonLabel() {
+      return s__('AdminUsers|Block user');
+    },
+    canSubmit() {
+      return this.enteredUsername === this.username;
+    },
+    schedules() {
+      try {
+        return JSON.parse(this.oncallSchedules);
+      } catch (e) {
+        Sentry.captureException(e);
+      }
+      return [];
+    },
+  },
+  methods: {
+    show() {
+      this.$refs.modal.show();
+    },
+    onCancel() {
+      this.enteredUsername = '';
+      this.$refs.modal.hide();
+    },
+    onSecondaryAction() {
+      const { form } = this.$refs;
+
+      form.action = this.blockUserUrl;
+      this.$refs.method.value = 'put';
+
+      form.submit();
+    },
+    onSubmit() {
+      this.$refs.form.submit();
+      this.enteredUsername = '';
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal ref="modal" modal-id="delete-user-modal" :title="modalTitle" kind="danger">
+    <p>
+      <gl-sprintf :message="content">
+        <template #username>
+          <strong>{{ username }}</strong>
+        </template>
+        <template #strong="props">
+          <strong>{{ props.content }}</strong>
+        </template>
+      </gl-sprintf>
+    </p>
+
+    <oncall-schedules-list v-if="schedules.length" :schedules="schedules" :user-name="username" />
+
+    <p>
+      <gl-sprintf :message="s__('AdminUsers|To confirm, type %{username}')">
+        <template #username>
+          <code>{{ username }}</code>
+        </template>
+      </gl-sprintf>
+    </p>
+
+    <form ref="form" :action="deleteUserUrl" method="post" @submit.prevent>
+      <input ref="method" type="hidden" name="_method" value="delete" />
+      <input :value="csrfToken" type="hidden" name="authenticity_token" />
+      <gl-form-input
+        v-model="enteredUsername"
+        autofocus
+        type="text"
+        name="username"
+        autocomplete="off"
+      />
+    </form>
+    <template #modal-footer>
+      <gl-button @click="onCancel">{{ s__('Cancel') }}</gl-button>
+      <gl-button
+        :disabled="!canSubmit"
+        category="secondary"
+        variant="danger"
+        @click="onSecondaryAction"
+      >
+        {{ secondaryAction }}
+      </gl-button>
+      <gl-button :disabled="!canSubmit" category="primary" variant="danger" @click="onSubmit">{{
+        action
+      }}</gl-button>
+    </template>
+  </gl-modal>
+</template>