Misc frontend fixes

frontend/.gitignore

@@ -1,3 +1,5 @@
 dist
 node_modules
 .parcel-cache
+.vscode
+.idea

frontend/src/locale/en/translation.json

@@ -59,9 +59,10 @@
       "endpoint": "Stulbe Endpoint",
       "username": "User name",
       "username-placeholder": "myUserName",
-      "authkey": "Authorization key",
+      "auth-key": "Authorization key",
-      "authkey-placeholder": "key goes here",
+      "auth-key-placeholder": "key goes here",
-      "authenticated": "Authenticated as"
+      "authenticated": "Authenticated as",
+      "auth-success-message": "Connection/Authentication was successful!"
     },
     "webhook": {
       "header": "Webhook subscriptions",

frontend/src/ui/pages/loyalty/Rewards.tsx

@@ -5,13 +5,10 @@ import prettyTime from 'pretty-ms';
 import { useTranslation } from 'react-i18next';
 import { useModule } from '../../../lib/react-utils';
 import { RootState } from '../../../store';
-import {
+import { createRedeem, modules } from '../../../store/api/reducer';
-  createRedeem,
-  modules,
-} from '../../../store/api/reducer';
 import Modal from '../../components/Modal';
 import { getInterval } from '../../../lib/time-utils';
-import {LoyaltyReward} from "../../../store/api/types";
+import { LoyaltyReward } from '../../../store/api/types';
 
 interface RewardItemProps {
   item: LoyaltyReward;
@@ -92,7 +89,7 @@ function RewardItem({
               {t('actions.test')}
             </a>{' '}
             <a className="button is-small" onClick={onToggleState}>
-              {item.enabled ? 'Disable' : 'Enable'}
+              {t(item.enabled ? 'actions.disable' : 'actions.enable')}
             </a>{' '}
             <a className="button is-small" onClick={onEdit}>
               {t('actions.edit')}

frontend/src/ui/pages/stulbe/Config.tsx

@@ -23,7 +23,7 @@ export default function StulbeConfigPage(
     try {
       const client = new Stulbe(stulbeConfig.endpoint);
       await client.auth(stulbeConfig.username, stulbeConfig.auth_key);
-      setTestResult('Connection/Authentication were successful!');
+      setTestResult(t('backend.config.auth-success-message'));
     } catch (e) {
       setTestResult(e.message);
     }
@@ -91,12 +91,12 @@ export default function StulbeConfigPage(
         </p>
       </div>
       <div className="field">
-        <label className="label">{t('backend.config.authkey')}</label>
+        <label className="label">{t('backend.config.auth-key')}</label>
         <p className="control">
           <input
             className="input"
             type="password"
-            placeholder={t('backend.config.authkey-placeholder')}
+            placeholder={t('backend.config.auth-key-placeholder')}
             disabled={busy || !active}
             value={stulbeConfig?.auth_key ?? ''}
             onChange={(ev) =>

frontend/src/ui/pages/stulbe/Webhook.tsx

@@ -52,6 +52,7 @@ const eventSubTestFn = {
 };
 
 export default function StulbeWebhooksPage(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   props: RouteComponentProps<unknown>,
 ): React.ReactElement {
   const { t } = useTranslation();

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

@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 import { useModule } from '../../../lib/react-utils';
 import { modules } from '../../../store/api/reducer';
 import Modal from '../../components/Modal';
-import {TwitchBotCustomCommand} from "../../../store/api/types";
+import { TwitchBotCustomCommand } from '../../../store/api/types';
 
 interface CommandItemProps {
   name: string;
@@ -207,6 +207,7 @@ function CommandModal({
 }
 
 export default function TwitchBotCommandsPage(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   props: RouteComponentProps<unknown>,
 ): React.ReactElement {
   const [commands, setCommands] = useModule(modules.twitchBotCommands);

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

@@ -2,6 +2,7 @@ import { RouteComponentProps } from '@reach/router';
 import React from 'react';
 
 export default function TwitchBotModulesPage(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   props: RouteComponentProps<unknown>,
 ): React.ReactElement {
   return <>WIP!!</>;