WIP debug page and loyalty page

frontend/src/locale/en/translation.json

@@ -190,6 +190,20 @@
       "request": "Request",
       "no-redeems": "No pending redeems",
       "no-users": "No viewers found"
+    },
+    "debug": {
+      "dismiss-warning": "I am not afraid! ...well ok maybe a little",
+      "big-ass-warning": "Using this page can severely wreck your database. Please make sure you know what you're doing!",
+      "disclaimer-header": "Big scary disclaimer"
+    },
+    "loyalty-rewards": {
+      "title": "Rewards and goals"
+    },
+    "strimertul": {
+      "need-help": "Need help?",
+      "need-help-p1": "If you need help, want to report a bug or have suggestions on how to make {{APPNAME}} better, please reach out via any of the following channels:",
+      "license-header": "License",
+      "license-notice-strimertul": "{{APPNAME}} is licensed under <license>GNU Affero General Public License v3.0</license>"
     }
   },
   "form-actions": {
@@ -203,7 +217,8 @@
     "delete": "Delete",
     "cancel": "Cancel",
     "ok": "OK",
-    "add": "Add"
+    "add": "Add",
+    "warning-delete": "This cannot be undone"
   },
   "debug": {
     "dev-build": "Development build"

frontend/src/ui/App.tsx

@@ -33,6 +33,8 @@ import ChatAlertsPage from './pages/ChatAlerts';
 import LoyaltyConfigPage from './pages/LoyaltyConfig';
 import LoyaltyQueuePage from './pages/LoyaltyQueue';
 import StrimertulPage from './pages/Strimertul';
+import DebugPage from './pages/Debug';
+import LoyaltyRewardsPage from './pages/LoyaltyRewards';
 
 const LoadingDiv = styled('div', {
   display: 'flex',
@@ -182,6 +184,7 @@ export default function App(): JSX.Element {
           <Routes>
             <Route path="/" element={<Dashboard />} />
             <Route path="/about" element={<StrimertulPage />} />
+            <Route path="/debug" element={<DebugPage />} />
             <Route path="/http" element={<ServerSettingsPage />} />
             <Route path="/backend" element={<BackendIntegrationPage />} />
             <Route path="/twitch/settings" element={<TwitchSettingsPage />} />
@@ -196,6 +199,7 @@ export default function App(): JSX.Element {
             <Route path="/twitch/bot/alerts" element={<ChatAlertsPage />} />
             <Route path="/loyalty/settings" element={<LoyaltyConfigPage />} />
             <Route path="/loyalty/users" element={<LoyaltyQueuePage />} />
+            <Route path="/loyalty/rewards" element={<LoyaltyRewardsPage />} />
           </Routes>
         </PageWrapper>
       </PageContent>

frontend/src/ui/pages/Debug.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, PageContainer, PageHeader, PageTitle, styled } from '../theme';
+
+const Disclaimer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+  flex: '1',
+  height: '100vh',
+});
+
+const DisclaimerTitle = styled('h1', {
+  margin: 0,
+});
+
+const DisclaimerParagraph = styled('p', {
+  margin: '2rem 1rem',
+});
+
+export default function DebugPage(): React.ReactElement {
+  const { t } = useTranslation();
+  const [warningDismissed, setWarningDismissed] = React.useState(false);
+
+  if (!warningDismissed) {
+    return (
+      <Disclaimer>
+        <DisclaimerTitle>{t('pages.debug.disclaimer-header')}</DisclaimerTitle>
+        <DisclaimerParagraph>
+          {t('pages.debug.big-ass-warning')}
+        </DisclaimerParagraph>
+        <Button variation="primary" onClick={() => setWarningDismissed(true)}>
+          {t('pages.debug.dismiss-warning')}
+        </Button>
+      </Disclaimer>
+    );
+  }
+  return <PageContainer>WIP</PageContainer>;
+}

frontend/src/ui/pages/LoyaltyRewards.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { PageContainer, PageHeader, PageTitle } from '../theme';
+
+export default function LoyaltyRewardsPage(): React.ReactElement {
+  const { t } = useTranslation();
+
+  return (
+    <PageContainer>
+      <PageHeader>
+        <PageTitle>{t('pages.loyalty-rewards.title')}</PageTitle>
+      </PageHeader>
+    </PageContainer>
+  );
+}