Merge pull request #33 from pod-os/josephguillaume-suggested-issuers

login: suggested issuers
pod-os · Mar 3, 2024 · fe7524c · fe7524c
2 parents 4ffc440 + a952210
commit fe7524c
Show file tree

Hide file tree

Showing 26 changed files with 1,231 additions and 732 deletions.
diff --git a/apps/tests/actions/signIn.ts b/apps/tests/actions/signIn.ts
@@ -12,12 +12,13 @@ export async function signIn(
   idp: string = "http://localhost:4000",
 ) {
   const originalLocation = page.url();
-  page.on("dialog", (dialog) => {
-    dialog.accept(idp);
-  });
   const loginButton = page.locator("pos-login").getByRole("button");
   await loginButton.click();
 
+  const idpUrl = page.getByLabel("Please enter your Identity Provider");
+  await idpUrl.fill("http://localhost:4000");
+  await idpUrl.press("Enter");
+
   await expect(page).toHaveURL(
     "http://localhost:4000/.account/login/password/",
   );

diff --git a/apps/tests/text-search.spec.ts b/apps/tests/text-search.spec.ts
@@ -10,7 +10,7 @@ test("finds a thing based on the label index", async ({ page }) => {
   await signIn(page, alice);
 
   // when searching for a text
-  const navigationBar = page.getByPlaceholder("Search");
+  const navigationBar = page.getByPlaceholder("Search or enter URI");
   await navigationBar.fill("ometh");
 
   // and choosing the first result

diff --git a/contacts/package.json b/contacts/package.json
@@ -27,14 +27,14 @@
     "@pod-os/core": "^0.11.1",
     "@pod-os/elements": "^0.15.1",
     "@solid-data-modules/contacts-rdflib": "^0.4.0",
-    "@stencil/core": "^4.12.2",
+    "@stencil/core": "^4.12.4",
     "pollen-css": "^4.6.2"
   },
   "devDependencies": {
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
-    "@types/jest": "^29.5.6",
-    "@types/node": "^16.18.11",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^16.18.86",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-when": "^3.6.0",

diff --git a/core/package.json b/core/package.json
@@ -24,18 +24,18 @@
   "author": "Angelo Veltens",
   "license": "MIT",
   "devDependencies": {
-    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-env": "^7.24.0",
     "@babel/preset-typescript": "^7.23.3",
-    "@types/jest": "^29.5.11",
+    "@types/jest": "^29.5.12",
     "@types/jest-when": "^3.5.5",
     "@types/sparqljs": "^3.1.10",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
-    "esbuild": "^0.19.11",
-    "eslint": "^8.56.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "esbuild": "^0.19.12",
+    "eslint": "^8.57.0",
     "jest": "^29.7.0",
     "jest-when": "^3.6.0",
-    "prettier": "^3.2.1",
+    "prettier": "^3.2.5",
     "rdf-namespaces": "^1.12.0",
     "rimraf": "^5.0.5",
     "sparqljs": "^3.7.1",

diff --git a/dev-solid-server/package.json b/dev-solid-server/package.json
@@ -9,7 +9,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@solid/community-server": "^7.0.3"
+    "@solid/community-server": "^7.0.4"
   },
   "repository": {
     "type": "git",

diff --git a/docs/elements/apps/pos-app-browser/readme.md b/docs/elements/apps/pos-app-browser/readme.md
@@ -36,7 +36,8 @@ graph TD;
   pos-login --> pos-resource
   pos-login --> pos-picture
   pos-login --> pos-label
-  pos-login --> ion-button
+  pos-login --> pos-dialog
+  pos-login --> pos-login-form
   pos-resource --> ion-progress-bar
   pos-resource --> ion-card
   pos-resource --> ion-card-header
@@ -45,15 +46,14 @@ graph TD;
   pos-picture --> pos-image
   pos-image --> ion-skeleton-text
   pos-image --> ion-icon
-  ion-button --> ion-ripple-effect
+  pos-dialog --> ion-icon
   pos-router --> pos-add-new-thing
   pos-router --> pos-navigation-bar
   pos-router --> pos-resource
   pos-router --> pos-type-router
   pos-add-new-thing --> ion-icon
   pos-add-new-thing --> pos-dialog
   pos-add-new-thing --> pos-new-thing-form
-  pos-dialog --> ion-icon
   pos-new-thing-form --> pos-select-term
   pos-navigation-bar --> ion-searchbar
   pos-navigation-bar --> pos-rich-link

diff --git a/docs/elements/components/pos-dialog/readme.md b/docs/elements/components/pos-dialog/readme.md
@@ -37,6 +37,7 @@ Type: `Promise<void>`
 ### Used by
 
  - [pos-add-new-thing](../pos-add-new-thing)
+ - [pos-login](../pos-login)
 
 ### Depends on
 
@@ -47,6 +48,7 @@ Type: `Promise<void>`
 graph TD;
   pos-dialog --> ion-icon
   pos-add-new-thing --> pos-dialog
+  pos-login --> pos-dialog
   style pos-dialog fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/docs/elements/components/pos-login-form/readme.md b/docs/elements/components/pos-login-form/readme.md
@@ -0,0 +1,30 @@
+# pos-login-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Events
+
+| Event                     | Description                                 | Type               |
+| ------------------------- | ------------------------------------------- | ------------------ |
+| `pod-os:idp-url-selected` | Emits the selected IDP URL to use for login | `CustomEvent<any>` |
+
+
+## Dependencies
+
+### Used by
+
+ - [pos-login](../pos-login)
+
+### Graph
+```mermaid
+graph TD;
+  pos-login --> pos-login-form
+  style pos-login-form fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/docs/elements/components/pos-login/readme.md b/docs/elements/components/pos-login/readme.md
@@ -23,15 +23,17 @@
 - [pos-resource](../pos-resource)
 - [pos-picture](../pos-picture)
 - [pos-label](../pos-label)
-- ion-button
+- [pos-dialog](../pos-dialog)
+- [pos-login-form](../pos-login-form)
 
 ### Graph
 ```mermaid
 graph TD;
   pos-login --> pos-resource
   pos-login --> pos-picture
   pos-login --> pos-label
-  pos-login --> ion-button
+  pos-login --> pos-dialog
+  pos-login --> pos-login-form
   pos-resource --> ion-progress-bar
   pos-resource --> ion-card
   pos-resource --> ion-card-header
@@ -40,7 +42,7 @@ graph TD;
   pos-picture --> pos-image
   pos-image --> ion-skeleton-text
   pos-image --> ion-icon
-  ion-button --> ion-ripple-effect
+  pos-dialog --> ion-icon
   pos-app-browser --> pos-login
   style pos-login fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/elements/CHANGELOG.md b/elements/CHANGELOG.md
@@ -9,6 +9,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - [pos-dialog](../docs/elements/components/pos-dialog): A dialog component with a common style
+- [pos-login-form](../docs/elements/components/pos-login-form): A form to select a identity provider for logging in
+
+### Changed
+
+- [pos-login](../docs/elements/components/pos-login): Now shows a dedicated login dialog using [pos-login-form](../docs/elements/components/pos-login-form) instead of a browser prompt
 
 ## 0.15.0
 

diff --git a/elements/package.json b/elements/package.json
@@ -21,21 +21,21 @@
     "generate": "stencil generate"
   },
   "dependencies": {
-    "@ionic/core": "^7.6.4",
-    "@pod-os/core": "^0.11.0",
-    "@stencil/core": "^4.9.1",
-    "@stencil/store": "^2.0.12",
+    "@ionic/core": "^7.7.3",
+    "@pod-os/core": "^0.11.1",
+    "@stencil/core": "^4.12.4",
+    "@stencil/store": "^2.0.14",
     "pollen-css": "^4.6.2",
     "stencil-router-v2": "^0.6.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.2.0",
-    "@types/jest": "^29.5.11",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@types/jest": "^29.5.12",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-when": "^3.6.0",
-    "prettier": "^3.2.1"
+    "prettier": "^3.2.5"
   },
   "license": "MIT",
   "repository": {

diff --git a/elements/src/components.d.ts b/elements/src/components.d.ts
@@ -54,6 +54,8 @@ export namespace Components {
     }
     interface PosLogin {
     }
+    interface PosLoginForm {
+    }
     interface PosNavigationBar {
         "uri": string;
     }
@@ -137,6 +139,10 @@ export interface PosLoginCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPosLoginElement;
 }
+export interface PosLoginFormCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPosLoginFormElement;
+}
 export interface PosNavigationBarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPosNavigationBarElement;
@@ -430,6 +436,23 @@ declare global {
         prototype: HTMLPosLoginElement;
         new (): HTMLPosLoginElement;
     };
+    interface HTMLPosLoginFormElementEventMap {
+        "pod-os:idp-url-selected": any;
+    }
+    interface HTMLPosLoginFormElement extends Components.PosLoginForm, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPosLoginFormElementEventMap>(type: K, listener: (this: HTMLPosLoginFormElement, ev: PosLoginFormCustomEvent<HTMLPosLoginFormElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPosLoginFormElementEventMap>(type: K, listener: (this: HTMLPosLoginFormElement, ev: PosLoginFormCustomEvent<HTMLPosLoginFormElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPosLoginFormElement: {
+        prototype: HTMLPosLoginFormElement;
+        new (): HTMLPosLoginFormElement;
+    };
     interface HTMLPosNavigationBarElementEventMap {
         "pod-os:init": any;
         "pod-os:link": any;
@@ -665,6 +688,7 @@ declare global {
         "pos-label": HTMLPosLabelElement;
         "pos-literals": HTMLPosLiteralsElement;
         "pos-login": HTMLPosLoginElement;
+        "pos-login-form": HTMLPosLoginFormElement;
         "pos-navigation-bar": HTMLPosNavigationBarElement;
         "pos-new-thing-form": HTMLPosNewThingFormElement;
         "pos-picture": HTMLPosPictureElement;
@@ -756,6 +780,12 @@ declare namespace LocalJSX {
     interface PosLogin {
         "onPod-os:init"?: (event: PosLoginCustomEvent<any>) => void;
     }
+    interface PosLoginForm {
+        /**
+          * Emits the selected IDP URL to use for login
+         */
+        "onPod-os:idp-url-selected"?: (event: PosLoginFormCustomEvent<any>) => void;
+    }
     interface PosNavigationBar {
         "onPod-os:init"?: (event: PosNavigationBarCustomEvent<any>) => void;
         "onPod-os:link"?: (event: PosNavigationBarCustomEvent<any>) => void;
@@ -836,6 +866,7 @@ declare namespace LocalJSX {
         "pos-label": PosLabel;
         "pos-literals": PosLiterals;
         "pos-login": PosLogin;
+        "pos-login-form": PosLoginForm;
         "pos-navigation-bar": PosNavigationBar;
         "pos-new-thing-form": PosNewThingForm;
         "pos-picture": PosPicture;
@@ -877,6 +908,7 @@ declare module "@stencil/core" {
             "pos-label": LocalJSX.PosLabel & JSXBase.HTMLAttributes<HTMLPosLabelElement>;
             "pos-literals": LocalJSX.PosLiterals & JSXBase.HTMLAttributes<HTMLPosLiteralsElement>;
             "pos-login": LocalJSX.PosLogin & JSXBase.HTMLAttributes<HTMLPosLoginElement>;
+            "pos-login-form": LocalJSX.PosLoginForm & JSXBase.HTMLAttributes<HTMLPosLoginFormElement>;
             "pos-navigation-bar": LocalJSX.PosNavigationBar & JSXBase.HTMLAttributes<HTMLPosNavigationBarElement>;
             "pos-new-thing-form": LocalJSX.PosNewThingForm & JSXBase.HTMLAttributes<HTMLPosNewThingFormElement>;
             "pos-picture": LocalJSX.PosPicture & JSXBase.HTMLAttributes<HTMLPosPictureElement>;

diff --git a/elements/src/components/pos-add-new-thing/pos-add-new-thing.css b/elements/src/components/pos-add-new-thing/pos-add-new-thing.css
@@ -23,3 +23,7 @@ button#new:hover, button#new:focus {
   box-shadow: var(--shadow-sm);
 }
 
+pos-new-thing-form {
+  margin: var(--scale-3);
+}
+
diff --git a/elements/src/components/pos-dialog/pos-dialog.css b/elements/src/components/pos-dialog/pos-dialog.css
@@ -28,7 +28,7 @@ dialog header {
 
 dialog > :last-child {
   /* This is the content slot*/
-  margin: var(--scale-3);
+  margin-top: var(--scale-3);
 }
 
 button#close {

diff --git a/elements/src/components/pos-login-form/pos-login-form.css b/elements/src/components/pos-login-form/pos-login-form.css
@@ -0,0 +1,43 @@
+:host {
+  display: block;
+  margin: 0
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-4);
+}
+
+input {
+  outline: var(--pos-input-outline);
+  padding: var(--scale-000);
+  border: none;
+  border-radius: var(--radius-xs);
+  width: var(--size-full);
+  box-sizing: border-box;
+}
+
+input:focus-within {
+  outline: var(--pos-input-focus-outline);
+}
+
+input#login {
+  outline: none;
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  color: var(--pos-primary-text-color);
+  background-color: var(--pos-primary-color);
+}
+
+input#login:disabled {
+  cursor: default;
+  color: var(--pos-disabled-text-color);
+  background-color: var(--pos-disabled-color);
+  box-shadow: none
+}
+
+input#login:hover:not(:disabled), input#login:focus {
+  filter: brightness(110%);
+  box-shadow: var(--shadow-md);
+}