refactor: Refactor authentication module, update installation instruc…

…tions

README.md

@@ -1,12 +1,12 @@
 # Twitch Chatbot Multitask Task List Overlay
 
-## ⛔️ UNDER CONSTRUCTION ⛔️ updated Dec 14th 2024
+## 💚 UPDATED Installation instructions 💚 Dec. 29th 2024
 
 A recent change in the Twitch auth token validation process requires me to make a few updates to this app. ETA on fix: **Dec. 31th 2024**
 
-<img src="./images/live-sample.png">
+<img src="./images/live-sample.png" style="max-width: 1280px;">
 <br >
-<img src="./images/customize-sample.png">
+<img src="./images/customize-sample.png" style="max-width: 1280px;">
 
 ## What and Why?
 
@@ -37,65 +37,97 @@ Viewers can create, edit, mark as done, and delete tasks from the list. This Tas
 ## Table of Contents
 
 - [Installation Instructions](#installation-instructions)
+  - [Download App](#download-app)
+  - [Get Twitch oAuth](#get-twitch-oauth)
+  - [Setup in OBS](#setup-in-obs)
 - [Customization settings](#customization-settings)
-  - [Behavior Settings](#behavior-settings)
+  - [App Behavior Settings](#behavior-settings)
   - [Styles Settings](#styles-settings)
-  - [Fonts Styles](#fonts-styles)
-  - [App Styles](#app-styles)
-  - [Header Styles](#header-styles)
-  - [Card Styles (individual cards)](#card-styles-individual-cards)
+    - [Fonts Styles](#fonts-styles)
+    - [App Styles](#app-styles)
+    - [Header Styles](#header-styles)
+    - [Card Styles (individual cards)](#card-styles-individual-cards)
 - [Commands](#commands)
   - [Commands for Everyone](#commands-for-everyone)
   - [Commands for Broadcasters and Moderators](#commands-for-broadcasters-and-moderators)
 - [Aliases](#aliases)
 - [Credits](#credits)
 
-## Installation Introduction
+## Installation Instructions
 
-1. **Download this repo** - Download this repo by clicking on the green `Code` button and selecting `Download ZIP`.
+### Download App
 
-2. **Unzip the Download** - Once the download is complete, unzip the downloaded file to a location on your computer where you can easily access it and remember where it is.
+1. **Downloading this App** - Download App by clicking on the green `Code` button and selecting `Download ZIP`.
 
-3. **Setup a Browser Source in OBS** - Open OBS and add a new `Browser Source` to your scene. Name it `TaskList overlay` or something you can easily remember.
+2. **Unzip the Download** - Once the download is complete, unzip (aka open) the downloaded file to a location on your computer where you can easily access it and remember where it is.
 
-4. **Select the Local file checkbox** - In the Browser Source settings, select `Local file` and then `Browse` to the location where you unzipped the downloaded files. Select the `index.html` file and click `Open`.
+### Get Twitch oAuth
 
-5. **Set the Width and Height** - Next, in the Browser Source, set the width and height. I recommend 660px Width and 1600px Height. Adjust as needed.
+1. **Log in to Twitch Developer Console**
 
-6. **Done!** - Select OK to save!. Read the [Customization settings](#customization-settings) section to customize the MultiTask list widget and connect it to your Twitch chat.
+   - Open and log into [https://dev.twitch.tv/console](https://dev.twitch.tv/console) using your web browser.
+   - Log in using your bot account or your main Twitch account.
 
-<img width="500px" src="./images/obs-source-example.png"/>
+2. **Register The App with Twitch**
 
-## Customization settings
+   - Once logged in, Click the **"Register Your Application"** button.
+   - Enter a unique name for your application in the **Name** field. (e.g., "TaskListBot123")
+   - In the **OAuth Redirect URLs** field, enter `http://localhost`
+   - In the **Category** field, select **"Chat Bot"**.
+   - For the **Client Type**, select **"Public"**.
+   - Click the **"Create"** button to complete the registration.
+   - Once the App is registered, you will see a **Client ID**. Copy this ID and save it for later. (do not share this ID with anyone)
 
-Open the `configs.js` file and modify the following settings to customized the TaskList widget Behavior & Appearance.
+3. **Generate an OAuth Access Token**
 
-> IMPORTANT! — Any changes you make to the `configs.js` file will require you to click the `Refresh Cache of Current Page` button in Browser Source you just created to see the style changes you make. (see image above, #5.)
+   - Copy the following URL and replace the `YOUR-APP-CLIENT-ID` with the **Client ID** from your registered app you had made in the previous step.
 
-### Twitch oAuth - Required
+    ```txt
+    https://id.twitch.tv/oauth2/authorize?response_type=token&client_id=YOUR-APP-CLIENT-ID&redirect_uri=http://localhost&scope=chat:read+chat:edit+user:bot
+    ```
 
-1. Get auth token from <https://twitchapps.com/tmi> (<- no longer working)
-2. open `configs.js` file
-3. Replace `OAUTHTOKEN` with your token
-4. Replace `CHANNEL` with your channel name
-5. Replace `USERNAME` with your username — in most cases it is the same as your channel name.
+   - Open your browser and enter the URL containing your **Client ID** into the address bar. See [Twitch Authorize page Example](./images/twitch-authorize.png)
+   - After granting Authorization, you’ll be redirected to a blank page which will show an error message. This is normal.
+   - The blank page will contain a URL in the address bar. This URL contains the access token you need. See [Access Token Example](./images/access-token-page.png)
+   - Copy the token from the URL (it follows `#access_token=` and ends just before `&scope`).
+   - Save this token in a safe place for the next step.
 
-```js
-twitch_oauth = "OAUTHTOKEN",
-twitch_channel = "CHANNEL",
-twitch_username = "USERNAME",
-```
+5. **Update Your \_auth.js File**
+
+   - Navigate to the location where you unzipped the downloaded files.
+   - Open the `_auth.js` file in a text editor. (Notepad works, but I recommend downloading VS Code to make it easier to read and edit the file.)
+   - Replace `OAUTHTOKEN` with the access token you copied.
+   - Replace `CHANNEL` with your Twitch channel name.
+   - Replace `USERNAME` with your Twitch main username or bot username.
 
 When you are done, it should look something like this:
 
 ```js
-twitch_oauth = "oauth:138kjl2a0r3dpaf93asdf",
-twitch_channel = "jujococs",
-twitch_username = "jujococs",
+twitch_oauth = "138kjl2a0r3dpaf93as4d1fz",
+twitch_channel = "jujoco_dev",
+twitch_username = "jujoco_bot",
 ```
 
+### Setup in OBS
+
+1. **Setup a Browser Source in OBS** - Open OBS and add a new `Browser Source` to your scene. Name it `TaskList overlay` or something you can easily remember.
+
+2. **Select the Local file checkbox** - In the Browser Source settings, select `Local file` and then `Browse` to the location where you unzipped the downloaded files. Select the `index.html` file and click `Open`.
+
+3. **Set the Width and Height** - Next, in the Browser Source, set the width and height. I recommend 660px Width and 1600px Height. Adjust as needed.
+
+4. **Done!** - Select OK to save!. Read the [Customization settings](#customization-settings) section to customize the MultiTask list widget and connect it to your Twitch chat.
+
+<img width="500px" src="./images/obs-source-example.png"/>
+
+## Customization settings
+
+> IMPORTANT! — Any changes you make to the `_auth.js, _settings.js, _styles.js, _configAdmin.js, or _configUser.js` will require you to click the `Refresh Cache of Current Page` button in the Browser Source you just created to apply the changes. (see image above, #6.)
+
 ### Behavior Settings
 
+Open the `_settings.js` file and modify the following settings to customized the TaskList behavior. Default values are provided below. If at any point you want to reset the styles to the default values you can find the default values below next to each style name.
+
 `languageCode`: Default = **"EN"**
 
 - **"EN"**: English translation
@@ -139,21 +171,21 @@ Use this to test the TaskList without affecting the real task list and visually
 
 ### Styles Settings
 
-The following settings are for styling the TaskList. Default values are provided below. If at any point you want to reset the styles to the default values you can find the default values below next to each style name.
+Open the `_styles.js` file and modify the following settings to customized the TaskList appearance. Default values are provided below. If at any point you want to reset the styles to the default values you can find the default values below next to each style name.
 
-**Font Family** - selection available @ https://fonts.google.com
+#### Font Family - more available @ <https://fonts.google.com>
 
 - headerFontFamily: "Roboto Mono"
 - cardFontFamily: "Roboto Mono"
 
-**App Styles**
+#### App Styles
 
 - appBorderRadius: Default = **"5px"**
 - appPadding: Default = **"8px"**
 - appBackgroundImage: Default = **"url(../images/transparent-image.png)"**
 - appBackgroundColor: Default = **"rgba(0, 0, 0, 0)"**
 
-**Header Styles**
+#### Header Styles
 
 - headerDisplay: Default = **"flex"**
 - headerBorderRadius: Default = **"6px"**
@@ -163,26 +195,26 @@ The following settings are for styling the TaskList. Default values are provided
 - headerFontColor: Default = **"#FFFFFF"**
 - headerFontWeight: Default = **"normal"**
 
-**Card Styles**
+#### Card Styles
 
 - cardGapBetween: Default = **"6px"**
 - cardBorderRadius: Default = **"6px"**
 - cardBackgroundColor: Default = **"rgba(45, 45, 45, 0.7)"**
 
-**Username Styles**
+#### Username Styles
 
 - usernameFontSize: Default = **"18px"**
 - usernameColor: Default = **"#FFFFFF"**
 - usernameFontWeight: Default = **"normal"**
 
-**Task Styles**
+#### Task Styles
 
 - taskFontSize: Default = **"16px"**
 - taskFontColor: Default = **"#FFFFFF"**
 - taskFontWeight: Default = **"normal"**
 - taskDoneFontColor: Default = **"#aaaaaa"**
 - taskDoneFontStyle: Default = **"#italic"**
-- taskDoneTextDecoration: Default = **"none"**
+- taskDoneTextDecoration: Default = **"line-through"**
 
 ## Commands
 

_auth.js

@@ -1,11 +1,9 @@
 // ========================================
-// Authentication and channel - Required
-// Before you start modifying these settings,
-// get your oauth token from https://twitchapps.com/tmi
+// oAuth access token and channel info - Required
 // ========================================
 /** @type {AuthConfig} */
 const _authConfig = {
-  twitch_oauth: "OAUTHTOKEN", // Replace OAUTHTOKEN with your Twitch oauth token
-  twitch_channel: "CHANNEL", // Replace CHANNEL with a Twitch channel name
-  twitch_username: "USERNAME", // Replace USERNAME with your Twitch username
-};
+  twitch_oauth: "OAUTHTOKEN",
+  twitch_channel: "CHANNEL",
+  twitch_username: "USERNAME",
+};

index.html

@@ -60,22 +60,24 @@
 			</div>
 
 			<div class="task-wrapper">
-				<div class="task-container primary">
-					<!-- TASK TEMPLATE START --
-
-					<div class="card" data-user="Username23" >
-						<div class="username">Username23</div>
-						<ol class="tasks">
-							<li class="task done" data-task-id="1234">cooking food</li>
-							<li class="task" data-task-id="6789">wash clothes</li>
-						</ol>
-					</div> 
-
-				 	-- TASK TEMPLATE END -->
-				</div>
+				<div class="task-container primary"></div>
 				<div class="task-container secondary"></div>
 			</div>
 			<audio id="audioSample" src="./media/breakTime.mp3"></audio>
 		</main>
+
+		<div id="modal"	class="modal hidden justify-center items-center absolute">
+			<div class="modal-content">
+				<h2 class="modal-header">Invalid oAuth access token</h2>
+				<div class="modal-body">
+					<p>Possible Reasons:</p>	
+					<ul class="modal-list">
+						<li>Token entered incorrectly.</li>
+						<li>Token could have expired. Generate a new access token.</li>
+					</ul>
+				</div>
+			</div>	
+		</div>
+
 	</body>
 </html>

src/index.js

@@ -1,4 +1,5 @@
 import App from "./app.js";
+import { closeModal, openModal } from "./modal.js";
 import TwitchChat from "./twitch/TwitchChat.js";
 import { loadTestUsers } from "./twitch/loadTestUsers.js";
 
@@ -33,6 +34,14 @@ window.addEventListener("load", () => {
 		}
 	});
 
+	client.on("oauthError", () => {
+		openModal();
+	});
+
+	client.on("oauthSuccess", () => {
+		closeModal();
+	});
+
 	client.connect();
 	if (_settings.testMode) loadTestUsers(client);
 });

src/modal.js

@@ -0,0 +1,9 @@
+export function openModal() {
+  document.getElementById("modal").classList.remove("hidden");
+  document.getElementById("modal").classList.add("flex");
+}
+
+export function closeModal() {
+  document.getElementById("modal").classList.remove("flex");
+  document.getElementById("modal").classList.add("hidden");
+}

src/twitch/TwitchChat.js

@@ -33,7 +33,9 @@ export default class TwitchChat extends EventEmitter {
 		this.url = url;
 		this.username = username.toLowerCase();
 		this.channel = `#${channel.toLowerCase()}`;
-		this.authToken = authToken;
+		this.authToken = authToken.includes("oauth:")
+			? authToken
+			: `oauth:${authToken}`;
 		this.WebSocketService = WebSocketService;
 	}
 
@@ -57,7 +59,7 @@ export default class TwitchChat extends EventEmitter {
 		};
 
 		this.#ws.onmessage = (message) => {
-			let ircMessage = message.data;
+			let ircMessage = message?.data;
 			const messages = ircMessage.trim().split("\r\n");
 			messages.forEach((message) => {
 				const parsedMessage = parseIRCMessage(message);
@@ -78,6 +80,7 @@ export default class TwitchChat extends EventEmitter {
 						case "JOIN":
 							console.log(`Joined ${this.channel}`);
 							this.#reconnectInterval = 1000;
+							this.emit("oauthSuccess");
 							break;
 						case "RECONNECT":
 							this.disconnect(
@@ -86,31 +89,15 @@ export default class TwitchChat extends EventEmitter {
 							);
 							break;
 						case "PART":
-							console.error(
-								"The channel must have banned (/ban) the bot."
-							);
+							console.error("The channel must have banned (/ban) the bot.");
 							this.#ws.close();
 							break;
 						case "NOTICE":
 							// If the authentication failed, leave the channel.
 							// The server will close the connection.
-							if (
-								"Login authentication failed" ===
-								parsedMessage.parameters
-							) {
-								console.error(
-									`Authentication failed; left #${this.channel}`
-								);
-								this.#ws.send(`PART ${this.channel}`);
-							} else if (
-								"You don't have permission to perform that action" ===
-								parsedMessage.parameters
-							) {
-								console.error(
-									`No permission. Check if the access token is still valid. Left ${this.channel}`
-								);
-								this.#ws.send(`PART ${this.channel}`);
-							}
+							console.error(`${parsedMessage.parameters}; left ${this.channel}`);
+							this.emit("oauthError");
+							this.#ws.send(`PART ${this.channel}`);
 							break;
 						default: // Ignore all other IRC messages.
 					}
@@ -127,8 +114,7 @@ export default class TwitchChat extends EventEmitter {
 					// If your connection is dropped, try reconnecting
 					// using an exponential backoff approach.
 					console.error(
-						`Connection dropped. Reconnecting in ${
-							this.#reconnectInterval
+						`Connection dropped. Reconnecting in ${this.#reconnectInterval
 						} milliseconds...`
 					);
 					// recursive delay reconnection attempts

styles/index.css

@@ -1,3 +1,4 @@
 @import url("./variables.css");
 @import url("./utility.css");
+@import url("./modal.css");
 @import url("./app.css");