12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
- <script setup lang="ts">
- import type { TwoFactorPlugin } from '#shared/entities/two-factor/types.ts'
- import type { EnumTwoFactorAuthenticationMethod } from '#shared/graphql/types.ts'
- import CommonButton from '#desktop/components/CommonButton/CommonButton.vue'
- import CommonLabel from '#shared/components/CommonLabel/CommonLabel.vue'
- defineProps<{
- methods: TwoFactorPlugin[]
- defaultMethod?: Maybe<EnumTwoFactorAuthenticationMethod>
- recoveryCodesAvailable: boolean
- }>()
- const emit = defineEmits<{
- (e: 'select', twoFactorMethod: EnumTwoFactorAuthenticationMethod): void
- (e: 'cancel'): void
- (e: 'use-recovery-code'): void
- }>()
- </script>
- <template>
- <section
- v-for="method of methods"
- :key="method.name"
- class="mt-3 flex flex-col"
- >
- <CommonButton
- size="large"
- block
- :prefix-icon="method.icon"
- :variant="method.name == defaultMethod ? 'primary' : 'tertiary'"
- @click="emit('select', method.name)"
- >
- {{ $t(method.label) }}
- </CommonButton>
- <div class="mt-2.5 text-center">
- <CommonLabel>
- {{ $t(method.description) }}
- </CommonLabel>
- </div>
- </section>
- <div class="mt-8 text-sm text-center">
- <CommonLink
- v-if="recoveryCodesAvailable"
- link="#"
- @click="emit('use-recovery-code')"
- >
- {{ $t('Or use one of your recovery codes.') }}
- </CommonLink>
- </div>
- <CommonButton class="mt-5" size="large" block @click="emit('cancel')">
- {{ $t('Cancel & Go Back') }}
- </CommonButton>
- </template>
|