LoginThirdParty.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
  2. <script setup lang="ts">
  3. import useFingerprint from '#shared/composables/useFingerprint.ts'
  4. import { getCSRFToken } from '#shared/server/apollo/utils/csrfToken.ts'
  5. import type { ThirdPartyAuthProvider } from '#shared/types/authentication.ts'
  6. import CommonButton from '#desktop/components/CommonButton/CommonButton.vue'
  7. export interface Props {
  8. providers: ThirdPartyAuthProvider[]
  9. }
  10. const props = defineProps<Props>()
  11. const csrfToken = getCSRFToken()
  12. const { fingerprint } = useFingerprint()
  13. </script>
  14. <template>
  15. <section class="w-full mt-2.5" data-test-id="loginThirdParty">
  16. <div class="flex justify-center mb-2.5">
  17. <CommonLabel>
  18. {{
  19. $c.user_show_password_login
  20. ? $t('Or sign in using')
  21. : $t('Sign in using')
  22. }}
  23. </CommonLabel>
  24. </div>
  25. <div class="flex flex-wrap gap-2">
  26. <form
  27. v-for="provider of props.providers"
  28. :key="provider.name"
  29. class="flex min-w-[calc(50%-theme(spacing.2))] grow"
  30. method="post"
  31. :action="`${provider.url}?fingerprint=${fingerprint}`"
  32. >
  33. <input type="hidden" name="authenticity_token" :value="csrfToken" />
  34. <CommonButton
  35. type="submit"
  36. variant="primary"
  37. size="large"
  38. block
  39. :prefix-icon="provider.icon"
  40. >
  41. {{ $t(provider.name) }}
  42. </CommonButton>
  43. </form>
  44. </div>
  45. </section>
  46. </template>