dsh-coding-subscription-oauth 0.5.8 → 0.6.2

package/src/client/components/CliPullPreview.tsx

@@ -1,107 +1,116 @@
-/** CLI credential pull preview panel. */
-
-import { SOURCE_CONFLICT_KEY, SOURCE_KIND_KEY, SOURCE_PREVIEW_ACTION_KEY } from "../constants.ts";
-import { formatEpoch } from "../parsers.ts";
-import {
-	bodyStyle,
-	buttonStyle,
-	cardStyle,
-	checkRowStyle,
-	hintStyle,
-	listStyle,
-	monoStyle,
-	primaryButtonStyle,
-} from "../styles.ts";
-import type { GrokBuildSettingsInjected, SourcePreview } from "../types.ts";
-
-export interface CliPullPreviewProps {
-	t: GrokBuildSettingsInjected["t"];
-	preview: SourcePreview;
-	confirmOverwrite: boolean;
-	sourcesBusy: boolean;
-	onConfirmOverwriteChange: (checked: boolean) => void;
-	onCommit: () => void;
-	onCancel: () => void;
-}
-
-export function CliPullPreview({
-	t,
-	preview,
-	confirmOverwrite,
-	sourcesBusy,
-	onConfirmOverwriteChange,
-	onCommit,
-	onCancel,
-}: CliPullPreviewProps) {
-	const expiresAt = formatEpoch(preview.expiresAt);
-	const ticketExpiresAt = formatEpoch(preview.ticketExpiresAt);
-
-	return (
-		<div style={cardStyle} aria-live="polite">
-			<p style={bodyStyle}>
-				{t("sourcesPreviewTitle")} · {t(SOURCE_KIND_KEY[preview.kind])}
-			</p>
-			<p style={hintStyle}>
-				<span style={monoStyle}>{preview.displayPath}</span>
-			</p>
-			<p style={bodyStyle}>
-				{t("sourcesConflict", {
-					detail: t(
-						preview.conflict === undefined ? "sourceConflictUnrecognized" : SOURCE_CONFLICT_KEY[preview.conflict],
-					),
-				})}
-			</p>
-			<p style={bodyStyle}>
-				{t("sourcesAction", {
-					detail: t(
-						preview.action === undefined ? "sourceActionUnrecognized" : SOURCE_PREVIEW_ACTION_KEY[preview.action],
-					),
-				})}
-			</p>
-			{expiresAt === undefined ? null : <p style={hintStyle}>{t("sourcesPreviewExpires", { time: expiresAt })}</p>}
-			{ticketExpiresAt === undefined ? null : (
-				<p style={hintStyle}>{t("sourcesTicketExpires", { time: ticketExpiresAt })}</p>
-			)}
-			{preview.warnings.length === 0 ? null : (
-				<ul style={{ ...listStyle, gap: 4 }} aria-label={t("sourcesWarnings")}>
-					{preview.warnings.map((warning) => (
-						<li key={warning} style={hintStyle}>
-							{warning}
-						</li>
-					))}
-				</ul>
-			)}
-			{preview.confirmOverwriteRequired ? (
-				<label style={checkRowStyle}>
-					<input
-						type="checkbox"
-						checked={confirmOverwrite}
-						disabled={sourcesBusy || preview.action === "blocked"}
-						onChange={(event) => {
-							onConfirmOverwriteChange(event.target.checked);
-						}}
-					/>
-					<span>
-						{t("sourcesConfirmOverwrite")}
-						<span style={{ display: "block", ...hintStyle }}>{t("sourcesConfirmOverwriteHint")}</span>
-					</span>
-				</label>
-			) : null}
-			<div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
-				<button
-					type="button"
-					style={primaryButtonStyle}
-					disabled={
-						sourcesBusy || preview.action === "blocked" || (preview.confirmOverwriteRequired && !confirmOverwrite)
-					}
-					onClick={onCommit}
-				>
-					{t("sourcesCommit")}
-				</button>
-				<button type="button" style={buttonStyle} disabled={sourcesBusy} onClick={onCancel}>
-					{t("sourcesCancelPreview")}
-				</button>
-			</div>
-		</div>
-	);
-}
+/** CLI credential pull preview panel. */
+
+import { SOURCE_CONFLICT_KEY, SOURCE_KIND_KEY, SOURCE_PREVIEW_ACTION_KEY } from "../constants.ts";
+import { formatEpoch } from "../parsers.ts";
+import {
+	bodyStyle,
+	buttonStyle,
+	cardStyle,
+	checkRowStyle,
+	hintStyle,
+	listStyle,
+	monoStyle,
+	primaryButtonStyle,
+} from "../styles.ts";
+import type { GrokBuildSettingsInjected, SourcePreview } from "../types.ts";
+
+export interface CliPullPreviewProps {
+	t: GrokBuildSettingsInjected["t"];
+	preview: SourcePreview;
+	confirmOverwrite: boolean;
+	sourcesBusy: boolean;
+	onConfirmOverwriteChange: (checked: boolean) => void;
+	onCommit: () => void;
+	onCancel: () => void;
+}
+
+export function CliPullPreview({
+	t,
+	preview,
+	confirmOverwrite,
+	sourcesBusy,
+	onConfirmOverwriteChange,
+	onCommit,
+	onCancel,
+}: CliPullPreviewProps) {
+	const expiresAt = formatEpoch(preview.expiresAt);
+	const ticketExpiresAt = formatEpoch(preview.ticketExpiresAt);
+
+	return (
+		<section
+			id={`coding-oauth-source-preview-${preview.kind}`}
+			style={cardStyle}
+			aria-labelledby={`coding-oauth-source-preview-title-${preview.kind}`}
+			aria-live="polite"
+			tabIndex={-1}
+		>
+			<p id={`coding-oauth-source-preview-title-${preview.kind}`} style={bodyStyle}>
+				{t("sourcesPreviewTitle")} · {t(SOURCE_KIND_KEY[preview.kind])}
+			</p>
+			<p style={hintStyle}>
+				<span style={monoStyle}>{preview.displayPath}</span>
+			</p>
+			<p style={bodyStyle}>
+				{t("sourcesConflict", {
+					detail: t(
+						preview.conflict === undefined ? "sourceConflictUnrecognized" : SOURCE_CONFLICT_KEY[preview.conflict],
+					),
+				})}
+			</p>
+			<p style={bodyStyle}>
+				{t("sourcesAction", {
+					detail: t(
+						preview.action === undefined ? "sourceActionUnrecognized" : SOURCE_PREVIEW_ACTION_KEY[preview.action],
+					),
+				})}
+			</p>
+			{expiresAt === undefined ? null : <p style={hintStyle}>{t("sourcesPreviewExpires", { time: expiresAt })}</p>}
+			{ticketExpiresAt === undefined ? null : (
+				<p style={hintStyle}>{t("sourcesTicketExpires", { time: ticketExpiresAt })}</p>
+			)}
+			{preview.warnings.length === 0 ? null : (
+				<ul style={{ ...listStyle, gap: 4 }} aria-label={t("sourcesWarnings")}>
+					{preview.warnings.map((warning) => (
+						<li key={warning} style={hintStyle}>
+							{warning}
+						</li>
+					))}
+				</ul>
+			)}
+			{preview.confirmOverwriteRequired ? (
+				<label style={checkRowStyle}>
+					<input
+						aria-describedby={`coding-oauth-source-overwrite-hint-${preview.kind}`}
+						type="checkbox"
+						checked={confirmOverwrite}
+						disabled={sourcesBusy || preview.action === "blocked"}
+						onChange={(event) => {
+							onConfirmOverwriteChange(event.target.checked);
+						}}
+					/>
+					<span>
+						{t("sourcesConfirmOverwrite")}
+						<span id={`coding-oauth-source-overwrite-hint-${preview.kind}`} style={{ display: "block", ...hintStyle }}>
+							{t("sourcesConfirmOverwriteHint")}
+						</span>
+					</span>
+				</label>
+			) : null}
+			<div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+				<button
+					type="button"
+					style={primaryButtonStyle}
+					disabled={
+						sourcesBusy || preview.action === "blocked" || (preview.confirmOverwriteRequired && !confirmOverwrite)
+					}
+					onClick={onCommit}
+				>
+					{t("sourcesCommit")}
+				</button>
+				<button type="button" style={buttonStyle} disabled={sourcesBusy} onClick={onCancel}>
+					{t("sourcesCancelPreview")}
+				</button>
+			</div>
+		</section>
+	);
+}

package/src/client/components/CopyButton.tsx

@@ -1,57 +1,57 @@
-/** Compact copy button with copied / failed feedback. */
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { copyText } from "../api.ts";
-import { compactButtonStyle, primaryButtonStyle } from "../styles.ts";
-
-export interface CopyButtonProps {
-	text: string;
-	idleLabel: string;
-	copiedLabel: string;
-	failedLabel: string;
-	primary?: boolean;
-	disabled?: boolean;
-}
-
-export function CopyButton({
-	text,
-	idleLabel,
-	copiedLabel,
-	failedLabel,
-	primary = false,
-	disabled = false,
-}: CopyButtonProps) {
-	const [state, setState] = useState<"idle" | "copied" | "failed">("idle");
-	const timerRef = useRef<number | undefined>(undefined);
-
-	useEffect(() => {
-		return () => {
-			if (timerRef.current !== undefined) window.clearTimeout(timerRef.current);
-		};
-	}, []);
-
-	const handleClick = useCallback(async () => {
-		const ok = await copyText(text);
-		setState(ok ? "copied" : "failed");
-		if (timerRef.current !== undefined) window.clearTimeout(timerRef.current);
-		timerRef.current = window.setTimeout(() => {
-			setState("idle");
-			timerRef.current = undefined;
-		}, 2000);
-	}, [text]);
-
-	const label = state === "copied" ? copiedLabel : state === "failed" ? failedLabel : idleLabel;
-
-	return (
-		<button
-			type="button"
-			style={primary ? primaryButtonStyle : compactButtonStyle}
-			disabled={disabled || text.length === 0}
-			onClick={() => {
-				void handleClick();
-			}}
-		>
-			{label}
-		</button>
-	);
-}
+/** Compact copy button with copied / failed feedback. */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { copyText } from "../api.ts";
+import { compactButtonStyle, primaryButtonStyle } from "../styles.ts";
+
+export interface CopyButtonProps {
+	text: string;
+	idleLabel: string;
+	copiedLabel: string;
+	failedLabel: string;
+	primary?: boolean;
+	disabled?: boolean;
+}
+
+export function CopyButton({
+	text,
+	idleLabel,
+	copiedLabel,
+	failedLabel,
+	primary = false,
+	disabled = false,
+}: CopyButtonProps) {
+	const [state, setState] = useState<"idle" | "copied" | "failed">("idle");
+	const timerRef = useRef<number | undefined>(undefined);
+
+	useEffect(() => {
+		return () => {
+			if (timerRef.current !== undefined) window.clearTimeout(timerRef.current);
+		};
+	}, []);
+
+	const handleClick = useCallback(async () => {
+		const ok = await copyText(text);
+		setState(ok ? "copied" : "failed");
+		if (timerRef.current !== undefined) window.clearTimeout(timerRef.current);
+		timerRef.current = window.setTimeout(() => {
+			setState("idle");
+			timerRef.current = undefined;
+		}, 2000);
+	}, [text]);
+
+	const label = state === "copied" ? copiedLabel : state === "failed" ? failedLabel : idleLabel;
+
+	return (
+		<button
+			type="button"
+			style={primary ? primaryButtonStyle : compactButtonStyle}
+			disabled={disabled || text.length === 0}
+			onClick={() => {
+				void handleClick();
+			}}
+		>
+			{label}
+		</button>
+	);
+}