@striae-org/striae 3.0.5 → 3.1.1

package/app/components/public-signing-key-modal/public-signing-key-modal.module.css

@@ -0,0 +1,171 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: color-mix(in lab, var(--background) 60%, transparent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--zIndex5);
+  padding: var(--spaceL);
+}
+
+.modal {
+  width: 100%;
+  max-width: 640px;
+  max-height: 90vh;
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 var(--spaceXS) var(--spaceL)
+    color-mix(in lab, var(--black) 18%, transparent);
+  overflow: hidden;
+  cursor: default;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceL);
+  border-bottom: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--fontSizeBodyL);
+  font-weight: 600;
+  color: var(--textTitle);
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: var(--fontSizeH5);
+  cursor: pointer;
+  padding: var(--spaceS);
+  color: var(--textLight);
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.closeButton:hover {
+  color: var(--text);
+}
+
+.content {
+  padding: var(--spaceL);
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.description {
+  margin: 0;
+  font-size: var(--fontSizeBodyS);
+  color: var(--textBody);
+}
+
+.meta {
+  margin: 0;
+  font-size: var(--fontSizeBodyS);
+  color: var(--textTitle);
+}
+
+.meta span {
+  font-weight: var(--fontWeightMedium);
+}
+
+.label {
+  font-size: var(--fontSizeBodyXS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+}
+
+.field {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  min-height: 180px;
+  padding: var(--spaceM);
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  border-radius: var(--spaceXS);
+  background: color-mix(in lab, var(--background) 96%, transparent);
+  color: var(--textBody);
+  font-size: var(--fontSizeBodyXS);
+  line-height: 1.4;
+  font-family: Consolas, "Courier New", monospace;
+  resize: vertical;
+}
+
+.howToTitle {
+  margin: 0;
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+}
+
+.howToList {
+  margin: 0;
+  padding-left: var(--spaceL);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceXS);
+  color: var(--textBody);
+  font-size: var(--fontSizeBodyS);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spaceS);
+}
+
+.status {
+  margin: 0;
+  font-size: var(--fontSizeBodyXS);
+  color: var(--textBody);
+}
+
+.copyButton {
+  background: transparent;
+  color: var(--primary);
+  border: 1px solid color-mix(in lab, var(--primary) 35%, transparent);
+  border-radius: var(--spaceXS);
+  padding: var(--spaceS) var(--spaceL);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.copyButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+  border-color: color-mix(in lab, var(--primary) 55%, transparent);
+}
+
+.copyButton:disabled {
+  background: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  border-color: color-mix(in lab, var(--text) 10%, transparent);
+  cursor: not-allowed;
+}
+
+.closeModalButton {
+  background: var(--primary);
+  color: white;
+  border: none;
+  border-radius: var(--spaceXS);
+  padding: var(--spaceS) var(--spaceL);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.closeModalButton:hover {
+  background: color-mix(in lab, var(--primary) 85%, var(--black));
+}

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

@@ -0,0 +1,223 @@
+import { useEffect, useId, useState, type KeyboardEvent, type MouseEvent } from 'react';
+import styles from './public-signing-key-modal.module.css';
+
+const NO_PUBLIC_KEY_MESSAGE = 'No public signing key is configured for this environment.';
+
+interface PublicSigningKeyModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  publicSigningKeyId?: string | null;
+  publicKeyPem?: string | null;
+}
+
+export const PublicSigningKeyModal = ({
+  isOpen,
+  onClose,
+  publicSigningKeyId,
+  publicKeyPem
+}: PublicSigningKeyModalProps) => {
+  const [isCopyingPublicKey, setIsCopyingPublicKey] = useState(false);
+  const [publicKeyCopyMessage, setPublicKeyCopyMessage] = useState('');
+  const publicSigningKeyTitleId = useId();
+  const publicSigningKeyFieldId = useId();
+
+  useEffect(() => {
+    if (!isOpen) {
+      setIsCopyingPublicKey(false);
+      setPublicKeyCopyMessage('');
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handleEscapeKey = (event: globalThis.KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscapeKey);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const handleOverlayMouseDown = (event: MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+
+  const handleOverlayKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClose();
+    }
+  };
+
+  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();
+
+    let copied = false;
+    try {
+      copied = document.execCommand('copy');
+    } finally {
+      document.body.removeChild(tempTextarea);
+    }
+
+    return copied;
+  };
+
+  const handleCopyPublicKey = async () => {
+    if (!publicKeyPem) {
+      setPublicKeyCopyMessage(NO_PUBLIC_KEY_MESSAGE);
+      return;
+    }
+
+    setIsCopyingPublicKey(true);
+    setPublicKeyCopyMessage('');
+
+    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);
+      }
+    } finally {
+      setIsCopyingPublicKey(false);
+    }
+  };
+
+  return (
+    <div
+      className={styles.overlay}
+      onMouseDown={handleOverlayMouseDown}
+      onKeyDown={handleOverlayKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label="Close public signing key dialog"
+    >
+      <div
+        className={styles.modal}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={publicSigningKeyTitleId}
+      >
+        <div className={styles.header}>
+          <h3 id={publicSigningKeyTitleId} className={styles.title}>
+            Striae Public Signing Key
+          </h3>
+          <button
+            type="button"
+            className={styles.closeButton}
+            onClick={onClose}
+            aria-label="Close public signing key dialog"
+          >
+            &times;
+          </button>
+        </div>
+
+        <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.
+          </p>
+
+          {publicSigningKeyId && (
+            <p className={styles.meta}>
+              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.actions}>
+            <button
+              type="button"
+              className={styles.copyButton}
+              onClick={handleCopyPublicKey}
+              disabled={isCopyingPublicKey || !publicKeyPem}
+            >
+              {isCopyingPublicKey ? 'Copying...' : 'Copy Key'}
+            </button>
+            <button
+              type="button"
+              className={styles.closeModalButton}
+              onClick={onClose}
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/app/components/sidebar/case-export/case-export.module.css

@@ -6,6 +6,7 @@
   justify-content: center;
   align-items: center;
   z-index: var(--zIndex5);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
 }
 
@@ -15,7 +16,12 @@
   width: 90%;
   max-width: 480px;
   max-height: 90vh;
-  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 var(--spaceXS) var(--spaceL)
+    color-mix(in lab, var(--black) 10%, transparent);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
 }
 
@@ -52,8 +58,10 @@
 
 .content {
   padding: var(--spaceL);
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
-  max-height: calc(90vh - var(--space3XL));
+  overflow-x: hidden;
 }
 
 .formatSelector {
@@ -154,7 +162,7 @@
 }
 
 .checkbox:checked::after {
-  content: '';
+  content: "";
   position: absolute;
   left: 3px;
   top: 0px;
@@ -191,6 +199,7 @@
 }
 
 .checkboxTooltip {
+  display: block;
   font-size: var(--fontSizeBodyXS);
   color: var(--textBody);
   margin: 0;
@@ -286,6 +295,28 @@
   box-shadow: none;
 }
 
+.publicKeySection {
+  margin-top: var(--spaceS);
+}
+
+.publicKeyButton {
+  width: 100%;
+  background: transparent;
+  color: var(--primary);
+  border: 1px solid color-mix(in lab, var(--primary) 35%, transparent);
+  border-radius: var(--spaceXS);
+  padding: var(--spaceS) var(--spaceM);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.publicKeyButton:hover {
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+  border-color: color-mix(in lab, var(--primary) 55%, transparent);
+}
+
 .divider {
   margin: var(--spaceL) 0;
   text-align: center;
@@ -296,7 +327,7 @@
 }
 
 .divider::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 50%;
   left: 0;
@@ -383,4 +414,4 @@
   color: var(--error);
   font-size: var(--fontSizeBodyS);
   font-weight: var(--fontWeightMedium);
-}
+}

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

@@ -1,10 +1,64 @@
 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 { 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;
@@ -32,6 +86,8 @@ export const CaseExport = ({
   const [selectedFormat, setSelectedFormat] = useState<ExportFormat>('json');
   const [includeImages, setIncludeImages] = useState(false);
   const [hasConfirmationData, setHasConfirmationData] = useState(false);
+  const [isPublicKeyModalOpen, setIsPublicKeyModalOpen] = useState(false);
+  const { keyId: publicSigningKeyId, publicKeyPem } = getPublicSigningKeyDetails();
 
   // Update caseNumber when currentCaseNumber prop changes
   useEffect(() => {
@@ -63,7 +119,7 @@ export const CaseExport = ({
     };
 
     checkConfirmationData();
-  }, [isReadOnly, user?.uid, caseNumber]);
+  }, [isReadOnly, user, caseNumber]);
 
   // Additional useEffect to check when modal opens
   useEffect(() => {
@@ -80,7 +136,7 @@ export const CaseExport = ({
       };
       checkOnOpen();
     }
-  }, [isOpen, isReadOnly, user?.uid, caseNumber]);
+  }, [isOpen, isReadOnly, user, caseNumber]);
 
   // Force JSON format and disable images for read-only cases
   useEffect(() => {
@@ -90,10 +146,16 @@ export const CaseExport = ({
     }
   }, [isReadOnly]);
 
+  useEffect(() => {
+    if (!isOpen) {
+      setIsPublicKeyModalOpen(false);
+    }
+  }, [isOpen]);
+
   // Handle Escape key to close modal
   useEffect(() => {
     const handleEscapeKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpen) {
+      if (event.key === 'Escape' && isOpen && !isPublicKeyModalOpen) {
         onClose();
       }
     };
@@ -105,7 +167,7 @@ export const CaseExport = ({
     return () => {
       document.removeEventListener('keydown', handleEscapeKey);
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, isPublicKeyModalOpen, onClose]);
 
   if (!isOpen) return null;
 
@@ -169,14 +231,32 @@ export const CaseExport = ({
     }
   };
 
-  const handleOverlayClick = (e: React.MouseEvent) => {
+  const handleOverlayMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target === e.currentTarget) {
       onClose();
     }
   };
 
+  const handleOverlayKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClose();
+    }
+  };
+
   return (
-    <div className={styles.overlay} onClick={handleOverlayClick}>
+    <div
+      className={styles.overlay}
+      onMouseDown={handleOverlayMouseDown}
+      onKeyDown={handleOverlayKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label="Close case export dialog"
+    >
       <div className={styles.modal}>
         <div className={styles.header}>
           <h2 className={styles.title}>Export Case Data</h2>
@@ -234,21 +314,23 @@ export const CaseExport = ({
 
             {/* 3. Image inclusion option - disabled for read-only cases */}
             <div className={styles.imageOption}>
-              <label className={styles.checkboxLabel}>
+              <div className={styles.checkboxLabel}>
                 <input
+                  id="includeImagesOption"
                   type="checkbox"
                   className={styles.checkbox}
                   checked={includeImages}
                   onChange={(e) => setIncludeImages(e.target.checked)}
                   disabled={!caseNumber.trim() || isExporting || isExportingAll || isReadOnly}
+                  aria-label="Include images in ZIP export"
                 />
-                <div className={styles.checkboxText}>
+                <label htmlFor="includeImagesOption" className={styles.checkboxText}>
                   <span>Include Images (ZIP)</span>
-                  <p className={styles.checkboxTooltip}>
+                  <span className={styles.checkboxTooltip}>
                     Available for single case exports only. Downloads a ZIP file containing data and all associated image files. Case imports support only JSON data format.
-                  </p>
-                </div>
-              </label>
+                  </span>
+                </label>
+              </div>
             </div>
             
             {/* 4. Export buttons (case OR all cases) */}
@@ -281,6 +363,20 @@ export const CaseExport = ({
                 </div>
               </>
             )}
+
+            <div className={styles.divider}>
+              <span>Verification</span>
+            </div>
+
+            <div className={styles.publicKeySection}>
+              <button
+                type="button"
+                className={styles.publicKeyButton}
+                onClick={() => setIsPublicKeyModalOpen(true)}
+              >
+                View Public Signing Key
+              </button>
+            </div>
             
             {exportProgress && exportProgress.total > 0 && (
               <div className={styles.progressSection}>
@@ -312,6 +408,13 @@ export const CaseExport = ({
           </div>
         </div>
       </div>
+
+      <PublicSigningKeyModal
+        isOpen={isPublicKeyModalOpen}
+        onClose={() => setIsPublicKeyModalOpen(false)}
+        publicSigningKeyId={publicSigningKeyId}
+        publicKeyPem={publicKeyPem}
+      />
     </div>
   );
 };