clickable login link on auth errors

Author: drweissbrot

CHANGELOG.md

@@ -9,6 +9,9 @@ This project does not adhere to Semantic Versioning.
 ### Added
 * Steam sessions will now be refreshed if required
 
+### Changed
+* Authentication errors now include clickable links to the applicable login page
+
 ### Docs
 * Add readme
 

src/view/sync.css

@@ -20,6 +20,16 @@ section.sync #status-message {
 	grid-area: 1/3;
 }
 
+section.sync #status-message a {
+	margin-left: 0.25em;
+	color: inherit;
+}
+
+section.sync #status-message a:active,
+section.sync #status-message a:hover {
+	text-decoration: none;
+}
+
 section.sync button {
 	padding: 0.5rem 3.125rem;
 	background: var(--leetify-pink);

src/view/sync.ts

@@ -6,6 +6,12 @@
 import { EventName, GcpdTab, StatusIcon, SyncStatus } from '../../types/enums';
 import { isRuntimeMessage, isSyncStatusEventBody, SyncStatusEventBody } from '../../types/interfaces';
 
+interface StatusLoginMessage {
+	loginMessage: string;
+	loginUrl: string;
+	message: string;
+}
+
 export class Sync {
 	protected readonly statusIconElement = document.querySelector('#status-icon') as HTMLImageElement | null;
 	protected readonly statusMessageElement = document.querySelector('#status-message') as HTMLElement | null;
@@ -44,7 +50,19 @@ export class Sync {
 		console.info(new Date().toJSON(), '[SyncStatus]', JSON.stringify(data));
 
 		if (this.statusMessageElement) {
-			this.statusMessageElement.innerText = this.getStatusMessage(data);
+			const statusMessage = this.getStatusMessage(data);
+
+			if (typeof statusMessage === 'string') {
+				this.statusMessageElement.innerText = statusMessage;
+			} else {
+				this.statusMessageElement.innerText = statusMessage.message;
+
+				const anchor = document.createElement('a');
+				anchor.href = statusMessage.loginUrl;
+				anchor.target = '_blank';
+				anchor.innerText = statusMessage.loginMessage;
+				this.statusMessageElement.appendChild(anchor);
+			}
 		}
 
 		if (this.statusIconElement) {
@@ -89,23 +107,38 @@ export class Sync {
 		}
 	}
 
-	protected getStatusMessage(data: SyncStatusEventBody): string {
+	protected getStatusMessage(data: SyncStatusEventBody): string | StatusLoginMessage {
 		switch (data.status) {
 			case SyncStatus.BEGINNING_SYNC: return `Requesting matches from Steam... (${data.tab === GcpdTab.WINGMAN ? 'Wingman' : 'Unranked 5v5'})`;
 			case SyncStatus.FINISHED_GCPD: return `Received ${data.found === 1 ? 'one match' : `${data.found} matches`} from Steam.`;
 			case SyncStatus.FINISHED_SYNC: return `Synchronized ${data.tab === GcpdTab.WINGMAN ? 'Wingman' : 'Unranked 5v5'} matches.`;
 			case SyncStatus.GCPD_PARSER_INITIALIZED: return 'Steam GCPD response handler prepared.';
 			case SyncStatus.GCPD_PARSER_INITIALIZING: return 'Preparing Steam GCPD response handler...';
 			case SyncStatus.IDLE: return 'Idle. Press the button to sync your matches.';
-			case SyncStatus.INVALID_GCPD_RESPONSE: return 'Something went wrong (GCPD). Please make sure you\'re logged in to Steam.';
-			case SyncStatus.LEETIFY_AUTH_FAILED: return 'Could not authenticate with Leetify. Please make sure you\'re logged in.';
 			case SyncStatus.LEETIFY_AUTH_SUCCESSFUL: return 'Logged in to Leetify.';
 			case SyncStatus.REQUESTING_GCPD_PAGE: return `Requesting matches from Steam... (Iteration ${data.depth} of up to 16)`;
-			case SyncStatus.STEAM_AUTH_FAILED: return 'Could not authenticate with Steam. Please make sure you\'re logged in.';
 			case SyncStatus.UPLOADING_TO_LEETIFY_FAILED: return 'Could not upload matches to Leetify :(';
 			case SyncStatus.UPLOADING_TO_LEETIFY: return 'Uploading matches to Leetify...';
 			case SyncStatus.WAITING_FOR_LEETIFY_AUTH: return 'Logging in to Leetify...';
 
+			case SyncStatus.INVALID_GCPD_RESPONSE: return {
+				message: 'Something went wrong (GCPD).',
+				loginMessage: 'Please make sure you\'re logged in to Steam.',
+				loginUrl: 'https://steamcommunity.com/my/gcpd/730?tab=matchhistoryscrimmage',
+			};
+
+			case SyncStatus.LEETIFY_AUTH_FAILED: return {
+				message: 'Could not authenticate with Leetify.',
+				loginMessage: 'Please make sure you\'re logged in.',
+				loginUrl: 'https://leetify.com/auth/login',
+			};
+
+			case SyncStatus.STEAM_AUTH_FAILED: return {
+				message: 'Could not authenticate with Steam.',
+				loginMessage: 'Please make sure you\'re logged in.',
+				loginUrl: 'https://steamcommunity.com/my/gcpd/730?tab=matchhistoryscrimmage',
+			};
+
 			case SyncStatus.DONE: {
 				const now = new Date();
 				const f = (n: number): string => n.toString().padStart(2, '0');