update
This commit is contained in:
+1
-4
@@ -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'),
|
||||
|
||||
@@ -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`
|
||||
<div class="main">
|
||||
<div class="stepper-container">
|
||||
<div class="split-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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user