dees-catalog/ts_web/elements/dees-simple-login.demo.ts

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);
        alert(`Login attempted with:\nUsername: ${e.detail.formData.username}\nPassword: ${e.detail.formData.password}`);
      }}
    >
      <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>
`;