From 46c4beb96d28f12e523f0a70e7a30f8ebdc8c21a Mon Sep 17 00:00:00 2001 From: Kevin Villalobos Date: Tue, 17 Oct 2023 12:28:28 -0600 Subject: [PATCH 1/5] Refactor Passkey Details Touchpoint - Update Passkey Details Card to handle data as an Object - Parse Dates and OS from each activity - Code Refactor - Update Storybook files --- package-lock.json | 15 ++- package.json | 3 +- .../fido-passkey-details-card.stories.ts | 33 +++-- .../fido-passkey-details-card.ts | 115 ++++++++++++------ .../fido-passkey-details.stories.ts | 41 +++++-- .../fido-passkey-details.ts | 49 +++----- .../components/fido-passkey-details-card.html | 15 ++- 7 files changed, 168 insertions(+), 103 deletions(-) diff --git a/package-lock.json b/package-lock.json index b6ddf24..0ed136b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,16 @@ { "name": "@trusona/touchpoint-sdk", - "version": "0.0.1", + "version": "0.0.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@trusona/touchpoint-sdk", - "version": "0.0.1", + "version": "0.0.2", "license": "MIT", "dependencies": { - "lit": "^2.8.0" + "lit": "^2.8.0", + "moment": "^2.29.4" }, "devDependencies": { "@babel/core": "^7.23.0", @@ -14007,6 +14008,14 @@ "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==", "dev": true }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "engines": { + "node": "*" + } + }, "node_modules/mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", diff --git a/package.json b/package.json index dfcdf17..919392b 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,8 @@ "web-types-lit": "^0.1.0" }, "dependencies": { - "lit": "^2.8.0" + "lit": "^2.8.0", + "moment": "^2.29.4" }, "ts-standard": { "ignore": [ diff --git a/src/components/fido-passkey-details-card/fido-passkey-details-card.stories.ts b/src/components/fido-passkey-details-card/fido-passkey-details-card.stories.ts index 98a37bd..7525467 100644 --- a/src/components/fido-passkey-details-card/fido-passkey-details-card.stories.ts +++ b/src/components/fido-passkey-details-card/fido-passkey-details-card.stories.ts @@ -2,6 +2,7 @@ import {Meta, StoryObj} from '@storybook/web-components' import {html} from 'lit' import './fido-passkey-details-card' +import {PasskeyDetails} from "./fido-passkey-details-card"; export default { title: 'Fido Passkey Details Card', @@ -29,24 +30,30 @@ export default { } } as Meta + +let passkeyDetails: PasskeyDetails = { + createdAt: '2023-10-12T17:12:13.183221Z', + createdOperatingSystem: 'Mac OS', + passkeyActivity: [ + { + lastUsedAt: '2023-10-13T17:12:13.183221Z', + operatingSystem: 'Android 14' + }, + { + lastUsedAt: '2023-10-14T17:12:13.183221Z', + operatingSystem: 'Android 14' + } + ] +} + export const Default: StoryObj = { name: 'Default', - args:{ - savedText: "Saved with iOS 16.2 on April 11, 2023, 12:01am", - lastUsedText:"iOS 16.2, April 11, 2023, 3:42pm", - lastUsedIsMobile: true, - prevLastUsedText:"MacOS 13.0.1, April 23rd, 2023, 4:21pm", - prevLastUsedIsMobile:false + args: { + passkeyDetails: passkeyDetails }, render: (args) => { return html` - + ` } 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 4a9f167..0748e0f 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,6 +1,8 @@ -import { LitElement, html, css, TemplateResult } from 'lit' -import { customElement, property } from 'lit/decorators.js' -import { sharedStyles } from '../../shared/style' +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 moment from "moment"; const componentStyle = css` @@ -82,20 +84,27 @@ const componentStyle = css` ` +export interface PasskeyActivity { + lastUsedAt: string + operatingSystem: string +} + +export interface PasskeyDetails { + createdAt: string + createdOperatingSystem: string + passkeyActivity: Array +} + @customElement('fido-passkey-details-card') class FidoPasskeyDetailsCard extends LitElement { - @property({ type: String }) savedText?: string - @property({ type: String }) lastUsedText: string = '' - @property({ type: String }) lastUsedIsMobile: string = 'false' + @property({type: Object}) passkeyDetails?: PasskeyDetails - @property({ type: String }) prevLastUsedText: string | null = null - @property({ type: String }) prevLastUsedIsMobile: string = 'false' + static styles = [sharedStyles, componentStyle] - static styles = [sharedStyles, componentStyle] - - render (): TemplateResult { - return html` + render(): TemplateResult { + console.log(this.passkeyDetails) + return html`
@@ -106,7 +115,7 @@ class FidoPasskeyDetailsCard extends LitElement { -

${this.savedText}

+

${this.getCreatedAtText()}

@@ -120,25 +129,63 @@ class FidoPasskeyDetailsCard extends LitElement { stroke="#444444" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
- ${this.getRow(this.lastUsedText, this.lastUsedIsMobile === 'true')} - ${this.getOptionalRow()} + ${this.getLastUsedActivity()}
` - } + } - private getRow (lastUsedText: string, lastUsedIsMobile: boolean): TemplateResult { - return html` + private getCreatedAtText(): string { + const createdAt = this.passkeyDetails?.createdAt + const os = this.passkeyDetails?.createdOperatingSystem + const parsedDate = moment(createdAt ?? "") + if (parsedDate.isValid()) { + const formattedDate = parsedDate.format("MMMM D, YYYY, h:mma") + return `Saved with ${os ?? "--"} on ${formattedDate}` + } else { + return "" + } + } + + private getLastUsedAtText(lastUsedAt?: string, lastUsedOs?: String): string { + const parsedDate = moment(lastUsedAt ?? "") + const formattedDate = parsedDate.format("MMMM D, YYYY, h:mma") + return `${lastUsedOs ?? ""}, ${formattedDate}` + } + + private getLastUsedActivity(): TemplateResult { + if (this.passkeyDetails?.passkeyActivity === null || this.passkeyDetails?.passkeyActivity === undefined || this.passkeyDetails?.passkeyActivity.length == 0) { + return html` + ${this.getActivityRow({ + lastUsedAt: this.passkeyDetails?.createdAt ?? "", + operatingSystem: this.passkeyDetails?.createdOperatingSystem ?? "" + })} + ` + } else { + return html` + ${repeat(this.passkeyDetails?.passkeyActivity ?? [], (activity: PasskeyActivity) => html` + ${this.getActivityRow(activity)} + `)}` + } + } + + + private isMobile(operatingSystem?: string) { + return operatingSystem?.toLowerCase().includes('android') || operatingSystem?.toLowerCase().includes('ios') + } + + private getActivityRow(activity: PasskeyActivity): TemplateResult { + return html`
- ${this.getIcon(lastUsedIsMobile)} -

${lastUsedText}

+ ${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` ` + } } - } - - private getOptionalRow (): TemplateResult { - if (this.prevLastUsedText && this.prevLastUsedText !== '') { - return this.getRow(this.prevLastUsedText, this.prevLastUsedIsMobile === 'true') - } 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.stories.ts b/src/fido/fido-passkey-details/fido-passkey-details.stories.ts index b619495..71730f0 100644 --- a/src/fido/fido-passkey-details/fido-passkey-details.stories.ts +++ b/src/fido/fido-passkey-details/fido-passkey-details.stories.ts @@ -27,25 +27,42 @@ export default { } } as Meta -let passkeyDetails : PasskeyDetails[] = [ +let passkeyDetails: PasskeyDetails[] = [ { - savedText: "Saved with iOS 16.2 on April 11, 2023, 12:01am", - lastUsedText:"iOS 16.2, April 11, 2023, 3:42pm", - lastUsedIsMobile: true, - prevLastUsedText:"MacOS 13.0.1, April 23rd, 2023, 4:21pm", - prevLastUsedIsMobile:false + createdAt: '2023-10-12T17:12:13.183221Z', + createdOperatingSystem: 'Mac OS', + passkeyActivity: [ + { + lastUsedAt: '2023-10-13T17:12:13.183221Z', + operatingSystem: 'Android 14' + }, + { + lastUsedAt: '2023-10-14T17:12:13.183221Z', + operatingSystem: 'Android 14' + } + ] + }, { + createdAt: '2023-10-10T17:12:13.183221Z', + createdOperatingSystem: 'Android 13' }, { - savedText: "Saved with Android 13 on April 11, 2023, 12:01am", - lastUsedText:"Android 13, April 11th, 2023, 3:42pm", - lastUsedIsMobile: true - }, + passkeyActivity: [ + { + lastUsedAt: '2023-10-03T17:10:13.183221Z', + operatingSystem: 'Android 10' + }, + { + lastUsedAt: '2023-10-01T17:14:13.183221Z', + operatingSystem: 'Android 10' + } + ] + } ] export const Default: StoryObj = { name: 'Default', - args:{ - passkeyDetails : passkeyDetails + args: { + passkeyDetails: passkeyDetails }, render: (args) => { return html` diff --git a/src/fido/fido-passkey-details/fido-passkey-details.ts b/src/fido/fido-passkey-details/fido-passkey-details.ts index f6d39e6..13cc01d 100644 --- a/src/fido/fido-passkey-details/fido-passkey-details.ts +++ b/src/fido/fido-passkey-details/fido-passkey-details.ts @@ -1,7 +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 {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` @@ -54,22 +55,14 @@ const componentStyle = css` ` -export default interface PasskeyDetails { - savedText: string - lastUsedText: string - lastUsedIsMobile: boolean - prevLastUsedText?: string | null - prevLastUsedIsMobile?: boolean | null -} - @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()} @@ -92,26 +85,20 @@ class FidoPasskeyDetails extends LitElement {
` - } + } - private getPasskeys (): TemplateResult { - return html` - ${repeat(this.passkeyDetails, (passkeyDetail: PasskeyDetails) => 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 + } } diff --git a/testpages/components/fido-passkey-details-card.html b/testpages/components/fido-passkey-details-card.html index 3ae1691..9411773 100644 --- a/testpages/components/fido-passkey-details-card.html +++ b/testpages/components/fido-passkey-details-card.html @@ -18,11 +18,16 @@ From b02a4792f2ba9426c15d1f9e8601c307a318b638 Mon Sep 17 00:00:00 2001 From: Kevin Villalobos Date: Tue, 17 Oct 2023 12:45:29 -0600 Subject: [PATCH 2/5] Refactor Passkey Details Touchpoint - Update Demo Pages --- .../components/fido-passkey-details-card.html | 36 ++++++++++++------- testpages/fido/fido-passkey-details.html | 33 ++++++++++++----- 2 files changed, 48 insertions(+), 21 deletions(-) diff --git a/testpages/components/fido-passkey-details-card.html b/testpages/components/fido-passkey-details-card.html index 9411773..43eefdf 100644 --- a/testpages/components/fido-passkey-details-card.html +++ b/testpages/components/fido-passkey-details-card.html @@ -7,6 +7,23 @@ + + @@ -17,19 +34,12 @@ - - + + + diff --git a/testpages/fido/fido-passkey-details.html b/testpages/fido/fido-passkey-details.html index 2358cd0..afef5d9 100644 --- a/testpages/fido/fido-passkey-details.html +++ b/testpages/fido/fido-passkey-details.html @@ -9,16 +9,33 @@