feat(web): Implement view container and update elements

ts_web/elements/idp-logincontainer.ts

@@ -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

@@ -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/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;
 

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`
       <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

@@ -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';