From 2b02e79ff664f13e314e70815448e4cb18a6548c Mon Sep 17 00:00:00 2001 From: Stijn Taelemans Date: Fri, 15 Oct 2021 15:19:26 +0200 Subject: [PATCH] chore: add parts to authenticate component (#85) * chore: add parts to authenticate component * chore: update package.json * chore: apply suggestions from code review Co-authored-by: Wouter Termont --- .../authentication/authenticate.component.ts | 12 ++--- .../authentication/webid.component.ts | 12 ++--- .../provider/provider-list-item.component.ts | 18 +++---- .../provider/provider-list.component.ts | 2 +- .../separator/separator.component.ts | 4 +- packages/dgt-components/package-lock.json | 52 ++++++++++--------- packages/dgt-components/package.json | 2 +- 7 files changed, 48 insertions(+), 54 deletions(-) diff --git a/packages/dgt-components/lib/components/authentication/authenticate.component.ts b/packages/dgt-components/lib/components/authentication/authenticate.component.ts index b42a3e82..49601b31 100644 --- a/packages/dgt-components/lib/components/authentication/authenticate.component.ts +++ b/packages/dgt-components/lib/components/authentication/authenticate.component.ts @@ -77,6 +77,7 @@ export class AuthenticateComponent extends RxLitElement { ${ this.state?.matches(AuthenticateStates.AWAITING_WEBID) ? html` - + ${ this.textSeparator }
- - - ${this.textNoWebId} - + + + ${this.textNoWebId} +
`; @@ -54,7 +54,7 @@ export class WebIdComponent extends RxLitElement { input { margin: var(--gap-small) 0; - padding: var(--input-padding); + padding: var(--gap-normal); } a { @@ -62,7 +62,7 @@ export class WebIdComponent extends RxLitElement { padding: var(--gap-tiny); text-decoration: underline; color: var(--colors-primary-normal); - text-align: right; + align-self: flex-end; cursor: pointer; } diff --git a/packages/dgt-components/lib/components/provider/provider-list-item.component.ts b/packages/dgt-components/lib/components/provider/provider-list-item.component.ts index b75c47a6..8a821a65 100644 --- a/packages/dgt-components/lib/components/provider/provider-list-item.component.ts +++ b/packages/dgt-components/lib/components/provider/provider-list-item.component.ts @@ -4,14 +4,12 @@ import { Theme } from '@digita-ai/dgt-theme'; export class ProviderListItemComponent extends RxLitElement { - @property({ type: String }) - public icon: string; - @property({ type: String }) - public description: string; + @property({ type: String }) icon: string; + @property({ type: String }) description: string; - @internalProperty() - buttonEnabled = true; - onButtonClick = (): void => { + @internalProperty() buttonEnabled = true; + + onclick = (): void => { this.buttonEnabled = false; this.dispatchEvent(new Event('button-clicked')); @@ -20,12 +18,10 @@ export class ProviderListItemComponent extends RxLitElement { render(): TemplateResult { return html` -

${ this.description }

-
`; } @@ -34,12 +30,10 @@ export class ProviderListItemComponent extends RxLitElement { return [ unsafeCSS(Theme), css` - .card-container { + :host { display: flex; align-items: center; background: var(--colors-background-light); - box-shadow: 0px 2px 4px rgba(26, 32, 44, 0.1); - border-radius: var(--border-large); margin: var(--gap-small) 0; padding: var(--gap-small); height: var(--gap-large); diff --git a/packages/dgt-components/lib/components/provider/provider-list.component.ts b/packages/dgt-components/lib/components/provider/provider-list.component.ts index 0da89504..b77c5f57 100644 --- a/packages/dgt-components/lib/components/provider/provider-list.component.ts +++ b/packages/dgt-components/lib/components/provider/provider-list.component.ts @@ -32,7 +32,7 @@ export class ProviderListComponent extends LitElement {
${ this.providers.map((provider) => html` - + `)}
`; diff --git a/packages/dgt-components/lib/components/separator/separator.component.ts b/packages/dgt-components/lib/components/separator/separator.component.ts index 9918370d..4815314d 100644 --- a/packages/dgt-components/lib/components/separator/separator.component.ts +++ b/packages/dgt-components/lib/components/separator/separator.component.ts @@ -30,11 +30,11 @@ export class SeparatorComponent extends LitElement { } .separator:not(:empty)::before { - margin-right: .25em; + margin-right: var(--gap-small); } .separator:not(:empty)::after { - margin-left: .25em; + margin-left: var(--gap-small); } `, ]; diff --git a/packages/dgt-components/package-lock.json b/packages/dgt-components/package-lock.json index c253081d..df64f4c8 100644 --- a/packages/dgt-components/package-lock.json +++ b/packages/dgt-components/package-lock.json @@ -520,9 +520,9 @@ } }, "@digita-ai/inrupt-solid-client": { - "version": "0.7.1", - "resolved": "https://npm.pkg.github.com/download/@digita-ai/inrupt-solid-client/0.7.1/d39fd2d03c7b4071fb4f07398660e71192507bcea6a3a09f21ad8da8aeab0d73", - "integrity": "sha512-BEtr6Ho11Ufbum3n7543wNoHUXHACnh0dssPFwFdzqOyUXavEap8wvIHKMKEmoS5MAqHJ5nSuHDL00MpYPtZ/w==", + "version": "0.7.2", + "resolved": "https://npm.pkg.github.com/download/@digita-ai/inrupt-solid-client/0.7.2/ee6f893e9a3391be84cbf25b6845fbf7646a39b2f931880582cb96dcd2b5a62e", + "integrity": "sha512-r1oqKmXSIcTJB7MscP7SfFmFBR+p2Hovws7EsHjJlgfNhFEx2HBGUvZMYsLFb/tbfqBbJm7qkUJtUohN3Kw1Tg==", "requires": { "@inrupt/solid-client": "1.6.1", "@inrupt/solid-client-authn-browser": "1.8.0", @@ -530,11 +530,11 @@ } }, "@digita-ai/inrupt-solid-service": { - "version": "0.7.1", - "resolved": "https://npm.pkg.github.com/download/@digita-ai/inrupt-solid-service/0.7.1/da4300060457d1c00a78cc992034aff28a54a77286471b6ef7d61d78925e7940", - "integrity": "sha512-qkwHpyfqcTtw0sL4JhKkfpTrW3tmxsmzyf+76Bm+KYEJyXGCh8tnWr6mdUzY0ISB7BFhWwJM4lZPwVzsQAAH7A==", + "version": "0.7.2", + "resolved": "https://npm.pkg.github.com/download/@digita-ai/inrupt-solid-service/0.7.2/e0dbafbf2ab1f8d93d1d13010805163047b3cf7bc269e28551302e6c12a2d234", + "integrity": "sha512-1BWFtn4HqpnMDiQu5+1RL+BFcgDbPKg/ZEqXWl3tjILWRrMFd7Z5VQTfXZv+7ZOFZ2HAHSj9s4pPXHjuvnKxaQ==", "requires": { - "@digita-ai/inrupt-solid-client": "0.7.1", + "@digita-ai/inrupt-solid-client": "0.7.2", "crypto-js": "^4.1.1", "jest-environment-jsdom": "^27.2.0", "jose": "3.14.3", @@ -731,11 +731,6 @@ "picomatch": "^2.2.3" } }, - "jose": { - "version": "3.14.3", - "resolved": "https://registry.npmjs.org/jose/-/jose-3.14.3.tgz", - "integrity": "sha512-j1vO5oWqa6LmdpiZvhkM9NYxN3EuTrmzVIqSGWtJVP6BOByujZdefZZjSFGzxmbf4GLYWaXLZMKTyVPbm00S2Q==" - }, "n3": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/n3/-/n3-1.11.1.tgz", @@ -930,6 +925,16 @@ "tsyringe": "^4.4.0", "util": "^0.12.3", "uuid": "^8.3.1" + }, + "dependencies": { + "jose": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/jose/-/jose-2.0.5.tgz", + "integrity": "sha512-BAiDNeDKTMgk4tvD0BbxJ8xHEHBZgpeRZ1zGPPsitSyMgjoMWiLGYAE7H7NpP5h0lPppQajQs871E8NHUrzVPA==", + "requires": { + "@panva/asn1.js": "^1.0.0" + } + } } }, "@inrupt/solid-client-authn-core": { @@ -1194,11 +1199,11 @@ "integrity": "sha512-UdkG3mLEqXgnlKsWanWcgb6dOjUzJ+XC5f+aWw30qrtjxeNUSfKX1cd5FBzOaXQumoe9nIqeZUvrRJS03HCCtw==" }, "@rdfjs/data-model": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/@rdfjs/data-model/-/data-model-1.3.3.tgz", - "integrity": "sha512-oo9U3nEowTxxML7CZybujL3e/bty4aXHDSWanWXQxfnJQYKU6p5SCgkjeRbuVfQ9lAVfdvz68Qq5D4LtGWuKug==", + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/@rdfjs/data-model/-/data-model-1.3.4.tgz", + "integrity": "sha512-iKzNcKvJotgbFDdti7GTQDCYmL7GsGldkYStiP0K8EYtN7deJu5t7U11rKTz+nR7RtesUggT+lriZ7BakFv8QQ==", "requires": { - "@types/rdf-js": "*" + "@rdfjs/types": ">=1.0.1" } }, "@rdfjs/dataset": { @@ -2257,9 +2262,9 @@ "dev": true }, "core-js": { - "version": "3.18.2", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.18.2.tgz", - "integrity": "sha512-zNhPOUoSgoizoSQFdX1MeZO16ORRb9FFQLts8gSYbZU5FcgXhp24iMWMxnOQo5uIaIG7/6FA/IqJPwev1o9ZXQ==" + "version": "3.18.3", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.18.3.tgz", + "integrity": "sha512-tReEhtMReZaPFVw7dajMx0vlsz3oOb8ajgPoHVYGxr8ErnZ6PcYEvvmjGmXlfpnxpkYSdOQttjB+MvVbCGfvLw==" }, "core-js-pure": { "version": "3.13.0", @@ -4732,12 +4737,9 @@ } }, "jose": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/jose/-/jose-2.0.5.tgz", - "integrity": "sha512-BAiDNeDKTMgk4tvD0BbxJ8xHEHBZgpeRZ1zGPPsitSyMgjoMWiLGYAE7H7NpP5h0lPppQajQs871E8NHUrzVPA==", - "requires": { - "@panva/asn1.js": "^1.0.0" - } + "version": "3.14.3", + "resolved": "https://registry.npmjs.org/jose/-/jose-3.14.3.tgz", + "integrity": "sha512-j1vO5oWqa6LmdpiZvhkM9NYxN3EuTrmzVIqSGWtJVP6BOByujZdefZZjSFGzxmbf4GLYWaXLZMKTyVPbm00S2Q==" }, "js-tokens": { "version": "4.0.0", diff --git a/packages/dgt-components/package.json b/packages/dgt-components/package.json index 9d364e38..c29fe02c 100644 --- a/packages/dgt-components/package.json +++ b/packages/dgt-components/package.json @@ -31,7 +31,7 @@ "@appnest/lit-translate": "^1.1.18", "@digita-ai/dgt-theme": "0.6.8", "@digita-ai/dgt-utils": "0.6.8", - "@digita-ai/inrupt-solid-service": "^0.7.1", + "@digita-ai/inrupt-solid-service": "^0.7.2", "@digita-ai/semcom-core": "0.4.1", "@digita-ai/semcom-sdk": "0.4.1", "buffer": "6.0.3",