feat(web): Implement view container and update elements

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({