update

ts/index.ts

@@ -14,10 +14,7 @@ export const runCli = async () => {
   const reception = new Reception({
     name: (await serviceQenv.getEnvVarOnDemand('INSTANCE_NAME')) || 'idp.global',
     mongoDescriptor: {
-      mongoDbUser: await serviceQenv.getEnvVarOnDemand('MONGO_DB_USER'),
+      mongoDbUrl: await serviceQenv.getEnvVarOnDemand('MONGODB_URL'),
-      mongoDbName: await serviceQenv.getEnvVarOnDemand('MONGO_DB_NAME'),
-      mongoDbPass: await serviceQenv.getEnvVarOnDemand('MONGO_DB_PASS'),
-      mongoDbUrl: await serviceQenv.getEnvVarOnDemand('MONGO_DB_URL'),
     },
     websiteServer: websiteServer,
     baseUrl: await serviceQenv.getEnvVarOnDemand('IDP_BASEURL'),

ts_web/elements/idp-registration-stepper.ts

@@ -34,54 +34,250 @@ export class IdpRegistrationStepper extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        --foreground: hsl(0 0% 98%);
-        --muted-foreground: hsl(240 5% 64.9%);
         --background: hsl(240 10% 3.9%);
+        --foreground: hsl(0 0% 98%);
+        --muted: hsl(240 3.7% 15.9%);
+        --muted-foreground: hsl(240 5% 64.9%);
+        --border: hsl(240 3.7% 15.9%);
 
-        display: block;
-        color: var(--foreground);
         font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
-      }
-
-      .main {
         position: absolute;
-        top: 0px;
+        width: 100%;
-        right: 0px;
+        height: 100%;
-        left: 0px;
-        bottom: 0px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
         background: var(--background);
+        color: var(--foreground);
       }
 
-      .stepper-container {
+      .split-container {
+        position: absolute;
+        top: 0;
+        left: 0;
         width: 100%;
-        max-width: 480px;
+        height: 100%;
-        padding: 48px 24px;
+        display: grid;
+        grid-template-columns: 45% 55%;
+      }
+
+      /* Left Panel - Branding */
+      .brand-panel {
+        background: linear-gradient(135deg, hsl(240 10% 8%) 0%, hsl(240 10% 4%) 50%, hsl(240 12% 6%) 100%);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 48px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .brand-panel::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: radial-gradient(ellipse at 30% 20%, hsla(240 20% 20% / 0.3) 0%, transparent 50%),
+                    radial-gradient(ellipse at 70% 80%, hsla(240 20% 15% / 0.2) 0%, transparent 50%);
+        pointer-events: none;
+      }
+
+      .brand-content {
+        position: relative;
+        z-index: 1;
+        max-width: 400px;
+      }
+
+      .logo {
+        font-family: 'Cal Sans', 'Geist Sans', sans-serif;
+        font-size: 42px;
+        font-weight: 600;
+        color: var(--foreground);
+        margin: 0 0 12px 0;
+        letter-spacing: -0.02em;
+      }
+
+      .tagline {
+        font-size: 18px;
+        color: var(--muted-foreground);
+        margin: 0 0 48px 0;
+        line-height: 1.5;
+      }
+
+      .features {
+        display: flex;
+        flex-direction: column;
+        gap: 28px;
+      }
+
+      .feature {
+        display: flex;
+        align-items: flex-start;
+        gap: 16px;
+      }
+
+      .feature-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        background: hsla(240 10% 20% / 0.5);
+        border: 1px solid hsla(240 10% 30% / 0.3);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .feature-icon dees-icon {
+        color: var(--muted-foreground);
+        font-size: 18px;
+      }
+
+      .feature-text h3 {
+        font-size: 15px;
+        font-weight: 600;
+        color: var(--foreground);
+        margin: 0 0 4px 0;
+      }
+
+      .feature-text p {
+        font-size: 14px;
+        color: var(--muted-foreground);
+        margin: 0;
+        line-height: 1.4;
+      }
+
+      .learn-more {
+        margin-top: 48px;
+      }
+
+      /* Right Panel - Stepper */
+      .stepper-panel {
+        background: linear-gradient(-255deg, #06152280 -3.35%, #939eff38 32.79%, #22578480 67.41%, #06152280 97.48%), #212121;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .stepper-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow-y: auto;
       }
 
       .error-message {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
         text-align: center;
         color: var(--muted-foreground);
         font-size: 14px;
         line-height: 1.6;
-        padding: 24px;
+      }
+
+      .spinner-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
       }
 
       dees-stepper {
         --dees-stepper-background: transparent;
+        height: 100%;
+      }
+
+      /* Mobile Responsive */
+      @media (max-width: 900px) {
+        .split-container {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto 1fr;
+        }
+
+        .brand-panel {
+          padding: 32px 24px;
+          min-height: auto;
+        }
+
+        .brand-content {
+          max-width: 100%;
+        }
+
+        .logo {
+          font-size: 32px;
+        }
+
+        .tagline {
+          font-size: 16px;
+          margin-bottom: 24px;
+        }
+
+        .features {
+          display: none;
+        }
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <div class="main">
+      <div class="split-container">
-        <div class="stepper-container">
+        <!-- Left: Branding Panel -->
+        <div class="brand-panel">
+          <div class="brand-content">
+            <h1 class="logo">idp.global</h1>
+            <p class="tagline">Your permanent identity on the web</p>
+
+            <div class="features">
+              <div class="feature">
+                <div class="feature-icon">
+                  <dees-icon .icon=${'lucide:code'}></dees-icon>
+                </div>
+                <div class="feature-text">
+                  <h3>Open Source</h3>
+                  <p>Fully transparent, community-driven, no vendor lock-in</p>
+                </div>
+              </div>
+
+              <div class="feature">
+                <div class="feature-icon">
+                  <dees-icon .icon=${'lucide:heart'}></dees-icon>
+                </div>
+                <div class="feature-text">
+                  <h3>Always Free</h3>
+                  <p>Free for individuals and organizations. Paid support available for SLAs</p>
+                </div>
+              </div>
+
+              <div class="feature">
+                <div class="feature-icon">
+                  <dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
+                </div>
+                <div class="feature-text">
+                  <h3>Permanent Identity</h3>
+                  <p>One identity across all your applications</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="learn-more">
+              <dees-button
+                type="secondary"
+                @click=${() => window.open('https://about.idp.global', '_blank')}
+              >Learn more</dees-button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right: Stepper Panel -->
+        <div class="stepper-panel">
+          <div class="stepper-content">
             ${this.usedSubTemplate
               ? this.usedSubTemplate
-            : html`<dees-spinner size="60"></dees-spinner>`}
+              : html`<div class="spinner-container"><dees-spinner size="60"></dees-spinner></div>`}
+          </div>
         </div>
       </div>
     `;
@@ -310,4 +506,12 @@ export class IdpRegistrationStepper extends DeesElement {
     ></dees-stepper>`;
     await this.domtools.convenience.smartdelay.delayFor(100);
   }
+
+  public async show() {
+    await this.updateComplete;
+  }
+
+  public async hide() {
+    await this.updateComplete;
+  }
 }