Missed some i18n stuff

frontend/src/locale/en/translation.json

@@ -139,5 +139,48 @@
       "minutes": "minutes",
       "hours": "hours"
     }
+  },
+  "twitch": {
+    "config": {
+      "header": "Twitch module configuration",
+      "enable": "Enable twitch integration",
+      "apiguide-1": "You will need to create an application, here's how:",
+      "apiguide-2": "Go to <1>https://dev.twitch.tv/console/apps/create</1>",
+      "apiguide-3": "Use the following data for the required fields:",
+      "oauth-redir-uri": "OAuth Redirect URLs",
+      "apiguide-4": "Once created, create a <1>New Secret</1>, then copy both fields below!",
+      "app-client-id": "App Client ID",
+      "app-client-secret": "App Client Secret"
+    },
+    "bot": {
+      "header": "Twitch bot configuration",
+      "enable": "Enable twitch bot",
+      "err-module-disabled": "(Twitch integration must be enabled for this!)",
+      "channel-name": "Twitch channel name",
+      "username": "Bot username",
+      "username-expl": "must be a valid Twitch account",
+      "oauth-token": "Bot OAuth token",
+      "oauth-help": "You can get this by logging in with the bot account and going here: <1>https://twitchapps.com/tmi/</1>",
+      "chat-keys": "Enable chat keys (for 3rd party chat integration)",
+      "chat-history": "Chat history",
+      "suf-messages": "messages"
+    },
+    "commands": {
+      "command": "Command",
+      "response": "Response",
+      "response-help": "What does the bot reply to this command?",
+      "description": "Description",
+      "description-help": "What does this command do?",
+      "access-level": "Access level",
+      "access-everyone": "Everyone",
+      "access-vips": "VIPs",
+      "access-moderators": "Moderators",
+      "access-streamer": "Streamer only",
+      "access-level-help": "This specifies the minimum level, eg. if you choose VIPs, moderators and streamer can still use the command",
+      "header": "Bot commands",
+      "new-command": "New command",
+      "search": "Search by name",
+      "modify-command": "Modify command"
+    }
   }
 }

frontend/src/ui/pages/twitch/APISettings.tsx

@@ -1,5 +1,6 @@
 import { RouteComponentProps } from '@reach/router';
 import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useModule } from '../../../lib/react-utils';
 import apiReducer, { modules } from '../../../store/api/reducer';
@@ -9,6 +10,7 @@ export default function TwitchBotSettingsPage(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   params: RouteComponentProps<unknown>,
 ): React.ReactElement {
+  const { t } = useTranslation();
   const [moduleConfig, setModuleConfig] = useModule(modules.moduleConfig);
   const [twitchConfig, setTwitchConfig] = useModule(modules.twitchConfig);
   const dispatch = useDispatch();
@@ -18,7 +20,7 @@ export default function TwitchBotSettingsPage(
 
   return (
     <>
-      <h1 className="title is-4">Twitch module configuration</h1>
+      <h1 className="title is-4">{t('twitch.config.header')}</h1>
       <Field>
         <label className="checkbox">
           <input
@@ -34,34 +36,42 @@ export default function TwitchBotSettingsPage(
               )
             }
           />{' '}
-          Enable twitch integration
+          {t('twitch.config.enable')}
         </label>
       </Field>
       <div className="copyblock">
-        <p>You will need to create an application, here's how:</p>
+        <p>{t('twitch.config.apiguide-1')}</p>
         <p>
-          - Go to{' '}
+          {'- '}
-          <a href="https://dev.twitch.tv/console/apps/create">
+          <Trans i18nKey="twitch.config.apiguide-2">
-            https://dev.twitch.tv/console/apps/create
+            {'Go to '}
-          </a>
+            <a href="https://dev.twitch.tv/console/apps/create">
-          .
+              https://dev.twitch.tv/console/apps/create
+            </a>
+          </Trans>
+        </p>
+        <p>
+          {'- '}
+          {t('twitch.config.apiguide-3')}
         </p>
-        <p>- Use the following data for the required fields:</p>
         <dl className="inline-dl">
           <dt>OAuth Redirect URLs</dt>
           <dd>http://localhost:4337/oauth</dd>
           <dt>Category</dt>
           <dd>Broadcasting Suite</dd>
         </dl>
-        - Once created, create a <b>New Secret</b>, then copy both fields below!
+        {'- '}
+        <Trans i18nKey="twitch.config.apiguide-4">
+          Once created, create a <b>New Secret</b>, then copy both fields below!
+        </Trans>
       </div>
-      <Field name="App Client ID">
+      <Field name={t('twitch.config.app-client-id')}>
         <p className="control">
           <input
             disabled={!active}
             className="input"
             type="text"
-            placeholder="App Client ID"
+            placeholder={t('twitch.config.app-client-id')}
             value={twitchConfig?.api_client_id ?? ''}
             onChange={(ev) =>
               dispatch(
@@ -74,13 +84,13 @@ export default function TwitchBotSettingsPage(
           />
         </p>
       </Field>
-      <Field name="App Client Secret">
+      <Field name={t('twitch.config.app-client-secret')}>
         <p className="control">
           <input
             disabled={!active}
             className="input"
             type="password"
-            placeholder="App Client Secret"
+            placeholder={t('twitch.config.app-client-secret')}
             value={twitchConfig?.api_client_secret ?? ''}
             onChange={(ev) =>
               dispatch(
@@ -100,7 +110,7 @@ export default function TwitchBotSettingsPage(
           dispatch(setTwitchConfig(twitchConfig));
         }}
       >
-        Save
+        {t('actions.save')}
       </button>
     </>
   );

frontend/src/ui/pages/twitch/BotSettings.tsx

@@ -1,5 +1,6 @@
 import { RouteComponentProps } from '@reach/router';
 import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useModule } from '../../../lib/react-utils';
 import apiReducer, { modules } from '../../../store/api/reducer';
@@ -14,6 +15,7 @@ export default function TwitchBotSettingsPage(
   const [twitchBotConfig, setTwitchBotConfig] = useModule(
     modules.twitchBotConfig,
   );
+  const { t } = useTranslation();
   const dispatch = useDispatch();
 
   const busy = moduleConfig === null;
@@ -23,7 +25,7 @@ export default function TwitchBotSettingsPage(
 
   return (
     <>
-      <h1 className="title is-4">Twitch module configuration</h1>
+      <h1 className="title is-4">{t('twitch.bot.header')}</h1>
       <Field>
         <label className="checkbox">
           <input
@@ -39,17 +41,17 @@ export default function TwitchBotSettingsPage(
               )
             }
           />{' '}
-          Enable twitch bot
+          {t('twitch.bot.enable')}
-          {twitchActive ? '' : '(Twitch integration must be enabled for this!)'}
+          {twitchActive ? '' : t('twitch.bot.err-module-disabled')}
         </label>
       </Field>
-      <Field name="Twitch channel">
+      <Field name={t('twitch.bot.channel-name')}>
         <p className="control">
           <input
             disabled={!active}
             className="input"
             type="text"
-            placeholder="Twitch channel name"
+            placeholder={t('twitch.bot.channel-name')}
             value={twitchBotConfig?.channel ?? ''}
             onChange={(ev) =>
               dispatch(
@@ -62,13 +64,15 @@ export default function TwitchBotSettingsPage(
           />
         </p>
       </Field>
-      <Field name="Bot username (must be a valid Twitch account)">
+      <Field
+        name={`${t('twitch.bot.username')} (${t('twitch.bot.username-expl')})`}
+      >
         <p className="control">
           <input
             disabled={!active}
             className="input"
             type="text"
-            placeholder="Bot username"
+            placeholder={t('twitch.bot.username')}
             value={twitchBotConfig?.username ?? ''}
             onChange={(ev) =>
               dispatch(
@@ -81,13 +85,13 @@ export default function TwitchBotSettingsPage(
           />
         </p>
       </Field>
-      <Field name="Bot OAuth token">
+      <Field name={t('twitch.bot.oauth-token')}>
         <p className="control">
           <input
             disabled={!active}
             className="input"
             type="password"
-            placeholder="Bot OAuth token"
+            placeholder={t('twitch.bot.oauth-token')}
             value={twitchBotConfig?.oauth ?? ''}
             onChange={(ev) =>
               dispatch(
@@ -100,8 +104,14 @@ export default function TwitchBotSettingsPage(
           />
         </p>
         <p className="help">
-          You can get this by logging in with the bot account and going here:{' '}
+          <Trans i18nKey="twitch.bot.oauth-help">
-          <a href="https://twitchapps.com/tmi/">https://twitchapps.com/tmi/</a>
+            {
+              'You can get this by logging in with the bot account and going here: '
+            }
+            <a href="https://twitchapps.com/tmi/">
+              https://twitchapps.com/tmi/
+            </a>
+          </Trans>
         </p>
       </Field>
       <Field>
@@ -119,27 +129,34 @@ export default function TwitchBotSettingsPage(
               )
             }
           />{' '}
-          Enable chat keys (for 3rd party chat integration)
+          {t('twitch.bot.chat-keys')}
         </label>
       </Field>
-      <Field name="Chat history">
+      <Field name={t('twitch.bot.chat-history')}>
-        <p className="control">
+        <div className="field-body">
-          <input
+          <div className="field has-addons">
-            className="input"
+            <p className="control">
-            type="number"
+              <input
-            disabled={!twitchBotConfig?.chat_keys ?? true}
+                className="input"
-            placeholder="#"
+                type="number"
-            value={twitchBotConfig?.chat_history ?? '5'}
+                disabled={!twitchBotConfig?.chat_keys ?? true}
-            onChange={(ev) =>
+                placeholder="#"
-              dispatch(
+                value={twitchBotConfig?.chat_history ?? '5'}
-                apiReducer.actions.twitchBotConfigChanged({
+                onChange={(ev) =>
-                  ...twitchBotConfig,
+                  dispatch(
-                  chat_history: parseInt(ev.target.value, 10) ?? 0,
+                    apiReducer.actions.twitchBotConfigChanged({
-                }),
+                      ...twitchBotConfig,
-              )
+                      chat_history: parseInt(ev.target.value, 10) ?? 0,
-            }
+                    }),
-          />
+                  )
-        </p>
+                }
+              />
+            </p>
+            <p className="control">
+              <a className="button is-static">{t('twitch.bot.suf-messages')}</a>
+            </p>
+          </div>
+        </div>
       </Field>
       <button
         className="button"
@@ -149,7 +166,7 @@ export default function TwitchBotSettingsPage(
           dispatch(setTwitchBotConfig(twitchBotConfig));
         }}
       >
-        Save
+        {t('actions.save')}
       </button>
     </>
   );

frontend/src/ui/pages/twitch/Commands.tsx

@@ -1,5 +1,6 @@
 import { RouteComponentProps } from '@reach/router';
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useModule } from '../../../lib/react-utils';
 import { modules, TwitchBotCustomCommand } from '../../../store/api/reducer';
@@ -19,6 +20,7 @@ function CommandItem({
   onEdit,
   onDelete,
 }: CommandItemProps) {
+  const { t } = useTranslation();
   const [expanded, setExpanded] = useState(false);
 
   return (
@@ -46,16 +48,17 @@ function CommandItem({
       </header>
       {expanded ? (
         <div className="content">
-          Response: <blockquote>{item.response}</blockquote>
+          {t('twitch.commands.response')}:{' '}
+          <blockquote>{item.response}</blockquote>
           <div style={{ marginTop: '1rem' }}>
             <a className="button is-small" onClick={onToggleState}>
               {item.enabled ? 'Disable' : 'Enable'}
             </a>{' '}
             <a className="button is-small" onClick={onEdit}>
-              Edit
+              {t('actions.edit')}
             </a>{' '}
             <a className="button is-small" onClick={onDelete}>
-              Delete
+              {t('actions.delete')}
             </a>
           </div>
         </div>
@@ -89,6 +92,7 @@ function CommandModal({
   );
   const [response, setResponse] = useState(initialData?.response ?? '');
 
+  const { t } = useTranslation();
   const slugify = (str: string) =>
     str.toLowerCase().replace(/[^a-zA-Z0-9!.-_@:;'"<>]/gi, '-');
   const validForm = name !== '' && response !== '';
@@ -118,7 +122,7 @@ function CommandModal({
     >
       <div className="field is-horizontal">
         <div className="field-label is-normal">
-          <label className="label">Command</label>
+          <label className="label">{t('twitch.commands.command')}</label>
         </div>
         <div className="field-body">
           <div className="field">
@@ -136,14 +140,14 @@ function CommandModal({
       </div>
       <div className="field is-horizontal">
         <div className="field-label is-normal">
-          <label className="label">Description</label>
+          <label className="label">{t('twitch.commands.description')}</label>
         </div>
         <div className="field-body">
           <div className="field">
             <p className="control">
               <textarea
                 className="textarea"
-                placeholder="What does this command do?"
+                placeholder={t('twitch.commands.description-help')}
                 rows={1}
                 onChange={(ev) => setDescription(ev.target.value)}
                 value={description}
@@ -154,14 +158,14 @@ function CommandModal({
       </div>
       <div className="field is-horizontal">
         <div className="field-label is-normal">
-          <label className="label">Response</label>
+          <label className="label">{t('twitch.commands.response')}</label>
         </div>
         <div className="field-body">
           <div className="field">
             <p className="control">
               <textarea
                 className={response !== '' ? 'textarea' : 'textarea is-danger'}
-                placeholder="What does the bot reply to this command?"
+                placeholder={t('twitch.commands.response-help')}
                 onChange={(ev) => setResponse(ev.target.value)}
                 value={response}
               ></textarea>
@@ -171,24 +175,29 @@ function CommandModal({
       </div>
       <div className="field is-horizontal">
         <div className="field-label is-normal">
-          <label className="label">Access level</label>
+          <label className="label">{t('twitch.commands.access-level')}</label>
         </div>
         <div className="field-body">
           <div className="field">
             <p className="control">
               <span className="select">
                 <select>
-                  <option value="everyone">Everyone</option>
+                  <option value="everyone">
-                  <option value="vip">VIPs</option>
+                    {t('twitch.commands.access-everyone')}
-                  <option value="moderators">Moderators</option>
+                  </option>
-                  <option value="streamer">Streamer only</option>
+                  <option value="vip">
+                    {t('twitch.commands.access-vips')}
+                  </option>
+                  <option value="moderators">
+                    {t('twitch.commands.access-moderators')}
+                  </option>
+                  <option value="streamer">
+                    {t('twitch.commands.access-streamer')}
+                  </option>
                 </select>
               </span>
             </p>
-            <p className="help">
+            <p className="help">{t('twitch.commands.access-level-help')}</p>
-              This specifies the minimum level, eg. if you choose VIPs,
-              moderators and streamer can still use the command
-            </p>
           </div>
         </div>
       </div>
@@ -201,6 +210,7 @@ export default function TwitchBotCommandsPage(
 ): React.ReactElement {
   const [commands, setCommands] = useModule(modules.twitchBotCommands);
   const dispatch = useDispatch();
+  const { t } = useTranslation();
 
   const [createModal, setCreateModal] = useState(false);
   const [showModifyCommand, setShowModifyCommand] = useState(null);
@@ -258,11 +268,11 @@ export default function TwitchBotCommandsPage(
 
   return (
     <>
-      <h1 className="title is-4">Bot commands</h1>
+      <h1 className="title is-4">{t('twitch.commands.header')}</h1>
       <div className="field is-grouped">
         <p className="control">
           <button className="button" onClick={() => setCreateModal(true)}>
-            New command
+            {t('twitch.commands.new-command')}
           </button>
         </p>
 
@@ -270,7 +280,7 @@ export default function TwitchBotCommandsPage(
           <input
             className="input"
             type="text"
-            placeholder="Search by name"
+            placeholder={t('twitch.commands.search')}
             value={commandFilter}
             onChange={(ev) => setCommandFilter(ev.target.value)}
           />
@@ -278,16 +288,16 @@ export default function TwitchBotCommandsPage(
       </div>
 
       <CommandModal
-        title="New command"
+        title={t('twitch.commands.new-command')}
-        confirmText="Create"
+        confirmText={t('actions.create')}
         active={createModal}
         onConfirm={createCommand}
         onClose={() => setCreateModal(false)}
       />
       {showModifyCommand ? (
         <CommandModal
-          title="Modify command"
+          title={t('twitch.commands.modify-command')}
-          confirmText="Edit"
+          confirmText={t('actions.edit')}
           active={true}
           onConfirm={(newName, cmdData) =>
             modifyCommand(showModifyCommand, newName, cmdData)