TwoFA auth check in user model for Frontend

What does this MR do and why?

Solves backend concerns raised - #385592 (closed)

We have separated the authorization check for two factor disable in users model for the reason frontend needs an access to this check. In the table where we are showing all the group members, this check needs to be made against each and every row to show option Disable Two Factor in the row.

Screenshots or screen recordings

I could test the changes by merging this branch with backend changes to Frontend POC branch !106837 (merged).

In my test scenario only user_2 satisfied the following conditions-

• had two factor authentication enabled
• Is provisioned by group
• Group is a root group
• current user is admin of the group

In the screenshot below we can see option to Disable two factor authentication is displayed only for the user_2

Once user clicks on button Disable a success message is returned to the user

How to set up and validate locally

• git checkout eduardosanz/disable-2fa
• git merge smriti-385592/presenter_changes_two_fa_permissions

Since frontend changes in current form has some gaps following changes are required to be made

--- a/app/assets/javascripts/members/components/action_buttons/user_action_buttons.vue
+++ b/app/assets/javascripts/members/components/action_buttons/user_action_buttons.vue
@@ -70,7 +70,7 @@ export default {
     },
     showLdapOverride() {
       return (
-        this.member.canDisableTwoFactor ||
+        this.member.canGetTwoFactorDisabled ||
         (this.permissions.canOverride && !this.member.isOverridden)
       );
     },
@@ -81,8 +81,8 @@ export default {
 <template>
   <gl-dropdown v-if="showActions" icon="ellipsis_v" category="tertiary" no-caret right>
     <disable-2fa-dropdown-item
-      v-if="member.canDisableTwoFactor"
-      :member-id="member.id"
+      v-if="member.canGetTwoFactorDisabled"
+      :member-id="member.user.id"
       message="Are you sure to disable two-factor authentication for TODO?"
       text="Disable two-factor authentication"
     />
@@ -90,7 +90,7 @@ export default {
       <leave-button v-if="isCurrentUser" :member="member" />
       <remove-member-dropdown-item
         v-else
-        :member-id="member.id"
+        :member-id="member.user.id"
         :member-type="member.type"
         :user-deletion-obstacles="userDeletionObstaclesUserData"
         :message="message"
diff --git a/app/assets/javascripts/members/components/modals/disable_two_factor_modal.vue b/app/assets/javascripts/members/components/modals/disable_two_factor_modal.vue
index 15b8d2b6e403..99e02cd9a129 100644

--- a/app/assets/javascripts/members/components/modals/disable_two_factor_modal.vue
+++ b/app/assets/javascripts/members/components/modals/disable_two_factor_modal.vue
@@ -30,8 +30,8 @@ export default {
       message(state) {
         return state[this.namespace].disableTwoFactorModalData.message;
       },
-      userId(state) {
-        return state[this.namespace].disableTwoFactorModalData.userId;
+      memberId(state) {
+        return state[this.namespace].disableTwoFactorModalData.memberId;
       },
       disableTwoFactorPath(state) {
         return state[this.namespace].disableTwoFactorPath;
@@ -42,11 +42,11 @@ export default {
     ...mapActions({
       hideDisableTwoFactorModal(dispatch) {
         return dispatch(`${this.namespace}/hideDisableTwoFactorModal`);
-      },
-      submitForm(dispatch) {
-        return dispatch(`${this.namespace}/disableTwoFactor`);
-      },
+      }
     }),
+    submitForm(dispatch) {
+      this.$refs.form.submit();
+    },
   },
 };
 </script>
@@ -67,7 +67,7 @@ export default {
     <form ref="form" :action="disableTwoFactorPath" method="post">
       <p>{{ message }}</p>
       <input ref="method" type="hidden" name="_method" value="delete" />
-      <input type="hidden" name="user_id" :value="userId" />
+      <input type="hidden" name="user_id" :value="memberId" />
       <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
     </form>
   </gl-modal>