From d38c71f83cdbb047ad92fd5c8daf6fb3f4dd1b86 Mon Sep 17 00:00:00 2001 From: Christoph Reiter <reiter.christoph@gmail.com> Date: Wed, 24 Jun 2020 15:51:50 +0200 Subject: [PATCH] Rename web components to vpu-auth-keycloak and vpu-login-button This should make it more clear what the components are used for --- packages/auth/README.md | 32 ++++++++++++------- .../auth/src/{auth.js => auth-keycloak.js} | 2 +- packages/auth/src/index.js | 6 ++-- .../src/{auth-button.js => login-button.js} | 2 +- packages/auth/src/vpu-auth-demo.js | 12 +++---- packages/auth/src/vpu-auth.js | 8 ++--- packages/auth/test/unit.js | 14 ++++---- 7 files changed, 43 insertions(+), 33 deletions(-) rename packages/auth/src/{auth.js => auth-keycloak.js} (99%) rename packages/auth/src/{auth-button.js => login-button.js} (98%) diff --git a/packages/auth/README.md b/packages/auth/README.md index 8449e263..cf45241f 100644 --- a/packages/auth/README.md +++ b/packages/auth/README.md @@ -1,29 +1,31 @@ -# Auth Web Component +# Auth Web Components [GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/Auth) -## Usage +## Keycloak Component + +### Usage ```html -<vpu-auth></vpu-auth> +<vpu-auth-keycloak></vpu-auth-keycloak> ``` -## Attributes +### Attributes - `lang` (optional, default: `de`): set to `de` or `en` for German or English - - example `<vpu-auth lang="de" </vpu-auth>` + - example `<vpu-auth-keycloak lang="de" </vpu-auth-keycloak>` - `load-person` (optional, default: off): if enabled the logged in user will also be loaded as `Person` in the `window.VPUPerson` variable - - example `<vpu-auth load-person></vpu-auth>` + - example `<vpu-auth-keycloak load-person></vpu-auth-keycloak>` - `force-login` (optional, default: off): if enabled a login will be forced, there never will be a login button - - example `<vpu-auth force-login></vpu-auth>` + - example `<vpu-auth-keycloak force-login></vpu-auth-keycloak>` - `try-login` (optional, default: off): if enabled the a login will happen if the user is already logged in and finishing the login process would not result in a page location change (reload/redirect). - - example `<vpu-auth try-login></vpu-auth>` + - example `<vpu-auth-keycloak try-login></vpu-auth-keycloak>` - `keycloak-config`: An object which can contain the following keys: url, realm, clientId, silentCheckSsoRedirectUri - - example `<vpu-auth keycloak-config='{"url": "https://auth.tugraz.at/auth", "realm": "tugraz", "clientId": "some-id", "silentCheckSsoRedirectUri": "", "scope": ""}'></vpu-auth>` + - example `<vpu-auth-keycloak keycloak-config='{"url": "https://auth.tugraz.at/auth", "realm": "tugraz", "clientId": "some-id", "silentCheckSsoRedirectUri": "", "scope": ""}'></vpu-auth-keycloak>` -## Keycloak Config +### Keycloak Config - `url`: The base URL of the Keycloak server - `realm`: The Keycloak realm @@ -31,12 +33,20 @@ - `silentCheckSsoRedirectUri`: URI or path to a separate page for checking the login session in an iframe, see https://www.keycloak.org/docs/latest/securing_apps/#_javascript_adapter - `scope`: Space separated list of scopes to request. These scopes get added in addition to the default ones, assuming the scope is in the optional scopes list of the Keycloak client in use. -## Events to listen to +### Events to listen to - `vpu-auth-init`: Keycloak init event - happens once - `vpu-auth-person-init`: Keycloak person init event - the person entity was loaded from the server - `vpu-auth-keycloak-data-update`: Keycloak data was updated - happens for example every time after a token refresh +## Login Button + +### Usage + +```html +<vpu-login-button></vpu-login-button> +``` + ## Local development ```bash diff --git a/packages/auth/src/auth.js b/packages/auth/src/auth-keycloak.js similarity index 99% rename from packages/auth/src/auth.js rename to packages/auth/src/auth-keycloak.js index 647efec0..526d5125 100644 --- a/packages/auth/src/auth.js +++ b/packages/auth/src/auth-keycloak.js @@ -20,7 +20,7 @@ import {LoginStatus} from './util.js'; * window.VPUPerson: Person json object of the user (optional, enable by setting the `load-person` attribute, * which will dispatch a `vpu-auth-person-init` event when loaded) */ -export class Auth extends LitElement { +export class AuthKeycloak extends LitElement { constructor() { super(); this.lang = 'de'; diff --git a/packages/auth/src/index.js b/packages/auth/src/index.js index 9de95a6d..c2fe4ab0 100644 --- a/packages/auth/src/index.js +++ b/packages/auth/src/index.js @@ -1,4 +1,4 @@ -import {Auth} from './auth.js'; -import {AuthButton} from './auth-button.js'; +import {AuthKeycloak} from './auth-keycloak.js'; +import {LoginButton} from './login-button.js'; -export {Auth, AuthButton}; \ No newline at end of file +export {AuthKeycloak, LoginButton}; \ No newline at end of file diff --git a/packages/auth/src/auth-button.js b/packages/auth/src/login-button.js similarity index 98% rename from packages/auth/src/auth-button.js rename to packages/auth/src/login-button.js index 1e855ddf..6dd94f27 100644 --- a/packages/auth/src/auth-button.js +++ b/packages/auth/src/login-button.js @@ -52,7 +52,7 @@ let loginSVG = ` </svg> `; -export class AuthButton extends ScopedElementsMixin(LitElement) { +export class LoginButton extends ScopedElementsMixin(LitElement) { constructor() { super(); diff --git a/packages/auth/src/vpu-auth-demo.js b/packages/auth/src/vpu-auth-demo.js index c9371ad7..7184a5c2 100644 --- a/packages/auth/src/vpu-auth-demo.js +++ b/packages/auth/src/vpu-auth-demo.js @@ -1,8 +1,8 @@ import {i18n} from './i18n.js'; import {html, LitElement} from 'lit-element'; import {ScopedElementsMixin} from '@open-wc/scoped-elements'; -import {Auth} from './auth.js'; -import {AuthButton} from './auth-button.js'; +import {AuthKeycloak} from './auth-keycloak.js'; +import {LoginButton} from './login-button.js'; import * as commonUtils from 'vpu-common/utils'; class AuthDemo extends ScopedElementsMixin(LitElement) { @@ -13,8 +13,8 @@ class AuthDemo extends ScopedElementsMixin(LitElement) { static get scopedElements() { return { - 'vpu-auth': Auth, - 'vpu-auth-button': AuthButton, + 'vpu-auth-keycloak': AuthKeycloak, + 'vpu-login-button': LoginButton, }; } @@ -90,9 +90,9 @@ class AuthDemo extends ScopedElementsMixin(LitElement) { <h1 class="title">Auth-Demo</h1> </div> <div class="container"> - <vpu-auth lang="${this.lang}" keycloak-config='{"url": "https://auth-dev.tugraz.at/auth", "realm": "tugraz", "clientId": "auth-dev-mw-frontend-local", "silentCheckSsoRedirectUri": "${silentCheckSsoUri}", "scope": "optional-test-scope"}' load-person try-login></vpu-auth> + <vpu-auth-keycloak lang="${this.lang}" keycloak-config='{"url": "https://auth-dev.tugraz.at/auth", "realm": "tugraz", "clientId": "auth-dev-mw-frontend-local", "silentCheckSsoRedirectUri": "${silentCheckSsoUri}", "scope": "optional-test-scope"}' load-person try-login></vpu-auth-keycloak> - <vpu-auth-button lang="${this.lang}" show-image></vpu-auth-button> + <vpu-login-button lang="${this.lang}" show-image></vpu-login-button> </div> </section> diff --git a/packages/auth/src/vpu-auth.js b/packages/auth/src/vpu-auth.js index 50461dcb..5201d004 100644 --- a/packages/auth/src/vpu-auth.js +++ b/packages/auth/src/vpu-auth.js @@ -1,6 +1,6 @@ import {defineCustomElement} from 'vpu-common/utils'; -import {Auth} from './auth.js'; -import {AuthButton} from './auth-button.js'; +import {AuthKeycloak} from './auth-keycloak.js'; +import {LoginButton} from './login-button.js'; -defineCustomElement('vpu-auth', Auth); -defineCustomElement('vpu-auth-button', AuthButton); +defineCustomElement('vpu-auth-keycloak', AuthKeycloak); +defineCustomElement('vpu-login-button', LoginButton); diff --git a/packages/auth/test/unit.js b/packages/auth/test/unit.js index 4f913340..66066214 100644 --- a/packages/auth/test/unit.js +++ b/packages/auth/test/unit.js @@ -1,4 +1,4 @@ -import {expect} from 'chai'; +import {assert} from 'chai'; import '../src/vpu-auth'; import '../src/vpu-auth-demo'; @@ -7,7 +7,7 @@ suite('vpu-auth basics', () => { let node; suiteSetup(async () => { - node = document.createElement('vpu-auth'); + node = document.createElement('vpu-auth-keycloak'); node.setAttribute('keycloak-config', JSON.stringify({ url: 'url', realm: 'realm', @@ -22,15 +22,15 @@ suite('vpu-auth basics', () => { }); test('should render', () => { - expect(node).to.have.property('shadowRoot'); + assert.isNotNull(node.shadowRoot); }); }); -suite('vpu-auth-button', () => { +suite('vpu-login-button', () => { let node; suiteSetup(async () => { - node = document.createElement('vpu-auth-button'); + node = document.createElement('vpu-login-button'); document.body.appendChild(node); await node.updateComplete; }); @@ -40,7 +40,7 @@ suite('vpu-auth-button', () => { }); test('should render', () => { - expect(node).to.have.property('shadowRoot'); + assert.isNotNull(node.shadowRoot); }); }); @@ -58,6 +58,6 @@ suite('vpu-auth-demo basics', () => { }); test('should render', () => { - expect(node).to.have.property('shadowRoot'); + assert.isNotNull(node.shadowRoot); }); }); -- GitLab