Add id to modal.vue to support data-toggle="modal"

9 files changed, 87 insertions, 90 deletions

diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index 58ba5aff7cf..b98cfcf7563 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -45,11 +45,9 @@ export default {
     onLeaveGroup() {
       this.modalStatus = true;
     },
-    leaveGroup(leaveConfirmed) {
+    leaveGroup() {
       this.modalStatus = false;
-      if (leaveConfirmed) {
-        eventHub.$emit('leaveGroup', this.group, this.parentGroup);
-      }
+      eventHub.$emit('leaveGroup', this.group, this.parentGroup);
     },
   },
 };
diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index 6e67e99a70f..d475813c4f7 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -32,10 +32,10 @@
     methods: {
       createNewItem(type) {
         this.modalType = type;
-        this.toggleModalOpen();
+        this.openModal = true;
       },
-      toggleModalOpen() {
-        this.openModal = !this.openModal;
+      hideModal() {
+        this.openModal = false;
       },
     },
   };
@@ -95,7 +95,7 @@
       :branch-id="branch"
       :path="path"
       :parent="parent"
-      @toggle="toggleModalOpen"
+      @hide="hideModal"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index a0650d37690..0312f56efbd 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -43,10 +43,10 @@
           type: this.type,
         });
 
-        this.toggleModalOpen();
+        this.hideModal();
       },
-      toggleModalOpen() {
-        this.$emit('toggle');
+      hideModal() {
+        this.$emit('hide');
       },
     },
     computed: {
@@ -86,7 +86,7 @@
     :title="modalTitle"
     :primary-button-label="buttonLabel"
     kind="success"
-    @toggle="toggleModalOpen"
+    @cancel="hideModal"
     @submit="createEntryInStore"
   >
     <form
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index 470db2c9650..979721dcb5a 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -110,7 +110,7 @@ export default {
     kind="primary"
     :title="__('Branch has changed')"
     :text="__('This branch has changed since you started editing. Would you like to create a new branch?')"
-    @toggle="showNewBranchModal = false"
+    @cancel="showNewBranchModal = false"
     @submit="makeCommit(true)"
   />
   <commit-files-list
diff --git a/app/assets/javascripts/ide/components/repo_edit_button.vue b/app/assets/javascripts/ide/components/repo_edit_button.vue
index 37bd9003e96..42d5d709209 100644
--- a/app/assets/javascripts/ide/components/repo_edit_button.vue
+++ b/app/assets/javascripts/ide/components/repo_edit_button.vue
@@ -50,7 +50,7 @@ export default {
       kind="warning"
       :title="__('Are you sure?')"
       :text="__('Are you sure you want to discard your changes?')"
-      @toggle="closeDiscardPopup"
+      @cancel="closeDiscardPopup"
       @submit="toggleEditMode(true)"
     />
   </div>
diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
index 78be6b6e884..36ad618aa46 100644
--- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue
+++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
@@ -1,7 +1,7 @@
 <script>
-  import modal from '../../../vue_shared/components/modal.vue';
-  import { __, s__, sprintf } from '../../../locale';
-  import csrf from '../../../lib/utils/csrf';
+  import modal from '~/vue_shared/components/modal.vue';
+  import { __, s__, sprintf } from '~/locale';
+  import csrf from '~/lib/utils/csrf';
 
   export default {
     props: {
@@ -22,7 +22,6 @@
       return {
         enteredPassword: '',
         enteredUsername: '',
-        isOpen: false,
       };
     },
     components: {
@@ -69,78 +68,58 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
 
         return this.enteredUsername === this.username;
       },
-      onSubmit(status) {
-        if (status) {
-          if (!this.canSubmit()) {
-            return;
-          }
-
-          this.$refs.form.submit();
-        }
-
-        this.toggleOpen(false);
-      },
-      toggleOpen(isOpen) {
-        this.isOpen = isOpen;
+      onSubmit() {
+        this.$refs.form.submit();
       },
     },
   };
 </script>
 
 <template>
-  <div>
-    <modal
-      v-if="isOpen"
-      :title="s__('Profiles|Delete your account?')"
-      :text="text"
-      :kind="`danger ${!canSubmit() && 'disabled'}`"
-      :primary-button-label="s__('Profiles|Delete account')"
-      @toggle="toggleOpen"
-      @submit="onSubmit">
-
-      <template slot="body" slot-scope="props">
-        <p v-html="props.text"></p>
+  <modal
+    id="delete-account-modal"
+    :title="s__('Profiles|Delete your account?')"
+    :text="text"
+    kind="danger"
+    :primary-button-label="s__('Profiles|Delete account')"
+    @submit="onSubmit"
+    :submit-disabled="!canSubmit()">
 
-        <form
-          ref="form"
-          :action="actionUrl"
-          method="post">
+    <template slot="body" slot-scope="props">
+      <p v-html="props.text"></p>
 
-          <input
-            type="hidden"
-            name="_method"
-            value="delete" />
-          <input
-            type="hidden"
-            name="authenticity_token"
-            :value="csrfToken" />
+      <form
+        ref="form"
+        :action="actionUrl"
+        method="post">
 
-          <p id="input-label" v-html="inputLabel"></p>
+        <input
+          type="hidden"
+          name="_method"
+          value="delete" />
+        <input
+          type="hidden"
+          name="authenticity_token"
+          :value="csrfToken" />
 
-          <input
-            v-if="confirmWithPassword"
-            name="password"
-            class="form-control"
-            type="password"
-            v-model="enteredPassword"
-            aria-labelledby="input-label" />
-          <input
-            v-else
-            name="username"
-            class="form-control"
-            type="text"
-            v-model="enteredUsername"
-            aria-labelledby="input-label" />
-        </form>
-      </template>
+        <p id="input-label" v-html="inputLabel"></p>
 
-    </modal>
+        <input
+          v-if="confirmWithPassword"
+          name="password"
+          class="form-control"
+          type="password"
+          v-model="enteredPassword"
+          aria-labelledby="input-label" />
+        <input
+          v-else
+          name="username"
+          class="form-control"
+          type="text"
+          v-model="enteredUsername"
+          aria-labelledby="input-label" />
+      </form>
+    </template>
 
-    <button
-      type="button"
-      class="btn btn-danger"
-      @click="toggleOpen(true)">
-      {{ s__('Profiles|Delete account') }}
-    </button>
-  </div>
+  </modal>
 </template>
diff --git a/app/assets/javascripts/profile/account/index.js b/app/assets/javascripts/profile/account/index.js
index 635056e0eeb..a93bc935dd0 100644
--- a/app/assets/javascripts/profile/account/index.js
+++ b/app/assets/javascripts/profile/account/index.js
@@ -1,7 +1,12 @@
 import Vue from 'vue';
 
+import Translate from '~/vue_shared/translate';
+
 import deleteAccountModal from './components/delete_account_modal.vue';
 
+Vue.use(Translate);
+
+const deleteAccountButton = document.getElementById('delete-account-button');
 const deleteAccountModalEl = document.getElementById('delete-account-modal');
 // eslint-disable-next-line no-new
 new Vue({
@@ -9,6 +14,9 @@ new Vue({
   components: {
     deleteAccountModal,
   },
+  mounted() {
+    deleteAccountButton.classList.remove('disabled');
+  },
   render(createElement) {
     return createElement('delete-account-modal', {
       props: {
diff --git a/app/assets/javascripts/vue_shared/components/modal.vue b/app/assets/javascripts/vue_shared/components/modal.vue
index 55f466b7b41..00089dfef38 100644
--- a/app/assets/javascripts/vue_shared/components/modal.vue
+++ b/app/assets/javascripts/vue_shared/components/modal.vue
@@ -3,6 +3,10 @@ export default {
   name: 'modal',
 
   props: {
+    id: {
+      type: String,
+      required: false,
+    },
     title: {
       type: String,
       required: false,
@@ -62,11 +66,11 @@ export default {
   },
 
   methods: {
-    close() {
-      this.$emit('toggle', false);
+    emitCancel(event) {
+      this.$emit('cancel', event);
     },
-    emitSubmit(status) {
-      this.$emit('submit', status);
+    emitSubmit(event) {
+      this.$emit('submit', event);
     },
   },
 };
@@ -75,7 +79,9 @@ export default {
 <template>
 <div class="modal-open">
   <div
-    class="modal show"
+    :id="id"
+    class="modal"
+    :class="id ? '' : 'show'"
     role="dialog"
     tabindex="-1"
   >
@@ -93,7 +99,8 @@ export default {
             <button
               type="button"
               class="close pull-right"
-              @click="close"
+              @click="emitCancel($event)"
+              data-dismiss="modal"
               aria-label="Close"
             >
               <span aria-hidden="true">&times;</span>
@@ -110,7 +117,8 @@ export default {
             type="button"
             class="btn pull-left"
             :class="btnCancelKindClass"
-            @click="close">
+            @click="emitCancel($event)"
+            data-dismiss="modal">
             {{ closeButtonLabel }}
           </button>
           <button
@@ -119,13 +127,17 @@ export default {
             class="btn pull-right js-primary-button"
             :disabled="submitDisabled"
             :class="btnKindClass"
-            @click="emitSubmit(true)">
+            @click="emitSubmit($event)"
+            data-dismiss="modal">
             {{ primaryButtonLabel }}
           </button>
         </div>
       </div>
     </div>
   </div>
-  <div class="modal-backdrop fade in" />
+  <div
+    v-if="!id"
+    class="modal-backdrop fade in">
+  </div>
 </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
index 8053c65d498..16d60bb2876 100644
--- a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
@@ -70,7 +70,7 @@ export default {
   class="recaptcha-modal js-recaptcha-modal"
   :hide-footer="true"
   :title="__('Please solve the reCAPTCHA')"
-  @toggle="close"
+  @cancel="close"
 >
   <div slot="body">
     <p>