@striae-org/striae 3.2.2 → 4.0.0

package/app/components/actions/image-manage.ts

@@ -1,16 +1,13 @@
 import type { User } from 'firebase/auth';
-import paths from '~/config/config.json';
 import { 
-  getImageApiKey,
   getAccountHash 
 } from '~/utils/auth';
+import { fetchImageApi, uploadImageApi } from '~/utils/image-api-client';
 import { canUploadFile } from '~/utils/permissions';
 import { getCaseData, updateCaseData, deleteFileAnnotations } from '~/utils/data-operations';
 import type { CaseData, FileData, ImageUploadResponse } from '~/types';
 import { auditService } from '~/services/audit';
 
-const IMAGE_URL = paths.image_worker_url;
-
 export const fetchFiles = async (
   user: User, 
   caseNumber: string, 
@@ -52,127 +49,70 @@ export const uploadFile = async (
     throw new Error(permission.reason || 'You cannot upload more files to this case.');
   }
 
-  const imagesApiToken = await getImageApiKey();
-  
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    const formData = new FormData();
-    formData.append('file', file);
-
-    xhr.upload.addEventListener('progress', (event) => {
-      if (event.lengthComputable && onProgress) {
-        const progress = Math.round((event.loaded / event.total) * 100);
-        onProgress(progress);
-      }
-    });
-
-    xhr.addEventListener('load', async () => {
-      const endTime = Date.now();
-      
-      if (xhr.status === 200) {
-        try {
-          const imageData = JSON.parse(xhr.responseText) as ImageUploadResponse;
-          if (!imageData.success) throw new Error('Upload failed');
-
-          const newFile: FileData = {
-            id: imageData.result.id,
-            originalFilename: file.name,
-            uploadedAt: new Date().toISOString()
-          };
+  try {
+    const imageData: ImageUploadResponse = await uploadImageApi(user, file, onProgress);
+    const uploadedImageId = imageData.result?.id;
+    if (!uploadedImageId) {
+      throw new Error('Upload failed');
+    }
 
-          // Update case data using centralized function
-          const existingData = await getCaseData(user, caseNumber);
-          if (!existingData) {
-            throw new Error('Case not found');
-          }
+    const newFile: FileData = {
+      id: uploadedImageId,
+      originalFilename: file.name,
+      uploadedAt: new Date().toISOString()
+    };
 
-          const updatedData = {
-            ...existingData,
-            files: [...(existingData.files || []), newFile]
-          };
+    // Update case data using centralized function
+    const existingData = await getCaseData(user, caseNumber);
+    if (!existingData) {
+      throw new Error('Case not found');
+    }
 
-          await updateCaseData(user, caseNumber, updatedData);
+    const updatedData = {
+      ...existingData,
+      files: [...(existingData.files || []), newFile]
+    };
 
-          // Log successful file upload
-          try {
-            await auditService.logFileUpload(
-              user,
-              file.name,
-              file.size,
-              file.type,
-              'file-picker',
-              caseNumber,
-              'success',
-              endTime - startTime,
-              imageData.result.id
-            );
-          } catch (auditError) {
-            console.error('Failed to log successful file upload:', auditError);
-          }
+    await updateCaseData(user, caseNumber, updatedData);
 
-          console.log(`✅ File uploaded: ${file.name} (${file.size} bytes) (${endTime - startTime}ms)`);
-          resolve(newFile);
-        } catch (error) {
-          // Log failed file upload
-          try {
-            await auditService.logFileUpload(
-              user,
-              file.name,
-              file.size,
-              file.type,
-              'file-picker',
-              caseNumber,
-              'failure',
-              endTime - startTime
-            );
-          } catch (auditError) {
-            console.error('Failed to log file upload failure:', auditError);
-          }
-          reject(error);
-        }
-      } else {
-        // Log failed file upload
-        try {
-          await auditService.logFileUpload(
-            user,
-            file.name,
-            file.size,
-            file.type,
-            'file-picker',
-            caseNumber,
-            'failure',
-            endTime - startTime
-          );
-        } catch (auditError) {
-          console.error('Failed to log file upload failure:', auditError);
-        }
-        reject(new Error('Upload failed'));
-      }
-    });
+    // Log successful file upload
+    try {
+      await auditService.logFileUpload(
+        user,
+        file.name,
+        file.size,
+        file.type,
+        'file-picker',
+        caseNumber,
+        'success',
+        Date.now() - startTime,
+        uploadedImageId
+      );
+    } catch (auditError) {
+      console.error('Failed to log successful file upload:', auditError);
+    }
 
-    xhr.addEventListener('error', async () => {
-      // Log upload error
-      try {
-        await auditService.logFileUpload(
-          user,
-          file.name,
-          file.size,
-          file.type,
-          'file-picker',
-          caseNumber,
-          'failure',
-          Date.now() - startTime
-        );
-      } catch (auditError) {
-        console.error('Failed to log file upload error:', auditError);
-      }
-      reject(new Error('Upload failed'));
-    });
+    console.log(`✅ File uploaded: ${file.name} (${file.size} bytes) (${Date.now() - startTime}ms)`);
+    return newFile;
+  } catch (error) {
+    // Log failed file upload
+    try {
+      await auditService.logFileUpload(
+        user,
+        file.name,
+        file.size,
+        file.type,
+        'file-picker',
+        caseNumber,
+        'failure',
+        Date.now() - startTime
+      );
+    } catch (auditError) {
+      console.error('Failed to log file upload failure:', auditError);
+    }
 
-    xhr.open('POST', IMAGE_URL);
-    xhr.setRequestHeader('Authorization', `Bearer ${imagesApiToken}`);
-    xhr.send(formData);
-  });
+    throw error;
+  }
 };
 
 export const deleteFile = async (user: User, caseNumber: string, fileId: string, deleteReason: string = 'User-requested deletion via file list'): Promise<void> => {
@@ -197,12 +137,8 @@ export const deleteFile = async (user: User, caseNumber: string, fileId: string,
     let imageDeleteError = '';
 
     // Attempt to delete image file
-    const imagesApiToken = await getImageApiKey();
-    const imageResponse = await fetch(`${IMAGE_URL}/${fileId}`, {
-      method: 'DELETE',
-      headers: {
-        'Authorization': `Bearer ${imagesApiToken}`
-      }
+    const imageResponse = await fetchImageApi(user, `/${encodeURIComponent(fileId)}`, {
+      method: 'DELETE'
     });
 
     // Handle image deletion response
@@ -306,14 +242,12 @@ export const getImageUrl = async (user: User, fileData: FileData, caseNumber: st
   const defaultAccessReason = accessReason || 'Image viewer access';
   
   try {
-    const { accountHash } = await getImageConfig();  
-    const imagesApiToken = await getImageApiKey();
+    const { accountHash } = await getImageConfig();
     const imageDeliveryUrl = `https://imagedelivery.net/${accountHash}/${fileData.id}/${DEFAULT_VARIANT}`;
-    
-    const workerResponse = await fetch(`${IMAGE_URL}/${imageDeliveryUrl}`, {
+
+    const workerResponse = await fetchImageApi(user, `/${imageDeliveryUrl}`, {
       method: 'GET',
       headers: {
-        'Authorization': `Bearer ${imagesApiToken}`,
         'Accept': 'text/plain'
       }
     });

package/app/components/button/button.module.css

@@ -9,13 +9,14 @@
   background: var(--backgroundLight);
   cursor: pointer;
   transition: all var(--durationS) var(--bezierFastoutSlowin);
-  box-shadow: 0 1px 3px color-mix(in lab, var(--backgroundLight) 30%, transparent);
+  box-shadow: 0 1px 3px
+    color-mix(in lab, var(--backgroundLight) 30%, transparent);
 }
 
 .button:hover {
   background: color-mix(in lab, var(--backgroundLight) 85%, var(--black));
-  transform: translateY(-1px);
-  box-shadow: 0 2px 6px color-mix(in lab, var(--backgroundLight) 40%, transparent);
+  box-shadow: 0 2px 6px
+    color-mix(in lab, var(--backgroundLight) 40%, transparent);
 }
 
 .button.active {
@@ -25,7 +26,6 @@
 
 .button.active:hover {
   background: color-mix(in lab, var(--success) 85%, var(--black));
-  transform: translateY(-1px);
   box-shadow: 0 2px 6px color-mix(in lab, var(--success) 40%, transparent);
 }
 
@@ -43,7 +43,7 @@
   box-shadow: none;
 }
 
-.icon {  
+.icon {
   color: var(--text);
   transition: color var(--durationS) var(--bezierFastoutSlowin);
 }
@@ -58,6 +58,10 @@
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/app/components/form/form-button.tsx

@@ -1,7 +1,7 @@
 import styles from './form.module.css';
 
 interface FormButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'success' | 'error';
+  variant?: 'primary' | 'secondary' | 'success' | 'error' | 'audit';
   isLoading?: boolean;
   loadingText?: string;
   children: React.ReactNode;

package/app/components/form/form.module.css

@@ -124,6 +124,15 @@
   background-color: color-mix(in lab, var(--error) 85%, var(--black));
 }
 
+.buttonAudit {
+  background-color: #6f42c1;
+  color: var(--white);
+}
+
+.buttonAudit:hover:not(:disabled) {
+  background-color: #5a359a;
+}
+
 .button:disabled {
   background-color: color-mix(in lab, var(--background) 95%, transparent);
   color: var(--textLight);

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

@@ -79,93 +79,207 @@
   font-weight: var(--fontWeightMedium);
 }
 
-.label {
+.verifierLayout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceL);
+}
+
+.verificationField {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceS);
+}
+
+.fieldHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spaceS);
+}
+
+.fieldLabel {
   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);
+.hiddenFileInput {
+  display: none;
+}
+
+.clearButton {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--primary);
   font-size: var(--fontSizeBodyXS);
-  line-height: 1.4;
-  font-family: Consolas, "Courier New", monospace;
-  resize: vertical;
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
 }
 
-.howToTitle {
+.dropZone {
+  min-height: 144px;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--spaceXS);
+  padding: var(--spaceL);
+  border: 1px dashed color-mix(in lab, var(--text) 18%, transparent);
+  border-radius: var(--radiusM);
+  background: linear-gradient(
+    135deg,
+    color-mix(in lab, var(--primary) 4%, var(--backgroundLight)),
+    color-mix(in lab, var(--background) 94%, transparent)
+  );
+  cursor: pointer;
+  transition:
+    border-color var(--durationS) var(--bezierFastoutSlowin),
+    background-color var(--durationS) var(--bezierFastoutSlowin),
+    box-shadow var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.dropZone:hover {
+  border-color: color-mix(in lab, var(--primary) 35%, transparent);
+  background: linear-gradient(
+    135deg,
+    color-mix(in lab, var(--primary) 7%, var(--backgroundLight)),
+    color-mix(in lab, var(--background) 92%, transparent)
+  );
+}
+
+.dropZone:focus-visible {
+  outline: none;
+  border-color: color-mix(in lab, var(--primary) 48%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in lab, var(--primary) 14%, transparent);
+}
+
+.dropZoneActive {
+  border-color: color-mix(in lab, var(--primary) 50%, transparent);
+  background: linear-gradient(
+    135deg,
+    color-mix(in lab, var(--primary) 10%, var(--backgroundLight)),
+    color-mix(in lab, var(--background) 90%, transparent)
+  );
+  box-shadow: 0 0 0 3px color-mix(in lab, var(--primary) 12%, transparent);
+}
+
+.dropZoneDisabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.dropZonePrimary {
   margin: 0;
   font-size: var(--fontSizeBodyS);
   font-weight: var(--fontWeightMedium);
   color: var(--textTitle);
 }
 
-.howToList {
+.dropZoneSecondary {
   margin: 0;
-  padding-left: var(--spaceL);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spaceXS);
+  font-size: var(--fontSizeBodyXS);
   color: var(--textBody);
-  font-size: var(--fontSizeBodyS);
 }
 
-.actions {
+.fieldActions {
   display: flex;
-  justify-content: flex-end;
+  flex-wrap: wrap;
   gap: var(--spaceS);
 }
 
-.status {
+.fieldError {
   margin: 0;
   font-size: var(--fontSizeBodyXS);
+  color: var(--error);
+}
+
+.resultCard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceXS);
+  padding: var(--spaceM) var(--spaceL);
+  border-radius: var(--radiusM);
+}
+
+.resultPass {
+  border: 1px solid color-mix(in lab, var(--success) 38%, transparent);
+  background: color-mix(in lab, var(--success) 12%, var(--backgroundLight));
+}
+
+.resultFail {
+  border: 1px solid color-mix(in lab, var(--error) 32%, transparent);
+  background: color-mix(in lab, var(--errorLight) 40%, var(--backgroundLight));
+}
+
+.resultTitle {
+  margin: 0;
+  font-size: var(--fontSizeBodyM);
+  font-weight: var(--fontWeightBold);
+  letter-spacing: 0.06em;
+}
+
+.resultPass .resultTitle {
+  color: color-mix(in lab, var(--success) 78%, var(--black));
+}
+
+.resultFail .resultTitle {
+  color: color-mix(in lab, var(--error) 78%, var(--black));
+}
+
+.resultMessage {
+  margin: 0;
+  font-size: var(--fontSizeBodyS);
   color: var(--textBody);
 }
 
-.copyButton {
-  background: transparent;
-  color: var(--primary);
-  border: 1px solid color-mix(in lab, var(--primary) 35%, transparent);
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spaceS);
+  flex-wrap: wrap;
+}
+
+.primaryButton,
+.secondaryButton {
   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);
+  transition:
+    background-color var(--durationS) var(--bezierFastoutSlowin),
+    border-color var(--durationS) var(--bezierFastoutSlowin),
+    color 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);
+.primaryButton {
+  background: var(--primary);
+  color: var(--white);
+  border: 1px solid var(--primary);
 }
 
-.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;
+.primaryButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 84%, var(--black));
+  border-color: color-mix(in lab, var(--primary) 84%, var(--black));
 }
 
-.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);
+.secondaryButton {
+  background: transparent;
+  color: var(--textTitle);
+  border: 1px solid color-mix(in lab, var(--text) 16%, transparent);
 }
 
-.closeModalButton:hover {
-  background: color-mix(in lab, var(--primary) 85%, var(--black));
+.secondaryButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--text) 5%, transparent);
+  border-color: color-mix(in lab, var(--text) 22%, transparent);
+}
+
+.primaryButton:disabled,
+.secondaryButton: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;
 }