@api-client/ui 0.5.39 → 0.5.40

package/demo/elements/authorization/AuthProxy.js

@@ -1,215 +0,0 @@
-/* eslint-disable no-undef */
-import http from 'http'
-import https from 'https'
-
-/**
- * A server that proxies oauth 2 token requests from the client to the
- * final token request endpoint.
- *
- * Append the token endpoint to the `/proxy?u=...` endpoint.
- * The token URL must be URL encoded.
- *
- * Example:
- *
- * ```
- * http://localhost:8082/proxy?u=https....
- * ```
- */
-export class AuthProxy {
-  constructor() {
-    /** @type http.RequestListener */
-    this._requestListener = this._requestListener.bind(this)
-    /** @type http.IncomingMessage[] */
-    this.connections = []
-  }
-
-  /**
-   * @param {number} port Starts the proxy
-   * @returns {Promise<void>}
-   */
-  async start(port) {
-    const server = http.createServer(this._requestListener)
-    return new Promise((resolve) => {
-      server.listen(port, () => {
-        this.server = server
-        resolve()
-      })
-    })
-  }
-
-  /**
-   * @returns {Promise<void>}
-   */
-  async stop() {
-    if (!this.server) {
-      return undefined
-    }
-    return new Promise((resolve) => {
-      if (this.connections.length) {
-        console.log(`Stopping ${this.connections.length} connections.`)
-      }
-      this.connections.forEach((client) => {
-        if (!client.destroyed) {
-          client.destroy()
-        }
-      })
-      this.connections = []
-      console.log('Stopping OAuth 2 proxy...')
-      this.server.close(() => {
-        resolve()
-      })
-    })
-  }
-
-  /**
-   * @param {http.IncomingMessage} req
-   * @param {http.ServerResponse} res
-   */
-  async _requestListener(req, res) {
-    const { url = '', method } = req
-    if (method !== 'POST') {
-      this._sendError(req, res, 'not found (method)', 404)
-      return
-    }
-
-    if (!url.startsWith('/proxy?u=')) {
-      this._sendError(req, res, 'not found (url)', 404)
-      return
-    }
-
-    const proxied = decodeURIComponent(url.replace('/proxy?u=', ''))
-    if (!proxied) {
-      this._sendError(req, res, 'no token url')
-      return
-    }
-
-    if (!proxied.startsWith('https://') && !proxied.startsWith('http://')) {
-      this._sendError(req, res, `token url must use http(s): scheme. "${proxied}" given.`)
-      return
-    }
-
-    this.connections.push(req)
-    req.on('end', () => {
-      const index = this.connections.indexOf(req)
-      if (index >= 0) {
-        this.connections.splice(index, 1)
-      }
-    })
-    try {
-      const result = await this._proxy(req, proxied)
-      const { buffer, headers, code = 200 } = result
-      const corsHeaders = this._getCors(headers)
-      const finalHeaders = { ...headers, ...corsHeaders }
-      res.writeHead(code, finalHeaders)
-      res.end(buffer)
-    } catch (e) {
-      console.error(e)
-      this._sendError(req, res, e.message)
-    }
-    const index = this.connections.indexOf(req)
-    if (index >= 0) {
-      this.connections.splice(index, 1)
-    }
-  }
-
-  /**
-   * @param {http.IncomingMessage} req
-   * @param {http.ServerResponse} res
-   * @param {string} message
-   * @param {number} code
-   */
-  _sendError(req, res, message, code = 400) {
-    const { headers } = req
-    const body = JSON.stringify({
-      error: 'invalid_request',
-      error_description: message,
-    })
-    const rspHeaders = this._getCors(headers)
-    rspHeaders['content-type'] = 'application/json'
-    res.writeHead(code, rspHeaders)
-    res.end(body)
-  }
-
-  /**
-   * @param {http.IncomingHttpHeaders} requestHeaders
-   * @returns {http.OutgoingHttpHeaders}
-   */
-  _getCors(requestHeaders = {}) {
-    const { origin } = requestHeaders
-    const result = /** @type http.OutgoingHttpHeaders */ ({
-      'access-control-allow-origin': origin || '*',
-      'access-control-allow-methods': 'POST',
-      'access-control-request-headers': 'Content-Type',
-    })
-    return result
-  }
-
-  /**
-   * @param {http.IncomingMessage} req
-   * @param {string} url
-   * @returns {Promise<{ buffer: Buffer, header: http.IncomingHttpHeaders }>}
-   */
-  async _proxy(req, url) {
-    const body = await this._readBody(req)
-    return new Promise((resolve, reject) => {
-      const lib = url.startsWith('https://') ? https : http
-      const client = lib.request(
-        url,
-        {
-          headers: this._proxyHeaders(req),
-          method: req.method,
-        },
-        async (res) => {
-          const buffers = []
-          for await (const chunk of res) {
-            buffers.push(chunk)
-          }
-          resolve({
-            buffer: Buffer.concat(buffers),
-            headers: res.headers,
-            code: res.code,
-          })
-        }
-      )
-      client.on('error', (e) => {
-        console.error(`Error making connection to ${url}`)
-        reject(e)
-      })
-      client.write(body)
-      client.end()
-    })
-  }
-
-  /**
-   * @param {http.IncomingMessage} req
-   * @returns {http.IncomingHttpHeaders}
-   */
-  _proxyHeaders(req) {
-    const headers = { ...(req.headers || {}) }
-    delete headers.host
-    delete headers.connection
-    delete headers.accept
-    delete headers.origin
-    delete headers.referer
-    delete headers['sec-ch-ua']
-    delete headers['sec-ch-ua-mobile']
-    delete headers['sec-ch-ua-platform']
-    delete headers['user-agent']
-    delete headers['sec-fetch-site']
-    delete headers['sec-fetch-mode']
-    delete headers['sec-fetch-dest']
-    return headers
-  }
-
-  /**
-   * @param {http.IncomingMessage} req
-   * @returns {Promise<Buffer>}
-   */
-  async _readBody(req) {
-    const buffers = []
-    for await (const chunk of req) {
-      buffers.push(chunk)
-    }
-    return Buffer.concat(buffers)
-  }
-}

package/demo/elements/authorization/api-key.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <title>API Key</title>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-  <style>
-    .demo-row {
-      margin: 20px 0;
-    }
-  </style>
-</head>
-
-<body class="demo">
-  <div id="app"></div>
-  <script type="module" src="/.tmp/demo/elements/authorization/api-key.js"></script>
-</body>
-
-</html>

package/demo/elements/authorization/api-key.ts

@@ -1,44 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { type IRequestAuthorization, RequestAuthorization } from '@api-client/core/models/RequestAuthorization.js'
-import { reactive } from '../../../src/decorators/index.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { Authorization } from '../../../src/elements/authorization/ui/Authorization.js'
-import '../../../src/define/authorization/apikey-authorization.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'API Key authorization'
-
-  @reactive() accessor authorization: IRequestAuthorization
-
-  constructor() {
-    super()
-    const auth = RequestAuthorization.fromTypedConfig('api key', {}, false)
-    this.authorization = auth.toJSON()
-  }
-
-  handleChange(e: Event): void {
-    const input = e.target as Authorization
-    console.log('Value changed', input.authorization)
-  }
-
-  handleDelete(): void {
-    console.log('Requested to delete.')
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="./">Back</a>
-      <section class="demo-section">
-        <h2 class="title-large">HTTP basic authorization</h2>
-        <apikey-authorization
-          .authorization="${this.authorization}"
-          @change="${this.handleChange}"
-          @delete="${this.handleDelete}"
-        ></apikey-authorization>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/elements/authorization/basic.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <title>HTTP basic</title>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-  <style>
-    .demo-row {
-      margin: 20px 0;
-    }
-  </style>
-</head>
-
-<body class="demo">
-  <div id="app"></div>
-  <script type="module" src="/.tmp/demo/elements/authorization/basic.js"></script>
-</body>
-
-</html>

package/demo/elements/authorization/basic.ts

@@ -1,43 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { type IRequestAuthorization, RequestAuthorization } from '@api-client/core/models/RequestAuthorization.js'
-import { reactive } from '../../../src/decorators/index.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { Authorization } from '../../../src/elements/authorization/ui/Authorization.js'
-import '../../../src/define/authorization/basic-authorization.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'HTTP basic authorization'
-
-  @reactive() accessor authorization: IRequestAuthorization
-
-  constructor() {
-    super()
-    const auth = RequestAuthorization.fromTypedConfig('basic', {}, false)
-    this.authorization = auth.toJSON()
-  }
-
-  handleChange(e: Event): void {
-    const input = e.target as Authorization
-    console.log('Value changed', input.authorization)
-  }
-
-  handleDelete(): void {
-    console.log('Requested to delete.')
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="./">Back</a>
-      <section class="demo-section">
-        <basic-authorization
-          .authorization="${this.authorization}"
-          @change="${this.handleChange}"
-          @delete="${this.handleDelete}"
-        ></basic-authorization>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/elements/authorization/bearer.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <title>HTTP bearer</title>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-  <style>
-    .demo-row {
-      margin: 20px 0;
-    }
-  </style>
-</head>
-
-<body class="demo">
-  <div id="app"></div>
-  <script type="module" src="/.tmp/demo/elements/authorization/bearer.js"></script>
-</body>
-
-</html>

package/demo/elements/authorization/bearer.ts

@@ -1,43 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { type IRequestAuthorization, RequestAuthorization } from '@api-client/core/models/RequestAuthorization.js'
-import { reactive } from '../../../src/decorators/index.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import BearerAuthorization from '../../../src/elements/authorization/ui/BearerAuthorization.js'
-import '../../../src/define/authorization/bearer-authorization.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'HTTP Bearer authorization'
-
-  @reactive() accessor authorization: IRequestAuthorization
-
-  constructor() {
-    super()
-    const auth = RequestAuthorization.fromTypedConfig('bearer', {}, false)
-    this.authorization = auth.toJSON()
-  }
-
-  handleChange(e: Event): void {
-    const input = e.target as BearerAuthorization
-    console.log('Value changed', input.authorization)
-  }
-
-  handleDelete(): void {
-    console.log('Requested to delete.')
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="./">Back</a>
-      <section class="demo-section">
-        <bearer-authorization
-          .authorization="${this.authorization}"
-          @change="${this.handleChange}"
-          @delete="${this.handleDelete}"
-        ></bearer-authorization>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/elements/authorization/env.js

@@ -1,8 +0,0 @@
-export default {
-  oauth2: {
-    port: 0,
-    root: '',
-    issuer: '',
-    tokenProxy: '',
-  },
-}

package/demo/elements/authorization/index.html

@@ -1,44 +0,0 @@
-
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <title>Authorization methods</title>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-  <main>
-    <h1>Authorization methods</h1>
-    <a href="../">Back</a>
-    <article>
-      A library of elements to perform authorization.
-    </article>
-    <nav>
-      <dl>
-        <dt><a href="basic.html">HTTP Basic</a></dt>
-        <dd>An element to authorize using HTTP basic scheme</dd>
-        
-        <dt><a href="bearer.html">HTTP Bearer</a></dt>
-        <dd>An element to authorize using HTTP bearer scheme</dd>
-        
-        <dt><a href="api-key.html">API Key</a></dt>
-        <dd>An element to authorize using API Key scheme</dd>
-        
-        <dt><a href="ntlm.html">NTLM</a></dt>
-        <dd>An element to authorize in ND domains</dd>
-        
-        <dt><a href="oauth2.html">OAuth 2 authorization</a></dt>
-        <dd>OAuth 2 authorization playground.</dd>
-        
-        <dt><a href="oidc.html">OpenID Connect (OIDC)</a></dt>
-        <dd>OpenID Connect authorization method.</dd>
-      </dl>
-    </nav>
-  </main>
-</body>

package/demo/elements/authorization/ntlm.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <title>NTLM</title>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-  <style>
-    .demo-row {
-      margin: 20px 0;
-    }
-  </style>
-</head>
-
-<body class="demo">
-  <div id="app"></div>
-  <script type="module" src="/.tmp/demo/elements/authorization/ntlm.js"></script>
-</body>
-
-</html>

package/demo/elements/authorization/ntlm.ts

@@ -1,43 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { type IRequestAuthorization, RequestAuthorization } from '@api-client/core/models/RequestAuthorization.js'
-import { reactive } from '../../../src/decorators/index.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { Authorization } from '../../../src/elements/authorization/ui/Authorization.js'
-import '../../../src/define/authorization/ntlm-authorization.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'NTLM authorization'
-
-  @reactive() accessor authorization: IRequestAuthorization
-
-  constructor() {
-    super()
-    const auth = RequestAuthorization.fromTypedConfig('ntlm', {}, false)
-    this.authorization = auth.toJSON()
-  }
-
-  handleChange(e: Event): void {
-    const input = e.target as Authorization
-    console.log('Value changed', input.authorization)
-  }
-
-  handleDelete(): void {
-    console.log('Requested to delete.')
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="./">Back</a>
-      <section class="demo-section">
-        <ntlm-authorization
-          .authorization="${this.authorization}"
-          @change="${this.handleChange}"
-          @delete="${this.handleDelete}"
-        ></ntlm-authorization>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/elements/authorization/oauth-authorize.html

@@ -1,75 +0,0 @@
-<!doctype html>
-<html lang="en-GB" class="theme-light">
-<head>
-  <meta charset="utf-8">
-  <title>Demo log in</title>
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-
-  <style>
-    html,
-    body {
-      height: 100vh;
-      margin: 0;
-      padding: 0;
-    }
-
-    html{
-      background-color: #fff;
-      -webkit-text-size-adjust: 100%;
-      -moz-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
-      text-size-adjust: 100%
-    }
-    body {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      text-rendering: optimizeLegibility;
-      font-size: 16px;
-      font-family: Roboto,sans-serif;
-      font-weight: 400;
-    }
-
-    .login {
-      width: 600px;
-      margin: 0 auto;
-    }
-  </style>
-</head>
-<body>
-  <section class="login">
-    <form autocomplete="on" method="post">
-      <h1>Demo log in</h1>
-      <p>Log in using any username and password to authorize Authorization Method component</p>
-      <ui-filled-text-field
-        type="email"
-        name="username"
-        required
-        invalidMessage="Email is required"
-        label="Email"
-        autocomplete="on"
-      ></ui-filled-text-field>
-      
-      <ui-filled-text-field
-        name="password"
-        required
-        autocomplete="on"
-        invalidMessage="Password is required"
-        label="Password"
-      ></ui-filled-text-field>
-      <ui-button class="login-button">Authorize</ui-button>
-    </form>
-  </section>
-  <script type="module" src="/.tmp/demo/elements/authorization/oauth-authorize.js"></script>
-</body>
-</html>

package/demo/elements/authorization/oauth-authorize.ts

@@ -1,40 +0,0 @@
-import { nanoid } from 'nanoid'
-import '../../../src/md/button/ui-button.js'
-import '../../../src/md/text-field/ui-filled-text-field.js'
-
-function setupFormAction(): void {
-  const u = new URL(window.location.href)
-  const state = u.searchParams.get('state') as string
-  const redirectUri = decodeURIComponent(u.searchParams.get('redirect_uri') as string)
-  const type = u.searchParams.get('response_type')
-  const codeParam = type === 'code' ? 'code' : 'access_token'
-  const params = new URLSearchParams()
-  params.set(codeParam, nanoid())
-  params.set('state', state)
-  params.set('expires_in', '3600')
-  params.set('scope', 'dummy')
-  if (type !== 'code') {
-    params.set('token_type', 'bearer')
-    params.set('refresh_token', nanoid())
-  }
-  const formUrl = `${redirectUri}#${params.toString()}`
-  const form = document.querySelector('form') as HTMLFormElement
-  form.action = formUrl
-}
-
-function loginHandler(): void {
-  const form = document.querySelector('form') as HTMLFormElement
-  window.location.assign(form.action)
-}
-
-function addButtonAction(): void {
-  const button = document.querySelector('.login-button') as HTMLElement
-  button.addEventListener('click', loginHandler)
-}
-
-function initialize(): void {
-  setupFormAction()
-  addButtonAction()
-}
-
-initialize()