diff --git a/packages/dgt-components/demo/demo-authenticate.component.ts b/packages/dgt-components/demo/demo-authenticate.component.ts index 2c218b0b..eb8ac3a6 100644 --- a/packages/dgt-components/demo/demo-authenticate.component.ts +++ b/packages/dgt-components/demo/demo-authenticate.component.ts @@ -3,16 +3,19 @@ import { RxLitElement } from 'rx-lit'; import { Theme } from '@digita-ai/dgt-theme'; import { SolidSDKService } from '../lib/services/solid-sdk.service' import { AuthenticateComponent } from '../lib/components/authentication/authenticate.component'; +import { hydrate } from '../lib/util/hydrate'; export class DemoAuthenticateComponent extends RxLitElement { + private solidService = new SolidSDKService('UI Transfer'); onAuthenticated = (event: CustomEvent): void => { }; + onCreateWebId = (event: CustomEvent): void => { alert('This is a demo') }; constructor() { super(); - customElements.define('auth-flow', AuthenticateComponent); + customElements.define('auth-flow', hydrate(AuthenticateComponent)(this.solidService)); } /** @@ -23,7 +26,14 @@ export class DemoAuthenticateComponent extends RxLitElement { render() { return html` - + +

Select an identity provider to log in

+

Enter your WebID

+ `; } @@ -35,7 +45,18 @@ export class DemoAuthenticateComponent extends RxLitElement { return [ unsafeCSS(Theme), - css``, + css` + auth-flow { + --webid-input-padding: var(--gap-small); + } + h1[slot] { + margin: var(--gap-large) var(--gap-normal); + font-size: var(--font-size-header-normal); + font-style: normal; + font-weight: bold; + text-align: center; + } + `, ]; } diff --git a/packages/dgt-components/lib/components/authentication/authenticate.component.ts b/packages/dgt-components/lib/components/authentication/authenticate.component.ts index b2a95e3c..21638e16 100644 --- a/packages/dgt-components/lib/components/authentication/authenticate.component.ts +++ b/packages/dgt-components/lib/components/authentication/authenticate.component.ts @@ -1,15 +1,15 @@ -import { html, internalProperty, TemplateResult, property, PropertyValues, unsafeCSS, CSSResultArray, css } from 'lit-element'; +import { html, internalProperty, TemplateResult, property, unsafeCSS, CSSResultArray, css } from 'lit-element'; import { createMachine, DoneEvent, interpret, Interpreter, State, StateMachine } from 'xstate'; import { RxLitElement } from 'rx-lit'; import { from } from 'rxjs'; import { map } from 'rxjs/operators'; import { Theme } from '@digita-ai/dgt-theme'; -import { SolidSDKService } from '../../services/solid-sdk.service'; import { Issuer } from '../../models/issuer.model'; import { ProviderListComponent } from '../provider/provider-list.component'; import { SeparatorComponent } from '../separator/separator.component'; import { LoadingComponent } from '../loading/loading.component'; import { define } from '../../util/define'; +import { SolidService } from '../../services/solid.service'; import { WebIdComponent } from './webid.component'; import { AuthenticateContext, AuthenticateEvent, authenticateMachine, AuthenticateState, AuthenticateStates, AuthenticateStateSchema, SelectedIssuerEvent, WebIdEnteredEvent } from './authenticate.machine'; @@ -17,10 +17,6 @@ export class AuthenticateComponent extends RxLitElement { private actor: Interpreter; private machine: StateMachine; - private predifinedIssuers: Issuer[] = [ - { description: 'Solid Community', icon: 'data:image/png;base64,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', uri: 'https://solidcommunity.net' }, - { description: 'Inrupt', icon: 'https://inrupt.com/static/inrupt-social_0-372b94bf42bea86a81cc362e0c99d115.jpg', uri: 'https://inrupt.net/' }, - ]; @internalProperty() state?: State; @@ -28,13 +24,22 @@ export class AuthenticateComponent extends RxLitElement { @internalProperty() issuers?: Issuer[]; - @property({ type: Object }) solidService: SolidSDKService; - @property({ type: Boolean }) hideWebId = false; - @property({ type: Boolean }) hideIssuers = false; + @property({ type: Boolean }) hideCreateNewWebId = false; + + @property({ type: Array }) predefinedIssuers: Issuer[] = [ + { description: 'Solid Community', icon: 'data:image/png;base64,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', uri: 'https://solidcommunity.net' }, + { description: 'Inrupt', icon: 'https://inrupt.com/static/inrupt-social_0-372b94bf42bea86a81cc362e0c99d115.jpg', uri: 'https://inrupt.net/' }, + ]; + + @property({ type: String }) textSeparator = 'or'; + @property({ type: String }) textWebIdLabel = 'WebID'; + @property({ type: String }) textWebIdPlaceholder = 'Please enter your WebID'; + @property({ type: String }) textNoWebId = 'No WebID yet?'; + @property({ type: String }) textButton = 'Connect'; - constructor() { + constructor(private solidService: SolidService) { super(); @@ -43,29 +48,17 @@ export class AuthenticateComponent extends RxLitElement { define('separator-component', SeparatorComponent); define('loading-component', LoadingComponent); - } - - updated(changed: PropertyValues): void { - - super.updated(changed); - - if (changed.has('solidService')) { - - if (this.actor) this.actor.stop(); + this.machine = createMachine(authenticateMachine(this.solidService)); - this.machine = createMachine(authenticateMachine(this.solidService)); + // eslint-disable-next-line no-console + this.actor = interpret(this.machine, { devTools: true }).onTransition((state) => console.log(state.value)); - // eslint-disable-next-line no-console - this.actor = interpret(this.machine, { devTools: true }).onTransition((state) => console.log(state.value)); + this.subscribe('state', from(this.actor)); + this.subscribe('issuers', from(this.actor).pipe(map((state) => state.context.issuers))); - this.subscribe('state', from(this.actor)); - this.subscribe('issuers', from(this.actor).pipe(map((state) => state.context.issuers))); + this.actor.onDone((event: DoneEvent) => { this.dispatchEvent(new CustomEvent('authenticated', { detail: event.data.session })); }); - this.actor.onDone((event: DoneEvent) => { this.dispatchEvent(new CustomEvent('authenticated', { detail: event.data.session })); }); - - this.actor.start(); - - } + this.actor.start(); } @@ -76,15 +69,39 @@ export class AuthenticateComponent extends RxLitElement { }; - onButtonCreateWebIDClick = (): void => { this.dispatchEvent(new CustomEvent('create-webid')); }; + onButtonCreateWebIDClick = (): void => { this.dispatchEvent(new CustomEvent('create-webid', { bubbles: true })); }; render(): TemplateResult { return html` ${ this.state?.matches(AuthenticateStates.AWAITING_WEBID) ? html` - ${ !this.hideIssuers ? html`` : html``} - ${ !this.hideWebId && !this.hideIssuers ? html`of` : html`` } - ${ !this.hideWebId ? html`` : html``} + + + + + + + + ${ this.textSeparator } + + + + + + ` : html` ${ this.state?.matches(AuthenticateStates.SELECTING_ISSUER) ? html` ` : html`` } @@ -101,6 +118,12 @@ export class AuthenticateComponent extends RxLitElement { separator-component { margin: var(--gap-large) 0; } + + webid-form { + --input-padding: var(--webid-input-padding); + --border-large: var(--webid-border-large); + --button-height: var(--webid-button-height); + } `, ]; diff --git a/packages/dgt-components/lib/components/authentication/webid.component.ts b/packages/dgt-components/lib/components/authentication/webid.component.ts index 022c8806..b0d727d0 100644 --- a/packages/dgt-components/lib/components/authentication/webid.component.ts +++ b/packages/dgt-components/lib/components/authentication/webid.component.ts @@ -1,15 +1,14 @@ import { html, unsafeCSS, css, TemplateResult, CSSResultArray, property } from 'lit-element'; import { RxLitElement } from 'rx-lit'; import { Theme } from '@digita-ai/dgt-theme'; -import { SolidSDKService } from '../../services/solid-sdk.service'; export class WebIdComponent extends RxLitElement { - @property() textEnterYourWebID = 'Enter your WebID'; - @property() textWebID = 'WebID'; - @property() textWebIDFieldPlaceholder = 'Please enter your WebID ...'; - @property() textNoWebIDYet = 'No WebID yet?'; - @property() textConnect = 'Connect'; - @property({ type: Object }) solidService: SolidSDKService; + @property({ type: String }) textLabel = 'WebID'; + @property({ type: String }) textPlaceholder = 'Please enter your WebID ...'; + @property({ type: String }) textNoWebId = 'No WebID yet?'; + @property({ type: String }) textButton = 'Connect'; + + @property({ type: Boolean }) hideCreateNewWebId = false; constructor() { @@ -29,13 +28,14 @@ export class WebIdComponent extends RxLitElement { render(): TemplateResult { return html` -

${this.textEnterYourWebID}

+
- - - ${this.textNoWebIDYet} - + + + ${this.textNoWebId} +
+ `; } @@ -47,24 +47,26 @@ export class WebIdComponent extends RxLitElement { css` button { width: 100%; - margin: var(--gap-large) 0; + margin: var(--gap-normal) 0 0 0; border-radius: var(--border-large); + height: var(--button-height); } input { margin: var(--gap-small) 0; - padding: var(--gap-normal); + padding: var(--input-padding); } - span { + a { font-size: var(--font-size-small); padding: var(--gap-tiny); text-decoration: underline; color: var(--colors-primary-normal); text-align: right; + cursor: pointer; } - span:hover { + a:hover { color: var(--colors-primary-dark); } 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 78d50d24..b75c47a6 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 @@ -40,7 +40,7 @@ export class ProviderListItemComponent extends RxLitElement { 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) var(--gap-normal); + margin: var(--gap-small) 0; padding: var(--gap-small); height: var(--gap-large); cursor: pointer; 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 6c2ab543..0da89504 100644 --- a/packages/dgt-components/lib/components/provider/provider-list.component.ts +++ b/packages/dgt-components/lib/components/provider/provider-list.component.ts @@ -29,11 +29,13 @@ export class ProviderListComponent extends LitElement { render(): TemplateResult { return html` -

Select an identity provider to log in

+
- ${ this.providers.map((provider) => html` + ${ this.providers.map((provider) => html` - `)}
`; + `)} + + `; } @@ -42,13 +44,6 @@ export class ProviderListComponent extends LitElement { return [ unsafeCSS(Theme), css` - h1 { - margin: var(--gap-large) var(--gap-normal); - font-size: var(--font-size-header-normal); - font-style: normal; - font-weight: bold; - text-align: center; - } `, ]; diff --git a/packages/dgt-components/lib/components/separator/separator.component.spec.ts b/packages/dgt-components/lib/components/separator/separator.component.spec.ts new file mode 100644 index 00000000..14337177 --- /dev/null +++ b/packages/dgt-components/lib/components/separator/separator.component.spec.ts @@ -0,0 +1,28 @@ +import SeparatorComponent from './separator.component'; + +describe('AppComponent', () => { + + let component: SeparatorComponent; + + beforeEach(async () => { + + component = window.document.createElement('separator-component') as SeparatorComponent; + + }); + + afterEach(() => { + + document.getElementsByTagName('html')[0].innerHTML = ''; + + }); + + it('should create', async () => { + + window.document.body.appendChild(component); + await component.updateComplete; + + expect(component).toBeTruthy(); + + }); + +}); diff --git a/packages/dgt-components/package.json b/packages/dgt-components/package.json index 6f20370f..1e60de7c 100644 --- a/packages/dgt-components/package.json +++ b/packages/dgt-components/package.json @@ -90,10 +90,10 @@ ], "coverageThreshold": { "global": { - "branches": 26.94, - "functions": 29.46, - "lines": 29.59, - "statements": 29.69 + "branches": 27.55, + "functions": 30.22, + "lines": 30.16, + "statements": 29.91 } }, "coveragePathIgnorePatterns": [ @@ -105,4 +105,4 @@ "/lib/demo/" ] } -} +} \ No newline at end of file diff --git a/packages/dgt-components/tests/setup.ts b/packages/dgt-components/tests/setup.ts index 944d5dbc..2a63a3fb 100644 --- a/packages/dgt-components/tests/setup.ts +++ b/packages/dgt-components/tests/setup.ts @@ -8,6 +8,7 @@ import { SidebarComponent } from '../lib/components/sidebar/sidebar.component'; import { SidebarItemComponent } from '../lib/components/sidebar/sidebar-item.component'; import { CardComponent } from '../lib/components/cards/card.component'; import { ListItemComponent } from '../lib/components/list-item/list-item.component'; +import SeparatorComponent from '../lib/components/separator/separator.component'; /** * Register tags for components. @@ -21,6 +22,7 @@ customElements.define('nde-sidebar', SidebarComponent); customElements.define('nde-large-card', CardComponent); customElements.define('nde-content-header', ContentHeaderComponent); customElements.define('list-item', ListItemComponent); +customElements.define('separator-component', SeparatorComponent); /** * Enable mocks for fetch. diff --git a/packages/dgt-theme/lib/elements/buttons.css b/packages/dgt-theme/lib/elements/buttons.css index 9cfb1157..1193a3d5 100644 --- a/packages/dgt-theme/lib/elements/buttons.css +++ b/packages/dgt-theme/lib/elements/buttons.css @@ -2,7 +2,6 @@ button, button.primary { background-color: var(--colors-primary-dark); border: 2px solid var(--colors-primary-dark); - text-transform: uppercase; padding: var(--gap-small); color: var(--colors-foreground-inverse); cursor: pointer; diff --git a/packages/dgt-theme/lib/elements/forms.css b/packages/dgt-theme/lib/elements/forms.css index a943456e..0e449a1d 100644 --- a/packages/dgt-theme/lib/elements/forms.css +++ b/packages/dgt-theme/lib/elements/forms.css @@ -32,8 +32,8 @@ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { - -webkit-box-shadow: 0 0 0 30px var(--colors-background-light) inset !important; - box-shadow: 0 0 0 30px var(--colors-background-light) inset !important; + -webkit-box-shadow: 0 0 0 30px var(--colors-foreground-inverse) inset !important; + box-shadow: 0 0 0 30px var(--colors-foreground-inverse) inset !important; -webkit-text-fill-color: var(--colors-foreground-normal) !important; }