Moderation configuration screen: WIP.

client/common/moderation/logic/channel.ts

@@ -1,4 +1,6 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+import type { ChannelModerationOptions } from 'shared/lib/types'
+import { getBaseRoute } from '../../../videowatch/uri'
 
 /**
  * Adds the front-end logic on the generated html for the channel moderation options.
@@ -7,10 +9,13 @@ import type { RegisterClientOptions } from '@peertube/peertube-types/client'
  */
 async function vivifyModerationChannel (
   clientOptions: RegisterClientOptions,
-  rootEl: HTMLElement
+  rootEl: HTMLElement,
+  channelId: string
 ): Promise<void> {
   const form = rootEl.querySelector('form[livechat-moderation-channel-options]') as HTMLFormElement
   if (!form) { return }
+  const labelSaved = await clientOptions.peertubeHelpers.translate(LOC_SUCCESSFULLY_SAVED)
+  const labelError = await clientOptions.peertubeHelpers.translate(LOC_ERROR)
   const enableBotCB = form.querySelector('input[name=bot]') as HTMLInputElement
   const botEnabledEl = form.querySelector('[livechat-moderation-channel-options-bot-enabled]') as HTMLElement
 
@@ -18,9 +23,59 @@ async function vivifyModerationChannel (
     botEnabledEl.style.display = enableBotCB.checked ? 'initial' : 'none'
   }
 
+  const submitForm: Function = async () => {
+    const data = new FormData(form)
+    const channelModerationOptions: ChannelModerationOptions = {
+      bot: data.get('bot') === '1',
+      bannedJIDs: (data.get('banned_jids')?.toString() ?? '').split(/\r?\n|\r|\n/g),
+      forbiddenWords: (data.get('forbidden_words')?.toString() ?? '').split(/\r?\n|\r|\n/g)
+    }
+
+    const headers: any = clientOptions.peertubeHelpers.getAuthHeader() ?? {}
+    headers['content-type'] = 'application/json;charset=UTF-8'
+
+    const response = await fetch(
+      getBaseRoute(clientOptions) + '/api/moderation/channel/' + encodeURIComponent(channelId),
+      {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(channelModerationOptions)
+      }
+    )
+
+    if (!response.ok) {
+      throw new Error('Failed to save moderation options.')
+    }
+  }
+  const toggleSubmit: Function = (disabled: boolean) => {
+    form.querySelectorAll('input[type=submit], input[type=reset]').forEach((el) => {
+      if (disabled) {
+        el.setAttribute('disabled', 'disabled')
+      } else {
+        el.removeAttribute('disabled')
+      }
+    })
+  }
+
   enableBotCB.onclick = () => refresh()
-  form.onsubmit = () => false
-  form.onreset = () => refresh()
+  form.onsubmit = () => {
+    toggleSubmit(true)
+    submitForm().then(
+      () => {
+        clientOptions.peertubeHelpers.notifier.success(labelSaved)
+        toggleSubmit(false)
+      },
+      () => {
+        clientOptions.peertubeHelpers.notifier.error(labelError)
+        toggleSubmit(false)
+      }
+    )
+    return false
+  }
+  form.onreset = () => {
+    // Must refresh in a setTimeout, otherwise the checkbox state is not up to date.
+    setTimeout(() => refresh(), 1)
+  }
   refresh()
 }
 

client/common/moderation/register.ts

@@ -29,7 +29,7 @@ async function registerModeration (clientOptions: RegisterClientOptions): Promis
         return
       }
       rootEl.innerHTML = html
-      await vivifyModerationChannel(clientOptions, rootEl)
+      await vivifyModerationChannel(clientOptions, rootEl, channelId)
     }
   })
 

client/common/moderation/templates/channel.ts

@@ -1,5 +1,5 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
-import type { ChannelModerationOptions } from 'shared/lib/types'
+import type { ChannelModeration } from 'shared/lib/types'
 import { getBaseRoute } from '../../../videowatch/uri'
 // Must use require for mustache, import seems buggy.
 const Mustache = require('mustache')
@@ -21,18 +21,22 @@ async function renderModerationChannel (
       throw new Error('Missing or invalid channel id.')
     }
 
-    const channelModerationOptions: ChannelModerationOptions = await (await fetch(
+    const response = await fetch(
       getBaseRoute(registerClientOptions) + '/api/moderation/channel/' + encodeURIComponent(channelId),
       {
         method: 'GET',
         headers: peertubeHelpers.getAuthHeader()
       }
-    )).json()
-
-    // Basic testing that channelModerationOptions has the correct format
-    if ((typeof channelModerationOptions !== 'object') || !channelModerationOptions.channel) {
+    )
+    if (!response.ok) {
       throw new Error('Can\'t get channel moderation options.')
     }
+    const channelModeration: ChannelModeration = await (response).json()
+
+    // Basic testing that channelModeration has the correct format
+    if ((typeof channelModeration !== 'object') || !channelModeration.channel) {
+      throw new Error('Invalid channel moderation options.')
+    }
 
     const view = {
       title: await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_CHANNEL_TITLE),
@@ -43,12 +47,12 @@ async function renderModerationChannel (
       bannedJIDs: await peertubeHelpers.translate(LOC_LIVECHAT_MODERATION_CHANNEL_BANNED_JIDS_LABEL),
       save: await peertubeHelpers.translate(LOC_SAVE),
       cancel: await peertubeHelpers.translate(LOC_CANCEL),
-      channelModerationOptions
+      channelModeration
     }
 
     return Mustache.render(`
       <div class="margin-content">
-        <h1>{{title}} {{channelModerationOptions.channel.displayName}}</h1>
+        <h1>{{title}} {{channelModeration.moderation.channel.displayName}}</h1>
         <p>{{description}}</p>
         <form livechat-moderation-channel-options>
           <fieldset>
@@ -56,7 +60,7 @@ async function renderModerationChannel (
               <input
                 type="checkbox" name="bot"
                 value="1"
-                {{#channelModerationOptions.bot}} checked="checked" {{/channelModerationOptions.bot}}
+                {{#channelModeration.moderation.bot}} checked="checked" {{/channelModeration.moderation.bot}}
               />
               {{enableBot}}
             </label>
@@ -66,15 +70,15 @@ async function renderModerationChannel (
             <label>
               {{forbiddenWords}}
 <textarea name="forbidden_words">
-{{#channelModerationOptions.forbiddenWords}}{{.}}
-{{/channelModerationOptions.forbiddenWords}}
+{{#channelModeration.moderation.forbiddenWords}}{{.}}
+{{/channelModeration.moderation.forbiddenWords}}
 </textarea>
             </label>
             <label>
               {{bannedJIDs}}
 <textarea name="banned_jids">
-{{#channelModerationOptions.bannedJIDs}}{{.}}
-{{/channelModerationOptions.bannedJIDs}}
+{{#channelModeration.moderation.bannedJIDs}}{{.}}
+{{/channelModeration.moderation.bannedJIDs}}
 </textarea>
             </label>
           </fieldset>