feat(account): Implement account and organization management features
This commit is contained in:
@@ -0,0 +1,125 @@
|
||||
import * as plugins from '../../plugins.js';
|
||||
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
cssManager,
|
||||
unsafeCSS,
|
||||
css,
|
||||
type TemplateResult
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import { LeleAccountNavigation } from './navigation.js';
|
||||
|
||||
import * as views from './views/index.js';
|
||||
import * as accountstate from '../../states/accountstate.js';
|
||||
|
||||
import { commitinfo } from '../../../dist_ts/00_commitinfo_data.js';
|
||||
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'idp-accountcontent': IdpAccountContent;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('idp-accountcontent')
|
||||
export class IdpAccountContent extends DeesElement {
|
||||
|
||||
public subrouter: plugins.deesDomtools.plugins.smartrouter.SmartRouter;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
color: #fff;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#000000')}
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
.main {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
lele-accountnavigation {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
height: 100vh;
|
||||
width: 200px;
|
||||
}
|
||||
.viewcontainer {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
width: calc(100vw - 200px);
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
overscroll-behavior: contain;
|
||||
transition: all 0.3s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.viewcontainer.changing {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style></style>
|
||||
<div class="main">
|
||||
<lele-accountnavigation></lele-accountnavigation>
|
||||
<div class="viewcontainer">
|
||||
<!--<lele-accountview-subscription></lele-accountview-subscription>-->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
|
||||
super.firstUpdated(_changedProperties);
|
||||
await this.domtoolsPromise;
|
||||
this.subrouter = this.domtools.router.createSubRouter('/account');
|
||||
const viewcontainer: HTMLDivElement = this.shadowRoot.querySelector('.viewcontainer');
|
||||
|
||||
const cleanupViews = async () => {
|
||||
for (const child of viewcontainer.children) {
|
||||
viewcontainer.removeChild(child);
|
||||
}
|
||||
};
|
||||
|
||||
viewcontainer.append(new views.BaseView());
|
||||
console.log(`loaded base view`);
|
||||
|
||||
this.subrouter.on('/org/:orgName/billing', async () => {
|
||||
viewcontainer.classList.add('changing');
|
||||
await this.domtools.convenience.smartdelay.delayFor(300);
|
||||
console.log('We are viewing the billing page');
|
||||
await cleanupViews();
|
||||
viewcontainer.append(new views.SubscriptionView());
|
||||
viewcontainer.classList.remove('changing');
|
||||
await this.domtools.convenience.smartdelay.delayFor(300);
|
||||
});
|
||||
|
||||
this.subrouter._handleRouteState();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './content.js';
|
||||
export * from './navigation.js';
|
||||
@@ -0,0 +1,143 @@
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
cssManager,
|
||||
unsafeCSS,
|
||||
css,
|
||||
type TemplateResult,
|
||||
subscribe
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as plugins from '../../plugins.js';
|
||||
import * as states from '../../states/accountstate.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'lele-accountnavigation': LeleAccountNavigation;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('lele-accountnavigation')
|
||||
export class LeleAccountNavigation extends DeesElement {
|
||||
@property()
|
||||
public options: {text: string; id: string}[] = [
|
||||
{
|
||||
id: '1',
|
||||
text: 'Properties'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
text: 'Users'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
text: 'Activity'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
text: 'Billing & Subscription'
|
||||
},
|
||||
];
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
padding: 10px;
|
||||
padding-left: 0px;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#111')};
|
||||
border-right: ${cssManager.bdTheme('1px solid #ccc', '')};
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigationGroupLabel {
|
||||
width: min-content;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
border-bottom: 1px dotted #666;
|
||||
margin-bottom: 5px;
|
||||
padding-top: 32px;
|
||||
padding-left: 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.navigationOption {
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-weight: 500;
|
||||
padding: 8px;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.navigationOption:hover {
|
||||
cursor: pointer;
|
||||
background: ${cssManager.bdTheme('#bbb', '#333')};
|
||||
}
|
||||
dees-input-dropdown {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style></style>
|
||||
<div class="navigationGroupLabel">Organization Settings</div>
|
||||
<dees-input-dropdown .label=${'choose org:'}
|
||||
@selectedOption=${(eventArg: CustomEvent) => {
|
||||
const currentState = states.accountState.getState()
|
||||
states.accountState.dispatchAction(states.setSelectedOrg, currentState.organizations.find(org => org.data.slug === eventArg.detail.payload));
|
||||
}}
|
||||
></dees-input-dropdown>
|
||||
${this.options.map(option => {
|
||||
return html`
|
||||
<div class="navigationOption">
|
||||
${option.text}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
<div class="navigationGroupLabel">Account Settings</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public firstUpdated() {
|
||||
const deesInputDropdown = this.shadowRoot.querySelector('dees-input-dropdown');
|
||||
const orgToMenuEntry = (orgArg?: plugins.idpInterfaces.data.IOrganization) => {
|
||||
if (!orgArg) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
option: orgArg.data.name,
|
||||
key: orgArg.data.slug,
|
||||
payload: orgArg.data.slug,
|
||||
}
|
||||
}
|
||||
states.accountState.select(stateArg => stateArg.organizations).pipe(
|
||||
plugins.deesDomtools.plugins.smartrx.rxjs.ops.map(orgArrayArg => {
|
||||
return orgArrayArg.map(orgToMenuEntry)
|
||||
})
|
||||
).subscribe(menuEntries => {
|
||||
deesInputDropdown.options = menuEntries;
|
||||
});
|
||||
states.accountState.select(stateArg => stateArg.selectedOrg).pipe(
|
||||
plugins.deesDomtools.plugins.smartrx.rxjs.ops.map(orgToMenuEntry)
|
||||
).subscribe(selectedOrgArg => {
|
||||
deesInputDropdown.selectedOption = selectedOrgArg;
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { css } from '@design.estate/dees-element';
|
||||
|
||||
export default css`
|
||||
h1 {
|
||||
margin-top: 50px;
|
||||
border-bottom: 1px solid #666;
|
||||
padding-bottom: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-top: 1px dotted #666;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
dees-button {
|
||||
margin-top: 16px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
dees-input-text {
|
||||
max-width: 400px;
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,179 @@
|
||||
import * as plugins from '../../../plugins.js';
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
cssManager,
|
||||
unsafeCSS,
|
||||
css,
|
||||
render,
|
||||
subscribe,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import sharedStyles from '../sharedstyles.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'lele-accountview-baseview': BaseView;
|
||||
}
|
||||
}
|
||||
|
||||
import * as state from '../../../states/accountstate.js';
|
||||
|
||||
@customElement('lele-accountview-baseview')
|
||||
export class BaseView extends DeesElement {
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
subscriptions: any[] = [
|
||||
{
|
||||
organization: 'org1',
|
||||
'subscription type': 'workspace.global SaaS',
|
||||
price: '4€',
|
||||
userFactor: 4,
|
||||
total: '16.00€',
|
||||
},
|
||||
{
|
||||
organization: 'org1',
|
||||
'subscription type': 'workspace.global IaaS Base Access',
|
||||
price: '0€',
|
||||
userFactor: 4,
|
||||
total: '0€',
|
||||
},
|
||||
{
|
||||
organization: 'org1',
|
||||
'subscription type': 'workspace.global SLA Senior',
|
||||
price: '2000€',
|
||||
userFactor: 'none',
|
||||
total: '2000.00€',
|
||||
},
|
||||
];
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
sharedStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
}
|
||||
.slug {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.orgGrid {
|
||||
display: grid;
|
||||
grid-gap: 16px;
|
||||
grid-template-columns: ${cssManager.cssGridColumns(4, 16)}
|
||||
}
|
||||
|
||||
.org {
|
||||
padding: 16px;
|
||||
border: 1px dotted #666;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.org:hover {
|
||||
cursor: pointer;
|
||||
background: ${cssManager.bdTheme('#CCC', '#333')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render() {
|
||||
return html` <div class="viewHost"></div> `;
|
||||
}
|
||||
|
||||
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
|
||||
await this.domtoolsPromise;
|
||||
super.firstUpdated(_changedProperties);
|
||||
const viewHost: HTMLDivElement = this.shadowRoot.querySelector('.viewHost');
|
||||
await state.accountState.dispatchAction(state.getOrganizationsAction, null);
|
||||
console.log('got orgs');
|
||||
if (state.accountState.getState().organizations.length === 0) {
|
||||
render(
|
||||
html`
|
||||
<h1>Setup Your Account</h1>
|
||||
<p>
|
||||
There are no organizations for your account. Please create one now. Alternatively you
|
||||
can ask an admin of an existing organization to invite you.
|
||||
</p>
|
||||
<dees-form>
|
||||
<dees-input-text .label=${'Organization Name'} .key=${'orgName'}></dees-input-text>
|
||||
</dees-form>
|
||||
<p>
|
||||
The organization slug corresponds to the organization name:<br />
|
||||
<span class="slug"
|
||||
>${subscribe(
|
||||
state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
|
||||
)}</span
|
||||
>
|
||||
</p>
|
||||
<span class="hint"></span>
|
||||
<dees-button .disabled=${true}>Create the Organization</dees-button>
|
||||
`,
|
||||
viewHost
|
||||
);
|
||||
const subscriptions: plugins.deesDomtools.plugins.smartrx.rxjs.Subscription[] = [];
|
||||
const form = this.shadowRoot.querySelector('dees-form');
|
||||
const orgInput = this.shadowRoot.querySelector('dees-input-text');
|
||||
const hint = this.shadowRoot.querySelector('.hint');
|
||||
const button = this.shadowRoot.querySelector('dees-button');
|
||||
const newOrgSubscription = state.accountState
|
||||
.select((stateArg) => stateArg.newOrg)
|
||||
.subscribe((data) => {
|
||||
if (data.chosenSlug) {
|
||||
hint.innerHTML = 'Waiting: Validating...';
|
||||
} else {
|
||||
hint.innerHTML = 'Hint: Enter a valid organization name.';
|
||||
}
|
||||
if (data.validated && data.validationOk) {
|
||||
hint.innerHTML =
|
||||
'Success: Name is available. Please click the button to create the organization.';
|
||||
button.disabled = false;
|
||||
} else if (!data.validated || !data.validationOk) {
|
||||
hint.innerHTML = `Info: Name not available. Please choose another one.`;
|
||||
button.disabled = true;
|
||||
}
|
||||
});
|
||||
subscriptions.push(newOrgSubscription);
|
||||
|
||||
const formSubscription = form.changeSubject.subscribe(async (dataArg: any) => {
|
||||
await state.accountState.dispatchAction(state.setNewOrgName, dataArg.orgName);
|
||||
});
|
||||
subscriptions.push(formSubscription);
|
||||
button.addEventListener('clicked', async () => {
|
||||
orgInput.disabled = true;
|
||||
button.text = 'creating org...'
|
||||
button.status = 'pending';
|
||||
hint.innerHTML = 'Waiting for creation of the organization...'
|
||||
await state.accountState.dispatchAction(state.manifestNewOrgName, null);
|
||||
hint.innerHTML = `The Organization with name ${state.accountState.getState().organizations[0].data.name} has been created!`
|
||||
button.text = 'created!';
|
||||
button.status = 'success';
|
||||
const parentElement = (this.getRootNode() as any).host;
|
||||
parentElement.subrouter.pushUrl(`/org/${state.accountState.getState().organizations[0].data.slug}/billing`);
|
||||
});
|
||||
} else {
|
||||
render(html`
|
||||
<h1>Select An Organization</h1>
|
||||
<div class="orgGrid">
|
||||
${state.accountState.getState().organizations.map(orgArg => {
|
||||
return html`
|
||||
<div class="org" @click=${() => {
|
||||
state.accountState.dispatchAction(state.setSelectedOrg, orgArg)
|
||||
const parentElement = (this.getRootNode() as any).host;
|
||||
parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`)
|
||||
}}>
|
||||
${orgArg.data.name}
|
||||
</div>
|
||||
`
|
||||
})}
|
||||
</div>
|
||||
`, viewHost)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from './baseview.js';
|
||||
export * from './orgsetup.js';
|
||||
export * from './paddlesetup.js';
|
||||
export * from './subscriptions.js';
|
||||
@@ -0,0 +1,94 @@
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
cssManager,
|
||||
unsafeCSS,
|
||||
css,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as plugins from '../../../plugins.js';
|
||||
import sharedStyles from '../sharedstyles.js';
|
||||
import * as state from '../../../states/accountstate.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'lele-accountview-paddlesetup': PaddleSetupView;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('lele-accountview-paddlesetup')
|
||||
export class PaddleSetupView extends DeesElement {
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
sharedStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<h1>-> Paddle Setup</h1>
|
||||
<p>
|
||||
In order to use workspace.global <b>with paid features</b>, you need to setup a Paddle
|
||||
subscription. A Paddle connection is bound to an organization.
|
||||
</p>
|
||||
<p>
|
||||
The base price of a Paddle Subscription is always 0€. Any charges that occur will be billed
|
||||
as an extra charge on top of your free base subscription
|
||||
<b>on a monthly date of your choosing</b>.
|
||||
</p>
|
||||
<p>
|
||||
Since Paddle acts as merchant of record, your invoices will read Paddle as Creditor, and you
|
||||
as Debitor.
|
||||
</p>
|
||||
<h2>Why are we using Paddle?</h2>
|
||||
<p>
|
||||
Paddle takes care of tax compliance for us. This allows us to sell our products world wide
|
||||
while Paddle makes sure any sales are in compliance with local laws.
|
||||
</p>
|
||||
<dees-button>Let's do it!</dees-button>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
public async firstUpdated() {
|
||||
await this.domtoolsPromise;
|
||||
const paddleButton = this.shadowRoot.querySelector('dees-button');
|
||||
const openPaddle = async () => {
|
||||
await this.domtools.setExternalScript('https://cdn.paddle.com/paddle/paddle.js');
|
||||
globalThis.Paddle.Setup({
|
||||
vendor: 30954,
|
||||
eventCallback: async (dataArg) => {
|
||||
// The data.event will specify the event type
|
||||
if (dataArg.event === 'Checkout.Complete') {
|
||||
const data: plugins.idpInterfaces.data.IPaddleCheckoutData = dataArg.eventData;
|
||||
const paddleIframe = document.body.querySelector('iframe');
|
||||
document.body.removeChild(paddleIframe);
|
||||
paddleButton.status = 'pending';
|
||||
paddleButton.text = 'Processing...';
|
||||
await state.accountState.dispatchAction(state.updatePaddleCheckoutId, data.checkout.id);
|
||||
paddleButton.status = 'success';
|
||||
paddleButton.text = 'Paddle connected!'
|
||||
}
|
||||
},
|
||||
});
|
||||
globalThis.Paddle.Checkout.open({
|
||||
product: 561076,
|
||||
email: 'phil@kunz.io',
|
||||
});
|
||||
};
|
||||
paddleButton.addEventListener('clicked', async () => {
|
||||
openPaddle();
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
cssManager,
|
||||
unsafeCSS,
|
||||
css,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import sharedStyles from '../sharedstyles.js';
|
||||
|
||||
import * as state from '../../../states/accountstate.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'lele-accountview-subscription': SubscriptionView;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('lele-accountview-subscription')
|
||||
export class SubscriptionView extends DeesElement {
|
||||
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
subscriptions: any[] = [{
|
||||
organization: 'org1',
|
||||
'subscription type': 'workspace.global SaaS',
|
||||
price: '4€',
|
||||
userFactor: 4,
|
||||
total: '16.00€'
|
||||
}, {
|
||||
organization: 'org1',
|
||||
'subscription type': 'workspace.global IaaS Base Access',
|
||||
price: '0€',
|
||||
userFactor: 4,
|
||||
total: '0€'
|
||||
}, {
|
||||
organization: 'org1',
|
||||
'subscription type': 'workspace.global SLA Senior',
|
||||
price: '2000€',
|
||||
userFactor: 'none',
|
||||
total: '2000.00€'
|
||||
}];
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
sharedStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<h1>-> Billing & Subscription</h1>
|
||||
This page allows you to setup how you are billed for any workspace.global charges.
|
||||
<h2>PaymentMethod</h2>
|
||||
<p>Our customer-side billing is handled by paddle.com. You subscribe to a free plan there,
|
||||
and we will bill any occurring charges as an extra on the monthly date of your choosing.
|
||||
Paddle.com will take care of proper VAT invoices that will allow for VAT reduction according to the law.</p>
|
||||
<h3>Paddle</h3>
|
||||
<dees-button @click=${async () => {
|
||||
await this.domtoolsPromise;
|
||||
this.domtools.router.pushUrl(`/org/${state.accountState.getState().selectedOrg.data.slug}/paddlesetup`)
|
||||
}}>set up paddle.com</dees-button>
|
||||
<h3>Enterprise billing</h3>
|
||||
Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here. Note: You are currently not eligible.
|
||||
<h2>Subscriptions</h2>
|
||||
<p>
|
||||
The total price of a subscription already includes all taxes. If you are a VAT registered business,
|
||||
the actual price might be cheaper in case you can claim VAT exemption from the purchase.
|
||||
</p>
|
||||
<p>
|
||||
Note: Subscriptions are tied to prganizations. You are only seeing subcriptions regarding ${'org1'} right now.
|
||||
To see other organization, select the respective organization at the top left of this page.
|
||||
</p>
|
||||
<dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
|
||||
<dees-button>Add subscription</dees-button>
|
||||
<h2>Accrued IaaS Usage</h2>
|
||||
<p>Note: The accrued IaaS Usage will be charged by adjusting the workspsace.gobal IaaS Postpaid Access price prior the renewal date.</p>
|
||||
<dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
|
||||
<h2>Upcoming Billable Items</h2>
|
||||
<h2>Past Invoices</h2>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import { commitinfo } from '../../dist_ts/00_commitinfo_data.js';
|
||||
import { IdpState } from '../idp.state.js';
|
||||
import { IdpState } from '../states/idp.state.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
||||
@@ -17,7 +17,7 @@ import '@uptime.link/webwidget';
|
||||
|
||||
import '@design.estate/dees-catalog';
|
||||
import { DeesForm, DeesFormSubmit, DeesInputText } from '@design.estate/dees-catalog';
|
||||
import { IdpState } from '../idp.state.js';
|
||||
import { IdpState } from '../states/idp.state.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@@ -94,7 +94,7 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
></dees-input-text>
|
||||
<dees-form-submit id="loginSubmitButton"></dees-form-submit>
|
||||
</dees-form>
|
||||
<dees-button type="discreet" class="registerButton" @click=${async () => {
|
||||
<dees-button type="discreet" class="registerButton" @clicked=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/register');
|
||||
}}>Register instead</dees-button>
|
||||
@@ -124,7 +124,11 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
}
|
||||
|
||||
private login = async (valueArg: { emailAddress: string; passwordArg: string }) => {
|
||||
// lets disable the register button
|
||||
const registerButton: plugins.deesCatalog.DeesButton = this.shadowRoot.querySelector('.registerButton');
|
||||
registerButton.disabled = true;
|
||||
// lets define the needed requests
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
|
||||
const loginRequestWithUsernameAndPassword =
|
||||
new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
|
||||
@@ -154,9 +158,10 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
}
|
||||
if (response.refreshToken) {
|
||||
loginForm.setStatus('pending', 'obtained refreshToken...');
|
||||
const jwt = await this.handleRefreshToken(response.refreshToken, 0);
|
||||
const jwt = await idpState.idpClient.refreshJwt(response.refreshToken);
|
||||
if (jwt) {
|
||||
loginForm.setStatus('success', 'obtained jwt.');
|
||||
idpState.domtools.router.pushUrl('/account');
|
||||
} else {
|
||||
loginForm.setStatus('error', 'something went wrong');
|
||||
}
|
||||
@@ -190,27 +195,6 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
}
|
||||
}
|
||||
|
||||
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>(
|
||||
'/typedrequest',
|
||||
'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;
|
||||
}
|
||||
}
|
||||
|
||||
public async focus() {
|
||||
(
|
||||
this.shadowRoot.querySelector('#loginEmailInput') as plugins.deesCatalog.DeesInputText
|
||||
|
||||
@@ -17,7 +17,7 @@ import '@uptime.link/webwidget';
|
||||
|
||||
import '@design.estate/dees-catalog';
|
||||
import { DeesForm, DeesFormSubmit, DeesInputText } from '@design.estate/dees-catalog';
|
||||
import { IdpState } from '../idp.state.js';
|
||||
import { IdpState } from '../states/idp.state.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { IdpState } from '../idp.state.js';
|
||||
import { IdpState } from '../states/idp.state.js';
|
||||
import * as plugins from '../plugins.js';
|
||||
import {
|
||||
customElement,
|
||||
@@ -272,11 +272,9 @@ export class IdpRegistrationStepper extends DeesElement {
|
||||
refreshToken: this.storedData.refreshToken,
|
||||
});
|
||||
|
||||
deesForm.setStatus('pending', 'Obtaining Transfer Token...');
|
||||
deesForm.setStatus('success', 'Ok! Lets Go!');
|
||||
await idpState.idpClient.setJwt(jwtResponse.jwt);
|
||||
await idpState.idpClient.getTransferTokenAndSwitchToLocation(
|
||||
'https://sso.workspace.global/afterregistration'
|
||||
);
|
||||
idpState.domtools.router.pushUrl('/account');
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
import type { IdpViewcontainer } from '../views/viewcontainer.js';
|
||||
import { IdpState } from '../idp.state.js';
|
||||
import { IdpState } from '../states/idp.state.js';
|
||||
|
||||
@customElement('idp-welcome')
|
||||
export class IdpWelcome extends DeesElement {
|
||||
|
||||
@@ -4,3 +4,7 @@ export * from './idp-loginprompt.js';
|
||||
export * from './idp-registerprompt.js';
|
||||
export * from './idp-transfermanager.js';
|
||||
export * from './idp-welcome.js';
|
||||
|
||||
import { IdpAccountContent } from './account/index.js';
|
||||
|
||||
export { IdpAccountContent };
|
||||
|
||||
Reference in New Issue
Block a user