import { __decorate, __metadata } from "tslib";
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
let CredentialManager = class CredentialManager extends LitElement {
    constructor() {
        super(...arguments);
        this.credentials = [];
    }
    connectedCallback() {
        super.connectedCallback();
        this.fetchCredentials();
    }
    async fetchCredentials() {
        const response = await fetch('/auth/credentials', {
            method: 'GET',
            credentials: 'include'
        });
        this.credentials = await response.json();
    }
    async deleteCredential(credentialId) {
        const response = await fetch(`/credentials/${credentialId}`, {
            method: 'DELETE',
            credentials: 'include'
        });
        if (response.ok) {
            this.fetchCredentials();
        }
        else {
            console.error('Failed to delete credential');
        }
    }
    render() {
        return html `
      <div>
        <h2>Manage Your WebAuthn Credentials</h2>
        <ul>
          ${this.credentials.map(credential => html `
              <li>
                ${credential.credentialId}
                <button @click=${() => this.deleteCredential(credential.credentialId)}>Delete</button>
              </li>
            `)}
        </ul>
      </div>
    `;
    }
};
CredentialManager.styles = css `
    div {
      margin: 20px;
    }
    button {
      margin: 5px;
    }
  `;
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], CredentialManager.prototype, "credentials", void 0);
CredentialManager = __decorate([
    customElement('credential-manager')
], CredentialManager);
export { CredentialManager };
//# sourceMappingURL=credential-manager.js.map