TwoFactorAuth

<!-- UserSettings.vue — TwoFactorAuthSetup dentro de vs-popup -->
<vs-popup
  :active.sync="showModal"
  title="Configurar Autenticação em Dois Fatores"
>
  <TwoFactorAuthSetup
    @showModal="closePopup"
    :verifyActivity="verifyActivity"
    @backToQrCode="showModal = true"
  />
</vs-popup>

<!-- Script -->
computed: {
  verifyActivity() {
    return this.$store.state.AppActiveUser.twofactor_activity
  }
},
methods: {
  closePopup(val) {
    this.showModal = val  // fecha o popup pai
  }
}

<!-- Exemplo sintético — QR Code gerado é estado interno do componente. -->
<!-- O uso externo (tag no template pai) é idêntico ao variant-setup-initial. -->

<!-- Após clicar em 'Gerar QR Code' (fluxo interno TwoFactorAuthSetup.vue): -->
<!--
  1. $vs.loading({ type: 'vs-request' })  — loading overlay
  2. dispatch('user/generateQrcode')      — gera chave secreta + SVG QR
  3. $events.$emit('generateSave', true)  — notifica componentes pai
  4. showQRCode = true                    — SVG exibido no template
  5. Botão 'Enviar Código' fica ativo
-->
<TwoFactorAuthSetup
  @showModal="closePopup"
  :verifyActivity="verifyActivity"
  @backToQrCode="showModal = true"
/>

<!-- vs-popup TOTP aninhado (dentro do componente): -->
<!-- @backToQrCode emitido ao clicar na seta ← -->
<!-- dispatch('user/getUserValidateTwoFatctor', { code, ip }) -->
<!-- localStorage.setItem('twoFactorValidatedInSession', userId) -->

<!-- LoginJWT.vue — CAPTCHA condicional (linhas 62–63) -->
<aws-captcha
  v-if="!isDevelopment && captchaProvider === 'aws'"
  :onVerify="setToken"
/>
<turnstile
  v-else-if="!isDevelopment"
  :onVerify="setToken"
/>

<!-- Script -->
computed: {
  isDevelopment() {
    return process.env.NODE_ENV === 'development'
  },
  captchaProvider() {
    return process.env.VUE_APP_CAPTCHA_PROVIDER  // 'aws' | outro valor
  }
},
methods: {
  setToken(token) {
    this.captchaToken = token  // habilita o botão de login
  }
}

<!-- .env -->
<!-- VUE_APP_AWS_CAPTCHA_KEY=... -->
<!-- VUE_APP_AWS_CAPTCHA_URL=https://captcha.aws.amazon.com/... -->

<!-- Turnstile — v-else-if fallback -->
<turnstile
  v-else-if="!isDevelopment"
  :onVerify="setToken"
/>

<!-- Internamente (Turnstile.vue): -->
props: {
  onVerify: { type: Function, required: true },
  options:  { type: Object, default: () => ({}) }
},
mounted() {
  const script = document.createElement('script')
  script.src = process.env.VUE_APP_TURNSTILE_URL
  script.onload = () => {
    window.turnstile.render(this.$el, {
      sitekey:  process.env.VUE_APP_TURNSTILE_KEY,
      callback: this.onVerify,
      theme:    'light',
      language: 'pt-br',
      ...this.options
    })
  }
  document.head.appendChild(script)
},
beforeDestroy() {
  window.turnstile && window.turnstile.remove(this.$el)
}

<!-- .env -->
<!-- VUE_APP_TURNSTILE_KEY=0x... -->
<!-- VUE_APP_TURNSTILE_URL=https://challenges.cloudflare.com/turnstile/v0/api.js -->