126 lines
3.4 KiB
TypeScript
126 lines
3.4 KiB
TypeScript
import * as plugins from '../plugins.js';
|
|
import * as elements from '../elements/index.js';
|
|
|
|
import {
|
|
customElement,
|
|
DeesElement,
|
|
property,
|
|
html,
|
|
cssManager,
|
|
unsafeCSS,
|
|
css,
|
|
resolveExec,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
import type { IdpViewcontainer } from '../views/viewcontainer.js';
|
|
import { IdpState } from '../states/idp.state.js';
|
|
|
|
@customElement('idp-welcome')
|
|
export class IdpWelcome extends DeesElement {
|
|
viewContainer: IdpViewcontainer;
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
color: #fff;
|
|
font-family: 'Geist Sans';
|
|
}
|
|
:host([hidden]) {
|
|
display: none;
|
|
}
|
|
|
|
.maincontainer {
|
|
padding: 0px 16px;
|
|
}
|
|
|
|
.greeting {
|
|
text-align: center;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin: 24px auto;
|
|
}
|
|
|
|
dees-button {
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<style></style>
|
|
<idp-centercontainer>
|
|
<div class="maincontainer">
|
|
${resolveExec(async () => {
|
|
const idpState = await IdpState.getSingletonInstance();
|
|
await idpState.idpClient.determineLoginStatus();
|
|
const data = await idpState.idpClient.whoIs().catch();
|
|
if (data?.user) {
|
|
return html`
|
|
<div class="greeting">Hello ${data.user.data.name}!</div>
|
|
<dees-button
|
|
@click=${async () => {
|
|
const idpState = await IdpState.getSingletonInstance();
|
|
idpState.domtools.router.pushUrl('/account');
|
|
}}
|
|
>Manage your account</dees-button
|
|
>
|
|
<dees-button
|
|
@click=${async () => {
|
|
const idpState = await IdpState.getSingletonInstance();
|
|
idpState.domtools.router.pushUrl('/logout');
|
|
}}
|
|
>Logout</dees-button
|
|
>
|
|
`;
|
|
}
|
|
return html`
|
|
Do you want to sign in or register?
|
|
<dees-button
|
|
@click=${async () => {
|
|
const idpState = await IdpState.getSingletonInstance();
|
|
idpState.domtools.router.pushUrl('/login');
|
|
}}
|
|
>Sign In</dees-button
|
|
>
|
|
<dees-button
|
|
@click=${async () => {
|
|
const idpState = await IdpState.getSingletonInstance();
|
|
idpState.domtools.router.pushUrl('/register');
|
|
}}
|
|
>Register</dees-button
|
|
>
|
|
`;
|
|
})}
|
|
<dees-button @click=${() => {}}>Open Developer Dashboard</dees-button>
|
|
<dees-button
|
|
@click=${() => {
|
|
window.open('https://code.foss.global/idp.global/idp.global', '_blank');
|
|
}}
|
|
>Get the Source Code</dees-button
|
|
>
|
|
</div>
|
|
</idp-centercontainer>
|
|
`;
|
|
}
|
|
|
|
public async show() {
|
|
await this.updateComplete;
|
|
const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
|
|
await centerContainer.show();
|
|
}
|
|
|
|
public async hide() {
|
|
await this.updateComplete;
|
|
const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
|
|
await centerContainer.hide();
|
|
}
|
|
}
|