idp.global/app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): Bug fixes and UI enhancements

Browse Source
This commit is contained in:
Philipp Kunz
2024-10-07 15:14:44 +02:00
parent 46844fed58
commit a94d1875bd
13 changed files with 159 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
changelog.md
+8
View File
@@ -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'
package.json
+1 -1
View File
@@ -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",
pnpm-lock.yaml
Generated
+10 -10
View File
@@ -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
ts/00_commitinfo_data.ts
+1 -1
View File
@@ -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.'
}
ts_web/00_commitinfo_data.ts
+1 -1
View File
@@ -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.'
}
ts_web/elements/account/content.ts
+16
View File
@@ -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();
})
}
}
ts_web/elements/account/navigation.ts
+40 -7
View File
@@ -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`
<style></style>
<div class="commitinfo">idp.global v${commitinfo.version}</div>
<div class="logo">idp.global</div>
<div class="navigationGroupLabel">Account Settings</div>
<div
class="navigationOption"
@click=${async () => {
const subrouter = await this.getAccountRouter();
subrouter.pushUrl('');
}}
>
overview
</div>
<div
class="navigationOption"
@click=${async () => {
ts_web/elements/account/sharedstyles.ts
+2 -1
View File
@@ -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;
}
ts_web/elements/account/views/baseview.ts
+32 -18
View File
@@ -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` <div class="viewHost"></div> `;
return html`
<div class="viewHost">
</div> `;
}
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
@@ -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`
render(
html`
<h1>Select An Organization</h1>
<div class="orgGrid">
${state.accountState.getState().organizations.map(orgArg => {
${state.accountState.getState().organizations.map((orgArg) => {
return html`
<div class="org" @click=${() => {
state.accountState.dispatchAction(state.setSelectedOrg, orgArg)
<div
class="org"
@click=${() => {
state.accountState.dispatchAction(state.setSelectedOrg, orgArg);
const parentElement = (this.getRootNode() as any).host;
parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`)
}}>
${orgArg.data.name}
parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`);
}}
>
<dees-icon .iconFA=${"wallet"} style="display: inline-block; transform: translateY(3px); padding-right: 4px;"></dees-icon> ${orgArg.data.name}
</div>
`
`;
})}
</div>
`, viewHost)
`,
viewHost
);
}
}
}
ts_web/elements/idp-centercontainer.ts
+3 -3
View File
@@ -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;
ts_web/elements/idp-registerprompt.ts
+6 -1
View File
@@ -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');
ts_web/elements/idp-welcome.ts
+27 -31
View File
@@ -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`
<style></style>
<h1>idp.global</h1>
<div class="textbox">
<idp-centercontainer>
<div class="maincontainer">
${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}!
<div class="greeting">Hello ${data.user.data.name}!</div>
<dees-button
@click=${async () => {
const idpState = await IdpState.getSingletonInstance();
@@ -87,7 +79,7 @@ export class IdpWelcome extends DeesElement {
}}
>Logout</dees-button
>
`
`;
}
return html`
Do you want to sign in or register?
@@ -107,23 +99,27 @@ export class IdpWelcome extends DeesElement {
>
`;
})}
</div>
<div class="textbox">
Do you want to use idp.global for your app?
<dees-button @click=${() => {}}>Open Developer Dashboard</dees-button>
</div>
<div class="textbox">
idp.global is a Open Source identity provider for the world wide web. You can get the code
if you want to improve it.
<dees-button
@click=${() => {
window.open('https://code.foss.global/idp.global/idp.global', '_blank');
}}
>Get the code</dees-button
>Get the Source Code</dees-button
>
</div>
</idp-centercontainer>
`;
}
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();
}
}
ts_web/views/viewcontainer.ts
+4
View File
@@ -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;