Avoid cyclic dependency in token code (refined-github#7738)

source/features/quick-review.tsx

@@ -13,7 +13,7 @@ import {
 	getConversationNumber, getUsername, scrollIntoViewIfNeeded, triggerConversationUpdate,
 } from '../github-helpers/index.js';
 import {randomArrayItem} from '../helpers/math.js';
-import {getToken} from '../github-helpers/github-token.js';
+import {getToken} from '../options-storage.js';
 
 const emojis = [...'🚀🐿️⚡️🤌🥳🥰🤩🥸😎🤯🚢🛫🏳️🏁'];
 

source/features/rgh-improve-new-issue-form.tsx

@@ -1,13 +1,18 @@
 import React from 'dom-chef';
 import {$} from 'select-dom';
+import delegate, {DelegateEvent} from 'delegate-it';
 import * as pageDetect from 'github-url-detection';
 
 import features from '../feature-manager.js';
 import openOptions from '../helpers/open-options.js';
 import clearCacheHandler from '../helpers/clear-cache-handler.js';
-import {expectTokenScope, getToken} from '../github-helpers/github-token.js';
+import {expectTokenScope} from '../github-helpers/github-token.js';
+import {getToken} from '../options-storage.js';
 import {isRefinedGitHubRepo} from '../github-helpers/index.js';
 
+const isSetTheTokenSelector = 'input[name^="issue_form[token]"]';
+const liesGif = 'https://github.com/user-attachments/assets/f417264f-f230-4156-b020-16e4390562bd';
+
 function addNotice(adjective: JSX.Element | string): void {
 	$('#issue_body_template_name')!.before(
 		<div className="flash flash-error h3 my-9" style={{animation: 'pulse-in 0.3s 2'}}>
@@ -34,7 +39,7 @@ async function checkToken(): Promise<void> {
 	}
 
 	// Thank you for following the instructions. I'll save you a click.
-	$('input[name^="issue_form[token]')!.checked = true;
+	$(isSetTheTokenSelector)!.checked = true;
 }
 
 async function setVersion(): Promise<void> {
@@ -60,6 +65,33 @@ async function linkifyCacheRefresh(): Promise<void> {
 	);
 }
 
+function Lies(): JSX.Element {
+	return (
+		<a href="https://www.youtube.com/watch?v=YWdD206eSv0">
+			<img src={liesGif} alt="Just go on the internet and tell lies?" className="d-inline-block"/>
+		</a>
+	);
+}
+
+async function lieDetector({delegateTarget}: DelegateEvent<MouseEvent, HTMLInputElement>): Promise<void> {
+	if (delegateTarget.checked) {
+		delegateTarget.closest('fieldset')!.append(<Lies/>);
+	}
+}
+
+async function validateTokenCheckbox(): Promise<void> {
+	if (await getToken()) {
+		return;
+	}
+
+	// eslint-disable-next-line new-cap -- Preload image
+	Lies();
+
+	delegate(isSetTheTokenSelector, 'click', lieDetector, {
+		once: true,
+	});
+}
+
 void features.add(import.meta.url, {
 	asLongAs: [
 		isRefinedGitHubRepo,
@@ -71,6 +103,7 @@ void features.add(import.meta.url, {
 	init: [
 		linkifyCacheRefresh,
 		checkToken,
+		validateTokenCheckbox,
 		setVersion,
 	],
 });

source/github-helpers/api.ts

@@ -31,7 +31,7 @@ import {JsonObject, AsyncReturnType} from 'type-fest';
 
 import features from '../feature-manager.js';
 import {getRepo} from './index.js';
-import {getToken} from './github-token.js';
+import {getToken} from '../options-storage.js';
 
 type JsonError = {
 	message: string;

source/github-helpers/github-token.ts

@@ -1,12 +1,5 @@
 import {v3} from './api.js';
-import optionsStorage from '../options-storage.js';
-
-const settings = optionsStorage.getAll();
-
-export async function getToken(): Promise<string | undefined> {
-	const {personalToken} = await settings;
-	return personalToken;
-}
+import {getToken} from '../options-storage.js';
 
 export async function expectToken(): Promise<string> {
 	const personalToken = await getToken();

source/options-storage.ts

@@ -32,4 +32,12 @@ const migrations = [
 ];
 
 export const perDomainOptions = new OptionsSyncPerDomain({defaults, migrations});
-export default perDomainOptions.getOptionsForOrigin();
+const optionsStorage = perDomainOptions.getOptionsForOrigin();
+export default optionsStorage;
+
+const cachedSettings = optionsStorage.getAll();
+
+export async function getToken(): Promise<string | undefined> {
+	const {personalToken} = await cachedSettings;
+	return personalToken;
+}