@striae-org/striae 3.2.2 → 3.3.0

package/app/components/public-signing-key-modal/public-signing-key-modal.tsx

@@ -1,8 +1,213 @@
-import { useEffect, useId, useState, type KeyboardEvent, type MouseEvent } from 'react';
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type DragEvent,
+  type KeyboardEvent,
+  type MouseEvent
+} from 'react';
 import styles from './public-signing-key-modal.module.css';
+import { verifyExportFile } from '~/utils/export-verification';
 
 const NO_PUBLIC_KEY_MESSAGE = 'No public signing key is configured for this environment.';
 
+interface SelectedPublicKeyFile {
+  name: string;
+  content: string;
+  source: 'download' | 'upload';
+}
+
+interface VerificationOutcome {
+  state: 'pass' | 'fail';
+  message: string;
+}
+
+interface VerificationDropZoneProps {
+  inputId: string;
+  label: string;
+  accept: string;
+  emptyText: string;
+  helperText: string;
+  selectedFileName?: string | null;
+  selectedDescription?: string;
+  errorMessage?: string;
+  isDisabled?: boolean;
+  onFileSelected: (file: File) => void | Promise<void>;
+  onClear?: () => void;
+  actionButton?: {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+  };
+}
+
+const VerificationDropZone = ({
+  inputId,
+  label,
+  accept,
+  emptyText,
+  helperText,
+  selectedFileName,
+  selectedDescription,
+  errorMessage,
+  isDisabled = false,
+  onFileSelected,
+  onClear,
+  actionButton
+}: VerificationDropZoneProps) => {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const openFilePicker = () => {
+    if (!isDisabled) {
+      inputRef.current?.click();
+    }
+  };
+
+  const handleSelectedFile = (file?: File) => {
+    if (!file || isDisabled) {
+      return;
+    }
+
+    void onFileSelected(file);
+
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  };
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    handleSelectedFile(event.target.files?.[0]);
+  };
+
+  const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    if (!isDisabled) {
+      setIsDragOver(true);
+    }
+  };
+
+  const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const relatedTarget = event.relatedTarget as HTMLElement | null;
+
+    if (!relatedTarget || !event.currentTarget.contains(relatedTarget)) {
+      setIsDragOver(false);
+    }
+  };
+
+  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setIsDragOver(false);
+    handleSelectedFile(event.dataTransfer.files?.[0]);
+  };
+
+  return (
+    <div className={styles.verificationField}>
+      <div className={styles.fieldHeader}>
+        <label htmlFor={inputId} className={styles.fieldLabel}>
+          {label}
+        </label>
+        {selectedFileName && onClear && (
+          <button type="button" className={styles.clearButton} onClick={onClear}>
+            Clear
+          </button>
+        )}
+      </div>
+
+      <input
+        id={inputId}
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        onChange={handleInputChange}
+        disabled={isDisabled}
+        className={styles.hiddenFileInput}
+      />
+
+      <div
+        className={`${styles.dropZone} ${isDragOver ? styles.dropZoneActive : ''} ${isDisabled ? styles.dropZoneDisabled : ''}`}
+        onClick={openFilePicker}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        role="button"
+        tabIndex={isDisabled ? -1 : 0}
+        aria-disabled={isDisabled}
+        aria-label={label}
+        onKeyDown={(event) => {
+          if ((event.key === 'Enter' || event.key === ' ') && !isDisabled) {
+            if (event.key === ' ') {
+              event.preventDefault();
+            }
+            openFilePicker();
+          }
+        }}
+      >
+        <p className={styles.dropZonePrimary}>
+          {isDragOver ? 'Drop file to continue' : selectedFileName || emptyText}
+        </p>
+        <p className={styles.dropZoneSecondary}>{selectedFileName ? selectedDescription : helperText}</p>
+      </div>
+
+      <div className={styles.fieldActions}>
+        <button type="button" className={styles.secondaryButton} onClick={openFilePicker} disabled={isDisabled}>
+          Choose File
+        </button>
+        {actionButton && (
+          <button
+            type="button"
+            className={styles.secondaryButton}
+            onClick={actionButton.onClick}
+            disabled={isDisabled || actionButton.disabled}
+          >
+            {actionButton.label}
+          </button>
+        )}
+      </div>
+
+      {errorMessage && <p className={styles.fieldError}>{errorMessage}</p>}
+    </div>
+  );
+};
+
+function createPublicKeyDownloadFileName(publicSigningKeyId?: string | null): string {
+  const normalizedKeyId =
+    typeof publicSigningKeyId === 'string' && publicSigningKeyId.trim().length > 0
+      ? `-${publicSigningKeyId.trim().replace(/[^a-z0-9_-]+/gi, '-')}`
+      : '';
+
+  return `striae-public-signing-key${normalizedKeyId}.pem`;
+}
+
+function downloadTextFile(fileName: string, content: string, mimeType: string): void {
+  const blob = new Blob([content], { type: mimeType });
+  const objectUrl = URL.createObjectURL(blob);
+  const linkElement = document.createElement('a');
+
+  linkElement.href = objectUrl;
+  linkElement.download = fileName;
+  linkElement.style.display = 'none';
+
+  document.body.appendChild(linkElement);
+  linkElement.click();
+  document.body.removeChild(linkElement);
+
+  window.setTimeout(() => {
+    URL.revokeObjectURL(objectUrl);
+  }, 0);
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  }
+
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+
 interface PublicSigningKeyModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -16,15 +221,24 @@ export const PublicSigningKeyModal = ({
   publicSigningKeyId,
   publicKeyPem
 }: PublicSigningKeyModalProps) => {
-  const [isCopyingPublicKey, setIsCopyingPublicKey] = useState(false);
-  const [publicKeyCopyMessage, setPublicKeyCopyMessage] = useState('');
+  const [selectedPublicKey, setSelectedPublicKey] = useState<SelectedPublicKeyFile | null>(null);
+  const [selectedExportFile, setSelectedExportFile] = useState<File | null>(null);
+  const [keyError, setKeyError] = useState('');
+  const [exportFileError, setExportFileError] = useState('');
+  const [verificationOutcome, setVerificationOutcome] = useState<VerificationOutcome | null>(null);
+  const [isVerifying, setIsVerifying] = useState(false);
   const publicSigningKeyTitleId = useId();
-  const publicSigningKeyFieldId = useId();
+  const publicKeyInputId = useId();
+  const exportFileInputId = useId();
 
   useEffect(() => {
     if (!isOpen) {
-      setIsCopyingPublicKey(false);
-      setPublicKeyCopyMessage('');
+      setSelectedPublicKey(null);
+      setSelectedExportFile(null);
+      setKeyError('');
+      setExportFileError('');
+      setVerificationOutcome(null);
+      setIsVerifying(false);
     }
   }, [isOpen]);
 
@@ -67,64 +281,108 @@ export const PublicSigningKeyModal = ({
     }
   };
 
-  const copyTextWithExecCommand = (text: string): boolean => {
-    const tempTextarea = document.createElement('textarea');
-    tempTextarea.value = text;
-    tempTextarea.setAttribute('readonly', '');
-    tempTextarea.style.position = 'fixed';
-    tempTextarea.style.opacity = '0';
-    tempTextarea.style.pointerEvents = 'none';
-
-    document.body.appendChild(tempTextarea);
-    tempTextarea.select();
+  const resetVerificationState = () => {
+    setVerificationOutcome(null);
+  };
 
-    let copied = false;
+  const handlePublicKeySelected = async (file: File) => {
     try {
-      copied = document.execCommand('copy');
-    } finally {
-      document.body.removeChild(tempTextarea);
-    }
+      const lowerName = file.name.toLowerCase();
+      if (!lowerName.endsWith('.pem')) {
+        setKeyError('Select a PEM public key file.');
+        return;
+      }
+
+      const content = await file.text();
+      if (!content.includes('-----BEGIN PUBLIC KEY-----') || !content.includes('-----END PUBLIC KEY-----')) {
+        setKeyError('The selected file is not a valid PEM public key file.');
+        return;
+      }
 
-    return copied;
+      setSelectedPublicKey({
+        name: file.name,
+        content,
+        source: 'upload'
+      });
+      setKeyError('');
+      resetVerificationState();
+    } catch {
+      setKeyError('The public key file could not be read.');
+    }
   };
 
-  const handleCopyPublicKey = async () => {
+  const handleDownloadCurrentPublicKey = () => {
     if (!publicKeyPem) {
-      setPublicKeyCopyMessage(NO_PUBLIC_KEY_MESSAGE);
+      setKeyError(NO_PUBLIC_KEY_MESSAGE);
       return;
     }
 
-    setIsCopyingPublicKey(true);
-    setPublicKeyCopyMessage('');
+    const fileName = createPublicKeyDownloadFileName(publicSigningKeyId);
+    downloadTextFile(fileName, publicKeyPem, 'application/x-pem-file');
+    setSelectedPublicKey({
+      name: fileName,
+      content: publicKeyPem,
+      source: 'download'
+    });
+    setKeyError('');
+    resetVerificationState();
+  };
+
+  const handleExportFileSelected = async (file: File) => {
+    const lowerName = file.name.toLowerCase();
+
+    if (!lowerName.endsWith('.zip') && !lowerName.endsWith('.json')) {
+      setExportFileError('Select a confirmation JSON/ZIP file or a case export ZIP file.');
+      return;
+    }
+
+    setSelectedExportFile(file);
+    setExportFileError('');
+    resetVerificationState();
+  };
+
+  const handleVerify = async () => {
+    const hasPublicKey = !!selectedPublicKey?.content;
+    const hasExportFile = !!selectedExportFile;
+
+    setKeyError(hasPublicKey ? '' : 'Select or download a public key PEM file first.');
+    setExportFileError(hasExportFile ? '' : 'Select a confirmation JSON/ZIP file or a case export ZIP file.');
+
+    if (!hasPublicKey || !hasExportFile || !selectedPublicKey || !selectedExportFile) {
+      return;
+    }
+
+    setIsVerifying(true);
+    setVerificationOutcome(null);
 
     try {
-      if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
-        await navigator.clipboard.writeText(publicKeyPem);
-        setPublicKeyCopyMessage('Public key copied to clipboard.');
-      } else {
-        const copied = copyTextWithExecCommand(publicKeyPem);
-        setPublicKeyCopyMessage(
-          copied
-            ? 'Public key copied to clipboard.'
-            : 'Copy failed. Select and copy the key manually.'
-        );
-      }
-    } catch (copyError) {
-      const copied = copyTextWithExecCommand(publicKeyPem);
-      setPublicKeyCopyMessage(
-        copied
-          ? 'Public key copied to clipboard.'
-          : 'Copy failed. Select and copy the key manually.'
-      );
-
-      if (!copied) {
-        console.error('Failed to copy public signing key:', copyError);
-      }
+      const result = await verifyExportFile(selectedExportFile, selectedPublicKey.content);
+      setVerificationOutcome({
+        state: result.isValid ? 'pass' : 'fail',
+        message: result.message
+      });
     } finally {
-      setIsCopyingPublicKey(false);
+      setIsVerifying(false);
     }
   };
 
+  const selectedKeyDescription = selectedPublicKey
+    ? selectedPublicKey.source === 'download'
+      ? 'Downloaded from this Striae environment and ready to use.'
+      : 'Loaded from your device and ready to use.'
+    : undefined;
+
+  const selectedExportDescription = selectedExportFile
+    ? `${(() => {
+        const lowerName = selectedExportFile.name.toLowerCase();
+        if (lowerName.endsWith('.zip')) {
+          return lowerName.includes('confirmation-data-') ? 'Confirmation ZIP' : 'Case export ZIP';
+        }
+
+        return 'Confirmation JSON';
+      })()} • ${formatFileSize(selectedExportFile.size)}`
+    : undefined;
+
   return (
     <div
       className={styles.overlay}
@@ -156,61 +414,80 @@ export const PublicSigningKeyModal = ({
 
         <div className={styles.content}>
           <p className={styles.description}>
-            This key verifies digital signatures attached to Striae exports. It is safe to share for
-            independent verification.
+            Drop a public key PEM file and a Striae confirmation JSON/ZIP or case export ZIP, then run
+            verification directly in the browser.
           </p>
 
           {publicSigningKeyId && (
             <p className={styles.meta}>
-              Key ID: <span>{publicSigningKeyId}</span>
+              Current key ID: <span>{publicSigningKeyId}</span>
             </p>
           )}
 
-          <label htmlFor={publicSigningKeyFieldId} className={styles.label}>
-            Public signing key (PEM)
-          </label>
-          <textarea
-            id={publicSigningKeyFieldId}
-            className={styles.field}
-            value={publicKeyPem || NO_PUBLIC_KEY_MESSAGE}
-            readOnly
-            rows={10}
-          />
-
-          <p className={styles.howToTitle}>How to verify Striae exports</p>
-          <ol className={styles.howToList}>
-            <li>
-              Locate signature metadata in the export (for case ZIP exports, see FORENSIC_MANIFEST.json;
-              for confirmation exports, see metadata.signature).
-            </li>
-            <li>
-              Use this public key with your signature verification workflow (for example OpenSSL or an
-              internal verifier) to validate the signed payload.
-            </li>
-            <li>
-              Trust the export only when signature verification succeeds and the key ID matches the export
-              metadata.
-            </li>
-          </ol>
-
-          {publicKeyCopyMessage && (
-            <p className={styles.status} role="status" aria-live="polite">
-              {publicKeyCopyMessage}
-            </p>
+          <div className={styles.verifierLayout}>
+            <VerificationDropZone
+              inputId={publicKeyInputId}
+              label="1. Public Key PEM"
+              accept=".pem"
+              emptyText="Drop a public key PEM file here"
+              helperText="Use a .pem file containing the Striae public signing key."
+              selectedFileName={selectedPublicKey?.name}
+              selectedDescription={selectedKeyDescription}
+              errorMessage={keyError}
+              onFileSelected={handlePublicKeySelected}
+              onClear={() => {
+                setSelectedPublicKey(null);
+                setKeyError('');
+                resetVerificationState();
+              }}
+              actionButton={{
+                label: 'Download Current Public Key',
+                onClick: handleDownloadCurrentPublicKey,
+                disabled: !publicKeyPem
+              }}
+            />
+
+            <VerificationDropZone
+              inputId={exportFileInputId}
+              label="2. Confirmation File or Export ZIP"
+              accept=".json,.zip"
+              emptyText="Drop a confirmation JSON/ZIP or case export ZIP here"
+              helperText="Case exports use .zip. Confirmation exports can be .json or .zip."
+              selectedFileName={selectedExportFile?.name}
+              selectedDescription={selectedExportDescription}
+              errorMessage={exportFileError}
+              onFileSelected={handleExportFileSelected}
+              onClear={() => {
+                setSelectedExportFile(null);
+                setExportFileError('');
+                resetVerificationState();
+              }}
+            />
+          </div>
+
+          {verificationOutcome && (
+            <div
+              className={`${styles.resultCard} ${verificationOutcome.state === 'pass' ? styles.resultPass : styles.resultFail}`}
+              role="status"
+              aria-live="polite"
+            >
+              <p className={styles.resultTitle}>{verificationOutcome.state === 'pass' ? 'PASS' : 'FAIL'}</p>
+              <p className={styles.resultMessage}>{verificationOutcome.message}</p>
+            </div>
           )}
 
           <div className={styles.actions}>
             <button
               type="button"
-              className={styles.copyButton}
-              onClick={handleCopyPublicKey}
-              disabled={isCopyingPublicKey || !publicKeyPem}
+              className={styles.primaryButton}
+              onClick={handleVerify}
+              disabled={isVerifying || !selectedPublicKey || !selectedExportFile}
             >
-              {isCopyingPublicKey ? 'Copying...' : 'Copy Key'}
+              {isVerifying ? 'Verifying...' : 'Verify File'}
             </button>
             <button
               type="button"
-              className={styles.closeModalButton}
+              className={styles.secondaryButton}
               onClick={onClose}
             >
               Close

package/app/components/sidebar/case-export/case-export.tsx

@@ -1,64 +1,12 @@
 import { useState, useEffect, useContext } from 'react';
 import styles from './case-export.module.css';
-import config from '~/config/config.json';
 import { AuthContext } from '~/contexts/auth.context';
 import { PublicSigningKeyModal } from '~/components/public-signing-key-modal/public-signing-key-modal';
-import { getVerificationPublicKey } from '~/utils/signature-utils';
+import { getCurrentPublicSigningKeyDetails } from '~/utils/signature-utils';
 import { getCaseConfirmations, exportConfirmationData } from '../../actions/confirm-export';
 
 export type ExportFormat = 'json' | 'csv';
 
-type ManifestSigningConfig = {
-  manifest_signing_key_id?: string;
-  manifest_signing_public_key?: string;
-  manifest_signing_public_keys?: Record<string, string>;
-};
-
-function getPublicSigningKeyDetails(): { keyId: string | null; publicKeyPem: string | null } {
-  const signingConfig = config as unknown as ManifestSigningConfig;
-  const configuredKeyId =
-    typeof signingConfig.manifest_signing_key_id === 'string' &&
-    signingConfig.manifest_signing_key_id.trim().length > 0
-      ? signingConfig.manifest_signing_key_id
-      : null;
-
-  if (configuredKeyId) {
-    return {
-      keyId: configuredKeyId,
-      publicKeyPem: getVerificationPublicKey(configuredKeyId)
-    };
-  }
-
-  const keyMap = signingConfig.manifest_signing_public_keys;
-  if (keyMap && typeof keyMap === 'object') {
-    const firstConfiguredEntry = Object.entries(keyMap).find(
-      ([, value]) => typeof value === 'string' && value.trim().length > 0
-    );
-
-    if (firstConfiguredEntry) {
-      return {
-        keyId: firstConfiguredEntry[0],
-        publicKeyPem: firstConfiguredEntry[1]
-      };
-    }
-  }
-
-  if (
-    typeof signingConfig.manifest_signing_public_key === 'string' &&
-    signingConfig.manifest_signing_public_key.trim().length > 0
-  ) {
-    return {
-      keyId: null,
-      publicKeyPem: signingConfig.manifest_signing_public_key
-    };
-  }
-
-  return {
-    keyId: null,
-    publicKeyPem: null
-  };
-}
-
 interface CaseExportProps {
   isOpen: boolean;
   onClose: () => void;
@@ -87,7 +35,7 @@ export const CaseExport = ({
   const [includeImages, setIncludeImages] = useState(false);
   const [hasConfirmationData, setHasConfirmationData] = useState(false);
   const [isPublicKeyModalOpen, setIsPublicKeyModalOpen] = useState(false);
-  const { keyId: publicSigningKeyId, publicKeyPem } = getPublicSigningKeyDetails();
+  const { keyId: publicSigningKeyId, publicKeyPem } = getCurrentPublicSigningKeyDetails();
 
   // Update caseNumber when currentCaseNumber prop changes
   useEffect(() => {

package/app/components/sidebar/case-import/case-import.tsx

@@ -19,7 +19,7 @@ import {
   useFilePreview,
   useImportExecution,
   isValidImportFile,
-  getImportType,
+  resolveImportType,
   resetFileInput
 } from './index';
 import styles from './case-import.module.css';
@@ -146,12 +146,18 @@ export const CaseImport = ({
     clearMessages();
 
     if (!isValidImportFile(file)) {
-      setError('Only ZIP files (case imports) or JSON files (confirmation imports) are allowed. Please select a valid file.');
+      setError('Only Striae case ZIP files, confirmation ZIP files, or confirmation JSON files are allowed.');
+      clearImportData();
+      return;
+    }
+
+    const importType = await resolveImportType(file);
+    if (!importType) {
+      setError('The selected file is not a supported Striae case or confirmation import package.');
       clearImportData();
       return;
     }
 
-    const importType = getImportType(file);
     updateImportState({ 
       selectedFile: file, 
       importType 
@@ -172,12 +178,18 @@ export const CaseImport = ({
     clearMessages();
 
     if (!isValidImportFile(file)) {
-      setError('Only ZIP files (case imports) or JSON files (confirmation imports) are allowed. Please select a valid file.');
+      setError('Only Striae case ZIP files, confirmation ZIP files, or confirmation JSON files are allowed.');
+      clearImportData();
+      return;
+    }
+
+    const importType = await resolveImportType(file);
+    if (!importType) {
+      setError('The selected file is not a supported Striae case or confirmation import package.');
       clearImportData();
       return;
     }
 
-    const importType = getImportType(file);
     updateImportState({ 
       selectedFile: file, 
       importType 
@@ -404,7 +416,7 @@ export const CaseImport = ({
               <br />
               <h3 className={styles.instructionsTitle}>Confirmation Import Instructions:</h3>
               <ul className={styles.instructionsList}>
-                <li>Only JSON files (.json) with confirmation data exported from Striae are accepted</li>
+                <li>Confirmation imports accept either confirmation JSON files or confirmation ZIP packages exported from Striae</li>
                 <li>Only one confirmation file can be imported at a time</li>
                 <li>Confirmed images will become read-only and cannot be modified</li>
                 <li>If an image has a pre-existing confirmation, it will be skipped</li>

package/app/components/sidebar/case-import/hooks/useFilePreview.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
 import type { User } from 'firebase/auth';
-import { previewCaseImport } from '~/components/actions/case-review';
+import { previewCaseImport, extractConfirmationImportPackage } from '~/components/actions/case-review';
 import { type CaseImportPreview } from '~/types';
 import { type ConfirmationPreview } from '../components/ConfirmationPreviewSection';
 
@@ -56,8 +56,8 @@ export const useFilePreview = (
 
     setIsLoadingPreview(true);
     try {
-      const text = await file.text();
-      const parsed = JSON.parse(text) as unknown;
+      const { confirmationData } = await extractConfirmationImportPackage(file);
+      const parsed = confirmationData as unknown;
 
       if (!isRecord(parsed)) {
         throw new Error('Invalid confirmation data format');
@@ -104,7 +104,9 @@ export const useFilePreview = (
       setConfirmationPreview(preview);
     } catch (error) {
       console.error('Error loading confirmation preview:', error);
-      setError(`Failed to read confirmation data: ${error instanceof Error ? error.message : 'Invalid JSON format'}`);
+      setError(
+        `Failed to read confirmation data: ${error instanceof Error ? error.message : 'Invalid confirmation package format'}`
+      );
       clearImportData();
     } finally {
       setIsLoadingPreview(false);