Add latest changes from gitlab-org/security/gitlab@14-3-stable-ee

3 files changed, 132 insertions, 1 deletions

diff --git a/app/assets/javascripts/authentication/two_factor_auth/components/manage_two_factor_form.vue b/app/assets/javascripts/authentication/two_factor_auth/components/manage_two_factor_form.vue
new file mode 100644
index 00000000000..280c222c380
--- /dev/null
+++ b/app/assets/javascripts/authentication/two_factor_auth/components/manage_two_factor_form.vue
@@ -0,0 +1,98 @@
+<script>
+import { GlFormInput, GlFormGroup, GlButton, GlForm } from '@gitlab/ui';
+import csrf from '~/lib/utils/csrf';
+import { __ } from '~/locale';
+
+export const i18n = {
+  currentPassword: __('Current password'),
+  confirmWebAuthn: __(
+    'Are you sure? This will invalidate your registered applications and U2F / WebAuthn devices.',
+  ),
+  confirm: __('Are you sure? This will invalidate your registered applications and U2F devices.'),
+  disableTwoFactor: __('Disable two-factor authentication'),
+  regenerateRecoveryCodes: __('Regenerate recovery codes'),
+};
+
+export default {
+  name: 'ManageTwoFactorForm',
+  i18n,
+  components: {
+    GlForm,
+    GlFormInput,
+    GlFormGroup,
+    GlButton,
+  },
+  inject: [
+    'webauthnEnabled',
+    'profileTwoFactorAuthPath',
+    'profileTwoFactorAuthMethod',
+    'codesProfileTwoFactorAuthPath',
+    'codesProfileTwoFactorAuthMethod',
+  ],
+  data() {
+    return {
+      method: '',
+      action: '#',
+    };
+  },
+  computed: {
+    confirmText() {
+      if (this.webauthnEnabled) {
+        return i18n.confirmWebAuthn;
+      }
+
+      return i18n.confirm;
+    },
+  },
+  methods: {
+    handleFormSubmit(event) {
+      this.method = event.submitter.dataset.formMethod;
+      this.action = event.submitter.dataset.formAction;
+    },
+  },
+  csrf,
+};
+</script>
+
+<template>
+  <gl-form
+    class="gl-display-inline-block"
+    method="post"
+    :action="action"
+    @submit="handleFormSubmit($event)"
+  >
+    <input type="hidden" name="_method" data-testid="test-2fa-method-field" :value="method" />
+    <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
+
+    <gl-form-group :label="$options.i18n.currentPassword" label-for="current-password">
+      <gl-form-input
+        id="current-password"
+        type="password"
+        name="current_password"
+        required
+        data-qa-selector="current_password_field"
+      />
+    </gl-form-group>
+
+    <gl-button
+      type="submit"
+      class="btn-danger gl-mr-3 gl-display-inline-block"
+      data-testid="test-2fa-disable-button"
+      variant="danger"
+      :data-confirm="confirmText"
+      :data-form-action="profileTwoFactorAuthPath"
+      :data-form-method="profileTwoFactorAuthMethod"
+    >
+      {{ $options.i18n.disableTwoFactor }}
+    </gl-button>
+    <gl-button
+      type="submit"
+      class="gl-display-inline-block"
+      data-testid="test-2fa-regenerate-codes-button"
+      :data-form-action="codesProfileTwoFactorAuthPath"
+      :data-form-method="codesProfileTwoFactorAuthMethod"
+    >
+      {{ $options.i18n.regenerateRecoveryCodes }}
+    </gl-button>
+  </gl-form>
+</template>
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');
 
diff --git a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
index 50835333a54..f6f136f2402 100644
--- a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
+++ b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
@@ -1,5 +1,5 @@
 import { mount2faRegistration } from '~/authentication/mount_2fa';
-import { initRecoveryCodes } from '~/authentication/two_factor_auth';
+import { initRecoveryCodes, initManageTwoFactorForm } from '~/authentication/two_factor_auth';
 import { parseBoolean } from '~/lib/utils/common_utils';
 
 const twoFactorNode = document.querySelector('.js-two-factor-auth');
@@ -14,3 +14,5 @@ if (skippable) {
 mount2faRegistration();
 
 initRecoveryCodes();
+
+initManageTwoFactorForm();