Nicd/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <script type="module" src="ts-out/main.js"></script>
  <title>Tilastokeskus</title>
</head>

<body>
  <main-index></main-index>
</body>

</html>

## main.ts
import { LitElement, html } from 'lit-element';

import './tokenInput';
import { StartAuthEvent } from './tokenInput';

enum AuthState {
  AUTHED,
  UNAUTHED
};

class Index extends LitElement {
  static get properties() {
    return {
      authState: { type: AuthState }
    }
  }

  authState: AuthState = AuthState.UNAUTHED;

  onStartAuth(e: StartAuthEvent) {
    const token = <String>e.detail.token;
    this.authState = AuthState.AUTHED;
  }

  render() {
    return this.authState === AuthState.UNAUTHED ?
      html`<token-input @start-auth=${this.onStartAuth}></token-input>` :
      html`<p>Authed!</p>`;
  }
}

customElements.define('main-index', Index);

## tokenInput.ts
import { LitElement, html } from 'lit-element';

class StartAuthEvent extends CustomEvent<{ token: string }> { }

class TokenInput extends LitElement {
  onClick() {
    const root = <ShadowRoot>this.shadowRoot
    const el = <HTMLInputElement>root.getElementById('token')

    this.dispatchEvent(new StartAuthEvent(
      'start-auth',
      { detail: { token: el.value } }
    ));
  }

  render() {
    return html`
      <div>
        <input
          type="text"
          id="token"
          name="token"
          placeholder="Auth token"
          autocomplete="current-password"
        />
        <button type="button" @click="${this.onClick}">Authenticate</button>
      </div>
    `;
  }
}

customElements.define('token-input', TokenInput)

export { StartAuthEvent };
	<!DOCTYPE html>
	<html>

	<head>
	<script type="module" src="ts-out/main.js"></script>
	<title>Tilastokeskus</title>
	</head>

	<body>
	<main-index></main-index>
	</body>

	</html>
	import { LitElement, html } from 'lit-element';

	import './tokenInput';
	import { StartAuthEvent } from './tokenInput';

	enum AuthState {
	AUTHED,
	UNAUTHED
	};

	class Index extends LitElement {
	static get properties() {
	return {
	authState: { type: AuthState }
	}
	}

	authState: AuthState = AuthState.UNAUTHED;

	onStartAuth(e: StartAuthEvent) {
	const token = <String>e.detail.token;
	this.authState = AuthState.AUTHED;
	}

	render() {
	return this.authState === AuthState.UNAUTHED ?
	html`<token-input @start-auth=${this.onStartAuth}></token-input>` :
	html`<p>Authed!</p>`;
	}
	}

	customElements.define('main-index', Index);
	import { LitElement, html } from 'lit-element';

	class StartAuthEvent extends CustomEvent<{ token: string }> { }

	class TokenInput extends LitElement {
	onClick() {
	const root = <ShadowRoot>this.shadowRoot
	const el = <HTMLInputElement>root.getElementById('token')

	this.dispatchEvent(new StartAuthEvent(
	'start-auth',
	{ detail: { token: el.value } }
	));
	}

	render() {
	return html`
	<div>
	<input
	type="text"
	id="token"
	name="token"
	placeholder="Auth token"
	autocomplete="current-password"
	/>
	<button type="button" @click="${this.onClick}">Authenticate</button>
	</div>
	`;
	}
	}

	customElements.define('token-input', TokenInput)

	export { StartAuthEvent };