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

feat(web): Implement view container and update elements

Browse Source
This commit is contained in:
Philipp Kunz
2024-09-29 16:48:06 +02:00
parent 7735b4070a
commit a4fde94a36
15 changed files with 182 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts_web/00_commitinfo_data.ts
+8
View File
@@ -0,0 +1,8 @@
/**
* autocreated commitinfo by @push.rocks/commitinfo
*/
export const commitinfo = {
name: '@idp.global/idp.global',
version: '1.1.0',
description: 'An identity provider software managing user authentications, registrations, and sessions.'
}
ts_web/elements/idp-logincontainer.ts
+12 -12
View File
@@ -15,13 +15,13 @@ import { commitinfo } from '../../dist_ts/00_commitinfo_data.js';
declare global {
interface HTMLElementTagNameMap {
'wg-logincontainer': IdpLogincontainer;
'idp-logincontainer': IdpLogincontainer;
}
}
@customElement('idp-logincontainer')
export class IdpLogincontainer extends DeesElement {
public static demo = () => html`<wg-logincontainer></wg-logincontainer>`;
public static demo = () => html`<idp-logincontainer></idp-logincontainer>`;
@query('.loginPromptContainer')
loginPromptContainer: HTMLDivElement;
@@ -48,6 +48,7 @@ export class IdpLogincontainer extends DeesElement {
cssManager.defaultStyles,
css`
:host {
font-family: 'Geist Sans';
position: absolute;
width: 100%;
height: 100%;
@@ -118,7 +119,6 @@ export class IdpLogincontainer extends DeesElement {
padding: 8px;
background: ${cssManager.bdTheme('#f5f5f5', '#111')};
border-top: 1px solid ${cssManager.bdTheme('#ccc', '#222222')};
font-family: 'Hubot Sans';
color: ${cssManager.bdTheme('#666', '#888')};
}
@@ -136,7 +136,7 @@ export class IdpLogincontainer extends DeesElement {
<img
src="https://assetbroker.lossless.one/brandfiles/00general/plain_workspaceglobal.svg"
/>
<wg-loginprompt></wg-loginprompt>
<idp-login></idp-login>
<div class="legalinfo">
<a href="https://legal.task.vc/" target="_blank">Legal Info</a>
| <a href="https://task.vc/" target="_blank">Company Website</a>
@@ -165,7 +165,7 @@ export class IdpLogincontainer extends DeesElement {
<img
src="https://assetbroker.lossless.one/brandfiles/00general/plain_workspaceglobal.svg"
/>
<wg-transfermanager></wg-transfermanager>
<idp-transfermanager></idp-transfermanager>
<div class="legalinfo">
<a href="https://legal.task.vc/" target="_blank">Legal Info</a>
| <a href="https://task.vc/" target="_blank">Company Website</a>
@@ -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();
}
}
ts_web/elements/idp-loginprompt.ts
+11 -9
View File
@@ -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`<wg-loginprompt></wg-loginprompt>`;
@customElement('idp-login')
export class IdpLogin extends DeesElement {
public static demo = () => html`<idp-login></idp-login>`;
public static receptionUrl = 'https://reception.lossless.one/typedrequest';
@property()
@@ -40,6 +40,7 @@ export class WgLogin extends DeesElement {
@property({
reflect: true,
type: Object,
})
appData: plugins.idpInterfaces.data.IApp;
@@ -54,6 +55,7 @@ export class WgLogin extends DeesElement {
cssManager.defaultStyles,
css`
:host {
font-family: 'Geist Sans';
display: block;
color: ${cssManager.bdTheme('#333333', '#ffffff')};
}
@@ -190,12 +192,12 @@ export class WgLogin extends DeesElement {
const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
const loginRequestWithUsernameAndPassword =
new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
WgLogin.receptionUrl,
IdpLogin.receptionUrl,
'loginWithEmailOrUsernameAndPassword'
);
const loginRequestWithEmail =
new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmail>(
WgLogin.receptionUrl,
IdpLogin.receptionUrl,
'loginWithEmail'
);
@@ -241,7 +243,7 @@ export class WgLogin extends DeesElement {
registrationForm.setStatus('pending', 'registering...');
const firstSignupRequest =
new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_FirstRegistration>(
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<plugins.idpInterfaces.request.IReq_RefreshJwt>(
WgLogin.receptionUrl,
IdpLogin.receptionUrl,
'refreshJwt'
);
const responseJwt = await refreshJwt.fire({
ts_web/elements/classes.idp-registration-stepper.ts → ts_web/elements/idp-registration-stepper.ts
View File
ts_web/elements/idp-transfermanager.ts
+3 -3
View File
@@ -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;
ts_web/elements/idp-welcome.ts
+19 -10
View File
@@ -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`
<style></style>
<h1>idp.global</h1>
<div class="textbox">
Do you want to sign in or register?
<dees-button @click=${() => {
this.viewContainer.loadElement(elements.IdpLogincontainer);
}}>Sign In</dees-button>
<dees-button @click=${() => {}}>Register</dees-button>
</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.location.href = 'https://code.foss.global/idp.global/idp.global';
window.open('https://code.foss.global/idp.global/idp.global', '_blank');
}}>Get the code</dees-button>
</div>
<div class="textbox">
Do you want to sign in or register?
<dees-button @click=${() => {}}>Sign In</dees-button>
<dees-button @click=${() => {}}>Register</dees-button>
</div>
`;
}
}
ts_web/elements/index.ts
+5
View File
@@ -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';
ts_web/index.ts
+7 -1
View File
@@ -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;
}
</style>
<idp-welcome></idp-welcome>
<idp-viewcontainer></idp-viewcontainer>
`;
render(mainTemplate, document.body);
const viewContainer: IdpViewcontainer = document.querySelector('idp-viewcontainer');
viewContainer.loadElement(IdpWelcome);
};
run();
ts_web/plugins.ts
+2 -1
View File
@@ -13,5 +13,6 @@ export { typedrequest };
// @design.estate scope
import * as deesCatalog from '@design.estate/dees-catalog';
import * as deesElement from '@design.estate/dees-element';
export { deesCatalog };
export { deesCatalog, deesElement };
ts_web/views/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './viewcontainer.js';
ts_web/views/viewcontainer.ts
+77
View File
@@ -0,0 +1,77 @@
import * as plugins from '../plugins.js';
import {
customElement,
DeesElement,
property,
html,
cssManager,
unsafeCSS,
css,
type TemplateResult,
} from '@design.estate/dees-element';
@customElement('idp-viewcontainer')
export class IdpViewcontainer extends DeesElement {
constructor() {
super();
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
display: block;
color: #fff;
font-family: 'Geist Sans';
}
:host([hidden]) {
display: none;
}
.viewContainer {
min-width: 100vh;
min-height: 100vh;
}
`,
];
public render(): TemplateResult {
return html`
<style></style>
<div class="viewContainer">
</div>
`;
}
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;
}
}