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