<script setup>
import { useQuasar } from "quasar";
import { webAuthn } from "@hostlink/light";
import { q, m, useAsyncData } from "#imports";
const { data, refresh } = await useAsyncData("user-setting-bio-auth", async () => {
  return await q({
    app: {
      hasBioAuth: true
    },
    my: {
      webAuthn: {
        uuid: true,
        ip: true,
        user_agent: true,
        createdTime: true
      }
    }
  });
});
const quasar = useQuasar();
const register = async () => {
  try {
    await webAuthn.register();
    await refresh();
  } catch (e) {
    quasar.dialog({
      title: "Error",
      message: e.message,
      ok: "OK"
    });
  }
};
const columns = [
  {
    name: "action"
  },
  {
    label: "Created time",
    name: "createdTime",
    field: "createdTime",
    align: "left",
    sortable: true
  },
  {
    label: "IP",
    name: "ip",
    field: "ip",
    align: "left",
    sortable: true
  },
  {
    label: "User agent",
    name: "user_agent",
    field: "user_agent",
    align: "left",
    sortable: true
  }
];
const deleteItem = async (uuid) => {
  quasar.dialog({
    title: "Delete",
    color: "negative",
    message: "Are you sure you want to delete this item?",
    ok: "Yes",
    cancel: "No"
  }).onOk(async () => {
    await m("deleteWebAuthn", { uuid });
    await refresh();
  });
};
</script>

<template>
    <l-card :bordered="false">
        <q-card-section v-if="!data.app.hasBioAuth">
            Biometric authentication is not installed, please install web-auth/webauthn-lib on the server.
        </q-card-section>

        <template v-else>
            <q-toolbar>
                <q-toolbar-title>Biometric authentication</q-toolbar-title>
                <l-btn label="Register" @click="register" icon="sym_o_add"></l-btn>
            </q-toolbar>

            <q-table :rows="data.my.webAuthn" :columns="columns" dense :rows-per-page-options="[0]">
                <template #body-cell-action="props">
                    <q-td :props="props" auto-width>
                        <q-btn @click="deleteItem(props.row.uuid)" icon="sym_o_delete" round flat dense></q-btn>
                    </q-td>
                </template>
            </q-table>

        </template>

    </l-card>
</template>
