aboutsummaryrefslogtreecommitdiff
path: root/front-end/src/views/Account/components/settings/Fido.vue
blob: f319cd346466735ff0ebf0615ddffd7368c2e7ff (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<template>
  <div id="account-fido-settings">
    <div v-if="!isLocalAccount" class="flex flex-row justify-between">
      <h6 class="block">
        FIDO/WebAuthN Authentication
      </h6>
      <div class="text-red-500">
        Unavailable for external auth
      </div>
    </div>
    <div v-else class="flex flex-row flex-wrap justify-between">
      <h6>FIDO/WebAuthN Authentication</h6>
      <div class="">
        <div v-if="fidoEnabled" class="">
          <button class="ml-1 btn red xs" @click.prevent="Disable">
            <fa-icon icon="minus-circle" />
            <span class="pl-2">Disable</span>
          </button>
        </div>
        <div v-else>
          <button class="btn primary xs" @click.prevent="Setup">
            <fa-icon icon="plus" />
            <span class="pl-2">Setup</span>
          </button>
        </div>
      </div>
      <p class="p-1 pt-3 text-sm text-gray-600">
        WebAuthN/FIDO is not yet supported, due to complexity and browser support. 
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSession } from '@vnuge/vnlib.browser'
import { toRefs } from 'vue';

const props = defineProps<{
  fidoEnabled?: boolean
}>()

const { fidoEnabled } = toRefs(props)

const { isLocalAccount } = useSession()

const Disable = () => {}
const Setup = () => {}

</script>

<style>

</style>