fix(core): Update dependencies and refactor registration process
This commit is contained in:
@@ -14,7 +14,6 @@ import {
|
||||
|
||||
@customElement('idp-registration-stepper')
|
||||
export class IdpRegistrationStepper extends DeesElement {
|
||||
|
||||
@state()
|
||||
private usedSubTemplate: TemplateResult;
|
||||
|
||||
@@ -67,230 +66,222 @@ export class IdpRegistrationStepper extends DeesElement {
|
||||
public async firstUpdated() {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
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 idpState.idpClient.requests.afterRegistrationEmailClicked
|
||||
.fire({
|
||||
token: this.storedData.validationTokenUrlParam,
|
||||
})
|
||||
.catch(
|
||||
(
|
||||
err: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
|
||||
) => {
|
||||
tokenErrorMessage = err.errorText;
|
||||
return;
|
||||
}
|
||||
);
|
||||
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`
|
||||
You need a validation token, but we couldn't find one. Please contact workspace.global
|
||||
support.
|
||||
`;
|
||||
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;
|
||||
}
|
||||
);
|
||||
|
||||
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;
|
||||
}
|
||||
console.log(resAfterRegEmailClicked);
|
||||
|
||||
// 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 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 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 idpState.idpClient.requests.mobileNumberVerification.fire({
|
||||
token: this.storedData.validationTokenUrlParam,
|
||||
verificationCode: eventArg.detail.data.verificationCode,
|
||||
});
|
||||
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);
|
||||
idpState.domtools.router.pushUrl('/');
|
||||
return;
|
||||
} else {
|
||||
this.storedData.email = resAfterRegEmailClicked.email;
|
||||
}
|
||||
|
||||
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 idpState.idpClient.requests.setData.fire({
|
||||
// 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 idpState.idpClient.requests.setData
|
||||
.fire({
|
||||
token: this.storedData.validationTokenUrlParam,
|
||||
userData: {
|
||||
username: null,
|
||||
email: null,
|
||||
name: null,
|
||||
name: `${eventArg.detail.data.firstName} ${eventArg.detail.data.lastName}`,
|
||||
connectedOrgs: null,
|
||||
email: null,
|
||||
status: null,
|
||||
password: eventArg.detail.data.password,
|
||||
username: null,
|
||||
},
|
||||
});
|
||||
const finishRegistrationResponse =
|
||||
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,
|
||||
})
|
||||
.catch(
|
||||
(
|
||||
errArg: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
|
||||
) => {
|
||||
deesForm.setStatus('error', errArg.errorText);
|
||||
}
|
||||
);
|
||||
this.storedData.refreshToken = loginResponse.refreshToken;
|
||||
|
||||
deesForm.setStatus('pending', 'Obtaining JWT...');
|
||||
const jwtResponse = await idpState.idpClient.requests.obtainJwt.fire({
|
||||
refreshToken: this.storedData.refreshToken,
|
||||
});
|
||||
|
||||
deesForm.setStatus('pending', 'Obtaining Transfer Token...');
|
||||
await idpState.idpClient.setJwt(jwtResponse.jwt);
|
||||
await idpState.idpClient.getTransferTokenAndSwitchToLocation('https://sso.workspace.global/afterregistration');
|
||||
});
|
||||
},
|
||||
deesForm.setStatus('success', 'ok!');
|
||||
stepperArg.goNext();
|
||||
});
|
||||
},
|
||||
] 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();
|
||||
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 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 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 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 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,
|
||||
});
|
||||
this.storedData.refreshToken = loginResponse.refreshToken;
|
||||
|
||||
deesForm.setStatus('pending', 'Obtaining JWT...');
|
||||
const jwtResponse = await idpState.idpClient.requests.obtainJwt.fire({
|
||||
refreshToken: this.storedData.refreshToken,
|
||||
});
|
||||
|
||||
deesForm.setStatus('pending', 'Obtaining Transfer Token...');
|
||||
await idpState.idpClient.setJwt(jwtResponse.jwt);
|
||||
await idpState.idpClient.getTransferTokenAndSwitchToLocation(
|
||||
'https://sso.workspace.global/afterregistration'
|
||||
);
|
||||
});
|
||||
},
|
||||
},
|
||||
] as plugins.deesCatalog.IStep[]}
|
||||
></dees-stepper>`;
|
||||
await this.domtools.convenience.smartdelay.delayFor(100);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user