diff --git a/kolibri/core/assets/src/views/CoreBase/index.vue b/kolibri/core/assets/src/views/CoreBase/index.vue
index c321e05d254..92ce5e6f385 100644
--- a/kolibri/core/assets/src/views/CoreBase/index.vue
+++ b/kolibri/core/assets/src/views/CoreBase/index.vue
@@ -98,12 +98,12 @@
       :msg="mostRecentNotification.msg"
       :linkText="mostRecentNotification.linkText"
       :linkUrl="mostRecentNotification.linkUrl"
-      @closeModal="dismissUpdateModal"
+      @submit="dismissUpdateModal"
     />
     <LanguageSwitcherModal
       v-if="languageModalShown"
       :style="{ color: $coreTextDefault }"
-      @close="languageModalShown = false"
+      @cancel="languageModalShown = false"
     />
 
   </div>
diff --git a/kolibri/core/assets/src/views/KModal.vue b/kolibri/core/assets/src/views/KModal.vue
index 345ee24193c..eb248a9c821 100644
--- a/kolibri/core/assets/src/views/KModal.vue
+++ b/kolibri/core/assets/src/views/KModal.vue
@@ -93,10 +93,13 @@
 <script>
 
   import themeMixin from 'kolibri.coreVue.mixins.themeMixin';
+  import logger from 'kolibri.lib.logging';
   import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';
   import debounce from 'lodash/debounce';
   import KButton from 'kolibri.coreVue.components.KButton';
 
+  const logging = logger.getLogger(__filename);
+
   /**
    * Used to focus attention on a singular action/task
    */
@@ -189,6 +192,18 @@
         return { 'max-height': `${this.maxContentHeight}px` };
       },
     },
+    created() {
+      if (this.$props.cancelText && !this.$listeners.cancel) {
+        logging.warn(
+          'A "cancelText" has been set, but there is no "cancel" listener. The "cancel" button may not work correctly.'
+        );
+      }
+      if (this.$props.submitText && !this.$listeners.submit) {
+        logging.warn(
+          'A "submitText" has been set, but there is no "submit" listener. The "submit" button may not work correctly.'
+        );
+      }
+    },
     beforeMount() {
       this.lastFocus = document.activeElement;
     },
diff --git a/kolibri/core/assets/src/views/SideNav.vue b/kolibri/core/assets/src/views/SideNav.vue
index 07ce8fc998c..ef4fe2dfb1f 100644
--- a/kolibri/core/assets/src/views/SideNav.vue
+++ b/kolibri/core/assets/src/views/SideNav.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div ref="sideNav" class="side-nav-wrapper" @keydown.esc="toggleNav">
+  <div ref="sideNav" class="side-nav-wrapper" @keyup.esc="toggleNav">
     <transition name="side-nav">
       <div
         v-show="navShown"
diff --git a/kolibri/core/assets/src/views/UpdateNotification.vue b/kolibri/core/assets/src/views/UpdateNotification.vue
index 5f206a5c5fd..75b2cb1b858 100644
--- a/kolibri/core/assets/src/views/UpdateNotification.vue
+++ b/kolibri/core/assets/src/views/UpdateNotification.vue
@@ -84,7 +84,7 @@
           this.saveDismissedNotification(this.id);
         }
         this.removeNotification(this.id);
-        this.$emit('closeModal');
+        this.$emit('submit');
       },
     },
     $trs: {
diff --git a/kolibri/core/assets/src/views/buttons-and-links/KButton.vue b/kolibri/core/assets/src/views/buttons-and-links/KButton.vue
index 24f63a6203d..b3fa2c019cf 100644
--- a/kolibri/core/assets/src/views/buttons-and-links/KButton.vue
+++ b/kolibri/core/assets/src/views/buttons-and-links/KButton.vue
@@ -13,7 +13,7 @@
   >
     <slot v-if="$slots.default"></slot>
     <template v-else>
-      {{ text }}
+      <span>{{ text }}</span>
     </template>
     <mat-svg
       v-if="hasDropdown"
diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
index 07c529490ea..a8763fb9b1c 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
@@ -36,7 +36,7 @@
     <LanguageSwitcherModal
       v-if="showLanguageModal"
       class="ta-l"
-      @close="showLanguageModal = false"
+      @cancel="showLanguageModal = false"
     />
   </div>
 
diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
index 8fcf809be7f..cef56ff208d 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
@@ -4,8 +4,8 @@
     :title="$tr('changeLanguageModalHeader')"
     :submitText="$tr('confirmButtonText')"
     :cancelText="$tr('cancelButtonText')"
+    @cancel="$emit('cancel')"
     @submit="setLang"
-    @cancel="closeModal"
   >
     <KGrid>
       <KGridItem
@@ -66,9 +66,6 @@
       },
     },
     methods: {
-      closeModal() {
-        this.$emit('close');
-      },
       setLang() {
         this.switchLanguage(this.selectedLanguage);
       },
diff --git a/kolibri/plugins/coach/assets/src/views/plan/GroupMembersPage/RemoveFromGroupModal.vue b/kolibri/plugins/coach/assets/src/views/plan/GroupMembersPage/RemoveFromGroupModal.vue
index 31582c87aa5..b024d5191b8 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/GroupMembersPage/RemoveFromGroupModal.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/GroupMembersPage/RemoveFromGroupModal.vue
@@ -5,8 +5,8 @@
     :hasError="false"
     :submitText="$tr('remove')"
     :cancelText="$tr('cancel')"
-    @submit="$emit('confirm')"
     @cancel="$emit('cancel')"
+    @submit="$emit('submit')"
   >
     <p>
       {{ $tr('confirmation', { username: username, classname: groupName }) }}
diff --git a/kolibri/plugins/coach/assets/src/views/plan/GroupMembersPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/GroupMembersPage/index.vue
index 2cf60c9c0c6..608e1944db7 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/GroupMembersPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/GroupMembersPage/index.vue
@@ -93,7 +93,7 @@
           :groupName="currentGroup.name"
           :username="userForRemoval.full_name"
           @cancel="userForRemoval = null"
-          @confirm="removeSelectedUserFromGroup"
+          @submit="removeSelectedUserFromGroup"
         />
       </div>
     </KPageContainer>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/CreateGroupModal.vue b/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/CreateGroupModal.vue
index 341636e66be..4471fabb665 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/CreateGroupModal.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/CreateGroupModal.vue
@@ -6,8 +6,8 @@
     :submitText="$tr('save')"
     :cancelText="$tr('cancel')"
     :submitDisabled="submitting"
+    @cancel="$emit('cancel')"
     @submit="callCreateGroup"
-    @cancel="close"
   >
     <KTextbox
       ref="name"
@@ -82,21 +82,18 @@
       },
     },
     methods: {
-      ...mapActions('groups', ['displayModal', 'createGroup']),
+      ...mapActions('groups', ['createGroup']),
       callCreateGroup() {
         this.formSubmitted = true;
         if (this.formIsValid) {
           this.submitting = true;
           this.createGroup({ groupName: this.name, classId: this.classId }).then(() => {
-            this.$emit('success');
+            this.$emit('submit');
           });
         } else {
           this.$refs.name.focus();
         }
       },
-      close() {
-        this.displayModal(false);
-      },
     },
     $trs: {
       newLearnerGroup: 'Create new group',
diff --git a/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/DeleteGroupModal.vue b/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/DeleteGroupModal.vue
index f319b3d7ad1..7a096a6628c 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/DeleteGroupModal.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/DeleteGroupModal.vue
@@ -5,7 +5,7 @@
     :submitText="$tr('deleteGroup')"
     :cancelText="$tr('cancel')"
     @submit="handleSubmit"
-    @cancel="close"
+    @cancel="$emit('cancel')"
   >
     <p>{{ $tr('areYouSure', { groupName: groupName }) }}</p>
   </KModal>
@@ -34,15 +34,12 @@
       },
     },
     methods: {
-      ...mapActions('groups', ['displayModal', 'deleteGroup']),
+      ...mapActions('groups', ['deleteGroup']),
       handleSubmit() {
         this.deleteGroup(this.groupId).then(() => {
-          this.$emit('success');
+          this.$emit('submit');
         });
       },
-      close() {
-        this.displayModal(false);
-      },
     },
     $trs: {
       deleteLearnerGroup: 'Delete group',
diff --git a/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/RenameGroupModal.vue b/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/RenameGroupModal.vue
index e77f901c10c..82656fed1c5 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/RenameGroupModal.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/RenameGroupModal.vue
@@ -7,7 +7,7 @@
     :cancelText="$tr('cancel')"
     :submitDisabled="submitting"
     @submit="callRenameGroup"
-    @cancel="close"
+    @cancel="$emit('cancel')"
   >
     <KTextbox
       ref="name"
@@ -92,7 +92,7 @@
       },
     },
     methods: {
-      ...mapActions('groups', ['renameGroup', 'displayModal']),
+      ...mapActions('groups', ['renameGroup']),
       callRenameGroup() {
         this.formSubmitted = true;
         if (this.formIsValid) {
@@ -105,9 +105,6 @@
           this.$refs.name.focus();
         }
       },
-      close() {
-        this.displayModal(false);
-      },
     },
     $trs: {
       renameLearnerGroup: 'Rename group',
diff --git a/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/index.vue
index e0d9d04e115..f49ec4cea9b 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/index.vue
@@ -50,7 +50,8 @@
       <CreateGroupModal
         v-if="showCreateGroupModal"
         :groups="sortedGroups"
-        @success="handleSuccessCreateGroup"
+        @submit="handleSuccessCreateGroup"
+        @cancel="closeModal"
       />
 
       <RenameGroupModal
@@ -58,13 +59,15 @@
         :groupName="selectedGroup.name"
         :groupId="selectedGroup.id"
         :groups="sortedGroups"
+        @cancel="closeModal"
       />
 
       <DeleteGroupModal
         v-if="showDeleteGroupModal"
         :groupName="selectedGroup.name"
         :groupId="selectedGroup.id"
-        @success="handleSuccessDeleteGroup"
+        @submit="handleSuccessDeleteGroup"
+        @cancel="closeModal"
       />
 
     </KPageContainer>
@@ -125,6 +128,9 @@
     methods: {
       ...mapActions('groups', ['displayModal']),
       ...mapActions(['createSnackbar']),
+      closeModal() {
+        this.displayModal(false);
+      },
       openCreateGroupModal() {
         this.displayModal(GroupModals.CREATE_GROUP);
       },
diff --git a/kolibri/plugins/coach/assets/src/views/plan/assignments/AssignmentCopyModal.vue b/kolibri/plugins/coach/assets/src/views/plan/assignments/AssignmentCopyModal.vue
index 2def0364b51..1c85e9f48c8 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/assignments/AssignmentCopyModal.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/assignments/AssignmentCopyModal.vue
@@ -8,8 +8,8 @@
       :title="modalTitle"
       :submitText="coachStrings.$tr('continueAction')"
       :cancelText="coachStrings.$tr('cancelAction')"
-      @cancel="$emit('cancel')"
       @submit="goToAvailableGroups"
+      @cancel="$emit('cancel')"
     >
       <KRadioButton
         v-for="classroom in availableClassrooms"
@@ -27,8 +27,8 @@
       :title="modalTitle"
       :submitText="coachStrings.$tr('copyAction')"
       :cancelText="coachStrings.$tr('cancelAction')"
-      @cancel="$emit('cancel')"
       @submit="$emit('submit', selectedClassroomId, selectedCollectionIds)"
+      @cancel="$emit('cancel')"
     >
       <p>{{ $tr('destinationExplanation', { classroomName: selectedClassroomName }) }}</p>
       <p>{{ assignmentQuestion }}</p>
diff --git a/kolibri/plugins/coach/assets/test/views/AssignmentDeleteModal.spec.js b/kolibri/plugins/coach/assets/test/views/AssignmentDeleteModal.spec.js
index 7e48a640707..7346fad50cd 100644
--- a/kolibri/plugins/coach/assets/test/views/AssignmentDeleteModal.spec.js
+++ b/kolibri/plugins/coach/assets/test/views/AssignmentDeleteModal.spec.js
@@ -10,7 +10,6 @@ const defaultProps = {
 function makeWrapper(options) {
   const wrapper = mount(AssignmentDeleteModal, options);
   const els = {
-    submitButton: () => wrapper.find('button[type="submit"]'),
     cancelButton: () => wrapper.find('button[type="button"]'),
     form: () => wrapper.find('form'),
   };
@@ -18,23 +17,29 @@ function makeWrapper(options) {
 }
 
 describe('AssignmentDeleteModal', () => {
-  it('clicking delete causes a "delete" event to be emitted', () => {
-    const { wrapper, els } = makeWrapper({
+  it('clicking delete causes a "submit" event to be emitted', () => {
+    const submitListener = jest.fn();
+    const { els } = makeWrapper({
       propsData: { ...defaultProps },
       store,
+      listeners: {
+        submit: submitListener,
+      },
     });
-    // Again, clicking the submit button does not propagate to form, so doing a hack
-    // els.submitButton().trigger('click');
     els.form().trigger('submit');
-    expect(wrapper.emitted().submit.length).toEqual(1);
+    expect(submitListener).toHaveBeenCalled();
   });
 
   it('clicking cancel causes a "cancel" event to be emitted', () => {
-    const { wrapper, els } = makeWrapper({
+    const cancelListener = jest.fn();
+    const { els } = makeWrapper({
       propsData: { ...defaultProps },
       store,
+      listeners: {
+        cancel: cancelListener,
+      },
     });
     els.cancelButton().trigger('click');
-    expect(wrapper.emitted().cancel.length).toEqual(1);
+    expect(cancelListener).toHaveBeenCalled();
   });
 });
diff --git a/kolibri/plugins/device_management/assets/src/views/AvailableChannelsPage/ChannelTokenModal.vue b/kolibri/plugins/device_management/assets/src/views/AvailableChannelsPage/ChannelTokenModal.vue
index 7e39276b516..59cd24b1946 100644
--- a/kolibri/plugins/device_management/assets/src/views/AvailableChannelsPage/ChannelTokenModal.vue
+++ b/kolibri/plugins/device_management/assets/src/views/AvailableChannelsPage/ChannelTokenModal.vue
@@ -7,7 +7,7 @@
     :submitDisabled="formIsDisabled"
     :cancelDisabled="formIsDisabled"
     @submit="submitForm"
-    @cancel="$emit('closemodal')"
+    @cancel="$emit('cancel')"
   >
     <p>{{ $tr('tokenExplanation') }}</p>
 
@@ -80,9 +80,9 @@
               // tokens can return one or more channels
               if (channels.length > 1) {
                 this.setAvailableChannels(channels);
-                this.$emit('closemodal');
+                this.$emit('cancel');
               } else {
-                this.$emit('channelfound', channels[0]);
+                this.$emit('submit', channels[0]);
               }
             })
             .catch(error => {
diff --git a/kolibri/plugins/device_management/assets/src/views/AvailableChannelsPage/index.vue b/kolibri/plugins/device_management/assets/src/views/AvailableChannelsPage/index.vue
index b16aafe1e2d..4adb2b49a1e 100644
--- a/kolibri/plugins/device_management/assets/src/views/AvailableChannelsPage/index.vue
+++ b/kolibri/plugins/device_management/assets/src/views/AvailableChannelsPage/index.vue
@@ -43,8 +43,8 @@
     >
       <ChannelTokenModal
         v-if="showTokenModal"
-        @closemodal="showTokenModal=false"
-        @channelfound="goToSelectContentPageForChannel"
+        @cancel="showTokenModal=false"
+        @submit="goToSelectContentPageForChannel"
       />
       <span>{{ $tr('channelNotListedExplanation') }}&nbsp;</span>
 
diff --git a/kolibri/plugins/device_management/assets/src/views/DeviceIndex.vue b/kolibri/plugins/device_management/assets/src/views/DeviceIndex.vue
index 359e19ab5e8..0a38aec4be5 100644
--- a/kolibri/plugins/device_management/assets/src/views/DeviceIndex.vue
+++ b/kolibri/plugins/device_management/assets/src/views/DeviceIndex.vue
@@ -14,7 +14,7 @@
     <transition name="delay-entry">
       <WelcomeModal
         v-if="welcomeModalVisible"
-        @closeModal="hideWelcomeModal"
+        @submit="hideWelcomeModal"
       />
     </transition>
 
diff --git a/kolibri/plugins/device_management/assets/src/views/ManageContentPage/ChannelsGrid.vue b/kolibri/plugins/device_management/assets/src/views/ManageContentPage/ChannelsGrid.vue
index 6a01c033fb0..230edd581e7 100644
--- a/kolibri/plugins/device_management/assets/src/views/ManageContentPage/ChannelsGrid.vue
+++ b/kolibri/plugins/device_management/assets/src/views/ManageContentPage/ChannelsGrid.vue
@@ -37,7 +37,7 @@
     <DeleteChannelModal
       v-if="channelIsSelected"
       :channelTitle="selectedChannelTitle"
-      @confirm="handleDeleteChannel"
+      @submit="handleDeleteChannel"
       @cancel="selectedChannelId=null"
     />
   </div>
diff --git a/kolibri/plugins/device_management/assets/src/views/ManageContentPage/DeleteChannelModal.vue b/kolibri/plugins/device_management/assets/src/views/ManageContentPage/DeleteChannelModal.vue
index c511d482f3a..e44360209d7 100644
--- a/kolibri/plugins/device_management/assets/src/views/ManageContentPage/DeleteChannelModal.vue
+++ b/kolibri/plugins/device_management/assets/src/views/ManageContentPage/DeleteChannelModal.vue
@@ -4,8 +4,8 @@
     :title="$tr('title')"
     :submitText="$tr('confirmButtonLabel')"
     :cancelText="$tr('cancelButtonLabel')"
-    @submit="handleClickConfirm"
-    @cancel="handleClickCancel"
+    @submit="$emit('submit')"
+    @cancel="$emit('cancel')"
   >
     <p>{{ $tr('confirmationQuestion', { channelTitle }) }}</p>
   </KModal>
@@ -28,14 +28,6 @@
         required: true,
       },
     },
-    methods: {
-      handleClickCancel() {
-        this.$emit('cancel');
-      },
-      handleClickConfirm() {
-        this.$emit('confirm');
-      },
-    },
     $trs: {
       confirmationQuestion: `Are you sure you want to delete '{ channelTitle }' from your device?`,
       title: 'Delete channel',
diff --git a/kolibri/plugins/device_management/assets/src/views/WelcomeModal.vue b/kolibri/plugins/device_management/assets/src/views/WelcomeModal.vue
index eada160fb8a..c59a0b28726 100644
--- a/kolibri/plugins/device_management/assets/src/views/WelcomeModal.vue
+++ b/kolibri/plugins/device_management/assets/src/views/WelcomeModal.vue
@@ -3,8 +3,6 @@
   <KModal
     :title="$tr('welcomeModalHeader')"
     :submitText="$tr('welcomeButtonDismissText')"
-    @submit="emitCloseModal"
-    @cancel="emitCloseModal"
   >
     <p class="welcome-modal-description">
       {{ $tr('welcomeModalContentDescription') }}
@@ -27,11 +25,6 @@
     components: {
       KModal,
     },
-    methods: {
-      emitCloseModal() {
-        this.$emit('closeModal');
-      },
-    },
     render: createElement => window.setTimeout(createElement, 750),
     $trs: {
       welcomeModalHeader: 'Welcome to Kolibri!',
diff --git a/kolibri/plugins/device_management/assets/test/views/channel-token-modal.spec.js b/kolibri/plugins/device_management/assets/test/views/channel-token-modal.spec.js
index a27fd8cea84..c2b3b13597c 100644
--- a/kolibri/plugins/device_management/assets/test/views/channel-token-modal.spec.js
+++ b/kolibri/plugins/device_management/assets/test/views/channel-token-modal.spec.js
@@ -2,8 +2,8 @@ import { mount } from '@vue/test-utils';
 import store from 'kolibri.coreVue.vuex.store';
 import ChannelTokenModal from '../../src/views/AvailableChannelsPage/ChannelTokenModal';
 
-function makeWrapper() {
-  return mount(ChannelTokenModal, { store });
+function makeWrapper(options = {}) {
+  return mount(ChannelTokenModal, { store, ...options });
 }
 
 function getElements(wrapper) {
@@ -25,21 +25,24 @@ describe('channelTokenModal component', () => {
     wrapper = makeWrapper();
   });
 
-  it('pressing "cancel" emits a close modal event', () => {
+  it('pressing "cancel" emits a "cancel" event', () => {
+    const cancelListener = jest.fn();
+    wrapper = makeWrapper({
+      listeners: {
+        cancel: cancelListener,
+      },
+    });
     const { cancelButton } = getElements(wrapper);
     cancelButton().trigger('click');
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.emitted().closemodal.length).toEqual(1);
-    });
+    expect(cancelListener).toHaveBeenCalled();
   });
 
   describe('submitting a token', () => {
-    function inputToken(wrapper, token) {
+    async function inputToken(wrapper, token) {
       const textbox = getElements(wrapper).tokenTextbox();
       textbox.vm.$emit('input', token);
-      return wrapper.vm.$nextTick().then(() => {
-        expect(textbox.props().value).toEqual(token.trim());
-      });
+      await wrapper.vm.$nextTick();
+      expect(textbox.props().value).toEqual(token.trim());
     }
 
     function assertTextboxInvalid(wrapper) {
@@ -72,7 +75,7 @@ describe('channelTokenModal component', () => {
         });
     });
 
-    it('emits a "channel found" event  if token lookup is successful', () => {
+    it('emits a "submit" event if token lookup is successful', () => {
       const tokenPayload = { id: 'toka-toka-token' };
       const { lookupTokenStub } = getElements(wrapper);
       const lookupStub = lookupTokenStub();
@@ -83,7 +86,7 @@ describe('channelTokenModal component', () => {
         })
         .then(() => {
           expect(lookupStub).toHaveBeenCalledWith('toka-toka-token');
-          expect(wrapper.emitted().channelfound).toEqual([[tokenPayload]]);
+          expect(wrapper.emitted().submit).toEqual([[tokenPayload]]);
         });
     });
 
@@ -99,51 +102,39 @@ describe('channelTokenModal component', () => {
         });
     });
 
-    it('on blur, shows a validation message when token code is empty', () => {
+    it('on blur, shows a validation message when token code is empty', async () => {
       const textbox = getElements(wrapper).tokenTextbox();
-      return inputToken(wrapper, '    ')
-        .then(() => {
-          // Reaching into ui-textbox's blur to trigger it on k-textbox
-          textbox.vm.$refs.textbox.$emit('blur');
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
-          assertTextboxInvalid(wrapper);
-        });
+      await inputToken(wrapper, '    ');
+      // Reaching into ui-textbox's blur to trigger it on k-textbox
+      textbox.vm.$refs.textbox.$emit('blur');
+      await wrapper.vm.$nextTick();
+      assertTextboxInvalid(wrapper);
     });
 
-    it('if the token does not point to a channel (404 code), shows a validation message', () => {
+    it('if the token does not point to a channel (404 code), shows a validation message', async () => {
       const tokenPayload = { status: { code: 404 } };
       const { lookupTokenStub } = getElements(wrapper);
       const lookupStub = lookupTokenStub();
       lookupStub.mockRejectedValue(tokenPayload);
-      return inputToken(wrapper, 'toka-toka-token')
-        .then(() => {
-          return wrapper.vm.submitForm();
-        })
-        .then(() => {
-          expect(lookupStub).toHaveBeenCalledWith('toka-toka-token');
-          expect(wrapper.emittedByOrder().length).toEqual(0);
-          assertTextboxInvalid(wrapper);
-        });
+      await inputToken(wrapper, 'toka-toka-token');
+      await wrapper.vm.submitForm();
+      expect(lookupStub).toHaveBeenCalledWith('toka-toka-token');
+      expect(wrapper.emittedByOrder().length).toEqual(0);
+      assertTextboxInvalid(wrapper);
     });
 
-    it('shows an ui-alert error if there is a generic network error (other error code)', () => {
+    it('shows an ui-alert error if there is a generic network error (other error code)', async () => {
       const tokenPayload = { status: { code: 500 } };
       const { tokenTextbox, networkErrorAlert, lookupTokenStub } = getElements(wrapper);
       const textbox = tokenTextbox();
       const lookupStub = lookupTokenStub();
       lookupStub.mockRejectedValue(tokenPayload);
-      return inputToken(wrapper, 'toka-toka-token')
-        .then(() => {
-          return wrapper.vm.submitForm();
-        })
-        .then(() => {
-          expect(lookupStub).toHaveBeenCalledWith('toka-toka-token');
-          expect(wrapper.emittedByOrder().length).toEqual(0);
-          expect(textbox.props().invalid).toEqual(false);
-          expect(networkErrorAlert().isVueInstance()).toEqual(true);
-        });
+      await inputToken(wrapper, 'toka-toka-token');
+      await wrapper.vm.submitForm();
+      expect(lookupStub).toHaveBeenCalledWith('toka-toka-token');
+      expect(wrapper.emittedByOrder().length).toEqual(0);
+      expect(textbox.props().invalid).toEqual(false);
+      expect(networkErrorAlert().isVueInstance()).toEqual(true);
     });
   });
 });
diff --git a/kolibri/plugins/device_management/assets/test/views/channels-grid.spec.js b/kolibri/plugins/device_management/assets/test/views/channels-grid.spec.js
index c71463479e8..d79309643c9 100644
--- a/kolibri/plugins/device_management/assets/test/views/channels-grid.spec.js
+++ b/kolibri/plugins/device_management/assets/test/views/channels-grid.spec.js
@@ -23,7 +23,7 @@ function getElements(wrapper) {
     channelListItems: () => wrapper.findAll({ name: 'ChannelListItem' }),
     emptyState: () => wrapper.find('.no-channels'),
     ProgressBar: () => wrapper.find({ name: 'KLinearLoader' }),
-    deleteChannelModal: () => wrapper.find({ name: 'KModal' }),
+    deleteChannelModal: () => wrapper.find({ name: 'DeleteChannelModal' }),
   };
 }
 
diff --git a/kolibri/plugins/facility_management/assets/src/views/ClassEditPage/ClassRenameModal.vue b/kolibri/plugins/facility_management/assets/src/views/ClassEditPage/ClassRenameModal.vue
index 0096b37ad3a..4566b63ecf2 100644
--- a/kolibri/plugins/facility_management/assets/src/views/ClassEditPage/ClassRenameModal.vue
+++ b/kolibri/plugins/facility_management/assets/src/views/ClassEditPage/ClassRenameModal.vue
@@ -7,7 +7,7 @@
     :cancelText="$tr('cancel')"
     :submitDisabled="submitting"
     @submit="updateName"
-    @cancel="close"
+    @cancel="$emit('cancel')"
   >
     <KTextbox
       ref="name"
@@ -92,7 +92,7 @@
       },
     },
     methods: {
-      ...mapActions('classEditManagement', ['updateClass', 'displayModal']),
+      ...mapActions('classEditManagement', ['updateClass']),
       updateName() {
         this.formSubmitted = true;
         if (this.formIsValid) {
@@ -102,9 +102,6 @@
           this.$refs.name.focus();
         }
       },
-      close() {
-        this.displayModal(false);
-      },
     },
     $trs: {
       modalTitle: 'Rename class',
diff --git a/kolibri/plugins/facility_management/assets/src/views/ClassEditPage/UserRemoveConfirmationModal.vue b/kolibri/plugins/facility_management/assets/src/views/ClassEditPage/UserRemoveConfirmationModal.vue
index 50965503a75..25be23a3e51 100644
--- a/kolibri/plugins/facility_management/assets/src/views/ClassEditPage/UserRemoveConfirmationModal.vue
+++ b/kolibri/plugins/facility_management/assets/src/views/ClassEditPage/UserRemoveConfirmationModal.vue
@@ -5,8 +5,8 @@
     :hasError="false"
     :submitText="$tr('remove')"
     :cancelText="$tr('cancel')"
-    @submit="confirmRemoval"
-    @cancel="close"
+    @submit="$emit('submit')"
+    @cancel="$emit('cancel')"
   >
     <p>{{ $tr('confirmation', { username: username, classname: classname }) }}</p>
     <p>{{ $tr('description') }}</p>
@@ -17,7 +17,6 @@
 
 <script>
 
-  import { mapActions } from 'vuex';
   import KModal from 'kolibri.coreVue.components.KModal';
 
   export default {
@@ -35,15 +34,6 @@
         required: true,
       },
     },
-    methods: {
-      ...mapActions('classEditManagement', ['displayModal']),
-      confirmRemoval() {
-        this.$emit('confirm');
-      },
-      close() {
-        this.displayModal(false);
-      },
-    },
     $trs: {
       modalTitle: 'Remove user',
       remove: 'Remove',
diff --git a/kolibri/plugins/facility_management/assets/src/views/ClassEditPage/index.vue b/kolibri/plugins/facility_management/assets/src/views/ClassEditPage/index.vue
index e11fc5fb46e..945d091d334 100644
--- a/kolibri/plugins/facility_management/assets/src/views/ClassEditPage/index.vue
+++ b/kolibri/plugins/facility_management/assets/src/views/ClassEditPage/index.vue
@@ -26,12 +26,14 @@
       :classname="currentClass.name"
       :classid="currentClass.id"
       :classes="classes"
+      @cancel="closeModal"
     />
     <UserRemoveConfirmationModal
       v-if="modalShown===Modals.REMOVE_USER"
       :classname="currentClass.name"
       :username="userToBeRemoved.username"
-      @confirm="removalAction({ classId: currentClass.id, userId: userToBeRemoved.id })"
+      @submit="removalAction({ classId: currentClass.id, userId: userToBeRemoved.id })"
+      @cancel="closeModal"
     />
     <!-- /Modals -->
 
@@ -160,6 +162,9 @@
         'removeClassLearner',
         'removeClassCoach',
       ]),
+      closeModal() {
+        this.displayModal(false);
+      },
       confirmRemoval(user, removalAction) {
         this.userToBeRemoved = user;
         this.removalAction = removalAction;
diff --git a/kolibri/plugins/facility_management/assets/src/views/FacilityConfigPage/ConfirmResetModal.vue b/kolibri/plugins/facility_management/assets/src/views/FacilityConfigPage/ConfirmResetModal.vue
index 303585f20b3..5beece2dfc9 100644
--- a/kolibri/plugins/facility_management/assets/src/views/FacilityConfigPage/ConfirmResetModal.vue
+++ b/kolibri/plugins/facility_management/assets/src/views/FacilityConfigPage/ConfirmResetModal.vue
@@ -4,8 +4,8 @@
     :title="$tr('title')"
     :submitText="$tr('reset')"
     :cancelText="$tr('cancel')"
-    @submit="handleConfirm"
-    @cancel="handleCancel"
+    @submit="$emit('submit')"
+    @cancel="$emit('cancel')"
   >
     <div>
       <p>{{ $tr('confirmationQuestion') }}</p>
@@ -25,14 +25,6 @@
     components: {
       KModal,
     },
-    methods: {
-      handleConfirm() {
-        this.$emit('click-confirm');
-      },
-      handleCancel() {
-        this.$emit('click-cancel');
-      },
-    },
     $trs: {
       cancel: 'Cancel',
       confirmationQuestion: 'Are you sure you want to reset your settings?',
diff --git a/kolibri/plugins/facility_management/assets/src/views/FacilityConfigPage/index.vue b/kolibri/plugins/facility_management/assets/src/views/FacilityConfigPage/index.vue
index ecc022a33fe..fa291047cf8 100644
--- a/kolibri/plugins/facility_management/assets/src/views/FacilityConfigPage/index.vue
+++ b/kolibri/plugins/facility_management/assets/src/views/FacilityConfigPage/index.vue
@@ -56,8 +56,8 @@
     <ConfirmResetModal
       v-if="showModal"
       id="confirm-reset"
-      @click-confirm="resetToDefaultSettings"
-      @click-cancel="showModal=false"
+      @submit="resetToDefaultSettings"
+      @cancel="showModal=false"
     />
   </div>
 
diff --git a/kolibri/plugins/facility_management/assets/src/views/ManageClassPage/ClassCreateModal.vue b/kolibri/plugins/facility_management/assets/src/views/ManageClassPage/ClassCreateModal.vue
index 119d55b5292..9b0c8f50d7c 100644
--- a/kolibri/plugins/facility_management/assets/src/views/ManageClassPage/ClassCreateModal.vue
+++ b/kolibri/plugins/facility_management/assets/src/views/ManageClassPage/ClassCreateModal.vue
@@ -6,8 +6,8 @@
     :submitText="$tr('saveClassButtonLabel')"
     :cancelText="$tr('cancel')"
     :submitDisabled="submitting"
-    @cancel="close"
     @submit="createNewClass"
+    @cancel="$emit('cancel')"
   >
     <KTextbox
       ref="name"
@@ -80,7 +80,7 @@
       },
     },
     methods: {
-      ...mapActions('classManagement', ['createClass', 'displayModal']),
+      ...mapActions('classManagement', ['createClass']),
       createNewClass() {
         this.formSubmitted = true;
         if (this.formIsValid) {
@@ -90,9 +90,6 @@
           this.$refs.name.focus();
         }
       },
-      close() {
-        this.displayModal(false);
-      },
     },
     $trs: {
       createNewClassHeader: 'Create new class',
diff --git a/kolibri/plugins/facility_management/assets/src/views/ManageClassPage/ClassDeleteModal.vue b/kolibri/plugins/facility_management/assets/src/views/ManageClassPage/ClassDeleteModal.vue
index e1769130395..119b2593738 100644
--- a/kolibri/plugins/facility_management/assets/src/views/ManageClassPage/ClassDeleteModal.vue
+++ b/kolibri/plugins/facility_management/assets/src/views/ManageClassPage/ClassDeleteModal.vue
@@ -6,7 +6,7 @@
     :cancelText="$tr('cancel')"
     :hasError="false"
     @submit="classDelete"
-    @cancel="close"
+    @cancel="$emit('cancel')"
   >
     <p>{{ $tr('confirmation', { classname: classname }) }}</p>
     <p>{{ $tr('description') }}</p>
@@ -36,13 +36,10 @@
       },
     },
     methods: {
-      ...mapActions('classManagement', ['deleteClass', 'displayModal']),
+      ...mapActions('classManagement', ['deleteClass']),
       classDelete() {
         this.deleteClass(this.classid);
       },
-      close() {
-        this.displayModal(false);
-      },
     },
     $trs: {
       modalTitle: 'Delete class',
diff --git a/kolibri/plugins/facility_management/assets/src/views/ManageClassPage/index.vue b/kolibri/plugins/facility_management/assets/src/views/ManageClassPage/index.vue
index 6ddf28eb0e9..9aec50d7069 100644
--- a/kolibri/plugins/facility_management/assets/src/views/ManageClassPage/index.vue
+++ b/kolibri/plugins/facility_management/assets/src/views/ManageClassPage/index.vue
@@ -85,10 +85,12 @@
       v-if="modalShown===Modals.DELETE_CLASS"
       :classid="currentClassDelete.id"
       :classname="currentClassDelete.name"
+      @cancel="closeModal"
     />
     <ClassCreateModal
       v-if="modalShown===Modals.CREATE_CLASS"
       :classes="sortedClassrooms"
+      @cancel="closeModal"
     />
 
   </div>
@@ -153,6 +155,9 @@
     },
     methods: {
       ...mapActions('classManagement', ['displayModal']),
+      closeModal() {
+        this.displayModal(false);
+      },
       // Duplicated in class-list-page
       coachNames(classroom) {
         const { coaches } = classroom;
diff --git a/kolibri/plugins/facility_management/assets/src/views/UserPage/DeleteUserModal.vue b/kolibri/plugins/facility_management/assets/src/views/UserPage/DeleteUserModal.vue
index 36adc4ce6b4..69fe438464b 100644
--- a/kolibri/plugins/facility_management/assets/src/views/UserPage/DeleteUserModal.vue
+++ b/kolibri/plugins/facility_management/assets/src/views/UserPage/DeleteUserModal.vue
@@ -6,7 +6,7 @@
     :cancelText="$tr('cancel')"
     :submitDisabled="submitting"
     @submit="handleDeleteUser"
-    @cancel="closeModal"
+    @cancel="$emit('cancel')"
   >
     <p>{{ $tr('confirmation', { username: username }) }}</p>
     <p>{{ $tr('warning', { username: username }) }}</p>
@@ -41,14 +41,11 @@
       };
     },
     methods: {
-      ...mapActions('userManagement', ['deleteUser', 'displayModal']),
+      ...mapActions('userManagement', ['deleteUser']),
       handleDeleteUser() {
         this.submitting = true;
         this.deleteUser(this.id);
       },
-      closeModal() {
-        this.displayModal(false);
-      },
     },
     $trs: {
       deleteUser: 'Delete user',
diff --git a/kolibri/plugins/facility_management/assets/src/views/UserPage/EditUserModal.vue b/kolibri/plugins/facility_management/assets/src/views/UserPage/EditUserModal.vue
index 842076c2659..78bb285e7b8 100644
--- a/kolibri/plugins/facility_management/assets/src/views/UserPage/EditUserModal.vue
+++ b/kolibri/plugins/facility_management/assets/src/views/UserPage/EditUserModal.vue
@@ -6,7 +6,7 @@
     :cancelText="$tr('cancel')"
     :submitDisabled="isBusy"
     @submit="submitForm"
-    @cancel="displayModal(false)"
+    @cancel="$emit('cancel')"
   >
     <KTextbox
       ref="name"
@@ -242,7 +242,7 @@
       }
     },
     methods: {
-      ...mapActions('userManagement', ['updateUser', 'displayModal', 'setError', 'displayModal']),
+      ...mapActions('userManagement', ['updateUser', 'setError']),
       ...mapActions(['kolibriLogout']),
       submitForm() {
         if (this.formIsInvalid) {
@@ -276,7 +276,7 @@
             // user has demoted themselves
             this.kolibriLogout();
           }
-          this.displayModal(false);
+          this.$emit('cancel');
         });
       },
     },
diff --git a/kolibri/plugins/facility_management/assets/src/views/UserPage/ResetUserPasswordModal.vue b/kolibri/plugins/facility_management/assets/src/views/UserPage/ResetUserPasswordModal.vue
index bfc99da69e1..a399f70389d 100644
--- a/kolibri/plugins/facility_management/assets/src/views/UserPage/ResetUserPasswordModal.vue
+++ b/kolibri/plugins/facility_management/assets/src/views/UserPage/ResetUserPasswordModal.vue
@@ -6,7 +6,7 @@
     :cancelText="$tr('cancel')"
     :submitDisabled="isBusy"
     @submit="submitForm"
-    @cancel="displayModal(false)"
+    @cancel="$emit('cancel')"
   >
     <p>{{ $tr('username') }}<strong>{{ username }}</strong></p>
 
@@ -98,14 +98,14 @@
     },
     methods: {
       ...mapActions(['handleApiError']),
-      ...mapActions('userManagement', ['updateFacilityUser', 'displayModal']),
+      ...mapActions('userManagement', ['updateFacilityUser']),
       submitForm() {
         this.submittedForm = true;
         if (this.formIsValid) {
           // TODO handle the error within this modal (needs new strings)
           this.updateFacilityUser({ userId: this.id, updates: { password: this.password } })
             .catch(error => this.handleApiError(error))
-            .then(() => this.displayModal(false));
+            .then(() => this.$emit('cancel'));
         } else {
           if (this.passwordIsInvalid) {
             this.$refs.password.focus();
diff --git a/kolibri/plugins/facility_management/assets/src/views/UserPage/UserCreateModal.vue b/kolibri/plugins/facility_management/assets/src/views/UserPage/UserCreateModal.vue
index d0d82c9c6c9..5862840b3b4 100644
--- a/kolibri/plugins/facility_management/assets/src/views/UserPage/UserCreateModal.vue
+++ b/kolibri/plugins/facility_management/assets/src/views/UserPage/UserCreateModal.vue
@@ -6,7 +6,7 @@
     :cancelText="$tr('cancel')"
     :submitDisabled="submitting"
     @submit="createNewUser"
-    @cancel="close"
+    @cancel="$emit('cancel')"
   >
     <section>
       <KTextbox
@@ -214,7 +214,7 @@
       },
     },
     methods: {
-      ...mapActions('userManagement', ['createUser', 'displayModal']),
+      ...mapActions('userManagement', ['createUser']),
       ...mapActions(['handleApiError']),
       createNewUser() {
         this.usernameAlreadyExistsOnServer = false;
@@ -231,7 +231,7 @@
             password: this.password,
           }).then(
             () => {
-              this.close();
+              this.$emit('cancel');
             },
             error => {
               const usernameAlreadyExistsError = CatchErrors(error, [
@@ -260,9 +260,6 @@
           this.$refs.confirmedPassword.focus();
         }
       },
-      close() {
-        this.displayModal(false);
-      },
     },
     $trs: {
       createNewUserHeader: 'Create new user',
diff --git a/kolibri/plugins/facility_management/assets/src/views/UserPage/index.vue b/kolibri/plugins/facility_management/assets/src/views/UserPage/index.vue
index a30b760f001..dbea4bc2f25 100644
--- a/kolibri/plugins/facility_management/assets/src/views/UserPage/index.vue
+++ b/kolibri/plugins/facility_management/assets/src/views/UserPage/index.vue
@@ -49,7 +49,10 @@
     </UserTable>
 
     <!-- Modals -->
-    <UserCreateModal v-if="modalShown===Modals.CREATE_USER" />
+    <UserCreateModal
+      v-if="modalShown===Modals.CREATE_USER"
+      @cancel="closeModal"
+    />
 
     <EditUserModal
       v-if="modalShown===Modals.EDIT_USER"
@@ -57,18 +60,21 @@
       :name="selectedUser.full_name"
       :username="selectedUser.username"
       :kind="selectedUser.kind"
+      @cancel="closeModal"
     />
 
     <ResetUserPasswordModal
       v-if="modalShown===Modals.RESET_USER_PASSWORD"
       :id="selectedUser.id"
       :username="selectedUser.username"
+      @cancel="closeModal"
     />
 
     <DeleteUserModal
       v-if="modalShown===Modals.DELETE_USER"
       :id="selectedUser.id"
       :username="selectedUser.username"
+      @cancel="closeModal"
     />
 
   </div>
@@ -155,6 +161,9 @@
     },
     methods: {
       ...mapActions('userManagement', ['displayModal']),
+      closeModal() {
+        this.displayModal(false);
+      },
       userMatchesRole(user) {
         const { value: filterKind } = this.roleFilter;
         if (filterKind === ALL_FILTER) {
diff --git a/kolibri/plugins/facility_management/assets/test/views/facility-config-page.spec.js b/kolibri/plugins/facility_management/assets/test/views/facility-config-page.spec.js
index 3f5621c9035..95e5b05d943 100644
--- a/kolibri/plugins/facility_management/assets/test/views/facility-config-page.spec.js
+++ b/kolibri/plugins/facility_management/assets/test/views/facility-config-page.spec.js
@@ -19,7 +19,7 @@ function getElements(wrapper) {
     confirmResetButton: () => wrapper.find('button[name="submit"]'),
     resetButton: () => wrapper.find('button[name="reset-settings"]'),
     saveButton: () => wrapper.find('button[name="save-settings"]'),
-    confirmResetModal: () => wrapper.find({ name: 'KModal' }),
+    confirmResetModal: () => wrapper.find({ name: 'ConfirmResetModal' }),
     form: () => wrapper.find('form'),
   };
 }
diff --git a/kolibri/plugins/learn/assets/src/views/ContentCardGroupGrid.vue b/kolibri/plugins/learn/assets/src/views/ContentCardGroupGrid.vue
index 32b91830126..41e8dd8df25 100644
--- a/kolibri/plugins/learn/assets/src/views/ContentCardGroupGrid.vue
+++ b/kolibri/plugins/learn/assets/src/views/ContentCardGroupGrid.vue
@@ -20,7 +20,7 @@
       v-if="modalIsOpen"
       :uniqueId="uniqueId"
       :sharedContentId="sharedContentId"
-      @cancel="modalIsOpen = false"
+      @submit="modalIsOpen = false"
     />
   </div>
 
diff --git a/kolibri/plugins/learn/assets/src/views/CopiesModal.vue b/kolibri/plugins/learn/assets/src/views/CopiesModal.vue
index 3e0fde02bfb..c4082bb3850 100644
--- a/kolibri/plugins/learn/assets/src/views/CopiesModal.vue
+++ b/kolibri/plugins/learn/assets/src/views/CopiesModal.vue
@@ -3,8 +3,7 @@
   <KModal
     :title="$tr('copies')"
     :submitText="$tr('close')"
-    @submit="closeModal"
-    @cancel="closeModal"
+    @submit="$emit('submit')"
   >
     <transition mode="out-in">
 
@@ -87,9 +86,6 @@
     },
     methods: {
       ...mapActions(['getCopies']),
-      closeModal() {
-        return this.$emit('cancel');
-      },
       generateCopyLink(id) {
         return {
           name: PageNames.TOPICS_CONTENT,
diff --git a/kolibri/plugins/setup_wizard/assets/test/views/PersonalDataConsentForm.spec.js b/kolibri/plugins/setup_wizard/assets/test/views/PersonalDataConsentForm.spec.js
index 5bccad08635..11914d3633c 100644
--- a/kolibri/plugins/setup_wizard/assets/test/views/PersonalDataConsentForm.spec.js
+++ b/kolibri/plugins/setup_wizard/assets/test/views/PersonalDataConsentForm.spec.js
@@ -10,7 +10,7 @@ function makeWrapper() {
 describe('PersonalDataConsentForm', () => {
   it('the "View statement" opens the statement', () => {
     const { wrapper } = makeWrapper();
-    const modal = () => wrapper.find({ name: 'KModal' });
+    const modal = () => wrapper.find({ name: 'PrivacyInfoModal' });
     const button = wrapper.find({ name: 'KButton' });
     expect(modal().exists()).toEqual(false);
     button.vm.$emit('click');
diff --git a/kolibri/plugins/user/assets/src/views/ProfilePage/ChangeUserPasswordModal.vue b/kolibri/plugins/user/assets/src/views/ProfilePage/ChangeUserPasswordModal.vue
index cd0c1cad9be..b721cca6174 100644
--- a/kolibri/plugins/user/assets/src/views/ProfilePage/ChangeUserPasswordModal.vue
+++ b/kolibri/plugins/user/assets/src/views/ProfilePage/ChangeUserPasswordModal.vue
@@ -7,7 +7,7 @@
     :cancelText="$tr('cancelButtonLabel')"
     :submitDisabled="isBusy"
     @submit="submitForm"
-    @cancel="closeModal"
+    @cancel="$emit('cancel')"
   >
     <KTextbox
       ref="newPassword"
@@ -87,9 +87,6 @@
     },
     methods: {
       ...mapActions('profile', ['updateUserProfilePassword']),
-      closeModal() {
-        this.$emit('cancel');
-      },
       submitForm() {
         this.submittedForm = true;
         if (this.formIsValid) {
diff --git a/kolibri/plugins/user/assets/src/views/SignInPage/FacilityModal.vue b/kolibri/plugins/user/assets/src/views/SignInPage/FacilityModal.vue
index 35dba5a54e9..0aa0ee0ef56 100644
--- a/kolibri/plugins/user/assets/src/views/SignInPage/FacilityModal.vue
+++ b/kolibri/plugins/user/assets/src/views/SignInPage/FacilityModal.vue
@@ -5,7 +5,7 @@
     :submitText="$tr('submitFacilitySelectionButtonPrompt')"
     :cancelText="$tr('close')"
     @submit="submitAndClose"
-    @cancel="emitClose"
+    @cancel="$emit('cancel')"
   >
     {{ $tr('facilitySelectionPrompt') }}
 
@@ -48,13 +48,10 @@
         setFacilityId: 'SET_FACILITY_ID',
         setLoginError: 'CORE_SET_LOGIN_ERROR',
       }),
-      emitClose() {
-        this.$emit('close');
-      },
       submitAndClose() {
         this.setFacilityId(this.selectedFacility);
         this.setLoginError('');
-        this.getFacilityConfig(this.selectedFacility).then(this.emitClose);
+        this.getFacilityConfig(this.selectedFacility).then(() => this.$emit('submit'));
       },
     },
     $trs: {
diff --git a/kolibri/plugins/user/assets/src/views/SignInPage/index.vue b/kolibri/plugins/user/assets/src/views/SignInPage/index.vue
index e9d62fcc308..dce74067f82 100644
--- a/kolibri/plugins/user/assets/src/views/SignInPage/index.vue
+++ b/kolibri/plugins/user/assets/src/views/SignInPage/index.vue
@@ -4,7 +4,8 @@
 
     <FacilityModal
       v-if="facilityModalVisible"
-      @close="closeFacilityModal"
+      @cancel="closeFacilityModal"
+      @submit="closeFacilityModal"
     />
 
     <div class="wrapper-table">