srv
/
web-app


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!DOCTYPE html>
<html lang="es-es">
  <head>
    <title></title>
  </head>
  <body>

    <web-app></web-app>

    <script type="module">

     import { LitElement, html } from 'https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js'

     class WebApp extends LitElement {
       static properties = {
         started: { type: Boolean }
       }

       constructor () {
         super()
         this.started = false
       }

       _clickHandler () {
         this.started = !this.started
       }

       _buttonHandler (label) {
         return html`<button type="button" @click=${this._clickHandler}>${label}</button>`
       }

       render () {
         if (this.started) {
           return html`
             <session-started></session-started>
             ${this._buttonHandler('Terminar sesión')}
           `
         }
         return html`
           <session-closed></session-closed>
           ${this._buttonHandler('Iniciar sesión')}
         `
       }
     }
     customElements.define('web-app', WebApp)

     class SessionClosed extends LitElement {
       static properties = {
         user: { type: String },
         pass: { type: String }
       }

       constructor () {
         super()
         this.user = ''
         this.pass = ''
       }

       render () {
         return html`
           <h2>Inicio de sesión</h2>

           <input placeholder="usuario" type="text" value="">

           <input placeholder="contraseña" type="password" value="">`
       }
     }
     customElements.define('session-closed', SessionClosed)

     class SessionStarted extends LitElement {
       static properties = {
         message: { type: String }
       }

       constructor () {
         super()
         this.message = 'Bienvenido a tu sesión'
       }

       render () {
         return html`<h2>${this.message}</h2>`
       }
     }
     customElements.define('session-started', SessionStarted)


    </script>
  </body>
</html>