1 files changed, 31 insertions, 0 deletions
diff --git a/app/assets/javascripts/authentication/two_factor_auth/index.js b/app/assets/javascripts/authentication/two_factor_auth/index.js
index 5e59c44e8cd..f663c0705e6 100644
--- a/app/assets/javascripts/authentication/two_factor_auth/index.js
+++ b/app/assets/javascripts/authentication/two_factor_auth/index.js
@@ -1,8 +1,39 @@
 import Vue from 'vue';
 import { updateHistory, removeParams } from '~/lib/utils/url_utility';
+import ManageTwoFactorForm from './components/manage_two_factor_form.vue';
 import RecoveryCodes from './components/recovery_codes.vue';
 import { SUCCESS_QUERY_PARAM } from './constants';
 
+export const initManageTwoFactorForm = () => {
+  const el = document.querySelector('.js-manage-two-factor-form');
+
+  if (!el) {
+    return false;
+  }
+
+  const {
+    webauthnEnabled = false,
+    profileTwoFactorAuthPath = '',
+    profileTwoFactorAuthMethod = '',
+    codesProfileTwoFactorAuthPath = '',
+    codesProfileTwoFactorAuthMethod = '',
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: {
+      webauthnEnabled,
+      profileTwoFactorAuthPath,
+      profileTwoFactorAuthMethod,
+      codesProfileTwoFactorAuthPath,
+      codesProfileTwoFactorAuthMethod,
+    },
+    render(createElement) {
+      return createElement(ManageTwoFactorForm);
+    },
+  });
+};
+
 export const initRecoveryCodes = () => {
   const el = document.querySelector('.js-2fa-recovery-codes');