Use SubtleCrypto to store key #1013

Author: Polleps

browser/data-browser/package.json

@@ -59,6 +59,7 @@
     "codemirror-json-schema": "^0.8.1",
     "downshift": "^9.0.10",
     "emoji-mart": "^5.6.0",
+    "idb-keyval": "^6.2.2",
     "ollama-ai-provider-v2": "^1.5.5",
     "polished": "^4.3.1",
     "prismjs": "^1.30.0",

browser/data-browser/src/App.tsx

@@ -2,7 +2,7 @@ import { StoreContext, Store, enableYjs } from '@tomic/react';
 
 import { isDev } from './config';
 import { registerHandlers } from './handlers';
-import { getAgentFromLocalStorage } from './helpers/agentStorage';
+import { getAgentFromIDB } from './helpers/agentStorage';
 import { registerCustomCreateActions } from './components/forms/NewForm/CustomCreateActions';
 import { serverURLStorage } from './helpers/serverURLStorage';
 
@@ -25,7 +25,7 @@ function fixDevUrl(url: string) {
  */
 
 const serverUrl = fixDevUrl(serverURLStorage.get() ?? window.location.origin);
-const initalAgent = getAgentFromLocalStorage();
+const initalAgent = await getAgentFromIDB();
 
 // Initialize the store
 const store = new Store({

browser/data-browser/src/Providers.tsx

@@ -28,11 +28,13 @@ const ErrBoundary = window.bugsnagApiKey
   ? initBugsnag(window.bugsnagApiKey)
   : ErrorBoundary;
 
+const VALID_PROPS = ['popover', 'closedby'];
+
 // This implements the default behavior from styled-components v5
 const shouldForwardProp: ShouldForwardProp<'web'> = (propName, target) => {
   if (typeof target === 'string') {
     // @emotion/is-prop-valid does not support popover, so we need to forward it manually.
-    if (propName === 'popover') {
+    if (VALID_PROPS.includes(propName)) {
       return true;
     }
 

browser/data-browser/src/components/Button.tsx

@@ -191,8 +191,6 @@ export const ButtonSubtle = styled(ButtonDefault)`
   --button-border-color-hover: ${p => p.theme.colors.main};
   --button-text-color: ${p => p.theme.colors.textLight};
   --button-text-color-hover: ${p => p.theme.colors.main};
-
-  box-shadow: ${p => (p.theme.darkMode ? 'none' : p.theme.boxShadow)};
 `;
 
 export const ButtonAlert = styled(ButtonDefault)`

browser/data-browser/src/components/CodeBlock.tsx

@@ -1,32 +1,44 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import toast from 'react-hot-toast';
 import { FaCheck, FaCopy } from 'react-icons/fa';
 import { styled } from 'styled-components';
 import { Button } from './Button';
+import clsx from 'clsx';
 
 interface CodeBlockProps {
   content?: string;
   loading?: boolean;
   wordWrap?: boolean;
+  className?: string;
+  onCopy?: () => void;
 }
 
 export function CodeBlock({
   content,
   loading,
   wordWrap = false,
+  className,
+  onCopy,
 }: CodeBlockProps) {
+  const preRef = useRef<HTMLPreElement>(null);
   const [isCopied, setIsCopied] = useState<string | undefined>(undefined);
 
   function copyToClipboard() {
     setIsCopied(content);
     navigator.clipboard.writeText(content || '');
     toast.success('Copied to clipboard');
+    onCopy?.();
   }
 
   return (
     <CodeBlockStyled
+      onCopy={() => {
+        onCopy?.();
+        setIsCopied(content);
+      }}
+      ref={preRef}
       data-code-content={content}
-      className={wordWrap ? 'word-wrap' : ''}
+      className={clsx({ 'word-wrap': wordWrap }, className)}
     >
       {loading ? (
         'loading...'

browser/data-browser/src/components/Dialog/index.tsx

@@ -23,6 +23,7 @@ export interface InternalDialogProps {
   show: boolean;
   onClose: (success: boolean) => void;
   onClosed: () => void;
+  disableLightDismiss?: boolean;
   width?: CSS.Property.Width;
 }
 
@@ -57,7 +58,7 @@ type DialogSlotComponent = React.FC<
  * return (
  * <button onClick={show}>Open</button>
  * <Dialog {...props}>
- *    <DialogTitle>Title</DialogTitle>
+ *    <Dialog.Title>Title</Dialog.Title>
  *    ...
  *  </Dialog>
  *  );
@@ -82,6 +83,7 @@ const InnerDialog: React.FC<React.PropsWithChildren<InternalDialogProps>> = ({
   children,
   show,
   width,
+  disableLightDismiss = false,
   onClose,
   onClosed,
 }) => {
@@ -100,6 +102,10 @@ const InnerDialog: React.FC<React.PropsWithChildren<InternalDialogProps>> = ({
     React.MouseEventHandler<HTMLDialogElement>
   >(
     e => {
+      if (disableLightDismiss) {
+        return;
+      }
+
       if (!isTopLevel) {
         // Don't react to closing events if the dialog is not on top.
 
@@ -113,16 +119,49 @@ const InnerDialog: React.FC<React.PropsWithChildren<InternalDialogProps>> = ({
         cancelDialog();
       }
     },
-    [cancelDialog, isTopLevel],
+    [cancelDialog, isTopLevel, disableLightDismiss],
   );
 
+  // Prevent native dialog cancel event when disableLightDismiss is true
+  // This must be set up before the dialog is shown
+  // Only needed for safary right now because it doesn't support the closedby attribute.
+  // https://caniuse.com/wf-dialog-closedby
+  useEffect(() => {
+    const dialog = dialogRef.current;
+
+    if (!dialog) {
+      return;
+    }
+
+    const handleCancel = (e: Event) => {
+      if (disableLightDismiss) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (isTopLevel && !hasOpenInnerPopup) {
+        // Only handle cancel if we're the top level dialog
+        // The useHotkeys below will call cancelDialog
+      }
+    };
+
+    // Use capture phase to ensure we get the event first
+    dialog.addEventListener('cancel', handleCancel, true);
+
+    return () => {
+      dialog.removeEventListener('cancel', handleCancel, true);
+    };
+  }, [disableLightDismiss, isTopLevel, hasOpenInnerPopup]);
+
   // Close the dialog when the escape key is pressed
   useHotkeys(
     'esc',
     () => {
-      cancelDialog();
+      if (!disableLightDismiss) {
+        cancelDialog();
+      }
+    },
+    {
+      enabled: show && !hasOpenInnerPopup && isTopLevel,
     },
-    { enabled: show && !hasOpenInnerPopup && isTopLevel },
   );
 
   // When closing the `data-closing` attribute must be set before rendering so the animation has started when the regular useEffect is called.
@@ -158,15 +197,18 @@ const InnerDialog: React.FC<React.PropsWithChildren<InternalDialogProps>> = ({
       onMouseDown={handleOutSideClick}
       $width={width}
       data-top-level={isTopLevel}
+      closedby={disableLightDismiss ? 'none' : 'closerequest'}
     >
       <StyledInnerDialog ref={innerDialogRef}>
         <PopoverContainer>
           <DropdownContainer>
-            <CloseButtonSlot slot='close'>
-              <Button icon onClick={cancelDialog} aria-label='close'>
-                <FaTimes />
-              </Button>
-            </CloseButtonSlot>
+            {!disableLightDismiss && (
+              <CloseButtonSlot slot='close'>
+                <Button icon onClick={cancelDialog} aria-label='close'>
+                  <FaTimes />
+                </Button>
+              </CloseButtonSlot>
+            )}
             {children}
           </DropdownContainer>
         </PopoverContainer>

browser/data-browser/src/components/ErrorLook.tsx

@@ -16,6 +16,13 @@ export const ErrorLook = styled.span`
   ${errorLookStyle}
 `;
 
+export const SimpleErrorBlock = styled.div`
+  color: ${props => props.theme.colors.alert};
+  border-radius: ${props => props.theme.radius};
+  border: 1px solid ${props => props.theme.colors.alert};
+  padding: ${props => props.theme.size(2)};
+`;
+
 export interface ErrorBlockProps {
   error: Error;
   showTrace?: boolean;

browser/data-browser/src/components/SideBar/SideBarDrive.tsx

@@ -16,7 +16,7 @@ import { paths } from '../../routes/paths';
 import { Button } from '../Button';
 import { ResourceSideBar } from './ResourceSideBar/ResourceSideBar';
 import { SideBarHeader } from './SideBarHeader';
-import { ErrorLook } from '../ErrorLook';
+import { SimpleErrorBlock } from '../ErrorLook';
 import { DriveSwitcher } from './DriveSwitcher';
 import { Row } from '../Row';
 import { useCurrentSubject } from '../../helpers/useCurrentSubject';
@@ -70,6 +70,10 @@ export function SideBarDrive({
     });
   }, [store, currentResource]);
 
+  const driveName = driveResource.isUnauthorized()
+    ? 'Unauthorized'
+    : title || drive;
+
   return (
     <>
       <SideBarHeader>
@@ -85,7 +89,7 @@ export function SideBarDrive({
           }}
         >
           <DriveTitle data-testid='current-drive-title'>
-            {title || drive}{' '}
+            {driveName}{' '}
           </DriveTitle>
         </TitleButton>
         <HeadingButtonWrapper gap='0'>
@@ -126,7 +130,7 @@ export function SideBarDrive({
                   (driveResource.isUnauthorized()
                     ? agent
                       ? 'unauthorized'
-                      : driveResource.error.message
+                      : 'This drive is private, sign in to view it'
                     : driveResource.error.message)}
               </SideBarErr>
             )}
@@ -185,8 +189,9 @@ const TitleButton = styled(Button)<{ current?: boolean }>`
   }
 `;
 
-const SideBarErr = styled(ErrorLook)`
-  padding-left: ${props => props.theme.margin}rem;
+const SideBarErr = styled(SimpleErrorBlock)`
+  margin-inline-start: ${props => props.theme.size(2)};
+  margin-inline-end: ${props => props.theme.size()};
 `;
 
 const ListWrapper = styled.div`

browser/data-browser/src/handlers/index.ts

@@ -1,5 +1,4 @@
 import { Store, StoreEvents } from '@tomic/react';
-import { saveAgentToLocalStorage } from '../helpers/agentStorage';
 import { errorHandler } from './errorHandler';
 import {
   buildSideBarNewResourceHandler,
@@ -16,5 +15,4 @@ export function registerHandlers(store: Store) {
     buildSideBarRemoveResourceHandler(store),
   );
   store.on(StoreEvents.Error, errorHandler);
-  store.on(StoreEvents.AgentChanged, saveAgentToLocalStorage);
 }

browser/data-browser/src/helpers/agentStorage.ts

@@ -1,27 +1,65 @@
-import { Agent } from '@tomic/react';
+import { Agent, SubtleCryptoProvider } from '@tomic/react';
+import { del, get, set } from 'idb-keyval';
 
-const AGENT_LOCAL_STORAGE_KEY = 'agent';
+const AGENT_IDB_KEY = 'atomic.agent';
 
-export function getAgentFromLocalStorage(): Agent | undefined {
-  const secret = localStorage.getItem(AGENT_LOCAL_STORAGE_KEY);
+interface StoredAgent {
+  keyPair: CryptoKeyPair;
+  subject: string;
+}
+
+export async function getAgentFromIDB(): Promise<Agent | undefined> {
+  const storedAgent = (await get(AGENT_IDB_KEY)) as StoredAgent | undefined;
 
-  if (!secret) {
+  if (!storedAgent) {
     return undefined;
   }
 
   try {
-    return Agent.fromSecret(secret);
+    return new Agent(
+      new SubtleCryptoProvider(storedAgent.keyPair),
+      storedAgent.subject,
+    );
   } catch (e) {
     console.error(e);
 
     return undefined;
   }
 }
+export async function saveAgentToIDB(
+  keyPair: CryptoKeyPair,
+  subject: string,
+): Promise<void>;
+export async function saveAgentToIDB(secret: string | undefined): Promise<void>;
+export async function saveAgentToIDB(
+  keyPairOrSecret: CryptoKeyPair | string | undefined,
+  subject?: string,
+): Promise<void> {
+  let storedAgent: StoredAgent;
 
-export function saveAgentToLocalStorage(agent: Agent | undefined): void {
-  if (agent) {
-    localStorage.setItem(AGENT_LOCAL_STORAGE_KEY, agent.buildSecret());
+  if (keyPairOrSecret === undefined) {
+    await del(AGENT_IDB_KEY);
+
+    return;
+  }
+
+  if (typeof keyPairOrSecret === 'string') {
+    const [keyPair, newSubject] =
+      await SubtleCryptoProvider.createKeysFromSecret(keyPairOrSecret);
+    storedAgent = {
+      keyPair,
+      subject: newSubject,
+    };
   } else {
-    localStorage.removeItem(AGENT_LOCAL_STORAGE_KEY);
+    if (!subject) {
+      throw new Error('Subject is required');
+    }
+
+    storedAgent = {
+      keyPair: keyPairOrSecret,
+      subject,
+    };
   }
+
+  await set(AGENT_IDB_KEY, storedAgent);
 }