UI WIP.

client/common/configuration/templates/channel.ts

@@ -49,6 +49,9 @@ async function renderConfigurationChannel (
         target=_blank
         class="orange-button peertube-button-link"
       >${helpIcon}</a>`
+    const helpButtonForbiddenWords = helpButton
+    const helpButtonQuotes = helpButton
+    const helpButtonCommands = helpButton
 
     const view = {
       title: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_TITLE),
@@ -70,16 +73,28 @@ async function renderConfigurationChannel (
       forbiddenWordsRegexpDesc: await peertubeHelpers.translate(
         LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_REGEXP_DESC
       ),
+      forbiddenWordsApplyToModerators: await peertubeHelpers.translate(
+        LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_APPLYTOMODERATORS_LABEL
+      ),
+      forbiddenWordsApplyToModeratorsDesc: await peertubeHelpers.translate(
+        LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_APPLYTOMODERATORS_DESC
+      ),
       quoteLabel: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL),
       quoteDesc: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC),
+      quoteDesc2: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC2),
       quoteDelayLabel: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DELAY_LABEL),
       quoteDelayDesc: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DELAY_DESC),
-      quoteCommandLabel: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_COMMAND_LABEL),
-      quoteCommandDesc: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_COMMAND_DESC),
+      commandLabel: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_LABEL),
+      commandDesc: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC),
+      commandCmdLabel: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_CMD_LABEL),
+      commandCmdDesc: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_CMD_DESC),
+      commandMessageLabel: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_MESSAGE_LABEL),
+      commandMessageDesc: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_MESSAGE_DESC),
       // bannedJIDs: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BANNED_JIDS_LABEL),
       save: await peertubeHelpers.translate(LOC_SAVE),
       cancel: await peertubeHelpers.translate(LOC_CANCEL),
       botNickname: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME),
+      moreInfo: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FOR_MORE_INFO),
       forbiddenWordsArray: [0, 1, 2].map(count => {
         return {
           displayNumber: count + 1,
@@ -87,7 +102,14 @@ async function renderConfigurationChannel (
           displayHelp: count === 0
         }
       }),
-      quotesArray: [0, 1, 2].map(count => {
+      quotesArray: [0].map(count => {
+        return {
+          displayNumber: count + 1,
+          fieldNumber: count,
+          displayHelp: count === 0
+        }
+      }),
+      cmdsArray: [0, 1, 2].map(count => {
         return {
           displayNumber: count + 1,
           fieldNumber: count,
@@ -95,6 +117,9 @@ async function renderConfigurationChannel (
         }
       }),
       helpButton,
+      helpButtonForbiddenWords,
+      helpButtonCommands,
+      helpButtonQuotes,
       channelConfiguration
     }
 
@@ -106,6 +131,7 @@ async function renderConfigurationChannel (
             <span>{{channelConfiguration.channel.displayName}}</span>
             <span>{{channelConfiguration.channel.name}}</span>
           </span>
+          {{{helpButton}}}
         </h1>
         <p>{{description}}</p>
         <form livechat-configuration-channel-options role="form">
@@ -146,8 +172,8 @@ async function renderConfigurationChannel (
               <div class="col-12 col-lg-4 col-xl-3">
                 <h2>{{forbiddenWords}} #{{displayNumber}}</h2>
                 {{#displayHelp}}
-                  <p>{{forbiddenWordsDesc}}</p>
-                  {{{helpButton}}}
+                  <p>{{forbiddenWordsDesc}} {{moreInfo}}</p>
+                  {{{HelpButtonForbiddenWords}}}
                 {{/displayHelp}}
               </div>
               <div class="col-12 col-lg-8 col-xl-9">
@@ -176,6 +202,17 @@ async function renderConfigurationChannel (
                   </label>
                   <p class="form-group-description">{{forbiddenWordsRegexpDesc}}</p>
                 </div>
+                <div class="form-group">
+                  <label>
+                    <input
+                      type="checkbox"
+                      name="forbidden_words_applytomoderators_{{fieldNumber}}"
+                      value="1"
+                    />
+                    {{forbiddenWordsApplyToModerators}}
+                  </label>
+                  <p class="form-group-description">{{forbiddenWordsApplyToModeratorsDesc}}</p>
+                </div>
                 <div class="form-group">
                   <label for="peertube-livechat-forbidden-words-reason-{{fieldNumber}}">{{forbiddenWordsReason}}</label>
                   <input
@@ -196,49 +233,78 @@ async function renderConfigurationChannel (
               <div class="col-12 col-lg-4 col-xl-3">
                 <h2>{{quoteLabel}} #{{displayNumber}}</h2>
                 {{#displayHelp}}
-                  <p>{{quoteDesc}}</p>
-                  {{{helpButton}}}
+                  <p>{{quoteDesc}} {{moreInfo}}</p>
+                  {{{helpButtonQuotes}}}
                 {{/displayHelp}}
               </div>
               <div class="col-12 col-lg-8 col-xl-9">
                 <div class="form-group">
                   <label for="peertube-livechat-quote-{{fieldNumber}}">{{quoteLabel}}</label>
-                  <input
-                    type="text"
+                  {{! warning: don't add extra line break in textarea! }}
+                  <textarea
                     name="quote_{{fieldNumber}}"
-                    class="form-control"
                     id="peertube-livechat-quote-{{fieldNumber}}"
-                    value=""
-                  />
+                    class="form-control"
+                  >{{
+                    #channelConfiguration.configuration.TODO
+                  }}{{.}}\n{{
+                    /channelConfiguration.configuration.TODO
+                  }}</textarea>
+                  <p class="form-group-description">{{quoteDesc2}}</p>
                 </div>
                 <div class="form-group">
                   <label for="peertube-livechat-quote-delay-{{fieldNumber}}">{{quoteDelayLabel}}</label>
                   <input
                     type="number"
-                    min="0"
+                    min="1"
                     max="6000"
                     step="1"
                     name="quote_delay_{{fieldNumber}}"
                     class="form-control"
                     id="peertube-livechat-quote-delay-{{fieldNumber}}"
-                    value="0"
+                    value="5"
                   />
                   <p class="form-group-description">{{quoteDelayDesc}}</p>
                 </div>
-                <div class="form-group">
-                  <label for="peertube-livechat-quote-command-{{fieldNumber}}">{{quoteCommandLabel}}</label>
-                  <input
-                    type="text"
-                    name="quote_command_{{fieldNumber}}"
-                    class="form-control"
-                    id="peertube-livechat-quote-command-{{fieldNumber}}"
-                    value=""
-                  />
-                  <p class="form-group-description">{{quoteCommandDesc}}</p>
-                </div>
               </div>
             </div>
           {{/quotesArray}}
+
+          {{#cmdsArray}}{{! iterating on cmdsArray to display N fields }}
+            <div class="row mt-5" livechat-configuration-channel-options-bot-enabled>
+              <div class="col-12 col-lg-4 col-xl-3">
+                <h2>{{commandLabel}} #{{displayNumber}}</h2>
+                {{#displayHelp}}
+                  <p>{{commandDesc}} {{moreInfo}}</p>
+                  {{{helpButtonCommands}}}
+                {{/displayHelp}}
+              </div>
+              <div class="col-12 col-lg-8 col-xl-9">
+                <div class="form-group">
+                  <label for="peertube-livechat-command-{{fieldNumber}}">{{commandCmdLabel}}</label>
+                  <input
+                    type="text"
+                    name="command_{{fieldNumber}}"
+                    class="form-control"
+                    id="peertube-livechat-command-{{fieldNumber}}"
+                    value=""
+                  />
+                  <p class="form-group-description">{{commandCmdDesc}}</p>
+                </div>
+                <div class="form-group">
+                  <label for="peertube-livechat-command-message-{{fieldNumber}}">{{commandMessageLabel}}</label>
+                  <input
+                    type="text"
+                    name="command_message_{{fieldNumber}}"
+                    class="form-control"
+                    id="peertube-livechat-command-message-{{fieldNumber}}"
+                    value=""
+                  />
+                  <p class="form-group-description">{{commandMessageDesc}}</p>
+                </div>
+              </div>
+            </div>
+          {{/cmdsArray}}
           <div class="form-group">
             <input type="submit" value="{{save}}" />
             <input type="reset" value="{{cancel}}" />