From a9b6474b8fd5fb5e4a99cef26232668f158543e3 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Mon, 17 Jun 2024 14:54:29 +0200
Subject: [PATCH] Authentication token generation WIP (#98)

First working version.
---
 assets/styles/elements/_token-list.scss       | 12 +++++
 client/@types/global.d.ts                     |  2 +-
 .../lib/elements/templates/token-list.ts      | 23 ++++++---
 client/common/lib/elements/token-list.ts      | 10 +++-
 .../common/videowatch/elements/share-chat.ts  | 49 +++++++++++--------
 .../elements/templates/share-chat.ts          |  9 +++-
 languages/en.yml                              |  2 +-
 7 files changed, 75 insertions(+), 32 deletions(-)

diff --git a/assets/styles/elements/_token-list.scss b/assets/styles/elements/_token-list.scss
index cd6281bc..0f80b15e 100644
--- a/assets/styles/elements/_token-list.scss
+++ b/assets/styles/elements/_token-list.scss
@@ -10,6 +10,18 @@
 livechat-token-list {
   table {
     @include tables.data-table;
+
+    width: 100%;
+
+    tr th:first-child,
+    tr th:last-child {
+      width: 50px;
+    }
+
+    label {
+      // Reset some styles set by peertube
+      font-weight: inherit;
+    }
   }
 
   .livechat-create-token {
diff --git a/client/@types/global.d.ts b/client/@types/global.d.ts
index ff3d961a..de85adaf 100644
--- a/client/@types/global.d.ts
+++ b/client/@types/global.d.ts
@@ -116,8 +116,8 @@ declare const LOC_SHARE_CHAT_PEERTUBE_TIPS: string
 declare const LOC_SHARE_CHAT_DOCK: string
 declare const LOC_SHARE_CHAT_DOCK_TIPS: string
 declare const LOC_TOKEN_LABEL: string
-declare const LOC_TOKEN_JID: string
 declare const LOC_TOKEN_PASSWORD: string
 declare const LOC_TOKEN_ACTION_CREATE: string
 declare const LOC_TOKEN_ACTION_REVOKE: string
 declare const LOC_TOKEN_DEFAULT_LABEL: string
+declare const LOC_TOKEN_ACTION_REVOKE_CONFIRM: string
diff --git a/client/common/lib/elements/templates/token-list.ts b/client/common/lib/elements/templates/token-list.ts
index 7ce9e3b6..063c5638 100644
--- a/client/common/lib/elements/templates/token-list.ts
+++ b/client/common/lib/elements/templates/token-list.ts
@@ -16,7 +16,6 @@ export function tplTokenList (el: LivechatTokenListElement): TemplateResult {
         <tr>
           <th scope="col"></th>
           <th scope="col">${ptTr(LOC_TOKEN_LABEL)}</th>
-          <th scope="col">${ptTr(LOC_TOKEN_JID)}</th>
           <th scope="col">${ptTr(LOC_TOKEN_PASSWORD)}</th>
           <th scope="col"></th>
         </tr>
@@ -24,19 +23,29 @@ export function tplTokenList (el: LivechatTokenListElement): TemplateResult {
       <tbody>
         ${
           repeat(el.tokenList ?? [], (token) => token.id, (token) => {
-            html`<tr>
+            return html`<tr>
               <td>${
                 el.mode === 'select'
                 ? html`<input
                   type="radio"
-                  ?selected=${el.currentSelectedToken?.id === token.id}
-                  @click=${el.selectToken}
+                  name="livechat-token"
+                  value=${token.id}
+                  id=${`livechat-token-radio-${token.id}`}
+                  ?checked=${el.currentSelectedToken?.id === token.id}
+                  @click=${(ev: Event) => el.selectToken(ev, token)}
                 />`
                 : ''
               }</td>
-              <td>${token.label}</td>
-              <td>${token.jid}</td>
-              <td>${token.password}</td>
+              <td>
+                <label for=${`livechat-token-radio-${token.id}`}>
+                  ${token.label}
+                </label>
+              </td>
+              <td>
+                <label for=${`livechat-token-radio-${token.id}`}>
+                  ${token.password}
+                </label>
+              </td>
               <td>
                 <button type="button"
                   class="livechat-revoke-token"
diff --git a/client/common/lib/elements/token-list.ts b/client/common/lib/elements/token-list.ts
index fecd4cf8..c315d5bd 100644
--- a/client/common/lib/elements/token-list.ts
+++ b/client/common/lib/elements/token-list.ts
@@ -42,6 +42,10 @@ export class LivechatTokenListElement extends LivechatElement {
     return new Task(this, {
       task: async () => {
         this.tokenList = await this._tokenListService.fetchTokenList()
+        if (this.mode === 'select' && this.tokenList.length) {
+          this.currentSelectedToken = this.tokenList[0]
+          this.dispatchEvent(new CustomEvent('update', {}))
+        }
         this.actionDisabled = false
       },
       args: () => []
@@ -57,13 +61,17 @@ export class LivechatTokenListElement extends LivechatElement {
   }
 
   public selectToken (ev: Event, token: LivechatToken): void {
-    ev.preventDefault()
     if (!this.tokenList?.includes(token)) { return }
     this.currentSelectedToken = token
+    this.requestUpdate('tokenList')
     this.dispatchEvent(new CustomEvent('update', {}))
   }
 
   public async revokeToken (token: LivechatToken): Promise<void> {
+    const confirmMsg = await this.ptTranslate(LOC_TOKEN_ACTION_REVOKE_CONFIRM)
+    // Note: we can't use peertube showModal to confirm if we already are in a modal...
+    if (!window.confirm(confirmMsg)) { return }
+
     this.actionDisabled = true
     try {
       await this._tokenListService.revokeToken(token)
diff --git a/client/common/videowatch/elements/share-chat.ts b/client/common/videowatch/elements/share-chat.ts
index 0f54f681..88c8aa88 100644
--- a/client/common/videowatch/elements/share-chat.ts
+++ b/client/common/videowatch/elements/share-chat.ts
@@ -4,6 +4,7 @@
 
 import type { Video } from '@peertube/peertube-types'
 import type { LiveChatSettings } from '../../lib/contexts/peertube'
+import type { LivechatTokenListElement } from '../../lib/elements/token-list'
 import { html, PropertyValues, TemplateResult } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { LivechatElement } from '../../lib/elements/livechat'
@@ -222,29 +223,37 @@ export class ShareChatElement extends LivechatElement {
   }
 
   protected _computeUrlDock (): ComputedUrl {
-    return {
-      shareString: '',
-      openUrl: undefined
+    const tokenList: LivechatTokenListElement | null = this.querySelector('livechat-token-list')
+    const token = tokenList?.currentSelectedToken
+    if (!token) {
+      return {
+        shareString: '',
+        openUrl: undefined
+      }
+    }
+    const uriOptions: UriOptions = {
+      ignoreAutoColors: true,
+      permanent: true
     }
-    // const uriOptions: UriOptions = {
-    //   ignoreAutoColors: true,
-    //   permanent: true
-    // }
 
-    // // Note: for the "embed" case, the url is always the same as the iframe.
-    // // So we use getIframeUri to compte, and just change the finale result if we really want the iframe.
-    // const url = getIframeUri(this.ptContext.ptOptions, this._settings, this._video, uriOptions)
-    // if (!url) {
-    //   return {
-    //     shareString: '',
-    //     openUrl: undefined
-    //   }
-    // }
+    let url = getIframeUri(this.ptContext.ptOptions, this._settings, this._video, uriOptions)
+    if (!url) {
+      return {
+        shareString: '',
+        openUrl: undefined
+      }
+    }
 
-    // return {
-    //   shareString: url,
-    //   openUrl: url
-    // }
+    url += '#?p=' + encodeURIComponent(token.password)
+    url += '&j=' + encodeURIComponent(token.jid)
+    if (token.nickname) {
+      url += '&n=' + encodeURIComponent(token.nickname)
+    }
+
+    return {
+      shareString: url,
+      openUrl: url
+    }
   }
 
   protected _computeUrlEmbed (): ComputedUrl {
diff --git a/client/common/videowatch/elements/templates/share-chat.ts b/client/common/videowatch/elements/templates/share-chat.ts
index c7c6db76..b6fe73a9 100644
--- a/client/common/videowatch/elements/templates/share-chat.ts
+++ b/client/common/videowatch/elements/templates/share-chat.ts
@@ -167,8 +167,13 @@ function _tplShareChatEmbedOptions (el: ShareChatElement): TemplateResult {
   `
 }
 
-function _tplShareChatDockOptions (_el: ShareChatElement): TemplateResult {
-  return html`<livechat-token-list mode="select"></livechat-token-list>`
+function _tplShareChatDockOptions (el: ShareChatElement): TemplateResult {
+  return html`<livechat-token-list
+    mode="select"
+    @update=${(_e: CustomEvent) => {
+      el.requestUpdate()
+    }}
+  ></livechat-token-list>`
 }
 
 function _tplShareChatXMPPOptions (_el: ShareChatElement): TemplateResult {
diff --git a/languages/en.yml b/languages/en.yml
index 9b5fc981..9f99fdbb 100644
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -531,8 +531,8 @@ share_chat_dock_tips: |
   Please note that these tokens have no expiration date.
 
 token_label: Label
-token_jid: Username
 token_password: Password token
 token_action_create: Create a new token
 token_action_revoke: Revoke the token
 token_default_label: Token generated from the web interface
+token_action_revoke_confirm: Are you sure you want to revoke this token?