38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { html } from '@design.estate/dees-element';
|
|
|
|
export const demoFunc = () => html`
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.demo-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
</style>
|
|
<div class="demo-container">
|
|
<dees-simple-login
|
|
name="My Application"
|
|
@login=${(e: CustomEvent) => {
|
|
console.log('Login event received:', e.detail);
|
|
const loginData = e.detail?.data || e.detail;
|
|
if (loginData?.username && loginData?.password) {
|
|
alert(`Login attempted with:\nUsername: ${loginData.username}\nPassword: ${loginData.password}`);
|
|
// Here you would typically validate credentials and show the slotted content
|
|
} else {
|
|
console.error('Invalid login data structure:', e.detail);
|
|
}
|
|
}}
|
|
>
|
|
<div style="padding: 40px; text-align: center;">
|
|
<h1>Welcome!</h1>
|
|
<p>This is the slotted content that appears after login.</p>
|
|
</div>
|
|
</dees-simple-login>
|
|
</div>
|
|
`;
|