Authentication token generation WIP (#98)

You can now generate links to join chatrooms with your current user. This can be used to create Docks in OBS for example. This could also be used to generate authentication token to join the chat from 3rd party tools.

client/common/lib/elements/token-list.ts

@@ -0,0 +1,102 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { LivechatElement } from './livechat'
+import { TokenListService } from '../services/token-list'
+import { tplTokenList } from './templates/token-list'
+import { Task } from '@lit/task'
+import { LivechatToken } from 'shared/lib/types'
+
+@customElement('livechat-token-list')
+export class LivechatTokenListElement extends LivechatElement {
+  /**
+   * Indicate the mode to use:
+   * * list: just display tokens
+   * * select: select one token
+   */
+  @property({ attribute: true })
+  public mode: 'select' | 'list' = 'list'
+
+  @property({ attribute: false })
+  public tokenList?: LivechatToken[]
+
+  @property({ attribute: false })
+  public currentSelectedToken?: LivechatToken
+
+  @property({ attribute: false })
+  public actionDisabled: boolean = false
+
+  private readonly _tokenListService: TokenListService
+  private readonly _asyncTaskRender: Task
+
+  constructor () {
+    super()
+    this._tokenListService = new TokenListService()
+    this._asyncTaskRender = this._initTask()
+  }
+
+  protected _initTask (): Task {
+    return new Task(this, {
+      task: async () => {
+        this.tokenList = await this._tokenListService.fetchTokenList()
+        this.actionDisabled = false
+      },
+      args: () => []
+    })
+  }
+
+  protected override render = (): unknown => {
+    return this._asyncTaskRender.render({
+      pending: () => html`<livechat-spinner></livechat-spinner>`,
+      error: () => html`<livechat-error></livechat-error>`,
+      complete: () => tplTokenList(this)
+    })
+  }
+
+  public selectToken (ev: Event, token: LivechatToken): void {
+    ev.preventDefault()
+    if (!this.tokenList?.includes(token)) { return }
+    this.currentSelectedToken = token
+    this.dispatchEvent(new CustomEvent('update', {}))
+  }
+
+  public async revokeToken (token: LivechatToken): Promise<void> {
+    this.actionDisabled = true
+    try {
+      await this._tokenListService.revokeToken(token)
+      this.tokenList = this.tokenList?.filter(t => t !== token) ?? []
+      if (this.currentSelectedToken === token) {
+        this.currentSelectedToken = undefined
+      }
+      this.requestUpdate('tokenList')
+      this.dispatchEvent(new CustomEvent('update', {}))
+    } catch (err: any) {
+      this.logger.error(err)
+      this.ptNotifier.error(err.toString(), await this.ptTranslate(LOC_ERROR))
+    } finally {
+      this.actionDisabled = false
+    }
+  }
+
+  public async createToken (): Promise<void> {
+    this.actionDisabled = true
+    try {
+      const token = await this._tokenListService.createToken(await this.ptTranslate(LOC_TOKEN_DEFAULT_LABEL))
+      this.tokenList ??= []
+      this.tokenList.push(token)
+      if (this.mode === 'select') {
+        this.currentSelectedToken = token
+      }
+      this.requestUpdate('tokenList')
+      this.dispatchEvent(new CustomEvent('update', {}))
+    } catch (err: any) {
+      this.logger.error(err)
+      this.ptNotifier.error(err.toString(), await this.ptTranslate(LOC_ERROR))
+    } finally {
+      this.actionDisabled = false
+    }
+  }
+}