From a94d1875bd6bf56be0c661126e5b0dfa0afb76b1 Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Mon, 7 Oct 2024 15:14:44 +0200 Subject: [PATCH] fix(core): Bug fixes and UI enhancements --- changelog.md | 8 +++ package.json | 2 +- pnpm-lock.yaml | 20 +++---- ts/00_commitinfo_data.ts | 2 +- ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/account/content.ts | 16 ++++++ ts_web/elements/account/navigation.ts | 47 ++++++++++++++--- ts_web/elements/account/sharedstyles.ts | 3 +- ts_web/elements/account/views/baseview.ts | 64 ++++++++++++++--------- ts_web/elements/idp-centercontainer.ts | 6 +-- ts_web/elements/idp-registerprompt.ts | 7 ++- ts_web/elements/idp-welcome.ts | 60 ++++++++++----------- ts_web/views/viewcontainer.ts | 4 ++ 13 files changed, 159 insertions(+), 82 deletions(-) diff --git a/changelog.md b/changelog.md index 161a125..5c1fe60 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,13 @@ # Changelog +## 2024-10-07 - 1.4.1 - fix(core) +Bug fixes and UI enhancements + +- Updated packages to resolve compatibility issues. +- Optimized the transition animations for the center container. +- Improved the initialization logic for navigating between views. +- Enhanced UI with better organization selection handling. + ## 2024-10-07 - 1.4.0 - feat(core) Refactored plugin and request handling to use 'idpInterfaces' diff --git a/package.json b/package.json index b79997f..ee6667d 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@api.global/typedserver": "^3.0.51", "@api.global/typedsocket": "^3.0.1", "@consentsoftware_private/catalog": "^1.0.73", - "@design.estate/dees-catalog": "^1.1.13", + "@design.estate/dees-catalog": "^1.2.0", "@design.estate/dees-domtools": "^2.0.64", "@design.estate/dees-element": "^2.0.39", "@push.rocks/lik": "^6.0.15", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac910ba..61c1063 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,8 +24,8 @@ importers: specifier: ^1.0.73 version: 1.0.77(@types/node@22.7.4) '@design.estate/dees-catalog': - specifier: ^1.1.13 - version: 1.1.13 + specifier: ^1.2.0 + version: 1.2.0 '@design.estate/dees-domtools': specifier: ^2.0.64 version: 2.0.64 @@ -420,8 +420,8 @@ packages: resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==} engines: {node: '>=12'} - '@design.estate/dees-catalog@1.1.13': - resolution: {integrity: sha512-bgxlsu6rfYCTqyC2tDo8dtwFQB2HaINEK4dOSlvEWd9DmDymphxNoHxi5f/4NFY7H8gSIgUoBmk3y/MFU3GoRg==} + '@design.estate/dees-catalog@1.2.0': + resolution: {integrity: sha512-QVp36XMzX7PEGKJxVaZ09jPFPV2AVYDhNaP1KRWegoiI/PQ3+YilXC7P7WSTPxBojTi28AdPzt9brpaORFY/Qg==} '@design.estate/dees-comms@1.0.27': resolution: {integrity: sha512-GvzTUwkV442LD60T08iqSoqvhA02Mou5lFvvqBPc4yBUiU7cZISqBx+76xvMgMIEI9Dx9JfTl4/2nW8MoVAanw==} @@ -2947,8 +2947,8 @@ packages: worker-loader: optional: true - pdfjs-dist@4.6.82: - resolution: {integrity: sha512-BUOryeRFwvbLe0lOU6NhkJNuVQUp06WxlJVVCsxdmJ4y5cU3O3s3/0DunVdK1PMm7v2MUw52qKYaidhDH1Z9+w==} + pdfjs-dist@4.7.76: + resolution: {integrity: sha512-8y6wUgC/Em35IumlGjaJOCm3wV4aY/6sqnIT3fVW/67mXsOZ9HWBn8GDKmJUK0GSzpbmX3gQqwfoFayp78Mtqw==} engines: {node: '>=18'} peek-readable@5.2.0: @@ -4864,7 +4864,7 @@ snapshots: dependencies: '@jridgewell/trace-mapping': 0.3.9 - '@design.estate/dees-catalog@1.1.13': + '@design.estate/dees-catalog@1.2.0': dependencies: '@design.estate/dees-domtools': 2.0.64 '@design.estate/dees-element': 2.0.39 @@ -4882,7 +4882,7 @@ snapshots: highlight.js: 11.10.0 ibantools: 4.5.1 monaco-editor: 0.52.0 - pdfjs-dist: 4.6.82 + pdfjs-dist: 4.7.76 xterm: 5.3.0 xterm-addon-fit: 0.8.0(xterm@5.3.0) transitivePeerDependencies: @@ -6905,7 +6905,7 @@ snapshots: '@uptime.link/webwidget@1.1.2': dependencies: - '@design.estate/dees-catalog': 1.1.13 + '@design.estate/dees-catalog': 1.2.0 '@design.estate/dees-domtools': 2.0.64 '@design.estate/dees-element': 2.0.39 '@design.estate/dees-wcctools': 1.0.90 @@ -8563,7 +8563,7 @@ snapshots: dommatrix: 1.0.3 web-streams-polyfill: 3.3.3 - pdfjs-dist@4.6.82: + pdfjs-dist@4.7.76: optionalDependencies: canvas: 2.11.2 path2d: 0.2.1 diff --git a/ts/00_commitinfo_data.ts b/ts/00_commitinfo_data.ts index 2250aeb..d6988a7 100644 --- a/ts/00_commitinfo_data.ts +++ b/ts/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@idp.global/idp.global', - version: '1.4.0', + version: '1.4.1', description: 'An identity provider software managing user authentications, registrations, and sessions.' } diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 2250aeb..d6988a7 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@idp.global/idp.global', - version: '1.4.0', + version: '1.4.1', description: 'An identity provider software managing user authentications, registrations, and sessions.' } diff --git a/ts_web/elements/account/content.ts b/ts_web/elements/account/content.ts index 2d057d5..726c645 100644 --- a/ts_web/elements/account/content.ts +++ b/ts_web/elements/account/content.ts @@ -110,6 +110,16 @@ export class IdpAccountContent extends DeesElement { viewcontainer.append(new views.BaseView()); console.log(`loaded base view`); + this.subrouter.on('', async () => { + viewcontainer.classList.add('changing'); + await this.domtools.convenience.smartdelay.delayFor(300); + console.log('We are viewing the account overview'); + await cleanupViews(); + viewcontainer.append(new views.BaseView()); + viewcontainer.classList.remove('changing'); + await this.domtools.convenience.smartdelay.delayFor(300); + }); + this.subrouter.on('/org/:orgName/billing', async () => { viewcontainer.classList.add('changing'); await this.domtools.convenience.smartdelay.delayFor(300); @@ -121,5 +131,11 @@ export class IdpAccountContent extends DeesElement { }); this.subrouter._handleRouteState(); + + this.registerGarbageFunction(async () => { + this.subrouter.destroy(); + }) } + + } diff --git a/ts_web/elements/account/navigation.ts b/ts_web/elements/account/navigation.ts index 2b774e7..74b749a 100644 --- a/ts_web/elements/account/navigation.ts +++ b/ts_web/elements/account/navigation.ts @@ -28,7 +28,7 @@ export class LeleAccountNavigation extends DeesElement { public options: { text: string; id: string }[] = [ { id: '1', - text: 'Properties', + text: 'Apps', }, { id: '2', @@ -56,13 +56,30 @@ export class LeleAccountNavigation extends DeesElement { color: ${cssManager.bdTheme('#333', '#fff')}; padding: 10px; padding-left: 0px; - background: ${cssManager.bdTheme('#eeeeeb', '#111')}; - border-right: ${cssManager.bdTheme('1px solid #ccc', '')}; + background: ${cssManager.bdTheme('#eeeeeb', '#000')}; + border-right: ${cssManager.bdTheme('1px solid #ccc', '1px solid #111')}; } :host([hidden]) { display: none; } + .logo { + font-family: 'Cal Sans'; + letter-spacing: 0.0125em; + font-size: 16px; + text-align: center; + padding: 16px 0px 16px 0px; + margin: -8px -8px -16px 0px; + border-bottom: 1px solid #111111; + cursor: default; + position: relative; + z-index: 10; + } + + .logo:hover { + background: ${unsafeCSS(plugins.deesCatalog.colors.dark.blue)}; + } + .commitinfo { text-align: center; position: absolute; @@ -71,7 +88,6 @@ export class LeleAccountNavigation extends DeesElement { width: 100%; font-size: 12px; padding: 8px; - background: ${cssManager.bdTheme('#eeeeeb', '#181818')}; border-top: ${cssManager.bdTheme('1px solid #ccc', '1px solid #333')}; color: ${cssManager.bdTheme('#666', '#ccc')}; } @@ -82,7 +98,9 @@ export class LeleAccountNavigation extends DeesElement { text-transform: uppercase; font-size: 12px; font-weight: 300; - border-bottom: 1px dotted #666; + border-bottom: 1px solid; + border-image: linear-gradient(to right, orange, #44444400) 1; + color: ${cssManager.bdTheme('#666', '#ccc')}; margin-bottom: 5px; padding-top: 32px; padding-left: 10px; @@ -99,8 +117,8 @@ export class LeleAccountNavigation extends DeesElement { } .navigationOption:hover { - cursor: pointer; - background: ${cssManager.bdTheme('#bbb', '#333')}; + cursor: default; + background: ${cssManager.bdTheme('#bbb', plugins.deesCatalog.colors.dark.blue)}; } dees-input-dropdown { margin-top: 16px; @@ -110,11 +128,26 @@ export class LeleAccountNavigation extends DeesElement { `, ]; + public async getAccountRouter() { + const host = (this.getRootNode() as any).host; + return (host as any).subrouter; + } + public render(): TemplateResult { return html`
idp.global v${commitinfo.version}
+
Account Settings
+
{ + const subrouter = await this.getAccountRouter(); + subrouter.pushUrl(''); + }} + > + overview +
{ diff --git a/ts_web/elements/account/sharedstyles.ts b/ts_web/elements/account/sharedstyles.ts index 9b81fc8..a6633ca 100644 --- a/ts_web/elements/account/sharedstyles.ts +++ b/ts_web/elements/account/sharedstyles.ts @@ -3,7 +3,8 @@ import { css } from '@design.estate/dees-element'; export default css` h1 { margin-top: 50px; - border-bottom: 1px solid #666; + border-bottom: 1px solid; + border-image: radial-gradient(rgba(136, 136, 136, 0.44), rgba(136, 136, 136, 0)) 1 / 1 / 0 stretch; padding-bottom: 10px; font-weight: 500; } diff --git a/ts_web/elements/account/views/baseview.ts b/ts_web/elements/account/views/baseview.ts index 215c3f7..8e592b4 100644 --- a/ts_web/elements/account/views/baseview.ts +++ b/ts_web/elements/account/views/baseview.ts @@ -67,24 +67,28 @@ export class BaseView extends DeesElement { .orgGrid { display: grid; grid-gap: 16px; - grid-template-columns: ${cssManager.cssGridColumns(4, 16)} + grid-template-columns: ${cssManager.cssGridColumns(2, 16)}; } .org { padding: 16px; - border: 1px dotted #666; - border-radius: 3px; + border-top: 1px solid #444; + background: ${cssManager.bdTheme('#ccc', '#222')}; + border-radius: 16px; } .org:hover { - cursor: pointer; + cursor: default; background: ${cssManager.bdTheme('#CCC', '#333')}; } `, ]; public render() { - return html`
`; + return html` +
+ +
`; } public async firstUpdated(_changedProperties: Map) { @@ -147,33 +151,43 @@ export class BaseView extends DeesElement { subscriptions.push(formSubscription); button.addEventListener('clicked', async () => { orgInput.disabled = true; - button.text = 'creating org...' + button.text = 'creating org...'; button.status = 'pending'; - hint.innerHTML = 'Waiting for creation of the organization...' + hint.innerHTML = 'Waiting for creation of the organization...'; await state.accountState.dispatchAction(state.manifestNewOrgName, null); - hint.innerHTML = `The Organization with name ${state.accountState.getState().organizations[0].data.name} has been created!` + hint.innerHTML = `The Organization with name ${ + state.accountState.getState().organizations[0].data.name + } has been created!`; button.text = 'created!'; button.status = 'success'; const parentElement = (this.getRootNode() as any).host; - parentElement.subrouter.pushUrl(`/org/${state.accountState.getState().organizations[0].data.slug}/billing`); + parentElement.subrouter.pushUrl( + `/org/${state.accountState.getState().organizations[0].data.slug}/billing` + ); }); } else { - render(html` -

Select An Organization

-
- ${state.accountState.getState().organizations.map(orgArg => { - return html` -
{ - state.accountState.dispatchAction(state.setSelectedOrg, orgArg) - const parentElement = (this.getRootNode() as any).host; - parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`) - }}> - ${orgArg.data.name} -
- ` - })} -
- `, viewHost) + render( + html` +

Select An Organization

+
+ ${state.accountState.getState().organizations.map((orgArg) => { + return html` +
{ + state.accountState.dispatchAction(state.setSelectedOrg, orgArg); + const parentElement = (this.getRootNode() as any).host; + parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`); + }} + > + ${orgArg.data.name} +
+ `; + })} +
+ `, + viewHost + ); } } } diff --git a/ts_web/elements/idp-centercontainer.ts b/ts_web/elements/idp-centercontainer.ts index 8e7e5ea..2f62b83 100644 --- a/ts_web/elements/idp-centercontainer.ts +++ b/ts_web/elements/idp-centercontainer.ts @@ -47,7 +47,7 @@ export class IdpCenterContainer extends DeesElement { justify-content: center; align-items: center; opacity: 0; - transition: all 0.1s; + transition: all 0.2s; transition-delay: 0.05s; transform: translate3d(0px, 8px, 0px); pointer-events: none; @@ -126,7 +126,7 @@ export class IdpCenterContainer extends DeesElement { const done = plugins.smartpromise.defer(); requestAnimationFrame(async () => { this.shadowRoot.querySelector('.mainContainer').classList.add('show'); - await domtoolsInstance.convenience.smartdelay.delayFor(200); + await domtoolsInstance.convenience.smartdelay.delayFor(250); done.resolve(); }); return done.promise; @@ -138,7 +138,7 @@ export class IdpCenterContainer extends DeesElement { const done = plugins.smartpromise.defer(); requestAnimationFrame(async () => { this.shadowRoot.querySelector('.mainContainer').classList.remove('show'); - await domtoolsInstance.convenience.smartdelay.delayFor(200); + await domtoolsInstance.convenience.smartdelay.delayFor(250); done.resolve(); }); return done.promise; diff --git a/ts_web/elements/idp-registerprompt.ts b/ts_web/elements/idp-registerprompt.ts index fb60c0a..b31790b 100644 --- a/ts_web/elements/idp-registerprompt.ts +++ b/ts_web/elements/idp-registerprompt.ts @@ -111,7 +111,12 @@ export class IdpRegistrationPrompt extends DeesElement { } public async firstUpdated() { - const domtoolsInstance = await this.domtoolsPromise; + await this.domtoolsPromise; + const idpState = await IdpState.getSingletonInstance(); + const loggedIn = await idpState.idpClient.determineLoginStatus(); + if (loggedIn) { + idpState.domtools.router.pushUrl('/'); + } const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm'); const loginPasswordInput: DeesInputText = loginForm.querySelector('#loginPasswordInput'); const loginSubmitButton: DeesFormSubmit = loginForm.querySelector('#loginSubmitButton'); diff --git a/ts_web/elements/idp-welcome.ts b/ts_web/elements/idp-welcome.ts index 99745f4..2fdefa9 100644 --- a/ts_web/elements/idp-welcome.ts +++ b/ts_web/elements/idp-welcome.ts @@ -35,27 +35,20 @@ export class IdpWelcome extends DeesElement { display: none; } - h1 { - font-family: 'Cal Sans'; + .maincontainer { + padding: 0px 16px; + } + + .greeting { text-align: center; - font-size: 24px; - margin: 0px auto; - padding: 24px 24px 0px 24px; - width: 500px; - letter-spacing: 0.0125em; - } - - .textbox { + font-size: 16px; + font-weight: 600; margin: 24px auto; - width: 500px; - background: #111111; - border-radius: 16px; - border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#222222')}; - padding: 24px; } - .textbox dees-button { + dees-button { margin-top: 16px; + margin-bottom: 16px; } `, ]; @@ -63,16 +56,15 @@ export class IdpWelcome extends DeesElement { public render(): TemplateResult { return html` -

idp.global

- -
+ +
${resolveExec(async () => { const idpState = await IdpState.getSingletonInstance(); await idpState.idpClient.determineLoginStatus(); const data = await idpState.idpClient.whoIs().catch(); if (data?.user) { return html` - Hello ${data.user.data.name}! +
Hello ${data.user.data.name}!
{ const idpState = await IdpState.getSingletonInstance(); @@ -87,7 +79,7 @@ export class IdpWelcome extends DeesElement { }} >Logout - ` + `; } return html` Do you want to sign in or register? @@ -107,23 +99,27 @@ export class IdpWelcome extends DeesElement { > `; })} -
- -
- Do you want to use idp.global for your app? {}}>Open Developer Dashboard -
- -
- idp.global is a Open Source identity provider for the world wide web. You can get the code - if you want to improve it. { window.open('https://code.foss.global/idp.global/idp.global', '_blank'); }} - >Get the codeGet the Source Code -
+
+ `; } + + public async show() { + await this.updateComplete; + const centerContainer = this.shadowRoot.querySelector('idp-centercontainer'); + await centerContainer.show(); + } + + public async hide() { + await this.updateComplete; + const centerContainer = this.shadowRoot.querySelector('idp-centercontainer'); + await centerContainer.hide(); + } } diff --git a/ts_web/views/viewcontainer.ts b/ts_web/views/viewcontainer.ts index 891176d..6a7278e 100644 --- a/ts_web/views/viewcontainer.ts +++ b/ts_web/views/viewcontainer.ts @@ -59,6 +59,10 @@ export class IdpViewcontainer extends DeesElement { throw new Error('View container not found in the rendered DOM.'); } + if (!this.currentElement) { + this.currentElement = viewContainer.children[0] as any; + } + // check if current element already is instance of viewElement if (this.currentElement instanceof viewElement) { return;