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();
   }
 }