initial
This commit is contained in:
@@ -0,0 +1,296 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user