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();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
type TemplateResult,
|
||||
css,
|
||||
cssManager,
|
||||
query,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import { commitinfo } from '../../dist_ts/00_commitinfo_data.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'wg-logincontainer': IdpLogincontainer;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('idp-logincontainer')
|
||||
export class IdpLogincontainer extends DeesElement {
|
||||
public static demo = () => html`<wg-logincontainer></wg-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();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
transition-delay: 0.2s;
|
||||
transform: translate3d(0px, 20px, 0px);
|
||||
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 {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.loginblock {
|
||||
max-width: 520px;
|
||||
flex-grow: 1;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
background: ${cssManager.bdTheme('#ffffff', '#181818')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#333333')};
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 130px;
|
||||
min-height: 34.9px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 25px;
|
||||
filter: ${cssManager.bdTheme('invert(1)', '')};
|
||||
}
|
||||
|
||||
.legalinfo {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
margin-top: 10px;
|
||||
color: ${cssManager.bdTheme('#666', '#ccc')};
|
||||
font-size: 12px;
|
||||
line-height: 100%;
|
||||
padding: 8px;
|
||||
background: ${cssManager.bdTheme('#f5f5f5', '#111')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#ccc', '#222222')};
|
||||
font-family: 'Hubot Sans';
|
||||
color: ${cssManager.bdTheme('#666', '#888')};
|
||||
}
|
||||
|
||||
.legalinfo a {
|
||||
color: ${cssManager.bdTheme('#666', '#ccc')};
|
||||
text-decoration: none;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="mainContainer loginPromptContainer">
|
||||
<div class="loginblock">
|
||||
<img
|
||||
src="https://assetbroker.lossless.one/brandfiles/00general/plain_workspaceglobal.svg"
|
||||
/>
|
||||
<wg-loginprompt></wg-loginprompt>
|
||||
<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 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"
|
||||
/>
|
||||
<wg-transfermanager></wg-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('wg-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 wgLogin = this.shadowRoot.querySelector('wg-loginprompt');
|
||||
const wgTransferManager = this.shadowRoot.querySelector('wg-transfermanager');
|
||||
wgLogin.appData = appData;
|
||||
wgTransferManager.appData = appData;
|
||||
|
||||
await this.determineNextAction();
|
||||
wgLogin.jwtObserable.subscribe({
|
||||
next: async (jwtArg) => {
|
||||
console.log('loggedIn');
|
||||
await this.receptionClient.storeJwt(jwtArg);
|
||||
await this.determineNextAction();
|
||||
},
|
||||
});
|
||||
wgLogin.dispatchJwt();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,298 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
type TemplateResult,
|
||||
css,
|
||||
cssManager,
|
||||
state,
|
||||
domtools,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
// third party catalogs
|
||||
import '@uptimelink/webwidget';
|
||||
|
||||
import '@design.estate/dees-catalog';
|
||||
import { DeesForm, DeesFormSubmit, DeesInputText } from '@design.estate/dees-catalog';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'wg-loginprompt': WgLogin;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('wg-loginprompt')
|
||||
export class WgLogin extends DeesElement {
|
||||
public static demo = () => html`<wg-loginprompt></wg-loginprompt>`;
|
||||
public static receptionUrl = 'https://reception.lossless.one/typedrequest';
|
||||
|
||||
@property()
|
||||
public activePane: 'login' | 'register' = 'login';
|
||||
|
||||
@property()
|
||||
public productOfInterest: string;
|
||||
|
||||
@property()
|
||||
jwt: string;
|
||||
|
||||
@property({
|
||||
reflect: true,
|
||||
})
|
||||
appData: plugins.idpInterfaces.data.IApp;
|
||||
|
||||
public jwtObserable = new domtools.plugins.smartrx.rxjs.Subject<string>();
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.elementBasic.setup();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
color: ${cssManager.bdTheme('#333333', '#ffffff')};
|
||||
}
|
||||
|
||||
.box {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.box.active {
|
||||
opacity: 1 !important;
|
||||
height: 360px;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.loginbox {
|
||||
}
|
||||
|
||||
.registerbox {
|
||||
}
|
||||
|
||||
.boxcontent {
|
||||
margin: 0px 20px;
|
||||
}
|
||||
|
||||
.info {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
line-height: 1.5em;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.registerButton {
|
||||
display: block;
|
||||
transition: all 0.2s ease;
|
||||
will-change: transform;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.registerButton:hover {
|
||||
color: #fff;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="loginbox box ${this.activePane === 'login' ? 'active' : ''}">
|
||||
<div class="boxcontent">
|
||||
<dees-form
|
||||
id="loginForm"
|
||||
@formData="${(eventArg) => {
|
||||
this.login({
|
||||
emailAddress: eventArg.detail.data.emailAddress,
|
||||
passwordArg: eventArg.detail.data.password,
|
||||
});
|
||||
}}"
|
||||
>
|
||||
<dees-input-text
|
||||
id="loginEmailInput"
|
||||
.required=${true}
|
||||
key="emailAddress"
|
||||
label="Email-Address or Username"
|
||||
></dees-input-text>
|
||||
<dees-input-text
|
||||
.id=${'loginPasswordInput'}
|
||||
.key=${'password'}
|
||||
.label=${'Password'}
|
||||
.isPasswordBool=${true}
|
||||
></dees-input-text>
|
||||
<dees-form-submit id="loginSubmitButton"></dees-form-submit>
|
||||
<div class="info">
|
||||
You'll go here: ${this.appData ? html`${this.appData.appUrl}` : html``}
|
||||
<p><span class="registerButton" @click=${() => {this.activePane = 'register'}}>You can also register for a new account.</span></p>
|
||||
</div>
|
||||
</dees-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="registerbox box ${this.activePane === 'register' ? 'active' : ''}">
|
||||
<div class="boxcontent">
|
||||
<dees-form
|
||||
id="registrationForm"
|
||||
@formData="${(eventArg) => {
|
||||
this.register({
|
||||
emailAddress: eventArg.detail.data.emailAddress,
|
||||
});
|
||||
}}"
|
||||
>
|
||||
<dees-input-text
|
||||
.required=${true}
|
||||
key="emailAddress"
|
||||
label="Email-Address"
|
||||
></dees-input-text>
|
||||
<dees-input-checkbox .label="${'Agree to the Terms and Conditions'}"></dees-input-checkbox>
|
||||
<dees-form-submit>Send Verification Email</dees-form-submit>
|
||||
<div class="info">
|
||||
Already have an account?
|
||||
<p><span class="registerButton" @click=${() => {this.activePane = 'login'}}>Login instead.</span></p>
|
||||
</div>
|
||||
</dees-form>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
|
||||
const loginPasswordInput: DeesInputText = loginForm.querySelector('#loginPasswordInput');
|
||||
const loginSubmitButton: DeesFormSubmit = loginForm.querySelector('#loginSubmitButton');
|
||||
const setButtonText = async () => {
|
||||
if (loginPasswordInput.value) {
|
||||
console.log('updating text of loginprompt.')
|
||||
loginSubmitButton.text = 'Login';
|
||||
} else {
|
||||
loginSubmitButton.text = 'Send magic link (or enter password)';
|
||||
}
|
||||
};
|
||||
loginForm.changeSubject.subscribe(() => {
|
||||
console.log(`checking button text ${loginPasswordInput.value}`);
|
||||
setButtonText();
|
||||
});
|
||||
setButtonText();
|
||||
}
|
||||
|
||||
private login = async (valueArg: { emailAddress: string; passwordArg: string }) => {
|
||||
// lets define the needed requests
|
||||
const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
|
||||
const loginRequestWithUsernameAndPassword =
|
||||
new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
|
||||
WgLogin.receptionUrl,
|
||||
'loginWithEmailOrUsernameAndPassword'
|
||||
);
|
||||
const loginRequestWithEmail =
|
||||
new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmail>(
|
||||
WgLogin.receptionUrl,
|
||||
'loginWithEmail'
|
||||
);
|
||||
|
||||
// lets do the actual logging in
|
||||
if (valueArg.emailAddress && valueArg.passwordArg) {
|
||||
loginForm.setStatus('pending', 'logging in...');
|
||||
const response = await loginRequestWithUsernameAndPassword
|
||||
.fire({
|
||||
username: valueArg.emailAddress, // TODO: rename to emailAddress
|
||||
password: valueArg.passwordArg,
|
||||
})
|
||||
.catch(() => {
|
||||
loginForm.setStatus('error', 'could not log you in. Try Again!');
|
||||
return;
|
||||
});
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
if (response.refreshToken) {
|
||||
loginForm.setStatus('pending', 'obtained refreshToken...');
|
||||
const jwt = await this.handleRefreshToken(response.refreshToken, 0);
|
||||
if (jwt) {
|
||||
loginForm.setStatus('success', 'obtained jwt.');
|
||||
} else {
|
||||
loginForm.setStatus('error', 'something went wrong');
|
||||
}
|
||||
} else {
|
||||
}
|
||||
} else if (valueArg.emailAddress && !valueArg.passwordArg) {
|
||||
loginForm.setStatus('pending', 'sending magic link...');
|
||||
const response = await loginRequestWithEmail.fire({
|
||||
email: valueArg.emailAddress,
|
||||
});
|
||||
if (response.status === 'ok') {
|
||||
loginForm.setStatus('success', 'Please check your email!');
|
||||
}
|
||||
console.log(response);
|
||||
}
|
||||
};
|
||||
|
||||
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>(
|
||||
WgLogin.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.`);
|
||||
this.jwt = jwtArg;
|
||||
await domtools.plugins.smartdelay.delayFor(200);
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('leleLoginGotJwt', {
|
||||
detail: {
|
||||
jwt: this.jwt,
|
||||
},
|
||||
})
|
||||
);
|
||||
this.jwtObserable.next(this.jwt);
|
||||
}
|
||||
}
|
||||
|
||||
public async handleRefreshToken(refreshTokenArg: string, delayDispatchMillisArg = 0) {
|
||||
// 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>(
|
||||
WgLogin.receptionUrl,
|
||||
'refreshJwt'
|
||||
);
|
||||
const responseJwt = await refreshJwt.fire({
|
||||
refreshToken: refreshTokenArg,
|
||||
});
|
||||
|
||||
if (responseJwt.jwt) {
|
||||
this.domtools.convenience.smartdelay.delayFor(delayDispatchMillisArg).then(() => {
|
||||
this.dispatchJwt(responseJwt.jwt);
|
||||
});
|
||||
return responseJwt.jwt;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
type TemplateResult,
|
||||
css,
|
||||
cssManager,
|
||||
state,
|
||||
domtools,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'wg-transfermanager': WgTransfermanager;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('wg-transfermanager')
|
||||
export class WgTransfermanager extends DeesElement {
|
||||
|
||||
public appData: plugins.idpInterfaces.data.IApp;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
max-width: 520px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: ${cssManager.bdTheme('#333333', '#ffffff')};
|
||||
}
|
||||
|
||||
.box {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
margin-bottom: 20px;
|
||||
height: 56px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#181818')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#333333')};
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<div class="box">
|
||||
transfering
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async handleTransfer() {
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
const box = this.shadowRoot.querySelector('.box');
|
||||
const receptionClient = new plugins.idpClient.IdpClient(`https://reception.lossless.one:443`, this.appData);
|
||||
const transferToken = await receptionClient.getTransferToken();
|
||||
box.textContent = 'got transfer token...';
|
||||
console.log(this.appData.appUrl);
|
||||
const redirectUrl = domtoolsInstance.convenience.smarturl.Smarturl.createFromUrl(this.appData.appUrl, {
|
||||
searchParams: {
|
||||
'transfertoken': transferToken,
|
||||
}
|
||||
});
|
||||
box.textContent = `redirecting to app...`;
|
||||
window.location.href = redirectUrl.toString();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
cssManager,
|
||||
unsafeCSS,
|
||||
css,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
@customElement('idp-welcome')
|
||||
export class IdpWelcome extends DeesElement {
|
||||
@property()
|
||||
public someProperty = 'someProperty';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
height: 100px;
|
||||
color: #fff;
|
||||
font-family: 'Geist Sans';
|
||||
}
|
||||
:host([hidden]) {
|
||||
font-family: 'Cal Sans';
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
letter-spacing:0.0125em;
|
||||
}
|
||||
|
||||
.textbox {
|
||||
margin: 24px auto;
|
||||
width: 500px;
|
||||
background: #111111;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.textbox dees-button {
|
||||
margin-top: 16px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style></style>
|
||||
<h1>idp.global</h1>
|
||||
<div class="textbox">
|
||||
idp.global is a Open Source identity provider for the world wide web. You can get the code if you want to improve it.
|
||||
<dees-button @click=${() => {
|
||||
window.location.href = 'https://code.foss.global/idp.global/idp.global';
|
||||
}}>Get the code</dees-button>
|
||||
</div>
|
||||
<div class="textbox">
|
||||
Do you want to sign in or register?
|
||||
<dees-button @click=${() => {}}>Sign In</dees-button>
|
||||
<dees-button @click=${() => {}}>Register</dees-button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import * as plugins from './plugins.js';
|
||||
|
||||
export class IdpState {
|
||||
// STATIC
|
||||
public static getSingletonInstance() {
|
||||
if (!this.instance) {
|
||||
this.instance = new IdpState();
|
||||
}
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
private static instance: IdpState;
|
||||
|
||||
// INSTANCE
|
||||
public receptionUrl = 'https://reception.lossless.one/typedrequest';
|
||||
public idpClient = new plugins.idpClient.IdpClient(this.receptionUrl);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import * as serviceworker from '@api.global/typedserver/web_serviceworker_client';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
import { html, render } from '@design.estate/dees-element';
|
||||
import { IdpWelcome } from './elements/idp-welcome.js';
|
||||
|
||||
const run = async () => {
|
||||
const domtoolsInstance = await domtools.DomTools.setupDomTools();
|
||||
domtools.elementBasic.setup();
|
||||
domtoolsInstance.setWebsiteInfo({
|
||||
metaObject: {
|
||||
title: 'idp.global',
|
||||
description:
|
||||
'the code that runs idp.global',
|
||||
canonicalDomain: 'https://idp.global',
|
||||
ldCompany: {
|
||||
name: 'Task Venture Capital GmbH',
|
||||
status: 'active',
|
||||
contact: {
|
||||
address: {
|
||||
name: 'Task Venture Capital GmbH',
|
||||
city: 'Grasberg',
|
||||
country: 'Germany',
|
||||
houseNumber: '24',
|
||||
postalCode: '28879',
|
||||
streetName: 'Eickedorfer Vorweide',
|
||||
},
|
||||
description: 'work',
|
||||
name: 'Task Venture Capital GmbH',
|
||||
type: 'company',
|
||||
facebookUrl: 'https://www.facebook.com/undefined variable',
|
||||
twitterUrl: 'https://twitter.com/undefined variable',
|
||||
website: 'https://Task Venture Capital GmbH',
|
||||
phone: '+49 421 16767 548',
|
||||
},
|
||||
closedDate: null,
|
||||
foundedDate: {
|
||||
day: 1,
|
||||
month: 1,
|
||||
year: 2014,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const serviceWorker = await serviceworker.getServiceworkerClient();
|
||||
|
||||
const mainTemplate = html`
|
||||
<style>
|
||||
body {
|
||||
margin: 0px;
|
||||
--background-accent: #303f9f;
|
||||
}
|
||||
</style>
|
||||
<idp-welcome></idp-welcome>
|
||||
`;
|
||||
|
||||
render(mainTemplate, document.body);
|
||||
};
|
||||
|
||||
run();
|
||||
@@ -0,0 +1,17 @@
|
||||
// node native
|
||||
|
||||
// project native
|
||||
import * as idpInterfaces from '../dist_ts_interfaces/index.js';
|
||||
import * as leleReceptionclient from '../dist_ts_idpclient/index.js';
|
||||
|
||||
export { idpInterfaces, leleReceptionclient as idpClient };
|
||||
|
||||
// @api.global scope
|
||||
import * as typedrequest from '@api.global/typedrequest';
|
||||
|
||||
export { typedrequest };
|
||||
|
||||
// @design.estate scope
|
||||
import * as deesCatalog from '@design.estate/dees-catalog';
|
||||
|
||||
export { deesCatalog };
|
||||
Reference in New Issue
Block a user