Moderation configuration screen: WIP.

client/@types/global.d.ts

@@ -31,9 +31,15 @@ declare const LOC_WEB: string
 declare const LOC_CONNECT_USING_XMPP: string
 declare const LOC_CONNECT_USING_XMPP_HELP: string
 
+declare const LOC_SAVE: string
+declare const LOC_CANCEL: string
 declare const LOC_MENU_MODERATION_LABEL: string
 declare const LOC_LIVECHAT_MODERATION_TITLE: string
 declare const LOC_LIVECHAT_MODERATION_DESC: string
 declare const LOC_LIVECHAT_MODERATION_PLEASE_SELECT: string
 declare const LOC_LIVECHAT_MODERATION_CHANNEL_TITLE: string
 declare const LOC_LIVECHAT_MODERATION_CHANNEL_DESC: string
+declare const LOC_LIVECHAT_MODERATION_CHANNEL_ENABLE_BOT_LABEL: string
+declare const LOC_LIVECHAT_MODERATION_CHANNEL_BOT_OPTIONS_TITLE: string
+declare const LOC_LIVECHAT_MODERATION_CHANNEL_FORBIDDEN_WORDS_LABEL: string
+declare const LOC_LIVECHAT_MODERATION_CHANNEL_BANNED_JIDS_LABEL: string

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) {

languages/en.yml

@@ -279,9 +279,16 @@ prosody_components_list_description: |
     <li>Only use alphanumeric characters in the secret passphrase (use at least 15 characters).</li>
   </ul>
 
+save: "Save"
+cancel: "Cancel"
 menu_moderation_label: "Chatrooms"
 livechat_moderation_title: "Configure your live's chatrooms moderation policies"
 livechat_moderation_desc: "Here you can configure some advanced options for chatrooms associated to your live streams."
 livechat_moderation_please_select: "Please select bellow one of your channel, to setup its chatting options."
 livechat_moderation_channel_title: "Moderation policies for channel:"
 livechat_moderation_channel_desc: "You can setup here your moderation policies for this channel."
+livechat_moderation_channel_enable_bot_label: "Enable moderation bot"
+livechat_moderation_channel_bot_options_title: "Moderation bot options"
+livechat_moderation_channel_forbidden_words_label: "Forbidden words or expressions"
+livechat_moderation_channel_banned_jids_label: "Banned users and patterns"
+

server/lib/routers/api/moderation.ts

@@ -47,7 +47,10 @@ async function initModerationApiRouter (options: RegisterServerOptions): Promise
           id: channelInfos.id,
           name: channelInfos.name,
           displayName: channelInfos.displayName
-        }
+        },
+        bot: false,
+        forbiddenWords: [],
+        bannedJIDs: []
       }
       res.status(200)
       res.json(result)

shared/lib/types.ts

@@ -52,6 +52,9 @@ interface ChannelModerationOptions {
     name: string
     displayName: string
   }
+  bot: boolean
+  forbiddenWords: string[]
+  bannedJIDs: string[]
 }
 
 export type {