idp.global/app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): Added logging for user email login process and fixed client URL parsing

Browse Source
This commit is contained in:
Philipp Kunz
2024-10-04 02:18:47 +02:00
parent 833b5e0a84
commit 9e2d45123f
18 changed files with 1351 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts_web/00_commitinfo_data.ts
+1 -1
View File
@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@idp.global/idp.global',
version: '1.2.0',
version: '1.2.1',
description: 'An identity provider software managing user authentications, registrations, and sessions.'
}
ts_web/elements/idp-logincontainer.ts
+6 -141
View File
@@ -12,6 +12,7 @@ import {
} from '@design.estate/dees-element';
import { commitinfo } from '../../dist_ts/00_commitinfo_data.js';
import { IdpState } from '../idp.state.js';
declare global {
interface HTMLElementTagNameMap {
@@ -23,23 +24,6 @@ declare global {
export class IdpLogincontainer extends DeesElement {
public static demo = () => html`<idp-logincontainer></idp-logincontainer>`;
@query('.loginPromptContainer')
loginPromptContainer: HTMLDivElement;
@query('.loginManagerContainer')
loginManagerContainer: HTMLDivElement
@query('.transferManagerContainer')
transferManagerContainer: HTMLDivElement
public receptionClient = new plugins.idpClient.IdpClient('https://reception.lossless.one:443', {
appUrl: 'https://sso.workspace.global/',
description: 'the central sso app for workspace.global',
logoUrl: 'https://assetbroker.lossless.one/some',
name: 'sso.workspace.global',
id: null,
});
constructor() {
super();
}
@@ -69,19 +53,7 @@ export class IdpLogincontainer extends DeesElement {
pointer-events: none;
}
.loginPromptContainer.show {
opacity: 1;
pointer-events: all;
transform: translate3d(0px, 0px, 0px);
}
.loginManagerContainer.show {
opacity: 1;
pointer-events: all;
transform: translate3d(0px, 0px, 0px);
}
.transferManagerContainer.show {
.mainContainer.show {
opacity: 1;
pointer-events: all;
transform: translate3d(0px, 0px, 0px);
@@ -131,7 +103,7 @@ export class IdpLogincontainer extends DeesElement {
render() {
return html`
<div class="mainContainer loginPromptContainer">
<div class="mainContainer">
<div class="loginblock">
<h1>idp.global</h1>
<div class="contentSpacer">
@@ -145,120 +117,13 @@ export class IdpLogincontainer extends DeesElement {
</div>
</div>
</div>
<div class="mainContainer loginManagerContainer">
<div class="loginblock">
<img
src="https://assetbroker.lossless.one/brandfiles/00general/plain_workspaceglobal.svg"
/>
<div class="legalinfo">
<a href="https://legal.task.vc/" target="_blank">Legal Info</a>
| <a href="https://task.vc/" target="_blank">Company Website</a>
| <a href="https://support.task.vc/" target="_blank">Support</a>
| SSO v${commitinfo.version}
</div>
</div>
</div>
<div class="mainContainer transferManagerContainer">
<div class="loginblock">
<img
src="https://assetbroker.lossless.one/brandfiles/00general/plain_workspaceglobal.svg"
/>
<idp-transfermanager></idp-transfermanager>
<div class="legalinfo">
<a href="https://legal.task.vc/" target="_blank">Legal Info</a>
| <a href="https://task.vc/" target="_blank">Company Website</a>
| <a href="https://support.task.vc/" target="_blank">Support</a>
| SSO v${commitinfo.version}
</div>
</div>
</div>
`;
}
public async showComponent(componentNameArg: 'loginPrompt' | 'loginManager' | 'transferManager') {
const domtoolsInstance = await this.domtoolsPromise;
const containerItems: HTMLDivElement[] = [
this.loginPromptContainer,
this.loginManagerContainer,
this.transferManagerContainer,
];
const show = async (itemArg: HTMLDivElement) => {
for (const containerItem of containerItems) {
if (containerItem !== itemArg) {
containerItem.classList.remove('show');
}
}
await domtoolsInstance.convenience.smartdelay.delayFor(200);
itemArg.classList.add('show');
await domtoolsInstance.convenience.smartdelay.delayFor(200);
};
switch (componentNameArg) {
case 'loginPrompt':
await show(this.loginPromptContainer);
break;
case 'loginManager':
await show(this.loginManagerContainer);
break;
case 'transferManager':
await show(this.transferManagerContainer);
break;
}
}
public async determineNextAction() {
const domtoolsInstance = await this.domtoolsPromise;
let action: plugins.idpInterfaces.data.TLoginAction;
if (domtoolsInstance.router.queryParams.getQueryParam('action')) {
action = domtoolsInstance.router.queryParams.getQueryParam('action');
}
if (window.location.pathname === '/afterregistration') {
await this.domtools.convenience.smartdelay.delayFor(1000);
await this.receptionClient.determineLoginStatus();
await this.receptionClient.getTransferTokenAndSwitchToLocation('https://account.workspace.global')
} else if (!(await this.receptionClient.determineLoginStatus()) && action === 'login') {
this.showComponent('loginPrompt');
} else if ((await this.receptionClient.determineLoginStatus()) && action === 'login') {
await this.showComponent('transferManager');
const wgTransferManager = this.shadowRoot.querySelector('idp-transfermanager');
await wgTransferManager.handleTransfer();
} else if ((await this.receptionClient.determineLoginStatus()) && action === 'manage') {
this.showComponent('loginManager');
} else if (action === 'logout') {
console.log('logging out, since requested action is "logout"');
await this.receptionClient.logout();
} else {
this.showComponent('loginPrompt');
}
}
public async firstUpdated() {
const domtoolsInstance = await this.domtoolsPromise;
await domtoolsInstance.convenience.smartdelay.delayFor(0);
console.log(`your are loggedin: ${await await this.receptionClient.determineLoginStatus()}`);
let appData: plugins.idpInterfaces.data.IApp;
if (domtoolsInstance.router.queryParams.getQueryParam('appdata')) {
appData = domtoolsInstance.convenience.smartjson.parseBase64(
domtoolsInstance.router.queryParams.getQueryParam('appdata')
);
}
const idpLogin = this.shadowRoot.querySelector('idp-login');
const idpTransferManager = this.shadowRoot.querySelector('idp-transfermanager');
idpLogin.appData = appData;
idpTransferManager.appData = appData;
await this.determineNextAction();
idpLogin.jwtObserable.subscribe({
next: async (jwtArg) => {
console.log('loggedIn');
await this.receptionClient.storeJwt(jwtArg);
await this.determineNextAction();
},
requestAnimationFrame(async () => {
this.shadowRoot.querySelector('.mainContainer').classList.add('show');
this.shadowRoot.querySelector('idp-login').focus();
});
idpLogin.dispatchJwt();
}
}
ts_web/elements/idp-loginprompt.ts
+7 -26
View File
@@ -122,12 +122,12 @@ export class IdpLogin extends DeesElement {
const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
const loginRequestWithUsernameAndPassword =
new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
IdpLogin.receptionUrl,
'/typedrequest',
'loginWithEmailOrUsernameAndPassword'
);
const loginRequestWithEmail =
new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmail>(
IdpLogin.receptionUrl,
'/typedrequest',
'loginWithEmail'
);
@@ -168,29 +168,6 @@ export class IdpLogin extends DeesElement {
}
};
private register = async (valueArg: { emailAddress: string }) => {
const registrationForm: DeesForm = this.shadowRoot.querySelector('#registrationForm');
registrationForm.setStatus('pending', 'registering...');
const firstSignupRequest =
new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_FirstRegistration>(
IdpLogin.receptionUrl,
'firstRegistrationRequest'
);
const response = await firstSignupRequest
.fire({
email: valueArg.emailAddress,
productSlugOfInterest: this.productOfInterest,
})
.catch((err) => {
registrationForm.setStatus('error', err.message);
return null;
});
if (response.status === 'ok') {
registrationForm.setStatus('success', 'Please check your email!');
}
console.log(response);
};
public async dispatchJwt(jwtArg?: string) {
if (jwtArg !== undefined) {
console.log(`dispatching jwt from loginprompt.`);
@@ -211,7 +188,7 @@ export class IdpLogin extends DeesElement {
// a refreshToken binds dierctly to a session.
// the refresh token is used on a continuous basis to get fresh and short-lived jwts
const refreshJwt = new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_RefreshJwt>(
IdpLogin.receptionUrl,
'/typedrequest',
'refreshJwt'
);
const responseJwt = await refreshJwt.fire({
@@ -227,4 +204,8 @@ export class IdpLogin extends DeesElement {
return null;
}
}
public async focus() {
(this.shadowRoot.querySelector('#loginEmailInput') as plugins.deesCatalog.DeesInputText).focus();
}
}
ts_web/elements/idp-registration-stepper.ts
+11 -11
View File
@@ -14,7 +14,6 @@ import {
@customElement('idp-registration-stepper')
export class IdpRegistrationStepper extends DeesElement {
public idpState = IdpState.getSingletonInstance();
@state()
private usedSubTemplate: TemplateResult;
@@ -66,6 +65,7 @@ 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;
@@ -82,7 +82,7 @@ export class IdpRegistrationStepper extends DeesElement {
// lets verify the info;
let tokenErrorMessage: string;
const resAfterRegEmailClicked =
await this.idpState.idpClient.requests.afterRegistrationEmailClicked
await idpState.idpClient.requests.afterRegistrationEmailClicked
.fire({
token: this.storedData.validationTokenUrlParam,
})
@@ -130,7 +130,7 @@ export class IdpRegistrationStepper extends DeesElement {
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
const response = await idpState.idpClient.requests.setData
.fire({
token: this.storedData.validationTokenUrlParam,
userData: {
@@ -172,7 +172,7 @@ export class IdpRegistrationStepper extends DeesElement {
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
const response = await idpState.idpClient.requests.mobileNumberVerification
.fire({
token: this.storedData.validationTokenUrlParam,
mobileNumber: eventArg.detail.data.mobileNumber,
@@ -208,7 +208,7 @@ export class IdpRegistrationStepper extends DeesElement {
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({
const response = await idpState.idpClient.requests.mobileNumberVerification.fire({
token: this.storedData.validationTokenUrlParam,
verificationCode: eventArg.detail.data.verificationCode,
});
@@ -244,7 +244,7 @@ export class IdpRegistrationStepper extends DeesElement {
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({
const response = await idpState.idpClient.requests.setData.fire({
token: this.storedData.validationTokenUrlParam,
userData: {
username: null,
@@ -256,13 +256,13 @@ export class IdpRegistrationStepper extends DeesElement {
},
});
const finishRegistrationResponse =
await this.idpState.idpClient.requests.finishRegistration.fire({
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 this.idpState.idpClient.requests.loginWithUserNameAndPassword.fire(
const loginResponse = await idpState.idpClient.requests.loginWithUserNameAndPassword.fire(
{
username: this.storedData.email,
password: eventArg.detail.data.password,
@@ -271,13 +271,13 @@ export class IdpRegistrationStepper extends DeesElement {
this.storedData.refreshToken = loginResponse.refreshToken;
deesForm.setStatus('pending', 'Obtaining JWT...');
const jwtResponse = await this.idpState.idpClient.requests.obtainJwt.fire({
const jwtResponse = await 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');
await idpState.idpClient.setJwt(jwtResponse.jwt);
await idpState.idpClient.getTransferTokenAndSwitchToLocation('https://sso.workspace.global/afterregistration');
});
},
},
ts_web/elements/idp-welcome.ts
+4 -2
View File
@@ -12,6 +12,7 @@ import {
type TemplateResult,
} from '@design.estate/dees-element';
import type { IdpViewcontainer } from '../views/viewcontainer.js';
import { IdpState } from '../idp.state.js';
@customElement('idp-welcome')
export class IdpWelcome extends DeesElement {
@@ -65,8 +66,9 @@ export class IdpWelcome extends DeesElement {
<div class="textbox">
Do you want to sign in or register?
<dees-button @click=${() => {
this.viewContainer.loadElement(elements.IdpLogincontainer);
<dees-button @click=${async () => {
const idpState = await IdpState.getSingletonInstance();
idpState.domtools.router.pushUrl('/login');
}}>Sign In</dees-button>
<dees-button @click=${() => {}}>Register</dees-button>
</div>
ts_web/elements/index.ts
+1
View File
@@ -1,5 +1,6 @@
export * from './idp-registration-stepper.js';
export * from './idp-logincontainer.js';
export * from './idp-loginprompt.js';
export * from './idp-registerprompt.js';
export * from './idp-transfermanager.js';
export * from './idp-welcome.js';
ts_web/idp.state.ts
+43 -6
View File
@@ -1,17 +1,54 @@
import * as plugins from './plugins.js';
import { domtools } from '@design.estate/dees-element'
export class IdpState {
// STATIC
public static getSingletonInstance() {
if (!this.instance) {
this.instance = new IdpState();
private static idpStateDeferred = plugins.smartpromise.defer<IdpState>();
public static async getSingletonInstance() {
if (!this.idpStateDeferred.claimed) {
this.idpStateDeferred.claim();
const newIdpState = new IdpState();
await newIdpState.init();
this.idpStateDeferred.resolve(newIdpState);
}
return this.instance;
return this.idpStateDeferred.promise;
}
private static instance: IdpState;
// INSTANCE
public receptionUrl = 'https://reception.lossless.one/typedrequest';
public idpClient = new plugins.idpClient.IdpClient(this.receptionUrl);
public domtools: domtools.DomTools;
public mainStatePart: plugins.deesDomtools.plugins.smartstate.StatePart<'main', {
view: 'welcome' | 'login' | 'register';
}>
public async init() {
const domtoolsInstance = await domtools.DomTools.setupDomTools();
this.domtools = domtoolsInstance;
const state = new plugins.deesDomtools.plugins.smartstate.Smartstate<'main'>();
this.mainStatePart = await state.getStatePart('main', {
view: 'welcome',
}, 'soft');
this.domtools.router.on('/', async () => {
await this.mainStatePart.setState({
...this.mainStatePart.getState(),
view: 'welcome',
})
});
this.domtools.router.on('/login', async () => {
await this.mainStatePart.setState({
...this.mainStatePart.getState(),
view: 'login',
})
});
this.domtools.router.on('/register', async () => {
await this.mainStatePart.setState({
...this.mainStatePart.getState(),
view: 'register',
})
});
this.domtools.router._handleRouteState();
}
}
ts_web/index.ts
-2
View File
@@ -58,8 +58,6 @@ const run = async () => {
render(mainTemplate, document.body);
const viewContainer: IdpViewcontainer = document.querySelector('idp-viewcontainer');
viewContainer.loadElement(IdpWelcome);
};
ts_web/plugins.ts
+8 -1
View File
@@ -13,6 +13,13 @@ export { typedrequest };
// @design.estate scope
import * as deesCatalog from '@design.estate/dees-catalog';
import * as deesDomtools from '@design.estate/dees-domtools';
import * as deesElement from '@design.estate/dees-element';
export { deesCatalog, deesElement };
export { deesCatalog, deesDomtools, deesElement };
// @push.rocks scope
import * as smartpromise from '@push.rocks/smartpromise';
import * as smarturl from '@push.rocks/smarturl';
export { smartpromise, smarturl };
ts_web/views/viewcontainer.ts
+26 -5
View File
@@ -1,4 +1,6 @@
import { IdpState } from '../idp.state.js';
import * as plugins from '../plugins.js';
import * as elements from '../elements/index.js';
import {
customElement,
@@ -32,21 +34,20 @@ export class IdpViewcontainer extends DeesElement {
min-width: 100vh;
min-height: 100vh;
}
`,
`,
];
public render(): TemplateResult {
return html`
<style></style>
<div class="viewContainer">
</div>
<div class="viewContainer"></div>
`;
}
public currentElement: plugins.deesElement.DeesElement;
public async loadElement(viewElement: typeof plugins.deesElement.DeesElement) {
const idpState = await IdpState.getSingletonInstance();
// Wait until the viewContainer itself is rendered
await this.updateComplete;
@@ -74,4 +75,24 @@ export class IdpViewcontainer extends DeesElement {
// Set the new element as the current element
this.currentElement = newElement;
}
public async firstUpdated() {
const idpState = await IdpState.getSingletonInstance();
idpState.mainStatePart
.select((stateArg) => stateArg.view)
.subscribe(async (viewArg) => {
switch (viewArg) {
case 'welcome':
await this.loadElement(elements.IdpWelcome);
break;
case 'login':
console.log('now on /login');
await this.loadElement(elements.IdpLogincontainer);
break;
case 'register':
await this.loadElement(elements.IdpRegistrationPrompt);
break;
}
});
}
}