Merge branch 'winh-modal-target-id' into 'master'

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

Closes #41584

See merge request gitlab-org/gitlab-ce!16189

2 files changed, 53 insertions, 66 deletions

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: {