-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: detect user sign in and prepare listing address books
- Loading branch information
Showing
9 changed files
with
235 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
contacts/src/components/list-address-books/list-address-books.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { Component, h, Prop } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'pos-contacts-list-address-books', | ||
| }) | ||
| export class ListAddressBooks { | ||
| @Prop() | ||
| webId!: string; | ||
| render() { | ||
| return <div>TODO: list address books of {this.webId}</div>; | ||
| } | ||
| } |
33 changes: 33 additions & 0 deletions
33
contacts/src/components/open-address-book/open-address-book.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| #container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--size-5); | ||
| align-items: flex-start; | ||
| } | ||
|
|
||
| #sign-in { | ||
| display: flex; | ||
| gap: var(--size-1); | ||
| align-items: center; | ||
| color: var(--color-grey-800); | ||
| font-weight: var(--weight-light); | ||
| } | ||
|
|
||
| button.open { | ||
| white-space: nowrap; | ||
| font-size: var(--scale-1); | ||
| border-radius: var(--radius-xs); | ||
| padding: var(--size-2); | ||
| background-color: white; | ||
| color: var(--pos-primary-color); | ||
| border: 1px solid var(--color-blue-700); | ||
| display: flex; | ||
| align-items: center; | ||
| gap: var(--size-2); | ||
| } | ||
|
|
||
|
|
||
| button.open:hover { | ||
| background-color: var(--color-grey-50); | ||
| filter: brightness(90%); | ||
| } |
48 changes: 48 additions & 0 deletions
48
contacts/src/components/open-address-book/open-address-book.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { SessionInfo } from '@pod-os/core'; | ||
| import { Component, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'pos-contacts-open-address-book', | ||
| shadow: true, | ||
| styleUrl: 'open-address-book.css', | ||
| }) | ||
| export class OpenAddressBook { | ||
| @Event({ eventName: 'pod-os-contacts:open-address-book' }) openAddressBook: EventEmitter<string>; | ||
|
|
||
| @State() | ||
| sessionInfo: SessionInfo | undefined; | ||
|
|
||
| @Listen('pod-os:session-changed', { target: 'window' }) | ||
| sessionChanged(event: CustomEvent<SessionInfo>) { | ||
| this.sessionInfo = event.detail; | ||
| } | ||
|
|
||
| @Prop() | ||
| webId: string | undefined; | ||
|
|
||
| promptAndOpen() { | ||
| const uri = prompt('Please enter URI of an address book', 'http://localhost:3000/alice/public-contacts/index.ttl#this'); | ||
| if (uri) { | ||
| this.openAddressBook.emit(uri); | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div id="container"> | ||
| {this.sessionInfo?.isLoggedIn ? ( | ||
| <pos-contacts-list-address-books webId={this.sessionInfo.webId} /> | ||
| ) : ( | ||
| <div id="sign-in"> | ||
| <pos-login></pos-login> | ||
| Sign in to list your address books. | ||
| </div> | ||
| )} | ||
| <button title="open any other address book by it's URI" class="open" onClick={() => this.promptAndOpen()}> | ||
| <ion-icon name="folder-open-outline"></ion-icon> | ||
| open other | ||
| </button> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
58 changes: 58 additions & 0 deletions
58
contacts/src/components/open-address-book/test/open-address-book.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { SessionInfo } from '@pod-os/core'; | ||
| import { h } from '@stencil/core'; | ||
| import { newSpecPage } from '@stencil/core/testing'; | ||
| import { fireEvent } from '@testing-library/dom'; | ||
| import { OpenAddressBook } from '../open-address-book'; | ||
|
|
||
| describe('open address book', () => { | ||
| let page; | ||
| beforeEach(async () => { | ||
| page = await newSpecPage({ | ||
| components: [OpenAddressBook], | ||
| template: () => <pos-contacts-open-address-book />, | ||
| supportsShadowDom: false, | ||
| }); | ||
| }); | ||
|
|
||
| it('renders', () => { | ||
| expect(page.root).toEqualHtml(` | ||
| <pos-contacts-open-address-book> | ||
| <div id="container"> | ||
| <div id="sign-in"> | ||
| <pos-login></pos-login> | ||
| Sign in to list your address books. | ||
| </div> | ||
| <button class="open" title="open any other address book by it's URI"> | ||
| <ion-icon name="folder-open-outline"></ion-icon> | ||
| open other | ||
| </button> | ||
| </div> | ||
| </pos-contacts-open-address-book>`); | ||
| }); | ||
|
|
||
| it('lists address books after login', async () => { | ||
| const sessionInfo: SessionInfo = { | ||
| isLoggedIn: true, | ||
| webId: 'https://alice.test/profile/card#me', | ||
| sessionId: 'test', | ||
| }; | ||
| fireEvent( | ||
| window, | ||
| new CustomEvent('pod-os:session-changed', { | ||
| detail: sessionInfo, | ||
| }), | ||
| ); | ||
| await page.waitForChanges(); | ||
| expect(page.root).toEqualHtml(` | ||
| <pos-contacts-open-address-book> | ||
| <div id="container"> | ||
| <pos-contacts-list-address-books webid="https://alice.test/profile/card#me"></pos-contacts-list-address-books> | ||
| <button class="open" title="open any other address book by it's URI"> | ||
| <ion-icon name="folder-open-outline"></ion-icon> | ||
| open other | ||
| </button> | ||
| </div> | ||
| </pos-contacts-open-address-book> | ||
| `); | ||
| }); | ||
| }); |
29 changes: 29 additions & 0 deletions
29
contacts/src/components/welcome-page/test/welcome-page.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { h } from '@stencil/core'; | ||
| import { newSpecPage } from '@stencil/core/testing'; | ||
| import { WelcomePage } from '../welcome-page'; | ||
|
|
||
| describe('welcome page', () => { | ||
| let page; | ||
| beforeEach(async () => { | ||
| page = await newSpecPage({ | ||
| components: [WelcomePage], | ||
| template: () => <pos-contacts-welcome-page />, | ||
| supportsShadowDom: false, | ||
| }); | ||
| }); | ||
|
|
||
| it('allows to sign in and open address book before login', () => { | ||
| expect(page.root).toEqualHtml(` | ||
| <pos-contacts-welcome-page> | ||
| <header> | ||
| <h1> | ||
| PodOS contacts | ||
| </h1> | ||
| <pos-login></pos-login> | ||
| </header> | ||
| <main> | ||
| <pos-contacts-open-address-book></pos-contacts-open-address-book> | ||
| </main> | ||
| </pos-contacts-welcome-page>`); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.