diff --git a/src/components/fido-passkey-details-card/fido-passkey-details-card.ts b/src/components/fido-passkey-details-card/fido-passkey-details-card.ts index b9245d0..069ceea 100644 --- a/src/components/fido-passkey-details-card/fido-passkey-details-card.ts +++ b/src/components/fido-passkey-details-card/fido-passkey-details-card.ts @@ -1,8 +1,8 @@ -import {LitElement, html, css, TemplateResult} from 'lit' -import {customElement, property} from 'lit/decorators.js' -import {repeat} from 'lit/directives/repeat.js' -import {sharedStyles} from '../../shared/style' -import {DateTime} from 'luxon'; +import { LitElement, html, css, TemplateResult } from 'lit' +import { customElement, property } from 'lit/decorators.js' +import { repeat } from 'lit/directives/repeat.js' +import { sharedStyles } from '../../shared/style' +import { DateTime } from 'luxon' const componentStyle = css` @@ -85,26 +85,25 @@ const componentStyle = css` ` export interface PasskeyActivity { - lastUsedAt: string - operatingSystem: string + lastUsedAt: string + operatingSystem: string } export interface PasskeyDetails { - createdAt: string - createdOperatingSystem: string - passkeyActivity: Array + createdAt: string + createdOperatingSystem: string + passkeyActivity: PasskeyActivity[] } @customElement('fido-passkey-details-card') class FidoPasskeyDetailsCard extends LitElement { + @property({ type: Object }) passkeyDetails?: PasskeyDetails - @property({type: Object}) passkeyDetails?: PasskeyDetails + static styles = [sharedStyles, componentStyle] - static styles = [sharedStyles, componentStyle] - - render(): TemplateResult { - // console.log(this.passkeyDetails) - return html` + render (): TemplateResult { + // console.log(this.passkeyDetails) + return html`
@@ -133,67 +132,66 @@ class FidoPasskeyDetailsCard extends LitElement {
` - } + } - private getCreatedAtText(): string { - const createdAt = this.passkeyDetails?.createdAt - const os = this.passkeyDetails?.createdOperatingSystem - const formattedDate = this.getFormattedDate(createdAt ?? "") - if (formattedDate) { - return `Saved with ${os ?? "--"} on ${formattedDate}` - } else { - return "" - } + private getCreatedAtText (): string { + const createdAt = this.passkeyDetails?.createdAt + const os = this.passkeyDetails?.createdOperatingSystem + const formattedDate = this.getFormattedDate(createdAt ?? '') + if (formattedDate) { + return `Saved with ${os ?? '--'} on ${formattedDate}` + } else { + return '' } + } - private getLastUsedAtText(lastUsedAt?: string, lastUsedOs?: String): string { - const formattedDate = this.getFormattedDate(lastUsedAt ?? "") - return `${lastUsedOs ?? ""}, ${formattedDate}` - } + private getLastUsedAtText (lastUsedAt?: string, lastUsedOs?: String): string { + const formattedDate = this.getFormattedDate(lastUsedAt ?? '') + return `${lastUsedOs ?? ''}, ${formattedDate}` + } - private getFormattedDate(date: string) { - const parsedDate = DateTime.fromISO(date); - if (parsedDate.isValid) { - return parsedDate.toFormat("MMM d, yyyy, h:mm a ZZZZ") - } else { - return "" - } + private getFormattedDate (date: string) { + const parsedDate = DateTime.fromISO(date) + if (parsedDate.isValid) { + return parsedDate.toFormat('MMM d, yyyy, h:mm a ZZZZ') + } else { + return '' } + } - private getLastUsedActivity(): TemplateResult { - const activityList = this.passkeyDetails?.passkeyActivity - if (Array.isArray(activityList) && activityList.length > 0) { - return html` + private getLastUsedActivity (): TemplateResult { + const activityList = this.passkeyDetails?.passkeyActivity + if (Array.isArray(activityList) && activityList.length > 0) { + return html` ${repeat(this.passkeyDetails?.passkeyActivity ?? [], (activity: PasskeyActivity) => html` ${this.getActivityRow(activity)} `)}` - } else { - return html` + } else { + return html` ${this.getActivityRow({ - lastUsedAt: this.passkeyDetails?.createdAt ?? "", - operatingSystem: this.passkeyDetails?.createdOperatingSystem ?? "" + lastUsedAt: this.passkeyDetails?.createdAt ?? '', + operatingSystem: this.passkeyDetails?.createdOperatingSystem ?? '' })} ` - } } + } + private isMobile (operatingSystem?: string) { + return operatingSystem?.toLowerCase().includes('android') || operatingSystem?.toLowerCase().includes('ios') + } - private isMobile(operatingSystem?: string) { - return operatingSystem?.toLowerCase().includes('android') || operatingSystem?.toLowerCase().includes('ios') - } - - private getActivityRow(activity: PasskeyActivity): TemplateResult { - return html` + private getActivityRow (activity: PasskeyActivity): TemplateResult { + return html`
${this.getIcon(this.isMobile(activity.operatingSystem) ?? false)}

${this.getLastUsedAtText(activity.lastUsedAt, activity.operatingSystem)}

` - } + } - private getIcon(isMobile: boolean): TemplateResult { - if (isMobile) { - return html` + private getIcon (isMobile: boolean): TemplateResult { + if (isMobile) { + return html` ` - } else { - return html` + } else { + return html` ` - } } + } } declare global { - interface HTMLElementTagNameMap { - 'fido-passkey-details-card': FidoPasskeyDetailsCard - } + interface HTMLElementTagNameMap { + 'fido-passkey-details-card': FidoPasskeyDetailsCard + } } diff --git a/src/fido/fido-passkey-details/fido-passkey-details.ts b/src/fido/fido-passkey-details/fido-passkey-details.ts index 13cc01d..6489be2 100644 --- a/src/fido/fido-passkey-details/fido-passkey-details.ts +++ b/src/fido/fido-passkey-details/fido-passkey-details.ts @@ -1,8 +1,8 @@ -import {LitElement, html, css, TemplateResult} from 'lit' -import {repeat} from 'lit/directives/repeat.js' -import {customElement, property} from 'lit/decorators.js' -import {sharedStyles} from '../../shared/style' -import {PasskeyDetails} from "../../components/fido-passkey-details-card/fido-passkey-details-card"; +import { LitElement, html, css, TemplateResult } from 'lit' +import { repeat } from 'lit/directives/repeat.js' +import { customElement, property } from 'lit/decorators.js' +import { sharedStyles } from '../../shared/style' +import { PasskeyDetails } from '../../components/fido-passkey-details-card/fido-passkey-details-card' const componentStyle = css` @@ -57,12 +57,12 @@ const componentStyle = css` @customElement('fido-passkey-details') class FidoPasskeyDetails extends LitElement { - @property({type: Array}) passkeyDetails: PasskeyDetails[] = new Array() + @property({ type: Array }) passkeyDetails: PasskeyDetails[] = new Array() - static styles = [sharedStyles, componentStyle] + static styles = [sharedStyles, componentStyle] - render(): TemplateResult { - return html` + render (): TemplateResult { + return html`

Passkeys

${this.getPasskeys()} @@ -85,20 +85,20 @@ class FidoPasskeyDetails extends LitElement {
` - } + } - private getPasskeys(): TemplateResult { - return html` + private getPasskeys (): TemplateResult { + return html` ${repeat(this.passkeyDetails, (details: PasskeyDetails) => html` `)} ` - } + } } declare global { - interface HTMLElementTagNameMap { - 'fido-passkey-details': FidoPasskeyDetails - } + interface HTMLElementTagNameMap { + 'fido-passkey-details': FidoPasskeyDetails + } }