From a25c4822fa63b44c62dcafd884fa1d127a17a339 Mon Sep 17 00:00:00 2001 From: John Livingston Date: Wed, 9 Aug 2023 12:20:19 +0200 Subject: [PATCH] Moderation configuration screen: WIP. --- client/@types/global.d.ts | 6 +++ client/common/moderation/logic/channel.ts | 29 +++++++++++ client/common/moderation/register.ts | 10 +++- client/common/moderation/templates/channel.ts | 48 ++++++++++++++++--- languages/en.yml | 7 +++ server/lib/routers/api/moderation.ts | 5 +- shared/lib/types.ts | 3 ++ 7 files changed, 100 insertions(+), 8 deletions(-) create mode 100644 client/common/moderation/logic/channel.ts diff --git a/client/@types/global.d.ts b/client/@types/global.d.ts index 255dd21c..348caaf7 100644 --- a/client/@types/global.d.ts +++ b/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 diff --git a/client/common/moderation/logic/channel.ts b/client/common/moderation/logic/channel.ts new file mode 100644 index 00000000..ca14e1d0 --- /dev/null +++ b/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 { + 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 +} diff --git a/client/common/moderation/register.ts b/client/common/moderation/register.ts index a72bd365..689b9874 100644 --- a/client/common/moderation/register.ts +++ b/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) } }) diff --git a/client/common/moderation/templates/channel.ts b/client/common/moderation/templates/channel.ts index a2fa4dbc..2d8db176 100644 --- a/client/common/moderation/templates/channel.ts +++ b/client/common/moderation/templates/channel.ts @@ -13,7 +13,7 @@ const Mustache = require('mustache') async function renderModerationChannel ( registerClientOptions: RegisterClientOptions, channelId: string -): Promise { +): Promise { 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(`
-

{{title}}

+

{{title}} {{channelModerationOptions.channel.displayName}}

{{description}}

+
+
+ +
+
+ {{botOptions}} + + +
+ + +
`, view) as string } catch (err: any) { diff --git a/languages/en.yml b/languages/en.yml index f8a5ea85..22496bcd 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -279,9 +279,16 @@ prosody_components_list_description: |
  • Only use alphanumeric characters in the secret passphrase (use at least 15 characters).
    • +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" + diff --git a/server/lib/routers/api/moderation.ts b/server/lib/routers/api/moderation.ts index 102e7a3a..17512ad6 100644 --- a/server/lib/routers/api/moderation.ts +++ b/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) diff --git a/shared/lib/types.ts b/shared/lib/types.ts index c55d0292..bbe9b1b8 100644 --- a/shared/lib/types.ts +++ b/shared/lib/types.ts @@ -52,6 +52,9 @@ interface ChannelModerationOptions { name: string displayName: string } + bot: boolean + forbiddenWords: string[] + bannedJIDs: string[] } export type {