-
Legal Info
| Company Website
@@ -222,7 +222,7 @@ export class IdpLogincontainer extends DeesElement {
this.showComponent('loginPrompt');
} else if ((await this.receptionClient.determineLoginStatus()) && action === 'login') {
await this.showComponent('transferManager');
- const wgTransferManager = this.shadowRoot.querySelector('wg-transfermanager');
+ const wgTransferManager = this.shadowRoot.querySelector('idp-transfermanager');
await wgTransferManager.handleTransfer();
} else if ((await this.receptionClient.determineLoginStatus()) && action === 'manage') {
this.showComponent('loginManager');
@@ -246,19 +246,19 @@ export class IdpLogincontainer extends DeesElement {
);
}
- const wgLogin = this.shadowRoot.querySelector('wg-loginprompt');
- const wgTransferManager = this.shadowRoot.querySelector('wg-transfermanager');
- wgLogin.appData = appData;
- wgTransferManager.appData = appData;
+ const idpLogin = this.shadowRoot.querySelector('idp-login');
+ const idpTransferManager = this.shadowRoot.querySelector('idp-transfermanager');
+ idpLogin.appData = appData;
+ idpTransferManager.appData = appData;
await this.determineNextAction();
- wgLogin.jwtObserable.subscribe({
+ idpLogin.jwtObserable.subscribe({
next: async (jwtArg) => {
console.log('loggedIn');
await this.receptionClient.storeJwt(jwtArg);
await this.determineNextAction();
},
});
- wgLogin.dispatchJwt();
+ idpLogin.dispatchJwt();
}
}
diff --git a/ts_web/elements/idp-loginprompt.ts b/ts_web/elements/idp-loginprompt.ts
index fa48639..edd90e0 100644
--- a/ts_web/elements/idp-loginprompt.ts
+++ b/ts_web/elements/idp-loginprompt.ts
@@ -13,20 +13,20 @@ import {
} from '@design.estate/dees-element';
// third party catalogs
-import '@uptimelink/webwidget';
+import '@uptime.link/webwidget';
import '@design.estate/dees-catalog';
import { DeesForm, DeesFormSubmit, DeesInputText } from '@design.estate/dees-catalog';
declare global {
interface HTMLElementTagNameMap {
- 'wg-loginprompt': WgLogin;
+ 'idp-login': IdpLogin;
}
}
-@customElement('wg-loginprompt')
-export class WgLogin extends DeesElement {
- public static demo = () => html`(
- WgLogin.receptionUrl,
+ IdpLogin.receptionUrl,
'loginWithEmailOrUsernameAndPassword'
);
const loginRequestWithEmail =
new domtools.TypedRequest(
- WgLogin.receptionUrl,
+ IdpLogin.receptionUrl,
'loginWithEmail'
);
@@ -241,7 +243,7 @@ export class WgLogin extends DeesElement {
registrationForm.setStatus('pending', 'registering...');
const firstSignupRequest =
new domtools.TypedRequest(
- WgLogin.receptionUrl,
+ IdpLogin.receptionUrl,
'firstRegistrationRequest'
);
const response = await firstSignupRequest
@@ -279,7 +281,7 @@ export class WgLogin extends DeesElement {
// a refreshToken binds dierctly to a session.
// the refresh token is used on a continuous basis to get fresh and short-lived jwts
const refreshJwt = new domtools.TypedRequest(
- WgLogin.receptionUrl,
+ IdpLogin.receptionUrl,
'refreshJwt'
);
const responseJwt = await refreshJwt.fire({
diff --git a/ts_web/elements/classes.idp-registration-stepper.ts b/ts_web/elements/idp-registration-stepper.ts
similarity index 100%
rename from ts_web/elements/classes.idp-registration-stepper.ts
rename to ts_web/elements/idp-registration-stepper.ts
diff --git a/ts_web/elements/idp-transfermanager.ts b/ts_web/elements/idp-transfermanager.ts
index 011c16b..4e899b4 100644
--- a/ts_web/elements/idp-transfermanager.ts
+++ b/ts_web/elements/idp-transfermanager.ts
@@ -14,12 +14,12 @@ import {
declare global {
interface HTMLElementTagNameMap {
- 'wg-transfermanager': WgTransfermanager;
+ 'idp-transfermanager': IdpTransfermanager;
}
}
-@customElement('wg-transfermanager')
-export class WgTransfermanager extends DeesElement {
+@customElement('idp-transfermanager')
+export class IdpTransfermanager extends DeesElement {
public appData: plugins.idpInterfaces.data.IApp;
diff --git a/ts_web/elements/idp-welcome.ts b/ts_web/elements/idp-welcome.ts
index c39fa7e..f1209f9 100644
--- a/ts_web/elements/idp-welcome.ts
+++ b/ts_web/elements/idp-welcome.ts
@@ -1,4 +1,5 @@
import * as plugins from '../plugins.js';
+import * as elements from '../elements/index.js';
import {
customElement,
@@ -10,11 +11,11 @@ import {
css,
type TemplateResult,
} from '@design.estate/dees-element';
+import type { IdpViewcontainer } from '../views/viewcontainer.js';
@customElement('idp-welcome')
export class IdpWelcome extends DeesElement {
- @property()
- public someProperty = 'someProperty';
+ viewContainer: IdpViewcontainer;
constructor() {
super();
@@ -25,16 +26,15 @@ export class IdpWelcome extends DeesElement {
css`
:host {
display: block;
- height: 100px;
color: #fff;
font-family: 'Geist Sans';
}
:host([hidden]) {
- font-family: 'Cal Sans';
display: none;
}
h1 {
+ font-family: 'Cal Sans';
text-align: center;
letter-spacing:0.0125em;
}
@@ -57,17 +57,26 @@ export class IdpWelcome extends DeesElement {
return html`
idp.global
+ +
+ Do you want to sign in or register?
+ {
+ this.viewContainer.loadElement(elements.IdpLogincontainer);
+ }}>Sign In
+ {}}>Register
+
+
+
+ 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.location.href = 'https://code.foss.global/idp.global/idp.global';
+ window.open('https://code.foss.global/idp.global/idp.global', '_blank');
}}>Get the code
-
- Do you want to sign in or register?
- {}}>Sign In
- {}}>Register
-
`;
}
}
diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts
new file mode 100644
index 0000000..76465b1
--- /dev/null
+++ b/ts_web/elements/index.ts
@@ -0,0 +1,5 @@
+export * from './idp-registration-stepper.js';
+export * from './idp-logincontainer.js';
+export * from './idp-loginprompt.js';
+export * from './idp-transfermanager.js';
+export * from './idp-welcome.js';
diff --git a/ts_web/index.ts b/ts_web/index.ts
index 1b37e36..b880d99 100644
--- a/ts_web/index.ts
+++ b/ts_web/index.ts
@@ -2,6 +2,7 @@ import * as serviceworker from '@api.global/typedserver/web_serviceworker_client
import * as domtools from '@design.estate/dees-domtools';
import { html, render } from '@design.estate/dees-element';
+import { IdpViewcontainer } from './views/index.js';
import { IdpWelcome } from './elements/idp-welcome.js';
const run = async () => {
@@ -52,10 +53,15 @@ const run = async () => {
--background-accent: #303f9f;
}
-
+
+
+ `;
+ }
+
+ public currentElement: plugins.deesElement.DeesElement;
+ public async loadElement(viewElement: typeof plugins.deesElement.DeesElement) {
+ // Wait until the viewContainer itself is rendered
+ await this.updateComplete;
+
+ // Select the viewContainer
+ const viewContainer = this.shadowRoot.querySelector('.viewContainer');
+
+ // Check if viewContainer is present
+ if (!viewContainer) {
+ throw new Error('View container not found in the rendered DOM.');
+ }
+
+ // Remove the current element if it exists
+ if (this.currentElement) {
+ viewContainer.removeChild(this.currentElement);
+ }
+
+ // Create a new instance of the viewElement
+ const newElement = new viewElement();
+ (newElement as any).viewContainer = this;
+ viewContainer.appendChild(newElement);
+
+ // Wait until the new element is fully rendered
+ await newElement.updateComplete;
+
+ // Set the new element as the current element
+ this.currentElement = newElement;
+ }
+}