297 lines
11 KiB
TypeScript
297 lines
11 KiB
TypeScript
|
import { IdpState } from '../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 {
|
||
|
|
public idpState = IdpState.getSingletonInstance();
|
||
|
|
|
||
|
|
@state()
|
||
|
|
private usedSubTemplate: TemplateResult;
|
||
|
|
|
||
|
|
@state()
|
||
|
|
private storedData = {
|
||
|
|
validationTokenUrlParam: 'string',
|
||
|
|
email: '',
|
||
|
|
refreshToken: '',
|
||
|
|
jwt: '',
|
||
|
|
oneTimeTransferToken: '',
|
||
|
|
};
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
}
|
||
|
|
|
||
|
|
public static styles = [
|
||
|
|
cssManager.defaultStyles,
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: block;
|
||
|
|
height: 100px;
|
||
|
|
color: ${cssManager.bdTheme('#333', '#fff')};
|
||
|
|
}
|
||
|
|
|
||
|
|
.main {
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
right: 0px;
|
||
|
|
left: 0px;
|
||
|
|
bottom: 0px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
];
|
||
|
|
|
||
|
|
public render(): TemplateResult {
|
||
|
|
return html`
|
||
|
|
<style></style>
|
||
|
|
<div class="main">
|
||
|
|
${this.usedSubTemplate
|
||
|
|
? this.usedSubTemplate
|
||
|
|
: html`<dees-spinner size="60"></dees-spinner>`}
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
public async firstUpdated() {
|
||
|
|
await this.domtoolsPromise;
|
||
|
|
this.domtools.router.on(`/finishregistration`, async (routeArg) => {
|
||
|
|
this.storedData.validationTokenUrlParam = routeArg.queryParams.validationtoken;
|
||
|
|
if (!this.storedData.validationTokenUrlParam) {
|
||
|
|
this.usedSubTemplate = html`
|
||
|
|
You need a validation token, but we couldn't find one. Please contact workspace.global support.
|
||
|
|
`;
|
||
|
|
await this.domtools.convenience.smartdelay.delayFor(5000);
|
||
|
|
this.usedSubTemplate = html` Redirecting you to workspace.global support... `;
|
||
|
|
await this.domtools.convenience.smartdelay.delayFor(2000);
|
||
|
|
window.location.href = 'https://support.workspace.global';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// lets verify the info;
|
||
|
|
let tokenErrorMessage: string;
|
||
|
|
const resAfterRegEmailClicked =
|
||
|
|
await this.idpState.idpClient.requests.afterRegistrationEmailClicked
|
||
|
|
.fire({
|
||
|
|
token: this.storedData.validationTokenUrlParam,
|
||
|
|
})
|
||
|
|
.catch(
|
||
|
|
(
|
||
|
|
err: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
|
||
|
|
) => {
|
||
|
|
tokenErrorMessage = err.errorText;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
if (!resAfterRegEmailClicked || !resAfterRegEmailClicked.email) {
|
||
|
|
this.usedSubTemplate = html`
|
||
|
|
the supplied validation token does not match any registration sessions.<br />
|
||
|
|
${tokenErrorMessage ? html`Reason: ${tokenErrorMessage}` : null}
|
||
|
|
`;
|
||
|
|
await this.domtools.convenience.smartdelay.delayFor(5000);
|
||
|
|
this.usedSubTemplate = html`redirecting you for further support... `;
|
||
|
|
await this.domtools.convenience.smartdelay.delayFor(1000);
|
||
|
|
window.location.href = 'https://support.workspace.global';
|
||
|
|
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) => {
|
||
|
|
const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
|
||
|
|
deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
|
||
|
|
const response = await this.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();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
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) => {
|
||
|
|
const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
|
||
|
|
deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
|
||
|
|
const response = await this.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();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
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) => {
|
||
|
|
const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
|
||
|
|
deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
|
||
|
|
const response = await this.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!');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
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) => {
|
||
|
|
const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
|
||
|
|
deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
|
||
|
|
const response = await this.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,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const finishRegistrationResponse =
|
||
|
|
await this.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 this.idpState.idpClient.requests.loginWithUserNameAndPassword.fire(
|
||
|
|
{
|
||
|
|
username: this.storedData.email,
|
||
|
|
password: eventArg.detail.data.password,
|
||
|
|
}
|
||
|
|
);
|
||
|
|
this.storedData.refreshToken = loginResponse.refreshToken;
|
||
|
|
|
||
|
|
deesForm.setStatus('pending', 'Obtaining JWT...');
|
||
|
|
const jwtResponse = await this.idpState.idpClient.requests.obtainJwt.fire({
|
||
|
|
refreshToken: this.storedData.refreshToken,
|
||
|
|
});
|
||
|
|
|
||
|
|
deesForm.setStatus('pending', 'Obtaining Transfer Token...');
|
||
|
|
await this.idpState.idpClient.setJwt(jwtResponse.jwt);
|
||
|
|
await this.idpState.idpClient.getTransferTokenAndSwitchToLocation('https://sso.workspace.global/afterregistration');
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
] as plugins.deesCatalog.IStep[]}
|
||
|
|
></dees-stepper>`;
|
||
|
|
await this.domtools.convenience.smartdelay.delayFor(100);
|
||
|
|
});
|
||
|
|
this.domtools.router.on('/', async () => {
|
||
|
|
this.usedSubTemplate = html`Hm, this is app is not meant for what you are trying to do :) `;
|
||
|
|
await this.domtools.convenience.smartdelay.delayFor(2000);
|
||
|
|
this.usedSubTemplate = html`Redirecting you now...`;
|
||
|
|
window.location.href = `https://workspace.global`;
|
||
|
|
});
|
||
|
|
this.domtools.router._handleRouteState();
|
||
|
|
}
|
||
|
|
}
|