chore: hide screenpipe api key

mediar-ai · Jan 22, 2025 · c37b75e · c37b75e
1 parent 13fe9d9
commit c37b75e
Show file tree

Hide file tree

Showing 2 changed files with 210 additions and 71 deletions.
diff --git a/screenpipe-app-tauri/components/settings/account-section.tsx b/screenpipe-app-tauri/components/settings/account-section.tsx
@@ -21,18 +21,17 @@ import {
   Coins,
   UserCog,
   ExternalLinkIcon,
+  EyeIcon,
+  EyeOffIcon,
+  CopyIcon,
 } from "lucide-react";
 
 import { toast } from "@/components/ui/use-toast";
-import { invoke } from "@tauri-apps/api/core";
 
 import { useUser } from "@/lib/hooks/use-user";
 import { open as openUrl } from "@tauri-apps/plugin-shell";
 import { Card } from "../ui/card";
-import {
-  onOpenUrl,
-  getCurrent as getCurrentDeepLinkUrls,
-} from "@tauri-apps/plugin-deep-link";
+import { onOpenUrl } from "@tauri-apps/plugin-deep-link";
 
 function PlanCard({
   title,
@@ -89,6 +88,7 @@ export function AccountSection() {
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
   const [isConnectingStripe, setIsConnectingStripe] = useState(false);
+  const [showApiKey, setShowApiKey] = useState(false);
 
   useEffect(() => {
     const setupDeepLink = async () => {
@@ -99,6 +99,7 @@ export function AccountSection() {
             const apiKey = new URL(url).searchParams.get("api_key");
             if (apiKey) {
               updateSettings({ user: { token: apiKey } });
+              loadUser(apiKey);
               toast({
                 title: "logged in!",
                 description: "your api key has been set",
@@ -220,6 +221,16 @@ export function AccountSection() {
     }
   };
 
+  const handleCopyApiKey = () => {
+    if (settings.user?.token) {
+      navigator.clipboard.writeText(settings.user.token);
+      toast({
+        title: "copied to clipboard",
+        description: "api key copied successfully",
+      });
+    }
+  };
+
   return (
     <div className="w-full space-y-6 py-4">
       <div className="flex items-center justify-between">
@@ -281,8 +292,7 @@ export function AccountSection() {
                   </TooltipTrigger>
                   <TooltipContent side="right" className="max-w-[280px]">
                     <p className="text-xs leading-relaxed">
-                      your key syncs credits and settings across devices. you
-                      can find it in your dashboard.{" "}
+                      (dev preview) you can use your key to use screenpipe cloud with code.{" "}
                       <span className="text-destructive font-medium">
                         keep it private.
                       </span>
@@ -292,27 +302,45 @@ export function AccountSection() {
               </TooltipProvider>
             </div>
 
-            <div className="flex gap-2">
-              <Input
-                value={settings.user?.token || ""}
-                onChange={(e) => {
-                  updateSettings({
-                    user: { token: e.target.value },
-                  });
-                }}
-                placeholder="enter your api key"
-                className="font-mono text-sm bg-secondary/30"
-              />
-              <Button
-                variant="secondary"
-                size="sm"
-                onClick={() => {
-                  loadUser(settings.user?.token || "");
-                  toast({ title: "key updated" });
-                }}
-              >
-                verify
-              </Button>
+            <div className="space-y-2">
+              <div className="flex gap-2">
+                <div className="relative flex-1">
+                  <Input
+                    value={settings.user?.token || ""}
+                    type={showApiKey ? "text" : "password"}
+                    onChange={(e) => {
+                      updateSettings({
+                        user: { token: e.target.value },
+                      });
+                    }}
+                    placeholder="enter your api key"
+                    className="font-mono text-sm bg-secondary/30 pr-20"
+                  />
+                  <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7"
+                      onClick={() => setShowApiKey(!showApiKey)}
+                    >
+                      {showApiKey ? (
+                        <EyeOffIcon className="h-4 w-4" />
+                      ) : (
+                        <EyeIcon className="h-4 w-4" />
+                      )}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7"
+                      onClick={handleCopyApiKey}
+                      disabled={!settings.user?.token}
+                    >
+                      <CopyIcon className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>