517 lines
16 KiB
TypeScript
517 lines
16 KiB
TypeScript
import { IdpState } from '../states/idp.state.js';
|
|
import * as plugins from '../plugins.js';
|
|
import {
|
|
customElement,
|
|
DeesElement,
|
|
property,
|
|
state,
|
|
html,
|
|
cssManager,
|
|
unsafeCSS,
|
|
css,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
|
|
@customElement('idp-registration-stepper')
|
|
export class IdpRegistrationStepper extends DeesElement {
|
|
@state()
|
|
accessor usedSubTemplate: TemplateResult;
|
|
|
|
@state()
|
|
accessor storedData = {
|
|
validationTokenUrlParam: 'string',
|
|
email: '',
|
|
refreshToken: '',
|
|
jwt: '',
|
|
oneTimeTransferToken: '',
|
|
};
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
--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%);
|
|
|
|
font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.split-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
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;
|
|
}
|
|
|
|
.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="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`<div class="spinner-container"><dees-spinner size="60"></dees-spinner></div>`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
public async firstUpdated() {
|
|
const idpState = await IdpState.getSingletonInstance();
|
|
await this.domtoolsPromise;
|
|
const parsedUrl = plugins.smarturl.Smarturl.createFromUrl(window.location.href);
|
|
this.storedData.validationTokenUrlParam = parsedUrl.searchParams['validationtoken'];
|
|
console.log(`validationToken is ${this.storedData.validationTokenUrlParam}`);
|
|
if (!this.storedData.validationTokenUrlParam) {
|
|
this.usedSubTemplate = html`
|
|
<div class="error-message">
|
|
You need a validation token, but we couldn't find one.<br/>
|
|
Please contact support for assistance.
|
|
</div>
|
|
`;
|
|
await this.domtools.convenience.smartdelay.delayFor(5000);
|
|
window.location.href = '/';
|
|
return;
|
|
}
|
|
// lets verify the info;
|
|
let tokenErrorMessage: string;
|
|
const resAfterRegEmailClicked = await idpState.idpClient.requests.afterRegistrationEmailClicked
|
|
.fire({
|
|
token: this.storedData.validationTokenUrlParam,
|
|
})
|
|
.catch(
|
|
(
|
|
err: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
|
|
) => {
|
|
tokenErrorMessage = err.errorText;
|
|
return;
|
|
}
|
|
);
|
|
|
|
console.log(resAfterRegEmailClicked);
|
|
|
|
if (!resAfterRegEmailClicked || !resAfterRegEmailClicked.email) {
|
|
this.usedSubTemplate = html`
|
|
<div class="error-message">
|
|
The supplied validation token does not match any registration sessions.<br/>
|
|
${tokenErrorMessage ? html`<br/>Reason: ${tokenErrorMessage}` : null}
|
|
</div>
|
|
`;
|
|
await this.domtools.convenience.smartdelay.delayFor(5000);
|
|
idpState.domtools.router.pushUrl('/');
|
|
return;
|
|
} else {
|
|
this.storedData.email = resAfterRegEmailClicked.email;
|
|
}
|
|
|
|
// lets continue with UI
|
|
this.usedSubTemplate = html`<dees-stepper
|
|
.steps=${[
|
|
{
|
|
title: 'What is your name?',
|
|
content: html`
|
|
<dees-form>
|
|
<dees-input-text
|
|
key="email"
|
|
label="Your Email"
|
|
value="${this.storedData.email}"
|
|
disabled
|
|
></dees-input-text>
|
|
<dees-input-text key="firstName" required label="First Name"></dees-input-text>
|
|
<dees-input-text key="lastName" required label="Last Name"></dees-input-text>
|
|
<dees-form-submit>Next</dees-form-submit>
|
|
</dees-form>
|
|
`,
|
|
validationFunc: async (stepperArg, elementArg, signal) => {
|
|
const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
|
|
deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
|
|
await idpState.idpClient.requests.setData
|
|
.fire({
|
|
token: this.storedData.validationTokenUrlParam,
|
|
userData: {
|
|
name: `${eventArg.detail.data.firstName} ${eventArg.detail.data.lastName}`,
|
|
connectedOrgs: null,
|
|
email: null,
|
|
status: null,
|
|
username: null,
|
|
},
|
|
})
|
|
.catch(
|
|
(
|
|
errArg: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
|
|
) => {
|
|
deesForm.setStatus('error', errArg.errorText);
|
|
}
|
|
);
|
|
deesForm.setStatus('success', 'ok!');
|
|
stepperArg.goNext();
|
|
}, { signal });
|
|
},
|
|
onReturnToStepFunc: async (stepperArg, stepElementArg) => {
|
|
const deesForm = stepElementArg.querySelector('dees-form');
|
|
deesForm.setStatus('normal', 'Edit and Next');
|
|
},
|
|
},
|
|
{
|
|
title: 'What is your mobile number?',
|
|
content: html`
|
|
<dees-form>
|
|
<dees-input-text
|
|
key="mobileNumber"
|
|
required
|
|
label="Your Mobile Number"
|
|
></dees-input-text>
|
|
<dees-form-submit>Next</dees-form-submit>
|
|
</dees-form>
|
|
`,
|
|
validationFunc: async (stepperArg, elementArg, signal) => {
|
|
const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
|
|
deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
|
|
await idpState.idpClient.requests.mobileNumberVerification
|
|
.fire({
|
|
token: this.storedData.validationTokenUrlParam,
|
|
mobileNumber: eventArg.detail.data.mobileNumber,
|
|
})
|
|
.catch(
|
|
(
|
|
errArg: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
|
|
) => {
|
|
deesForm.setStatus('error', errArg.errorText);
|
|
}
|
|
);
|
|
deesForm.setStatus('success', 'ok!');
|
|
stepperArg.goNext();
|
|
}, { signal });
|
|
},
|
|
onReturnToStepFunc: async (stepperArg, stepElementArg) => {
|
|
const deesForm = stepElementArg.querySelector('dees-form');
|
|
deesForm.setStatus('normal', 'Edit and Next');
|
|
},
|
|
},
|
|
{
|
|
title: 'What is the Verification Code?',
|
|
content: html`
|
|
<dees-form>
|
|
<dees-input-text
|
|
key="verificationCode"
|
|
required
|
|
label="Verification Code"
|
|
></dees-input-text>
|
|
<dees-form-submit>Next</dees-form-submit>
|
|
</dees-form>
|
|
`,
|
|
validationFunc: async (stepperArg, elementArg, signal) => {
|
|
const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
|
|
deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
|
|
const response = await idpState.idpClient.requests.mobileNumberVerification.fire({
|
|
token: this.storedData.validationTokenUrlParam,
|
|
verificationCode: eventArg.detail.data.verificationCode,
|
|
});
|
|
|
|
if (response.verficationCodeOk) {
|
|
deesForm.setStatus('success', 'ok!');
|
|
stepperArg.goNext();
|
|
} else {
|
|
deesForm.setStatus('error', 'wrong code!');
|
|
await this.domtools.convenience.smartdelay.delayFor(3000);
|
|
deesForm.setStatus('normal', 'Retry And Next!');
|
|
}
|
|
}, { signal });
|
|
},
|
|
onReturnToStepFunc: async (stepperArg, stepElementArg) => {
|
|
stepperArg.goBack();
|
|
const deesForm = stepElementArg.querySelector('dees-form');
|
|
deesForm.setStatus('normal', 'Next');
|
|
},
|
|
},
|
|
{
|
|
title: 'Create a secure password:',
|
|
content: html`
|
|
<dees-form>
|
|
<dees-input-text
|
|
key="password"
|
|
required
|
|
label="Your New Secure Password"
|
|
></dees-input-text>
|
|
<dees-form-submit>Next</dees-form-submit>
|
|
</dees-form>
|
|
`,
|
|
validationFunc: async (stepperArg, elementArg, signal) => {
|
|
const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
|
|
deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
|
|
await idpState.idpClient.requests.setData.fire({
|
|
token: this.storedData.validationTokenUrlParam,
|
|
userData: {
|
|
username: null,
|
|
email: null,
|
|
name: null,
|
|
connectedOrgs: null,
|
|
status: null,
|
|
password: eventArg.detail.data.password,
|
|
},
|
|
});
|
|
await idpState.idpClient.requests.finishRegistration.fire({
|
|
token: this.storedData.validationTokenUrlParam,
|
|
});
|
|
deesForm.setStatus('pending', 'User created!');
|
|
await this.domtools.convenience.smartdelay.delayFor(500);
|
|
deesForm.setStatus('pending', 'Obtaining Refresh Token...');
|
|
const loginResponse =
|
|
await idpState.idpClient.requests.loginWithUserNameAndPassword.fire({
|
|
username: this.storedData.email,
|
|
password: eventArg.detail.data.password,
|
|
});
|
|
deesForm.setStatus('pending', 'Obtaining JWT...');
|
|
const jwt = await idpState.idpClient.refreshJwt(loginResponse.refreshToken);
|
|
|
|
if (!jwt) {
|
|
deesForm.setStatus('error', 'Failed to establish a login session.');
|
|
return;
|
|
}
|
|
|
|
deesForm.setStatus('success', 'Ok! Lets Go!');
|
|
idpState.domtools.router.pushUrl('/dash/overview');
|
|
}, { signal });
|
|
},
|
|
},
|
|
] as plugins.deesCatalog.IStep[]}
|
|
></dees-stepper>`;
|
|
await this.domtools.convenience.smartdelay.delayFor(100);
|
|
}
|
|
|
|
public async show() {
|
|
await this.updateComplete;
|
|
}
|
|
|
|
public async hide() {
|
|
await this.updateComplete;
|
|
}
|
|
}
|