feat(web): Implement view container and update elements

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