Merge branch '28365-bypass-confirmation-box-for-delete-user-and-contributions' into 'master'

Resolve "Bypass confirmation box for 'delete user and contributions'"

Closes #28365

See merge request gitlab-org/gitlab!17343

app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue

@@ -109,7 +109,7 @@ export default {
     <template>
       <p v-html="text"></p>
       <p v-html="confirmationTextLabel"></p>
-      <form ref="form" :action="deleteUserUrl" method="post">
+      <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

changelogs/unreleased/28365-bypass-confirmation-box-for-delete-user-and-contributions.yml

+---
+title: Fix delete user dialog bypass caused by hitting enter
+merge_request: 17343
+author:
+type: fixed

spec/frontend/pages/admin/users/components/delete_user_modal_spec.js

@@ -3,26 +3,46 @@ import { GlButton, GlFormInput } from '@gitlab/ui';
 import DeleteUserModal from '~/pages/admin/users/components/delete_user_modal.vue';
 import ModalStub from './stubs/modal_stub';
 
+const TEST_DELETE_USER_URL = 'delete-url';
+const TEST_BLOCK_USER_URL = 'block-url';
+const TEST_CSRF = 'csrf';
+
 describe('User Operation confirmation modal', () => {
   let wrapper;
+  let formSubmitSpy;
 
   const findButton = variant =>
     wrapper
       .findAll(GlButton)
       .filter(w => w.attributes('variant') === variant)
       .at(0);
+  const findForm = () => wrapper.find('form');
+  const findUsernameInput = () => wrapper.find(GlFormInput);
+  const findPrimaryButton = () => findButton('danger');
+  const findSecondaryButton = () => findButton('warning');
+  const findAuthenticityToken = () => new FormData(findForm().element).get('authenticity_token');
+  const getUsername = () => findUsernameInput().attributes('value');
+  const getMethodParam = () => new FormData(findForm().element).get('_method');
+  const getFormAction = () => findForm().attributes('action');
+
+  const setUsername = username => {
+    findUsernameInput().vm.$emit('input', username);
+  };
+
+  const username = 'username';
+  const badUsername = 'bad_username';
 
   const createComponent = (props = {}) => {
     wrapper = shallowMount(DeleteUserModal, {
       propsData: {
+        username,
         title: 'title',
         content: 'content',
         action: 'action',
         secondaryAction: 'secondaryAction',
-        deleteUserUrl: 'delete-url',
-        blockUserUrl: 'block-url',
-        username: 'username',
-        csrfToken: 'csrf',
+        deleteUserUrl: TEST_DELETE_USER_URL,
+        blockUserUrl: TEST_BLOCK_USER_URL,
+        csrfToken: TEST_CSRF,
         ...props,
       },
       stubs: {
@@ -32,6 +52,10 @@ describe('User Operation confirmation modal', () => {
     });
   };
 
+  beforeEach(() => {
+    formSubmitSpy = jest.spyOn(HTMLFormElement.prototype, 'submit').mockImplementation();
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -42,44 +66,84 @@ describe('User Operation confirmation modal', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it.each`
-    variant      | prop               | action
-    ${'danger'}  | ${'deleteUserUrl'} | ${'delete'}
-    ${'warning'} | ${'blockUserUrl'}  | ${'block'}
-  `('closing modal with $variant button triggers $action', ({ variant, prop }) => {
+  describe('on created', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('has disabled buttons', () => {
+      expect(findPrimaryButton().attributes('disabled')).toBeTruthy();
+      expect(findSecondaryButton().attributes('disabled')).toBeTruthy();
+    });
+  });
+
+  describe('with incorrect username', () => {
+    beforeEach(() => {
       createComponent();
-    const form = wrapper.find('form');
-    jest.spyOn(form.element, 'submit').mockReturnValue();
-    const modalButton = findButton(variant);
-    modalButton.vm.$emit('click');
-    return wrapper.vm.$nextTick().then(() => {
-      expect(form.element.submit).toHaveBeenCalled();
-      expect(form.element.action).toContain(wrapper.props(prop));
-      expect(new FormData(form.element).get('authenticity_token')).toEqual(
-        wrapper.props('csrfToken'),
-      );
+      setUsername(badUsername);
+
+      return wrapper.vm.$nextTick();
+    });
+
+    it('shows incorrect username', () => {
+      expect(getUsername()).toEqual(badUsername);
+    });
+
+    it('has disabled buttons', () => {
+      expect(findPrimaryButton().attributes('disabled')).toBeTruthy();
+      expect(findSecondaryButton().attributes('disabled')).toBeTruthy();
     });
   });
 
-  it('disables buttons by default', () => {
+  describe('with correct username', () => {
+    beforeEach(() => {
       createComponent();
-    const blockButton = findButton('warning');
-    const deleteButton = findButton('danger');
-    expect(blockButton.attributes().disabled).toBeTruthy();
-    expect(deleteButton.attributes().disabled).toBeTruthy();
+      setUsername(username);
+
+      return wrapper.vm.$nextTick();
+    });
+
+    it('shows correct username', () => {
+      expect(getUsername()).toEqual(username);
+    });
+
+    it('has enabled buttons', () => {
+      expect(findPrimaryButton().attributes('disabled')).toBeFalsy();
+      expect(findSecondaryButton().attributes('disabled')).toBeFalsy();
+    });
+
+    describe('when primary action is submitted', () => {
+      beforeEach(() => {
+        findPrimaryButton().vm.$emit('click');
+
+        return wrapper.vm.$nextTick();
+      });
+
+      it('clears the input', () => {
+        expect(getUsername()).toEqual('');
+      });
+
+      it('has correct form attributes and calls submit', () => {
+        expect(getFormAction()).toBe(TEST_DELETE_USER_URL);
+        expect(getMethodParam()).toBe('delete');
+        expect(findAuthenticityToken()).toBe(TEST_CSRF);
+        expect(formSubmitSpy).toHaveBeenCalled();
+      });
     });
 
-  it('enables button when username is typed', () => {
-    createComponent({
-      username: 'some-username',
+    describe('when secondary action is submitted', () => {
+      beforeEach(() => {
+        findSecondaryButton().vm.$emit('click');
+
+        return wrapper.vm.$nextTick();
       });
-    wrapper.find(GlFormInput).vm.$emit('input', 'some-username');
-    const blockButton = findButton('warning');
-    const deleteButton = findButton('danger');
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(blockButton.attributes().disabled).toBeFalsy();
-      expect(deleteButton.attributes().disabled).toBeFalsy();
+      it('has correct form attributes and calls submit', () => {
+        expect(getFormAction()).toBe(TEST_BLOCK_USER_URL);
+        expect(getMethodParam()).toBe('put');
+        expect(findAuthenticityToken()).toBe(TEST_CSRF);
+        expect(formSubmitSpy).toHaveBeenCalled();
+      });
     });
   });
 });