From 9844c5480f2518eedee27e0fe37add6a2bc7ab14 Mon Sep 17 00:00:00 2001
From: Ash Keel <ash@nebula.cafe>
Date: Sat, 20 Apr 2024 14:51:30 +0200
Subject: [PATCH] fix: reset chat account and fix onboarding

---
 frontend/src/locale/en/translation.json       |  5 ++-
 frontend/src/locale/it/translation.json       |  2 +-
 .../src/ui/components/TwitchUserBlock.tsx     |  1 -
 frontend/src/ui/pages/Onboarding.tsx          |  5 ++-
 .../TwitchSettings/TwitchChatSettings.tsx     | 40 ++++++++++++++-----
 5 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/frontend/src/locale/en/translation.json b/frontend/src/locale/en/translation.json
index b4fe926..f1dd5dc 100644
--- a/frontend/src/locale/en/translation.json
+++ b/frontend/src/locale/en/translation.json
@@ -75,7 +75,8 @@
         "header": "Chat settings",
         "cooldown-tip": "Global chat cooldown for commands (in seconds)",
         "default-user": "Using stream account, use the button below to authenticate with a different account.",
-        "chat-account": "Chat account"
+        "chat-account": "Chat account",
+        "clear-button": "Revert to default account"
       },
       "events": {
         "loading-data": "Querying user data from Twitch APIs…",
@@ -292,7 +293,7 @@
       "welcome-continue-button": "Get started",
       "skip-button": "Skip onboarding",
       "welcome-p1": "It looks like this is the first time you started {{APPNAME}}. You can click the \"Get started\" button at the bottom to set things up one by one, or just skip everything and configure things manually later.",
-      "welcome-p2": "Heads up: if you're used to other platforms, this unfortunately will require some more work on your end.",
+      "welcome-p2": "Heads up: if you're used to other tools for streaming, unfortunately this one will require some more work from your end.",
       "sections": {
         "landing": "Welcome",
         "twitch-config": "Twitch integration",
diff --git a/frontend/src/locale/it/translation.json b/frontend/src/locale/it/translation.json
index aa2eb61..dfb8b63 100644
--- a/frontend/src/locale/it/translation.json
+++ b/frontend/src/locale/it/translation.json
@@ -292,7 +292,7 @@
       "welcome-continue-button": "Cominciamo",
       "welcome-header": "Benvenuto su {{APPNAME}}",
       "welcome-p1": "Sembra che questa sia la prima volta che avvii {{APPNAME}}. \nPuoi fare clic sul pulsante \"Cominciamo\" in basso per impostare tutto con una procedura guidata oppure semplicemente saltare tutto e configurare le cose manualmente in un secondo momento.",
-      "welcome-p2": "Giusto una cosa: se sei abituato ad altre piattaforme, stavolta toccherà un po' più lavoro da parte tua!",
+      "welcome-p2": "Giusto una cosa: se sei abituato ad altri strumenti di questo tipo, stavolta toccherà un po' più lavoro da parte tua!",
       "sections": {
         "done": "Pronti a partire!",
         "landing": "Benvenuto",
diff --git a/frontend/src/ui/components/TwitchUserBlock.tsx b/frontend/src/ui/components/TwitchUserBlock.tsx
index 77d2cb6..4808732 100644
--- a/frontend/src/ui/components/TwitchUserBlock.tsx
+++ b/frontend/src/ui/components/TwitchUserBlock.tsx
@@ -41,7 +41,6 @@ export default function TwitchUserBlock({
       const res = await GetTwitchLoggedUser(authKey);
       setUser(res);
     } catch (e) {
-      console.error(e);
       setUser({ ok: false, error: (e as Error).message });
     }
   };
diff --git a/frontend/src/ui/pages/Onboarding.tsx b/frontend/src/ui/pages/Onboarding.tsx
index 2db67d1..8e16783 100644
--- a/frontend/src/ui/pages/Onboarding.tsx
+++ b/frontend/src/ui/pages/Onboarding.tsx
@@ -465,7 +465,10 @@ function TwitchEventsStep() {
       <SectionHeader>
         {t('pages.twitch-settings.events.current-status')}
       </SectionHeader>
-      <TwitchUserBlock authKey="twitch/auth-keys" />
+      <TwitchUserBlock
+        authKey="twitch/auth-keys"
+        noUserMessage={t('pages.twitch-settings.events.err-no-user')}
+      />
       <TextBlock>{t('pages.onboarding.twitch-ev-p3')}</TextBlock>
       <Button
         variation={'primary'}
diff --git a/frontend/src/ui/pages/TwitchSettings/TwitchChatSettings.tsx b/frontend/src/ui/pages/TwitchSettings/TwitchChatSettings.tsx
index b6e3f64..853b81f 100644
--- a/frontend/src/ui/pages/TwitchSettings/TwitchChatSettings.tsx
+++ b/frontend/src/ui/pages/TwitchSettings/TwitchChatSettings.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { useModule, useStatus } from '~/lib/react';
-import { useAppDispatch } from '~/store';
+import { useLiveKeyString, useModule, useStatus } from '~/lib/react';
+import { useAppDispatch, useAppSelector } from '~/store';
 import apiReducer, { modules } from '~/store/api/reducer';
 import { startAuthFlow } from '~/lib/twitch';
 import TwitchUserBlock from '~/ui/components/TwitchUserBlock';
@@ -9,6 +9,7 @@ import SaveButton from '../../components/forms/SaveButton';
 import {
   Button,
   Field,
+  FlexRow,
   InputBox,
   Label,
   SectionHeader,
@@ -20,6 +21,9 @@ export default function TwitchChatSettings() {
     modules.twitchChatConfig,
   );
   const [twitchConfig, setTwitchConfig] = useModule(modules.twitchConfig);
+  const kv = useAppSelector((state) => state.api.client);
+  const authKey = 'twitch/chat/chatter-account';
+  const authKeyValue = useLiveKeyString('twitch/chat/chatter-account');
   const status = useStatus(loadStatus.save);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -40,15 +44,29 @@ export default function TwitchChatSettings() {
         authKey={'twitch/chat/chatter-account'}
         noUserMessage={t('pages.twitch-settings.chat.default-user')}
       />
-      <Button
-        variation="primary"
-        css={{ marginTop: '1rem' }}
-        onClick={() => {
-          void startAuthFlow('chat');
-        }}
-      >
-        <ExternalLinkIcon /> {t('pages.twitch-settings.events.auth-button')}
-      </Button>
+      <FlexRow align="left" spacing="1">
+        <Button
+          variation="primary"
+          css={{ marginTop: '1rem' }}
+          onClick={() => {
+            void startAuthFlow('chat');
+          }}
+        >
+          <ExternalLinkIcon /> {t('pages.twitch-settings.events.auth-button')}
+        </Button>
+        {authKeyValue && (
+          <Button
+            variation="danger"
+            css={{ marginTop: '1rem' }}
+            onClick={() => {
+              kv.deleteKey(authKey);
+            }}
+          >
+            {t('pages.twitch-settings.chat.clear-button')}
+          </Button>
+        )}
+      </FlexRow>
+
       <SectionHeader>{t('pages.twitch-settings.chat.header')}</SectionHeader>
       <Field size="fullWidth">
         <Label htmlFor="bot-chat-history">