74 lines
1.6 KiB
TypeScript
74 lines
1.6 KiB
TypeScript
|
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>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|