diff --git a/ts/index.ts b/ts/index.ts index fdafd49..88ca382 100644 --- a/ts/index.ts +++ b/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'), - mongoDbName: await serviceQenv.getEnvVarOnDemand('MONGO_DB_NAME'), - mongoDbPass: await serviceQenv.getEnvVarOnDemand('MONGO_DB_PASS'), - mongoDbUrl: await serviceQenv.getEnvVarOnDemand('MONGO_DB_URL'), + mongoDbUrl: await serviceQenv.getEnvVarOnDemand('MONGODB_URL'), }, websiteServer: websiteServer, baseUrl: await serviceQenv.getEnvVarOnDemand('IDP_BASEURL'), diff --git a/ts_web/elements/idp-registration-stepper.ts b/ts_web/elements/idp-registration-stepper.ts index 2b90129..0fcf35d 100644 --- a/ts_web/elements/idp-registration-stepper.ts +++ b/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; - right: 0px; - left: 0px; - bottom: 0px; - display: flex; - justify-content: center; - align-items: center; + width: 100%; + height: 100%; background: var(--background); + color: var(--foreground); } - .stepper-container { + .split-container { + position: absolute; + top: 0; + left: 0; width: 100%; - max-width: 480px; - padding: 48px 24px; + height: 100%; + 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` -
-
- ${this.usedSubTemplate - ? this.usedSubTemplate - : html``} +
+ +
+
+

idp.global

+

Your permanent identity on the web

+ +
+
+
+ +
+
+

Open Source

+

Fully transparent, community-driven, no vendor lock-in

+
+
+ +
+
+ +
+
+

Always Free

+

Free for individuals and organizations. Paid support available for SLAs

+
+
+ +
+
+ +
+
+

Permanent Identity

+

One identity across all your applications

+
+
+
+ +
+ window.open('https://about.idp.global', '_blank')} + >Learn more +
+
+
+ + +
+
+ ${this.usedSubTemplate + ? this.usedSubTemplate + : html``} +
`; @@ -310,4 +506,12 @@ export class IdpRegistrationStepper extends DeesElement { >`; await this.domtools.convenience.smartdelay.delayFor(100); } + + public async show() { + await this.updateComplete; + } + + public async hide() { + await this.updateComplete; + } }