Moderation configuration screen: WIP.

client/common/moderation/logic/channel.ts

@@ -0,0 +1,29 @@
+import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+
+/**
+ * Adds the front-end logic on the generated html for the channel moderation options.
+ * @param clientOptions Peertube client options
+ * @param rootEl The root element in which the template was rendered
+ */
+async function vivifyModerationChannel (
+  clientOptions: RegisterClientOptions,
+  rootEl: HTMLElement
+): Promise<void> {
+  const form = rootEl.querySelector('form[livechat-moderation-channel-options]') as HTMLFormElement
+  if (!form) { return }
+  const enableBotCB = form.querySelector('input[name=bot]') as HTMLInputElement
+  const botEnabledEl = form.querySelector('[livechat-moderation-channel-options-bot-enabled]') as HTMLElement
+
+  const refresh: Function = () => {
+    botEnabledEl.style.display = enableBotCB.checked ? 'initial' : 'none'
+  }
+
+  enableBotCB.onclick = () => refresh()
+  form.onsubmit = () => false
+  form.onreset = () => refresh()
+  refresh()
+}
+
+export {
+  vivifyModerationChannel
+}

client/common/moderation/register.ts

@@ -1,6 +1,7 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import { renderModerationHome } from './templates/home'
 import { renderModerationChannel } from './templates/channel'
+import { vivifyModerationChannel } from './logic/channel'
 
 /**
  * Registers stuff related to the moderation settings.
@@ -21,7 +22,14 @@ async function registerModeration (clientOptions: RegisterClientOptions): Promis
     onMount: async ({ rootEl }) => {
       const urlParams = new URLSearchParams(window.location.search)
       const channelId = urlParams.get('channelId') ?? ''
-      rootEl.innerHTML = await renderModerationChannel(clientOptions, channelId)
+      const html = await renderModerationChannel(clientOptions, channelId)
+      if (!html) {
+        // renderModerationChannel has already used the notifier to display an error
+        rootEl.innerHTML = ''
+        return
+      }
+      rootEl.innerHTML = html
+      await vivifyModerationChannel(clientOptions, rootEl)
     }
   })
 

client/common/moderation/templates/channel.ts

@@ -13,7 +13,7 @@ const Mustache = require('mustache')
 async function renderModerationChannel (
   registerClientOptions: RegisterClientOptions,
   channelId: string
-): Promise<string> {
+): Promise<string | false> {
   const { peertubeHelpers } = registerClientOptions
 
   try {
@@ -35,16 +35,52 @@ async function renderModerationChannel (
     }
 
     const view = {
-      title:
-        await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_CHANNEL_TITLE) +
-        ' ' + channelModerationOptions.channel.displayName,
-      description: await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_CHANNEL_DESC)
+      title: await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_CHANNEL_TITLE),
+      description: await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_CHANNEL_DESC),
+      enableBot: await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_CHANNEL_ENABLE_BOT_LABEL),
+      botOptions: await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_CHANNEL_BOT_OPTIONS_TITLE),
+      forbiddenWords: await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_CHANNEL_FORBIDDEN_WORDS_LABEL),
+      bannedJIDs: await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_CHANNEL_BANNED_JIDS_LABEL),
+      save: await peertubeHelpers.translate(LOC_SAVE),
+      cancel: await peertubeHelpers.translate(LOC_CANCEL),
+      channelModerationOptions
     }
 
     return Mustache.render(`
       <div class="margin-content">
-        <h1>{{title}}</h1>
+        <h1>{{title}} {{channelModerationOptions.channel.displayName}}</h1>
         <p>{{description}}</p>
+        <form livechat-moderation-channel-options>
+          <fieldset>
+            <label>
+              <input
+                type="checkbox" name="bot"
+                value="1"
+                {{#channelModerationOptions.bot}} checked="checked" {{/channelModerationOptions.bot}}
+              />
+              {{enableBot}}
+            </label>
+          </fieldset>
+          <fieldset livechat-moderation-channel-options-bot-enabled>
+            <legend>{{botOptions}}</legend>
+            <label>
+              {{forbiddenWords}}
+<textarea name="forbidden_words">
+{{#channelModerationOptions.forbiddenWords}}{{.}}
+{{/channelModerationOptions.forbiddenWords}}
+</textarea>
+            </label>
+            <label>
+              {{bannedJIDs}}
+<textarea name="banned_jids">
+{{#channelModerationOptions.bannedJIDs}}{{.}}
+{{/channelModerationOptions.bannedJIDs}}
+</textarea>
+            </label>
+          </fieldset>
+          <input type="submit" value="{{save}}" />
+          <input type="reset" value="{{cancel}}" />
+        </form>
       </div>
     `, view) as string
   } catch (err: any) {