fix(login): show the Quick Connect code in an auto-dismissing sheet

The code was shown in a native Alert, which has no programmatic dismiss: after another device authorized the code and polling logged the user in, the alert stayed open on top of the app. Replace it with an in-app bottom sheet that closes itself once the session is authorized. Dismissing only hides the code - polling continues so login still completes if the code is authorized afterwards; polling stops when leaving the login screen (parity with TVLogin). The code can be tapped to copy (expo-clipboard, probed via requireOptionalNativeModule so builds without the native module just no-op).
2026-06-12 17:00:23 +01:00 · 2026-06-10 22:31:47 +02:00
parent d12d62863e
commit 16188ac2a3
4 changed files with 181 additions and 12 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -31,6 +31,7 @@
        "expo-brightness": "~56.0.5",
        "expo-build-properties": "~56.0.15",
        "expo-camera": "~56.0.7",
+        "expo-clipboard": "~56.0.4",
        "expo-constants": "~56.0.16",
        "expo-crypto": "~56.0.4",
        "expo-dev-client": "~56.0.16",
@@ -955,6 +956,8 @@

    "expo-camera": ["expo-camera@56.0.7", "", { "dependencies": { "barcode-detector": "^3.0.0" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native-web"] }, "sha512-c8z+UheidFintQyP9XLEDP43aK4PS/o9+TFLW0zEOjdqkYCBgoWq6Mw/Ps62kjBeftFY7xrp5ZLITbenNvbTaw=="],

+    "expo-clipboard": ["expo-clipboard@56.0.4", "", { "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-qb4DYlkiowHYHaUYVT2FN9nk/nI1xShXOUYsI7J9dVpQCOHcGFjCBPX1VAvEW4Ye4/Aagd6IuhOVAq/+scBOiA=="],
+
    "expo-constants": ["expo-constants@56.0.16", "", { "dependencies": { "@expo/env": "~2.3.0" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-6tsiN+gmTUPp/atyA+uY9Tg8VOdXdmb4s/3TVGolfn6A/oCAraw1pcPZX5XllyD+xUguxB6eBSFAT8494hZVMA=="],

    "expo-crypto": ["expo-crypto@56.0.4", "", { "peerDependencies": { "expo": "*" } }, "sha512-fRNEhoXRXgAWBpe3/hq5X+KXTit3OZqdiAGts1YvNEUHQb+H5591mpPac0Yw+sZg9pXcrjRnzo5AxvZaENpc7g=="],
--- a/components/login/Login.tsx
+++ b/components/login/Login.tsx
@@ -20,10 +20,11 @@ import { Button } from "@/components/Button";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import JellyfinServerDiscovery from "@/components/JellyfinServerDiscovery";
+import { QuickConnectCodeModal } from "@/components/login/QuickConnectCodeModal";
 import { PreviousServersList } from "@/components/PreviousServersList";
 import { SaveAccountModal } from "@/components/SaveAccountModal";
 import { Colors } from "@/constants/Colors";
-import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
+import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
 import type {
  AccountSecurityType,
  SavedServer,
@@ -37,11 +38,13 @@ export const Login: React.FC = () => {
  const api = useAtomValue(apiAtom);
  const navigation = useNavigation();
  const params = useLocalSearchParams();
+  const user = useAtomValue(userAtom);
  const {
    setServer,
    login,
    removeServer,
    initiateQuickConnect,
+    stopQuickConnectPolling,
    loginWithSavedCredential,
    loginWithPassword,
  } = useJellyfin();
@@ -64,6 +67,32 @@ export const Login: React.FC = () => {
    password: _password || "",
  });

+  // Quick Connect code shown in the in-app sheet while polling for authorization
+  const [quickConnectCode, setQuickConnectCode] = useState<string | null>(null);
+
+  // Close the code sheet as soon as the session is authorized — the native
+  // Alert used before had no programmatic dismiss and stayed open after login.
+  useEffect(() => {
+    if (user) setQuickConnectCode(null);
+  }, [user]);
+
+  // Stop Quick Connect polling when leaving the login page (parity with TVLogin)
+  useEffect(() => {
+    return () => {
+      stopQuickConnectPolling();
+    };
+  }, [stopQuickConnectPolling]);
+
+  // Going back to server selection keeps this component mounted (same screen,
+  // different state), so the unmount cleanup above doesn't run. Without this a
+  // code authorized after leaving would silently log the user in later.
+  useEffect(() => {
+    if (!api?.basePath) {
+      stopQuickConnectPolling();
+      setQuickConnectCode(null);
+    }
+  }, [api?.basePath, stopQuickConnectPolling]);
+
  // Save account state
  const [saveAccount, setSaveAccount] = useState(false);
  const [showSaveModal, setShowSaveModal] = useState(false);
@@ -146,7 +175,7 @@ export const Login: React.FC = () => {
      } else {
        Alert.alert(
          t("login.connection_failed"),
-          t("login.an_unexpected_error_occured"),
+          t("login.an_unexpected_error_occurred"),
        );
      }
    } finally {
@@ -259,15 +288,7 @@ export const Login: React.FC = () => {
    try {
      const code = await initiateQuickConnect();
      if (code) {
-        Alert.alert(
-          t("login.quick_connect"),
-          t("login.enter_code_to_login", { code: code }),
-          [
-            {
-              text: t("login.got_it"),
-            },
-          ],
-        );
+        setQuickConnectCode(code);
      }
    } catch (_error) {
      Alert.alert(
@@ -402,7 +423,7 @@ export const Login: React.FC = () => {
                {t("server.enter_url_to_jellyfin_server")}
              </Text>
              <Input
-                aria-label='Server URL'
+                aria-label={t("server.server_url")}
                placeholder={t("server.server_url_placeholder")}
                onChangeText={setServerURL}
                value={serverURL}
@@ -453,6 +474,13 @@ export const Login: React.FC = () => {
        onSave={handleSaveAccountConfirm}
        username={pendingLogin?.username || credentials.username}
      />
+
+      {/* Dismissing only hides the code — polling continues so the login still
+          completes if the code is authorized from another device afterwards. */}
+      <QuickConnectCodeModal
+        code={quickConnectCode}
+        onClose={() => setQuickConnectCode(null)}
+      />
    </SafeAreaView>
  );
 };
--- a/components/login/QuickConnectCodeModal.tsx
+++ b/components/login/QuickConnectCodeModal.tsx
@@ -0,0 +1,137 @@
+import { Ionicons } from "@expo/vector-icons";
+import {
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import { requireOptionalNativeModule } from "expo-modules-core";
+import type React from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { toast } from "sonner-native";
+import { Button } from "../Button";
+import { Text } from "../common/Text";
+
+interface Props {
+  /** The Quick Connect code to display, or null when hidden. */
+  code: string | null;
+  onClose: () => void;
+}
+
+/**
+ * Shows the Quick Connect code while the app polls for authorization.
+ * In-app sheet instead of a native Alert so it can dismiss itself once the
+ * session is authorized — a native alert has no programmatic dismiss and
+ * lingers over the app after login completes.
+ */
+export const QuickConnectCodeModal: React.FC<Props> = ({ code, onClose }) => {
+  const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const snapPoints = useMemo(() => ["50%"], []);
+  const isPresentedRef = useRef(false);
+
+  // Keep the last code around so the dismiss animation doesn't flash empty
+  // when the parent clears the code to close the sheet.
+  const lastCodeRef = useRef<string | null>(null);
+  if (code) lastCodeRef.current = code;
+
+  useEffect(() => {
+    if (code) {
+      bottomSheetModalRef.current?.present();
+    } else if (isPresentedRef.current) {
+      bottomSheetModalRef.current?.dismiss();
+      isPresentedRef.current = false;
+    }
+  }, [code]);
+
+  const handleSheetChanges = useCallback(
+    (index: number) => {
+      if (index >= 0) {
+        isPresentedRef.current = true;
+      } else if (index === -1 && isPresentedRef.current) {
+        isPresentedRef.current = false;
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    [],
+  );
+
+  const copyCode = useCallback(async () => {
+    const value = code ?? lastCodeRef.current;
+    if (!value) return;
+    // Builds that don't ship the expo-clipboard native module yet: probe with
+    // requireOptionalNativeModule (returns null instead of throwing/logging)
+    // and skip — importing the JS wrapper there would error out.
+    if (!requireOptionalNativeModule("ExpoClipboard")) return;
+    const Clipboard = await import("expo-clipboard");
+    await Clipboard.setStringAsync(value);
+    toast.success(t("login.code_copied"));
+  }, [code, t]);
+
+  return (
+    <BottomSheetModal
+      ref={bottomSheetModalRef}
+      snapPoints={snapPoints}
+      onChange={handleSheetChanges}
+      handleIndicatorStyle={{ backgroundColor: "white" }}
+      backgroundStyle={{ backgroundColor: "#171717" }}
+      backdropComponent={renderBackdrop}
+    >
+      <BottomSheetView
+        style={{
+          flex: 1,
+          paddingLeft: Math.max(16, insets.left),
+          paddingRight: Math.max(16, insets.right),
+          paddingBottom: Math.max(16, insets.bottom),
+        }}
+      >
+        <View className='flex-1'>
+          <Text className='font-bold text-2xl text-neutral-100'>
+            {t("login.quick_connect")}
+          </Text>
+          <TouchableOpacity
+            className='mt-6 p-6 border border-neutral-800 rounded-xl bg-neutral-900 flex flex-row items-center justify-center'
+            onPress={copyCode}
+          >
+            <Text
+              className='text-center font-bold text-5xl text-neutral-100'
+              style={{ letterSpacing: 10 }}
+            >
+              {code ?? lastCodeRef.current}
+            </Text>
+            <Ionicons
+              name='copy-outline'
+              size={22}
+              color='white'
+              style={{ opacity: 0.4, marginLeft: 16 }}
+            />
+          </TouchableOpacity>
+          <Text className='mt-2 text-neutral-500 text-center text-xs'>
+            {t("login.tap_code_to_copy")}
+          </Text>
+          <Text className='mt-3 mb-5 text-neutral-400 text-center px-4'>
+            {t("login.quick_connect_instructions")}
+          </Text>
+          <Button className='mt-auto' color='purple' onPress={onClose}>
+            {t("login.got_it")}
+          </Button>
+        </View>
+      </BottomSheetView>
+    </BottomSheetModal>
+  );
+};
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
    "expo-brightness": "~56.0.5",
    "expo-build-properties": "~56.0.15",
    "expo-camera": "~56.0.7",
+    "expo-clipboard": "~56.0.4",
    "expo-constants": "~56.0.16",
    "expo-crypto": "~56.0.4",
    "expo-dev-client": "~56.0.16",