fix add credential on safari

Brendonovich · Aug 23, 2024 · b64725f · b64725f
1 parent f4fb4fe
commit b64725f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 23 deletions.
diff --git a/apps/web/src/api.tsx b/apps/web/src/api.tsx
@@ -114,14 +114,15 @@ export const PROVIDER_DISPLAY_NAMES: Record<AuthProvider, string> = {
 };
 
 export const addCredential = action(async (provider: AuthProvider) => {
-	const w = window.open(await loginURLForProvider(provider));
-	if (!w) throw { error: "window-open-failed" };
-
-	const searchParams = await new Promise<string>((res, rej) => {
-		const onBeforeUnload = () => rej();
-
-		w.addEventListener("beforeunload", onBeforeUnload);
+	const w = window.open(await loginURLForProvider(provider), "_blank");
+	if (!w) {
+		toast.error(
+			"Failed to open login window. Make sure your browser isn't blocking popups.",
+		);
+		throw { error: "window-open-failed" };
+	}
 
+	const searchParams = await new Promise<string>((res) => {
 		window.addEventListener("message", (e) => {
 			if (e.source !== w) return;
 
@@ -183,6 +184,7 @@ export const getCredentials = cache(async () => {
 	return c;
 }, "credentials");
 
+import { toast } from "solid-sonner";
 import { createStorage } from "unstorage";
 import cloudflareKVHTTPDriver from "unstorage/drivers/cloudflare-kv-http";
 

diff --git a/apps/web/src/app/(app)/credentials.tsx b/apps/web/src/app/(app)/credentials.tsx
@@ -54,21 +54,21 @@ function AddCredentialButton() {
 
 	return (
 		<DropdownMenu>
-			<DropdownMenuTrigger as={Button}>Add Connection</DropdownMenuTrigger>
+			<DropdownMenuTrigger as={Button}>Add Credential</DropdownMenuTrigger>
 			<DropdownMenuContent>
 				<For each={PROVIDER_LIST}>
 					{(provider) => (
 						<DropdownMenuItem
-							onSelect={() =>
-								doAddCredential(provider).then((cred) =>
+							onClick={() => {
+								doAddCredential(provider).then((cred) => {
 									toast.success(
 										<>
 											Credential <b>{cred.user.displayName}</b> added for{" "}
 											<b>{PROVIDER_DISPLAY_NAMES[provider]}</b>
 										</>,
-									),
-								)
-							}
+									);
+								});
+							}}
 						>
 							{PROVIDER_DISPLAY_NAMES[provider]}
 						</DropdownMenuItem>
@@ -85,7 +85,10 @@ function CredentialsList() {
 
 	return (
 		<ul class="border border-neutral-800 rounded-lg divide-y divide-neutral-800">
-			<For each={submissions.filter((s) => s.pending)}>
+			<Show when={credentials()?.length === 0 && submissions.length === 0}>
+				<p class="p-4 text-sm text-medium text-center">No connections found</p>
+			</Show>
+			<For each={[...submissions].filter((s) => s.pending)}>
 				{(submission) => (
 					<li class="p-4 flex flex-row items-center space-x-4 text-base">
 						<div>
@@ -101,14 +104,7 @@ function CredentialsList() {
 					</li>
 				)}
 			</For>
-			<For
-				each={credentials()}
-				fallback={
-					<p class="p-4 text-sm text-medium text-center">
-						No connections found
-					</p>
-				}
-			>
+			<For each={credentials()}>
 				{(connection) => {
 					const removeSubmission = useSubmission(
 						removeCredential,

diff --git a/packages/ui/src/dropdown-menu.tsx b/packages/ui/src/dropdown-menu.tsx
@@ -51,7 +51,7 @@ const DropdownMenuItem = <T extends ValidComponent = "div">(
 	return (
 		<DropdownMenuPrimitive.Item
 			class={cn(
-				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+				"ui-highlighted:bg-accent ui-highlighted:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 				props.class,
 			)}
 			{...rest}