From f8eb9cde72ac759a637f488b273d2c818c50841f Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Fri, 20 Feb 2026 11:40:46 +0100
Subject: [PATCH 1/5] feat(frontend): move 2FA management into dedicated tab
 with inline stepper

Replace the confusing inline 2FA sections on the General account page
with a dedicated Manage 2FA tab that guides users through a clear
5-step wizard (CAPTCHA, send OTP, verify OTP, scan QR, verify TOTP)
and shows a clean status view when 2FA is already enabled.
---
 messages/en.json                              |  13 +
 src/constants/accountTabs.ts                  |   2 +
 .../settings/account/ManageTwoFactor.vue      | 559 ++++++++++++++++++
 src/pages/settings/account/index.vue          | 389 +-----------
 src/route-map.d.ts                            |  13 +
 5 files changed, 591 insertions(+), 385 deletions(-)
 create mode 100644 src/pages/settings/account/ManageTwoFactor.vue

diff --git a/messages/en.json b/messages/en.json
index 5518934a68..89c5d4e959 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -6,6 +6,10 @@
   "2fa-contact-members-before-enabling": "We recommend contacting these members and asking them to enable 2FA in their account settings before you proceed.",
   "2fa-disabled": "Disabled 2FA",
   "2fa-enabled": "2FA Enabled",
+  "2fa-is-enabled": "Two-factor authentication is enabled",
+  "2fa-is-enabled-description": "Your account is protected with two-factor authentication.",
+  "2fa-is-not-enabled": "Two-factor authentication is not enabled",
+  "2fa-is-not-enabled-description": "Protect your account by enabling two-factor authentication.",
   "2fa-enforcement-description": "When enabled, all organization members must have two-factor authentication enabled to access this organization. Members without 2FA will be locked out until they enable it.",
   "2fa-enforcement-disabled": "2FA enforcement has been disabled.",
   "2fa-enforcement-enable-anyway": "Enable Anyway",
@@ -18,8 +22,15 @@
   "2fa-members-status": "Members 2FA Status",
   "2fa-members-will-be-impacted": "{count} member(s) will be impacted",
   "2fa-not-enabled": "2FA Not Enabled",
+  "2fa-setup-date": "Set up on {date}",
   "2fa-setup-org-access": "Enable two-factor authentication to access this organization. Your organization requires 2FA for all members.",
   "2fa-setup-required": "Two-Factor Authentication Required",
+  "2fa-step-captcha": "Solve CAPTCHA",
+  "2fa-step-enter-code": "Enter verification code",
+  "2fa-step-scan-qr": "Scan QR code",
+  "2fa-step-send-code": "Send verification code",
+  "2fa-step-verify-totp": "Verify authenticator code",
+  "2fa-verify-and-enable": "Verify & Enable 2FA",
   "email-otp-2fa-title": "Email verification for 2FA",
   "email-otp-2fa-description": "Verify your email with a one-time code before enabling 2FA. Verification expires after 1 hour.",
   "email-otp-code-required": "Enter the verification code",
@@ -891,6 +902,7 @@
   "logs": "Logs",
   "low-adoption-warning": "Low adoption - only {percent}% on latest",
   "major": "Major",
+  "manage-2fa": "Manage 2FA",
   "manage-default-channel": "Manage in App settings",
   "manifest": "Manifest",
   "manifest-already-cached": "Already cached",
@@ -1241,6 +1253,7 @@
   "required-encryption-key-description": "Lock bundle uploads to a specific encryption key. Only bundles encrypted with this key will be accepted.",
   "required-encryption-key-help": "Enter the first 21 characters of your base64-encoded public key. Leave empty to accept any encrypted bundle.",
   "required-encryption-key-placeholder": "Enter 21-character key fingerprint",
+  "resend": "Resend",
   "resend-email": "Resend Confirmation Email",
   "reset-password": "Reset Password",
   "reset-spoofed-user": "Stop spoofing",
diff --git a/src/constants/accountTabs.ts b/src/constants/accountTabs.ts
index 1b69136f6c..1883b47686 100644
--- a/src/constants/accountTabs.ts
+++ b/src/constants/accountTabs.ts
@@ -2,9 +2,11 @@ import type { Tab } from '~/components/comp_def'
 import IconBell from '~icons/heroicons/bell'
 import IconInfo from '~icons/heroicons/information-circle'
 import IconLock from '~icons/heroicons/lock-closed'
+import IconShieldCheck from '~icons/heroicons/shield-check'
 
 export const accountTabs: Tab[] = [
   { label: 'general', key: '/settings/account', icon: IconInfo },
   { label: 'notifications', key: '/settings/account/notifications', icon: IconBell },
   { label: 'change-password', key: '/settings/account/change-password', icon: IconLock },
+  { label: 'manage-2fa', key: '/settings/account/manage-2fa', icon: IconShieldCheck },
 ]
diff --git a/src/pages/settings/account/ManageTwoFactor.vue b/src/pages/settings/account/ManageTwoFactor.vue
new file mode 100644
index 0000000000..c05eac00c7
--- /dev/null
+++ b/src/pages/settings/account/ManageTwoFactor.vue
@@ -0,0 +1,559 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { toast } from 'vue-sonner'
+import VueTurnstile from 'vue-turnstile'
+import { useSupabase } from '~/services/supabase'
+import { useDialogV2Store } from '~/stores/dialogv2'
+import { useDisplayStore } from '~/stores/display'
+import { useMainStore } from '~/stores/main'
+
+const { t } = useI18n()
+const supabase = useSupabase()
+const main = useMainStore()
+const dialogStore = useDialogV2Store()
+const displayStore = useDisplayStore()
+const route = useRoute()
+const router = useRouter()
+
+displayStore.NavTitle = t('manage-2fa')
+
+const isLoading = ref(true)
+const mfaEnabled = ref(false)
+const mfaFactorId = ref('')
+const mfaSetupDate = ref<string | null>(null)
+const otpAlreadyVerified = ref(false)
+
+// Stepper state
+const currentStep = ref(1)
+const totalSteps = 5
+
+// Step 1: CAPTCHA
+const captchaKey = ref(import.meta.env.VITE_CAPTCHA_KEY)
+const captchaToken = ref('')
+const captchaRef = ref<InstanceType<typeof VueTurnstile> | null>(null)
+
+// Step 2 & 3: Email OTP
+const otpEmail = computed(() => main.auth?.email ?? main.user?.email ?? '')
+const otpSending = ref(false)
+const otpVerificationCode = ref('')
+const otpVerificationLoading = ref(false)
+
+// Step 4 & 5: TOTP
+const mfaQRCode = ref('')
+const enrolledFactorId = ref('')
+const mfaVerificationCode = ref('')
+const mfaVerifying = ref(false)
+
+const stepLabels = computed(() => [
+  t('2fa-step-captcha'),
+  t('2fa-step-send-code'),
+  t('2fa-step-enter-code'),
+  t('2fa-step-scan-qr'),
+  t('2fa-step-verify-totp'),
+])
+
+const setupDateLabel = computed(() => {
+  if (!mfaSetupDate.value)
+    return ''
+  return dayjs(mfaSetupDate.value).format('MMMM D, YYYY')
+})
+
+watch(captchaToken, (token) => {
+  if (token && currentStep.value === 1)
+    currentStep.value = 2
+})
+
+async function sendOtpVerification() {
+  if (!otpEmail.value || otpSending.value)
+    return
+
+  otpSending.value = true
+  const { error } = await supabase.auth.signInWithOtp({
+    email: otpEmail.value,
+    options: {
+      shouldCreateUser: false,
+      captchaToken: captchaToken.value || undefined,
+    },
+  })
+  otpSending.value = false
+
+  if (error) {
+    toast.error(t('verification-failed'))
+    console.error('Cannot send email OTP', error)
+    return
+  }
+
+  otpVerificationCode.value = ''
+  toast.success(t('email-otp-sent'))
+  currentStep.value = 3
+}
+
+async function verifyOtpForMfa() {
+  if (!otpEmail.value || !main.auth?.id)
+    return
+
+  const token = otpVerificationCode.value.replaceAll(' ', '')
+  if (!token) {
+    toast.error(t('email-otp-code-required'))
+    return
+  }
+  if (otpVerificationLoading.value)
+    return
+
+  otpVerificationLoading.value = true
+  const { data, error: verifyError } = await supabase.functions.invoke('private/verify_email_otp', {
+    body: { token },
+  })
+  otpVerificationLoading.value = false
+
+  if (verifyError || !data?.verified_at) {
+    toast.error(t('verification-failed'))
+    console.error('Cannot verify email OTP', verifyError)
+    return
+  }
+
+  toast.success(t('email-otp-verified'))
+  await enrollTotp()
+}
+
+async function enrollTotp() {
+  const { data, error } = await supabase.auth.mfa.enroll({ factorType: 'totp' })
+  if (error) {
+    toast.error(t('mfa-fail'))
+    console.error(error)
+    return
+  }
+
+  mfaQRCode.value = data.totp.qr_code
+  enrolledFactorId.value = data.id
+  currentStep.value = 4
+}
+
+function proceedToVerify() {
+  currentStep.value = 5
+}
+
+async function verifyAndEnable() {
+  if (mfaVerifying.value)
+    return
+
+  const code = mfaVerificationCode.value.replaceAll(' ', '').trim()
+  if (!code) {
+    toast.error(t('email-otp-code-required'))
+    return
+  }
+
+  mfaVerifying.value = true
+
+  const { data: challenge, error: challengeError } = await supabase.auth.mfa.challenge({
+    factorId: enrolledFactorId.value,
+  })
+
+  if (challengeError) {
+    toast.error(t('mfa-fail'))
+    console.error('Cannot create MFA challenge', challengeError)
+    mfaVerifying.value = false
+    return
+  }
+
+  const { error: verifyError } = await supabase.auth.mfa.verify({
+    factorId: enrolledFactorId.value,
+    challengeId: challenge.id,
+    code,
+  })
+
+  mfaVerifying.value = false
+
+  if (verifyError) {
+    toast.error(t('mfa-invalid-code'))
+    return
+  }
+
+  toast.success(t('mfa-enabled'))
+  mfaEnabled.value = true
+  mfaFactorId.value = enrolledFactorId.value
+  mfaSetupDate.value = new Date().toISOString()
+  resetWizard()
+}
+
+async function disableMfa() {
+  dialogStore.openDialog({
+    title: t('alert-2fa-disable'),
+    description: `${t('alert-not-reverse-message')} ${t('alert-disable-2fa-message')}?`,
+    buttons: [
+      { text: t('button-cancel'), role: 'cancel' },
+      { text: t('disable'), role: 'danger', id: 'confirm-button' },
+    ],
+  })
+  const canceled = await dialogStore.onDialogDismiss()
+  if (canceled)
+    return
+
+  const factorId = mfaFactorId.value
+  if (!factorId) {
+    toast.error(t('mfa-fail'))
+    console.error('Factor id = null')
+    return
+  }
+
+  const { error: unregisterError } = await supabase.auth.mfa.unenroll({ factorId })
+  if (unregisterError) {
+    toast.error(t('mfa-fail'))
+    console.error('Cannot unregister MFA', unregisterError)
+    return
+  }
+
+  mfaFactorId.value = ''
+  mfaEnabled.value = false
+  mfaSetupDate.value = null
+  toast.success(t('2fa-disabled'))
+}
+
+function resetWizard() {
+  currentStep.value = 1
+  captchaToken.value = ''
+  captchaRef.value?.reset()
+  otpVerificationCode.value = ''
+  mfaQRCode.value = ''
+  enrolledFactorId.value = ''
+  mfaVerificationCode.value = ''
+}
+
+async function cleanupUnverifiedFactors(factors: { id: string, status: string }[]) {
+  const unverified = factors.filter(f => f.status === 'unverified')
+  if (unverified.length > 0) {
+    await Promise.all(unverified.map(f => supabase.auth.mfa.unenroll({ factorId: f.id })))
+  }
+}
+
+async function loadOtpVerificationStatus() {
+  if (!main.auth?.id)
+    return false
+  const { data, error } = await supabase
+    .from('user_security')
+    .select('email_otp_verified_at')
+    .eq('user_id', main.auth.id)
+    .maybeSingle()
+
+  if (error || !data?.email_otp_verified_at)
+    return false
+
+  const verifiedUntil = dayjs(data.email_otp_verified_at).add(1, 'hour')
+  return dayjs().isBefore(verifiedUntil)
+}
+
+onMounted(async () => {
+  const [{ data: mfaFactors, error }, otpValid] = await Promise.all([
+    supabase.auth.mfa.listFactors(),
+    loadOtpVerificationStatus(),
+  ])
+
+  if (error) {
+    console.error('Cannot get MFA factors', error)
+    isLoading.value = false
+    return
+  }
+
+  await cleanupUnverifiedFactors(mfaFactors.all)
+
+  const verifiedFactor = mfaFactors.all.find(f => f.status === 'verified')
+  mfaEnabled.value = !!verifiedFactor
+
+  if (verifiedFactor) {
+    mfaFactorId.value = verifiedFactor.id
+    mfaSetupDate.value = (verifiedFactor as any).created_at ?? (verifiedFactor as any).updated_at ?? null
+  }
+
+  isLoading.value = false
+
+  if (!mfaEnabled.value && otpValid) {
+    otpAlreadyVerified.value = true
+    await enrollTotp()
+  }
+
+  if (route.query.setup2fa === 'true' && !mfaEnabled.value) {
+    await router.replace({ query: {} })
+    await nextTick()
+  }
+})
+
+onBeforeUnmount(async () => {
+  if (enrolledFactorId.value && !mfaEnabled.value) {
+    await supabase.auth.mfa.unenroll({ factorId: enrolledFactorId.value })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-col h-full pb-8 overflow-hidden overflow-y-auto bg-white border shadow-lg md:pb-0 max-h-fit grow md:rounded-lg dark:bg-gray-800 border-slate-300 dark:border-slate-900">
+      <div class="p-6 space-y-6">
+        <h2 class="mb-5 text-2xl font-bold dark:text-white text-slate-800">
+          {{ t('manage-2fa') }}
+        </h2>
+
+        <!-- Loading -->
+        <div v-if="isLoading" class="flex items-center justify-center py-12">
+          <Spinner size="w-10 h-10" color="fill-blue-500 text-gray-200 dark:text-gray-600" />
+        </div>
+
+        <!-- 2FA Enabled View -->
+        <div v-else-if="mfaEnabled" class="flex flex-col items-center py-8 space-y-6">
+          <div class="flex items-center justify-center w-20 h-20 rounded-full bg-emerald-100 dark:bg-emerald-900/30">
+            <svg class="w-10 h-10 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+            </svg>
+          </div>
+
+          <div class="text-center space-y-2">
+            <h3 class="text-xl font-semibold dark:text-white text-slate-800">
+              {{ t('2fa-is-enabled') }}
+            </h3>
+            <p class="text-sm text-slate-500 dark:text-slate-400">
+              {{ t('2fa-is-enabled-description') }}
+            </p>
+            <p v-if="setupDateLabel" class="text-sm text-slate-500 dark:text-slate-400">
+              {{ t('2fa-setup-date', { date: setupDateLabel }) }}
+            </p>
+          </div>
+
+          <button
+            type="button"
+            class="d-btn d-btn-outline d-btn-error d-btn-sm"
+            @click="disableMfa"
+          >
+            {{ t('disable') }}
+          </button>
+        </div>
+
+        <!-- 2FA Not Enabled View -->
+        <div v-else class="space-y-8">
+          <!-- Status icon + heading -->
+          <div class="flex flex-col items-center space-y-3">
+            <div class="flex items-center justify-center w-20 h-20 rounded-full bg-orange-100 dark:bg-orange-900/30">
+              <svg class="w-10 h-10 text-orange-600 dark:text-orange-400" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </div>
+            <div class="text-center space-y-1">
+              <h3 class="text-xl font-semibold dark:text-white text-slate-800">
+                {{ t('2fa-is-not-enabled') }}
+              </h3>
+              <p class="text-sm text-slate-500 dark:text-slate-400">
+                {{ t('2fa-is-not-enabled-description') }}
+              </p>
+            </div>
+          </div>
+
+          <!-- Stepper indicator -->
+          <nav class="flex items-center justify-center">
+            <ol class="flex items-center space-x-2 sm:space-x-4">
+              <li v-for="step in totalSteps" :key="step" class="flex items-center">
+                <div class="flex items-center">
+                  <!-- Completed step -->
+                  <div
+                    v-if="step < currentStep"
+                    class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 text-white shrink-0"
+                  >
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                    </svg>
+                  </div>
+                  <!-- Current step -->
+                  <div
+                    v-else-if="step === currentStep"
+                    class="flex items-center justify-center w-8 h-8 rounded-full border-2 border-blue-500 text-blue-600 dark:text-blue-400 font-semibold text-sm shrink-0"
+                  >
+                    {{ step }}
+                  </div>
+                  <!-- Future step -->
+                  <div
+                    v-else
+                    class="flex items-center justify-center w-8 h-8 rounded-full border-2 border-slate-300 dark:border-slate-600 text-slate-400 dark:text-slate-500 text-sm shrink-0"
+                  >
+                    {{ step }}
+                  </div>
+
+                  <span
+                    class="ml-2 text-xs font-medium hidden sm:block"
+                    :class="{
+                      'text-blue-600 dark:text-blue-400': step === currentStep,
+                      'text-slate-800 dark:text-white': step < currentStep,
+                      'text-slate-400 dark:text-slate-500': step > currentStep,
+                    }"
+                  >
+                    {{ stepLabels[step - 1] }}
+                  </span>
+                </div>
+                <!-- Connector line -->
+                <div
+                  v-if="step < totalSteps"
+                  class="w-6 sm:w-10 h-0.5 mx-1"
+                  :class="step < currentStep ? 'bg-blue-500' : 'bg-slate-300 dark:bg-slate-600'"
+                />
+              </li>
+            </ol>
+          </nav>
+
+          <!-- Step content -->
+          <div class="max-w-lg mx-auto">
+            <!-- Step 1: CAPTCHA -->
+            <div v-if="currentStep === 1" class="space-y-4">
+              <h4 class="text-lg font-medium dark:text-white text-slate-800">
+                {{ t('2fa-step-captcha') }}
+              </h4>
+              <p class="text-sm text-slate-500 dark:text-slate-400">
+                {{ t('captcha', 'Complete the CAPTCHA to proceed.') }}
+              </p>
+              <div v-if="captchaKey">
+                <VueTurnstile
+                  ref="captchaRef"
+                  v-model="captchaToken"
+                  size="flexible"
+                  :site-key="captchaKey"
+                />
+              </div>
+              <div v-else>
+                <!-- No captcha configured, skip step -->
+                <button
+                  type="button"
+                  class="d-btn d-btn-primary d-btn-sm"
+                  @click="currentStep = 2"
+                >
+                  {{ t('next') }}
+                </button>
+              </div>
+            </div>
+
+            <!-- Step 2: Send verification code -->
+            <div v-if="currentStep === 2" class="space-y-4">
+              <h4 class="text-lg font-medium dark:text-white text-slate-800">
+                {{ t('2fa-step-send-code') }}
+              </h4>
+              <p class="text-sm text-slate-500 dark:text-slate-400">
+                {{ t('email-otp-2fa-description') }}
+              </p>
+              <div class="p-3 rounded-lg bg-slate-50 dark:bg-slate-700/50">
+                <p class="text-sm font-medium dark:text-white text-slate-800">
+                  {{ otpEmail }}
+                </p>
+              </div>
+              <button
+                type="button"
+                class="d-btn d-btn-primary d-btn-sm"
+                :class="{ 'opacity-50 cursor-not-allowed': otpSending }"
+                :disabled="otpSending"
+                @click="sendOtpVerification"
+              >
+                <Spinner v-if="otpSending" size="w-4 h-4" class="mr-2" color="fill-white text-blue-300" />
+                {{ t('email-otp-send-code') }}
+              </button>
+            </div>
+
+            <!-- Step 3: Enter verification code -->
+            <div v-if="currentStep === 3" class="space-y-4">
+              <h4 class="text-lg font-medium dark:text-white text-slate-800">
+                {{ t('2fa-step-enter-code') }}
+              </h4>
+              <p class="text-sm text-slate-500 dark:text-slate-400">
+                {{ t('email-otp-sent') }}
+              </p>
+              <input
+                v-model="otpVerificationCode"
+                type="text"
+                inputmode="numeric"
+                :placeholder="t('verification-code')"
+                class="d-input w-full"
+                autocomplete="one-time-code"
+                @keydown.enter.prevent="verifyOtpForMfa"
+              >
+              <div class="flex gap-2">
+                <button
+                  type="button"
+                  class="d-btn d-btn-primary d-btn-sm"
+                  :class="{ 'opacity-50 cursor-not-allowed': otpVerificationLoading || !otpVerificationCode }"
+                  :disabled="otpVerificationLoading || !otpVerificationCode"
+                  @click="verifyOtpForMfa"
+                >
+                  <Spinner v-if="otpVerificationLoading" size="w-4 h-4" class="mr-2" color="fill-white text-blue-300" />
+                  {{ t('verify') }}
+                </button>
+                <button
+                  type="button"
+                  class="d-btn d-btn-outline d-btn-sm"
+                  :disabled="otpSending"
+                  @click="sendOtpVerification"
+                >
+                  {{ t('resend') }}
+                </button>
+              </div>
+            </div>
+
+            <!-- Step 4: Scan QR code -->
+            <div v-if="currentStep === 4" class="space-y-4">
+              <h4 class="text-lg font-medium dark:text-white text-slate-800">
+                {{ t('2fa-step-scan-qr') }}
+              </h4>
+              <p class="text-sm text-slate-500 dark:text-slate-400">
+                {{ t('mfa-enable-instruction') }}
+              </p>
+              <div v-if="mfaQRCode" class="flex justify-center p-4 rounded-lg bg-white dark:bg-slate-700/50">
+                <img
+                  :src="mfaQRCode"
+                  alt="QR Code for 2FA setup"
+                  class="w-48 h-48"
+                >
+              </div>
+              <button
+                type="button"
+                class="d-btn d-btn-primary d-btn-sm"
+                @click="proceedToVerify"
+              >
+                {{ t('next') }}
+              </button>
+            </div>
+
+            <!-- Step 5: Enter 2FA code -->
+            <div v-if="currentStep === 5" class="space-y-4">
+              <h4 class="text-lg font-medium dark:text-white text-slate-800">
+                {{ t('2fa-step-verify-totp') }}
+              </h4>
+              <p class="text-sm text-slate-500 dark:text-slate-400">
+                {{ t('mfa-enable-instruction-2') }}
+              </p>
+              <input
+                v-model="mfaVerificationCode"
+                type="text"
+                inputmode="numeric"
+                :placeholder="t('verification-code')"
+                class="d-input w-full"
+                maxlength="6"
+                autocomplete="one-time-code"
+                @keydown.enter.prevent="verifyAndEnable"
+              >
+              <button
+                type="button"
+                class="d-btn d-btn-primary d-btn-sm"
+                :class="{ 'opacity-50 cursor-not-allowed': mfaVerifying || !mfaVerificationCode }"
+                :disabled="mfaVerifying || !mfaVerificationCode"
+                @click="verifyAndEnable"
+              >
+                <Spinner v-if="mfaVerifying" size="w-4 h-4" class="mr-2" color="fill-white text-blue-300" />
+                {{ t('2fa-verify-and-enable') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<route lang="yaml">
+path: /settings/account/manage-2fa
+meta:
+  layout: settings
+</route>
diff --git a/src/pages/settings/account/index.vue b/src/pages/settings/account/index.vue
index 2d49f8df20..e997dfce4c 100644
--- a/src/pages/settings/account/index.vue
+++ b/src/pages/settings/account/index.vue
@@ -4,7 +4,7 @@ import { Capacitor } from '@capacitor/core'
 import { setErrors } from '@formkit/core'
 import { FormKit, FormKitMessages, reset } from '@formkit/vue'
 import dayjs from 'dayjs'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
@@ -36,41 +36,9 @@ const deleteAccountPassword = ref('')
 const deleteAccountCaptchaToken = ref('')
 const deleteAccountCaptchaRef = ref<InstanceType<typeof VueTurnstile> | null>(null)
 const captchaKey = ref(import.meta.env.VITE_CAPTCHA_KEY)
-// mfa = 2fa
-const mfaEnabled = ref(false)
-const mfaFactorId = ref('')
-const mfaVerificationCode = ref('')
-const mfaQRCode = ref('')
-const otpVerificationCode = ref('')
-const otpVerifiedAt = ref<string | null>(null)
-const otpVerificationLoading = ref(false)
-const otpSending = ref(false)
-const otpNow = ref(dayjs())
-let otpNowTimer: ReturnType<typeof setInterval> | null = null
 const organizationsToDelete = ref<string[]>([])
 const paidOrganizationsToDelete = ref<Array<{ name: string, planName: string }>>([])
 displayStore.NavTitle = t('account')
-const otpEmail = computed(() => main.auth?.email ?? main.user?.email ?? '')
-const otpVerifiedUntil = computed(() => {
-  if (!otpVerifiedAt.value)
-    return null
-  return dayjs(otpVerifiedAt.value).add(1, 'hour')
-})
-const otpVerificationValid = computed(() => {
-  if (!otpVerifiedUntil.value)
-    return false
-  return otpNow.value.isBefore(otpVerifiedUntil.value)
-})
-const otpVerificationStatus = computed(() => {
-  if (!otpVerifiedAt.value)
-    return 'none'
-  return otpVerificationValid.value ? 'valid' : 'expired'
-})
-const otpVerifiedUntilLabel = computed(() => {
-  if (!otpVerifiedUntil.value)
-    return ''
-  return otpVerifiedUntil.value.format('YYYY-MM-DD HH:mm')
-})
 
 async function checkOrganizationImpact() {
   // Wait for organizations and main store to load
@@ -479,259 +447,12 @@ async function submit(form: { first_name: string, last_name: string, email: stri
   isLoading.value = false
 }
 
-async function disableMfa() {
-  dialogStore.openDialog({
-    title: t('alert-2fa-disable'),
-    description: `${t('alert-not-reverse-message')} ${t('alert-disable-2fa-message')}?`,
-    buttons: [
-      {
-        text: t('button-cancel'),
-        role: 'cancel',
-      },
-      {
-        text: t('disable'),
-        role: 'danger',
-        id: 'confirm-button',
-      },
-    ],
-  })
-  const canceled = await dialogStore.onDialogDismiss()
-
-  // User has changed his mind - keepin 2fa
-  if (canceled)
-    return
-
-  // Remove 2fa
-  const factorId = mfaFactorId.value
-  if (!factorId) {
-    toast.error(t('mfa-fail'))
-    console.error('Factor id = null')
-    return
-  }
-
-  const { error: unregisterError } = await supabase.auth.mfa.unenroll({ factorId })
-  if (unregisterError) {
-    toast.error(t('mfa-fail'))
-    console.error('Cannot unregister MFA', unregisterError)
-    return
-  }
-
-  mfaFactorId.value = ''
-  mfaEnabled.value = false
-  toast.success(t('2fa-disabled'))
-}
-
-async function handleMfa() {
-  if (mfaEnabled.value) {
-    await disableMfa()
-    return
-  }
-  await loadOtpVerification()
-  if (!otpVerificationValid.value) {
-    toast.error(t('email-otp-required'))
-    return
-  }
-  const { data, error } = await supabase.auth.mfa.enroll({
-    factorType: 'totp',
-  })
-
-  if (error) {
-    toast.error(t('mfa-fail'))
-    console.error(error)
-    return
-  }
-
-  // Store QR code for display
-  mfaQRCode.value = data.totp.qr_code
-
-  // Step 1: Show QR code
-  dialogStore.openDialog({
-    title: t('enable-2FA'),
-    description: `${t('mfa-enable-instruction')}`,
-    size: 'lg',
-    preventAccidentalClose: true,
-    buttons: [
-      {
-        text: t('verify'),
-        id: 'verify',
-      },
-    ],
-  })
-  const didCancel = await dialogStore.onDialogDismiss()
-
-  if (didCancel) {
-    // User closed the window, go ahead and unregister mfa
-    const { error: unregisterError } = await supabase.auth.mfa.unenroll({ factorId: data.id })
-    if (error)
-      console.error('Cannot unregister MFA', unregisterError)
-    mfaQRCode.value = ''
-    return
-  }
-  // Step 2: User has scanned the code - verify his claim
-  mfaVerificationCode.value = ''
-  mfaQRCode.value = ''
-
-  dialogStore.openDialog({
-    title: t('verify-2FA'),
-    description: `${t('mfa-enable-instruction-2')}`,
-    size: 'lg',
-    preventAccidentalClose: true,
-    buttons: [
-      {
-        text: t('verify'),
-        id: 'verify',
-        handler: async () => {
-          // User has clicked the "verify button - let's check"
-          const verifyCode = mfaVerificationCode.value.replaceAll(' ', '')
-
-          const { data: challenge, error: challengeError } = await supabase.auth.mfa.challenge({ factorId: data.id })
-
-          if (challengeError) {
-            toast.error(t('mfa-fail'))
-            console.error('Cannot create MFA challenge', challengeError)
-            return false
-          }
-
-          const { data: _verify, error: verifyError } = await supabase.auth.mfa.verify({ factorId: data.id, challengeId: challenge.id, code: verifyCode.trim() })
-          if (verifyError) {
-            toast.error(t('mfa-invalid-code'))
-            return false
-          }
-
-          toast.success(t('mfa-enabled'))
-          mfaEnabled.value = true
-          mfaFactorId.value = data.id
-        },
-      },
-    ],
-  })
-
-  // Check the cancel again
-  const didCancel2 = await dialogStore.onDialogDismiss()
-  if (didCancel2) {
-    // User closed the window, go ahead and unregister mfa
-    const { error: unregisterError } = await supabase.auth.mfa.unenroll({ factorId: data.id })
-    if (error)
-      console.error('Cannot unregister MFA', unregisterError)
-  }
-}
-
-async function loadOtpVerification() {
-  if (!main.auth?.id)
-    return
-  const { data, error } = await supabase
-    .from('user_security')
-    .select('email_otp_verified_at')
-    .eq('user_id', main.auth.id)
-    .maybeSingle()
-
-  if (error) {
-    console.error('Cannot load email OTP status', error)
-    return
-  }
-
-  otpVerifiedAt.value = data?.email_otp_verified_at ?? null
-}
-
-async function sendOtpVerification() {
-  if (!otpEmail.value) {
-    toast.error(t('account-error'))
-    return
-  }
-  if (otpSending.value)
-    return
-
-  otpSending.value = true
-  const { error } = await supabase.auth.signInWithOtp({
-    email: otpEmail.value,
-    options: {
-      shouldCreateUser: false,
-    },
-  })
-  otpSending.value = false
-
-  if (error) {
-    toast.error(t('verification-failed'))
-    console.error('Cannot send email OTP', error)
-    return
-  }
-
-  otpVerificationCode.value = ''
-  toast.success(t('email-otp-sent'))
-}
-
-async function verifyOtpForMfa() {
-  if (!otpEmail.value) {
-    toast.error(t('account-error'))
-    return
-  }
-  if (!main.auth?.id)
-    return
-
-  const token = otpVerificationCode.value.replaceAll(' ', '')
-  if (!token) {
-    toast.error(t('email-otp-code-required'))
-    return
-  }
-  if (otpVerificationLoading.value)
-    return
-
-  otpVerificationLoading.value = true
-  const { data, error: verifyError } = await supabase.functions.invoke('private/verify_email_otp', {
-    body: { token },
-  })
-
-  otpVerificationLoading.value = false
-
-  if (verifyError || !data?.verified_at) {
-    toast.error(t('verification-failed'))
-    console.error('Cannot verify email OTP', verifyError)
-    return
-  }
-
-  otpVerifiedAt.value = data.verified_at
-  toast.success(t('email-otp-verified'))
-}
-
 onMounted(async () => {
-  otpNowTimer = setInterval(() => {
-    otpNow.value = dayjs()
-  }, 60000)
-  await loadOtpVerification()
-  const { data: mfaFactors, error } = await supabase.auth.mfa.listFactors()
-  if (error) {
-    console.error('Cannot get MFA factors', error)
-    return
-  }
-
-  const unverified = mfaFactors.all.filter(factor => factor.status === 'unverified')
-  if (unverified && unverified.length > 0) {
-    console.log(`Found ${unverified.length} unverified MFA factors, removing all`)
-    const responses = await Promise.all(unverified.map(factor => supabase.auth.mfa.unenroll({ factorId: factor.id })))
-
-    responses.filter(res => !!res.error).forEach(() => console.error('Failed to unregister', error))
-  }
-
-  const hasMfa = mfaFactors?.all.find(factor => factor.status === 'verified')
-  mfaEnabled.value = !!hasMfa
-
-  if (hasMfa)
-    mfaFactorId.value = hasMfa.id
-
-  // Auto-trigger 2FA setup if redirected from enforcement card
-  if (route.query.setup2fa === 'true' && !mfaEnabled.value) {
-    // Clear the query param first, wait for it to complete, then open dialog
-    // This prevents the DialogV2's route watcher from closing the dialog
-    await router.replace({ query: {} })
-    await nextTick()
-    handleMfa()
+  // Auto-redirect to Manage 2FA page if setup2fa query param is present
+  if (route.query.setup2fa === 'true') {
+    router.replace('/settings/account/manage-2fa?setup2fa=true')
   }
 })
-
-onBeforeUnmount(() => {
-  if (otpNowTimer)
-    clearInterval(otpNowTimer)
-})
 </script>
 
 <template>
@@ -837,78 +558,6 @@ onBeforeUnmount(() => {
             </div>
           </section>
 
-          <section class="flex flex-col md:flex-row md:items-start items-left">
-            <div class="md:w-1/2">
-              <p class="dark:text-white text-slate-800">
-                {{ t('email-otp-2fa-title') }}:
-              </p>
-              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
-                {{ t('email-otp-2fa-description') }}
-              </p>
-              <p v-if="otpVerificationStatus === 'valid'" class="mt-1 text-xs text-emerald-600">
-                {{ t('email-otp-verified-until', { time: otpVerifiedUntilLabel }) }}
-              </p>
-              <p v-else-if="otpVerificationStatus === 'expired'" class="mt-1 text-xs text-orange-600">
-                {{ t('email-otp-expired') }}
-              </p>
-              <p v-else class="mt-1 text-xs text-orange-600">
-                {{ t('email-otp-not-verified') }}
-              </p>
-            </div>
-            <div class="mt-3 w-full md:mt-0 md:ml-6 md:w-1/2">
-              <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
-                <button
-                  type="button"
-                  class="d-btn d-btn-outline d-btn-sm"
-                  :class="{ 'opacity-50 cursor-not-allowed': otpSending }"
-                  :disabled="otpSending"
-                  @click="sendOtpVerification"
-                >
-                  {{ t('email-otp-send-code') }}
-                </button>
-                <button
-                  type="button"
-                  class="d-btn d-btn-outline d-btn-sm"
-                  :class="{ 'opacity-50 cursor-not-allowed': otpVerificationLoading || !otpVerificationCode }"
-                  :disabled="otpVerificationLoading || !otpVerificationCode"
-                  @click="verifyOtpForMfa"
-                >
-                  {{ t('verify') }}
-                </button>
-              </div>
-              <input
-                v-model="otpVerificationCode"
-                type="text"
-                inputmode="numeric"
-                :placeholder="t('verification-code')"
-                class="d-input w-full mt-2"
-                autocomplete="one-time-code"
-                @keydown.enter.prevent="verifyOtpForMfa"
-              >
-            </div>
-          </section>
-
-          <section class="flex flex-col md:flex-row md:items-center items-left">
-            <p class="dark:text-white text-slate-800">
-              {{ t('2fa') }}:
-            </p>
-            <div class="md:ml-6">
-              <button
-                type="button"
-                data-test="setup-mfa"
-                class="d-btn d-btn-outline d-btn-sm"
-                :class="{
-                  'd-btn-success': !mfaEnabled,
-                  'd-btn-error': mfaEnabled,
-                  'opacity-50 cursor-not-allowed': !mfaEnabled && !otpVerificationValid,
-                }"
-                :disabled="!mfaEnabled && !otpVerificationValid"
-                @click="handleMfa"
-              >
-                {{ !mfaEnabled ? t('enable') : t('disable') }}
-              </button>
-            </div>
-          </section>
           <div class="flex flex-col md:flex-row md:items-center items-left">
             <p class="dark:text-white text-slate-800">
               {{ t('account-id') }}:
@@ -947,36 +596,6 @@ onBeforeUnmount(() => {
       </FormKit>
     </div>
 
-    <Teleport
-      v-if="
-        dialogStore.showDialog
-          && (dialogStore.dialogOptions?.title === t('enable-2FA')
-            || dialogStore.dialogOptions?.title === t('verify-2FA'))
-      "
-      to="#dialog-v2-content"
-      defer
-    >
-      <!-- QR Code display for MFA setup -->
-      <div v-if="mfaQRCode" class="w-full text-center">
-        <img
-          :src="mfaQRCode"
-          alt="QR Code for 2FA setup"
-          class="mx-auto mb-4"
-        >
-      </div>
-
-      <!-- MFA verification code input -->
-      <div v-if="!mfaQRCode" class="w-full">
-        <input
-          v-model="mfaVerificationCode"
-          type="text"
-          :placeholder="t('verification-code')"
-          class="w-full p-3 border border-gray-300 rounded-lg dark:text-white dark:bg-gray-800 dark:border-gray-600"
-          @keydown.enter="$event.preventDefault()"
-        >
-      </div>
-    </Teleport>
-
     <!-- Teleport for Organization Deletion Warning -->
     <Teleport v-if="dialogStore.showDialog && dialogStore.dialogOptions?.id === 'delete-account-warning-orgs'" to="#dialog-v2-content" defer>
       <div class="p-4 mt-4 border border-red-200 rounded-lg bg-red-50 dark:border-red-800 dark:bg-red-900/20">
diff --git a/src/route-map.d.ts b/src/route-map.d.ts
index bd8eb06cb4..ce581c93b6 100644
--- a/src/route-map.d.ts
+++ b/src/route-map.d.ts
@@ -369,6 +369,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/settings/account/ManageTwoFactor': RouteRecordInfo<
+      '/settings/account/ManageTwoFactor',
+      '/settings/account/manage-2fa',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/settings/account/Notifications': RouteRecordInfo<
       '/settings/account/Notifications',
       '/settings/account/Notifications',
@@ -760,6 +767,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/settings/account/ManageTwoFactor.vue': {
+      routes:
+        | '/settings/account/ManageTwoFactor'
+      views:
+        | never
+    }
     'src/pages/settings/account/Notifications.vue': {
       routes:
         | '/settings/account/Notifications'

From c62152c4c5f8218ceae554d57ed296e0255ce386 Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Fri, 20 Feb 2026 15:01:25 +0100
Subject: [PATCH 2/5] fix: coderabbit

---
 src/pages/settings/account/ManageTwoFactor.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/settings/account/ManageTwoFactor.vue b/src/pages/settings/account/ManageTwoFactor.vue
index c05eac00c7..a631d8e9aa 100644
--- a/src/pages/settings/account/ManageTwoFactor.vue
+++ b/src/pages/settings/account/ManageTwoFactor.vue
@@ -80,6 +80,8 @@ async function sendOtpVerification() {
   })
   otpSending.value = false
 
+  captchaToken.value = ''
+
   if (error) {
     toast.error(t('verification-failed'))
     console.error('Cannot send email OTP', error)

From 2bc78d7ffcb7a064cca4beb8c45a4b66b75f26b7 Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Fri, 20 Feb 2026 15:08:00 +0100
Subject: [PATCH 3/5] fix: coderabbit v2

---
 .../settings/account/ManageTwoFactor.vue      | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/pages/settings/account/ManageTwoFactor.vue b/src/pages/settings/account/ManageTwoFactor.vue
index a631d8e9aa..7f67cc7832 100644
--- a/src/pages/settings/account/ManageTwoFactor.vue
+++ b/src/pages/settings/account/ManageTwoFactor.vue
@@ -33,6 +33,7 @@ const totalSteps = 5
 // Step 1: CAPTCHA
 const captchaKey = ref(import.meta.env.VITE_CAPTCHA_KEY)
 const captchaToken = ref('')
+const savedCaptchaToken = ref('')
 const captchaRef = ref<InstanceType<typeof VueTurnstile> | null>(null)
 
 // Step 2 & 3: Email OTP
@@ -62,8 +63,10 @@ const setupDateLabel = computed(() => {
 })
 
 watch(captchaToken, (token) => {
-  if (token && currentStep.value === 1)
+  if (token && currentStep.value === 1) {
+    savedCaptchaToken.value = token
     currentStep.value = 2
+  }
 })
 
 async function sendOtpVerification() {
@@ -75,12 +78,12 @@ async function sendOtpVerification() {
     email: otpEmail.value,
     options: {
       shouldCreateUser: false,
-      captchaToken: captchaToken.value || undefined,
+      captchaToken: savedCaptchaToken.value || undefined,
     },
   })
   otpSending.value = false
 
-  captchaToken.value = ''
+  savedCaptchaToken.value = ''
 
   if (error) {
     toast.error(t('verification-failed'))
@@ -214,9 +217,18 @@ async function disableMfa() {
   toast.success(t('2fa-disabled'))
 }
 
+function restartFromCaptcha() {
+  captchaToken.value = ''
+  savedCaptchaToken.value = ''
+  captchaRef.value?.reset()
+  otpVerificationCode.value = ''
+  currentStep.value = 1
+}
+
 function resetWizard() {
   currentStep.value = 1
   captchaToken.value = ''
+  savedCaptchaToken.value = ''
   captchaRef.value?.reset()
   otpVerificationCode.value = ''
   mfaQRCode.value = ''
@@ -486,8 +498,7 @@ onBeforeUnmount(async () => {
                 <button
                   type="button"
                   class="d-btn d-btn-outline d-btn-sm"
-                  :disabled="otpSending"
-                  @click="sendOtpVerification"
+                  @click="restartFromCaptcha"
                 >
                   {{ t('resend') }}
                 </button>

From f9e2d7345c5941974a086172e59798b7fea193ab Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Fri, 20 Feb 2026 15:57:05 +0100
Subject: [PATCH 4/5] fix: coderabbit v3

---
 src/pages/settings/account/ManageTwoFactor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/account/ManageTwoFactor.vue b/src/pages/settings/account/ManageTwoFactor.vue
index 7f67cc7832..a7018cf809 100644
--- a/src/pages/settings/account/ManageTwoFactor.vue
+++ b/src/pages/settings/account/ManageTwoFactor.vue
@@ -278,7 +278,7 @@ onMounted(async () => {
 
   if (verifiedFactor) {
     mfaFactorId.value = verifiedFactor.id
-    mfaSetupDate.value = (verifiedFactor as any).created_at ?? (verifiedFactor as any).updated_at ?? null
+    mfaSetupDate.value = verifiedFactor.created_at ?? verifiedFactor.updated_at ?? null
   }
 
   isLoading.value = false

From 0cf1443cc58b477af8bfc2059e69d71e969be413 Mon Sep 17 00:00:00 2001
From: WcaleNieWolny <isupermichael007@gmail.com>
Date: Fri, 20 Feb 2026 15:57:46 +0100
Subject: [PATCH 5/5] fix(test): add cleanup before inserting app version to
 handle retries

The cli-s3 test was failing with a duplicate key constraint violation
when Vitest retried the test. This adds cleanup before inserting
the version to handle test retries properly.
---
 tests/cli-s3.test.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/tests/cli-s3.test.ts b/tests/cli-s3.test.ts
index 8d5b3ee7a8..db77de599e 100644
--- a/tests/cli-s3.test.ts
+++ b/tests/cli-s3.test.ts
@@ -55,6 +55,10 @@ describe('upload_link', async () => {
     const filePath = `orgs/${ORG_ID}/apps/${APPNAME}/${fileId}.zip`
     //  be sure to remove the file from the bucket before running the test
     const supabase = getSupabaseClient()
+
+    // Clean up any existing version with this name before inserting (handles test retries)
+    await supabase.from('app_versions').delete().eq('app_id', APPNAME).eq('name', fileId)
+
     // create in supabase app_version with version 4
     const { data: data2, error } = await supabase.from('app_versions').insert({
       app_id: APPNAME,