@striae-org/striae 5.3.0 → 5.3.1

package/app/components/navbar/case-modals/export-case-modal.module.css

@@ -0,0 +1,27 @@
+.modal {
+  width: min(480px, calc(100vw - 2rem));
+}
+
+.description {
+  margin: 0 0 0.9rem;
+  color: #4b5563;
+  font-size: 0.86rem;
+  line-height: 1.5;
+}
+
+.confirmButton {
+  background: #1f6feb;
+  color: #ffffff;
+  border-color: #1560d4;
+}
+
+.confirmButton:not(:disabled):hover {
+  background: #1560d4;
+}
+
+.emailError {
+  margin: 0.45rem 0 0;
+  color: #b91c1c;
+  font-size: 0.83rem;
+  line-height: 1.4;
+}

package/app/components/navbar/case-modals/export-case-modal.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useRef, useState } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import sharedStyles from './case-modal-shared.module.css';
+import styles from './export-case-modal.module.css';
+
+interface ExportCaseModalProps {
+  isOpen: boolean;
+  caseNumber: string;
+  currentUserEmail?: string;
+  isSubmitting?: boolean;
+  onClose: () => void;
+  onSubmit: (designatedReviewerEmail: string | undefined) => Promise<void>;
+}
+
+export const ExportCaseModal = ({
+  isOpen,
+  caseNumber,
+  currentUserEmail,
+  isSubmitting = false,
+  onClose,
+  onSubmit,
+}: ExportCaseModalProps) => {
+  const [email, setEmail] = useState<string>('');
+
+  const isSelfEmail =
+    email.trim().length > 0 &&
+    !!currentUserEmail &&
+    email.trim().toLowerCase() === currentUserEmail.toLowerCase();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleClose = () => {
+    setEmail('');
+    onClose();
+  };
+
+  const isSubmitDisabled = isSubmitting || isSelfEmail;
+
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen,
+    onClose: handleClose,
+    canDismiss: !isSubmitting,
+  });
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const focusId = window.requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(focusId);
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async () => {
+    const trimmed = email.trim() || undefined;
+    await onSubmit(trimmed);
+    setEmail('');
+  };
+
+  return (
+    <div
+      className={sharedStyles.overlay}
+      aria-label="Close export case dialog"
+      {...overlayProps}
+    >
+      <div
+        className={`${sharedStyles.modal} ${styles.modal}`}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Export Case"
+      >
+        <button {...getCloseButtonProps({ ariaLabel: 'Close export case dialog' })}>
+          ×
+        </button>
+        <h3 className={sharedStyles.title}>Export Case</h3>
+        <p className={sharedStyles.subtitle}>Case: {caseNumber}</p>
+        <p className={styles.description}>
+          You may designate a specific email address for review approval. Only the user
+          with the supplied email address will be able to open your case for review in
+          Striae. (Optional)
+        </p>
+        <input
+          ref={inputRef}
+          type="email"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+          className={sharedStyles.input}
+          placeholder="Reviewer email address (optional)"
+          disabled={isSubmitting}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' && !isSubmitDisabled) {
+              void handleSubmit();
+            }
+          }}
+        />
+        {isSelfEmail && (
+          <p className={styles.emailError}>
+            You cannot designate yourself as the reviewer. The recipient must be a different Striae user.
+          </p>
+        )}
+        <div className={sharedStyles.actions}>
+          <button
+            type="button"
+            className={sharedStyles.cancelButton}
+            onClick={requestClose}
+            disabled={isSubmitting}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
+            onClick={() => void handleSubmit()}
+            disabled={isSubmitDisabled}
+          >
+            {isSubmitting ? 'Exporting...' : 'Export Case'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/app/components/navbar/case-modals/export-confirmations-modal.module.css

@@ -0,0 +1,24 @@
+.modal {
+  width: min(400px, calc(100vw - 2rem));
+}
+
+.warningPanel {
+  margin-bottom: 0.8rem;
+}
+
+.description {
+  margin: 0 0 0.3rem;
+  color: #4b5563;
+  font-size: 0.86rem;
+  line-height: 1.5;
+}
+
+.confirmButton {
+  background: #1f6feb;
+  color: #ffffff;
+  border-color: #1560d4;
+}
+
+.confirmButton:not(:disabled):hover {
+  background: #1560d4;
+}

package/app/components/navbar/case-modals/export-confirmations-modal.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useRef } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import sharedStyles from './case-modal-shared.module.css';
+import styles from './export-confirmations-modal.module.css';
+
+interface ExportConfirmationsModalProps {
+  isOpen: boolean;
+  caseNumber: string;
+  confirmedCount: number;
+  unconfirmedCount: number;
+  isSubmitting?: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export const ExportConfirmationsModal = ({
+  isOpen,
+  caseNumber,
+  confirmedCount,
+  unconfirmedCount,
+  isSubmitting = false,
+  onClose,
+  onConfirm,
+}: ExportConfirmationsModalProps) => {
+  const confirmButtonRef = useRef<HTMLButtonElement>(null);
+
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen,
+    onClose,
+    canDismiss: !isSubmitting,
+  });
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const focusId = window.requestAnimationFrame(() => {
+      confirmButtonRef.current?.focus();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(focusId);
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const confirmationLabel = confirmedCount === 1 ? '1 confirmation' : `${confirmedCount} confirmations`;
+
+  return (
+    <div
+      className={sharedStyles.overlay}
+      aria-label="Close export confirmations dialog"
+      {...overlayProps}
+    >
+      <div
+        className={`${sharedStyles.modal} ${styles.modal}`}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Export Confirmations"
+      >
+        <button {...getCloseButtonProps({ ariaLabel: 'Close export confirmations dialog' })}>
+          ×
+        </button>
+        <h3 className={sharedStyles.title}>Export Confirmations</h3>
+        <p className={sharedStyles.subtitle}>Case: {caseNumber}</p>
+        {unconfirmedCount > 0 && (
+          <div className={`${sharedStyles.warningPanel} ${styles.warningPanel}`}>
+            <p>
+              <strong>
+                {unconfirmedCount} image{unconfirmedCount !== 1 ? 's' : ''}{' '}
+                {unconfirmedCount !== 1 ? 'are' : 'is'} unconfirmed.
+              </strong>
+            </p>
+            <p>Only confirmed images will be included in this export.</p>
+          </div>
+        )}
+        <p className={styles.description}>
+          {confirmedCount === 0
+            ? 'No confirmed images found for this case.'
+            : `${confirmationLabel} will be exported.`}
+        </p>
+        <div className={sharedStyles.actions}>
+          <button
+            type="button"
+            className={sharedStyles.cancelButton}
+            onClick={requestClose}
+            disabled={isSubmitting}
+          >
+            Cancel
+          </button>
+          <button
+            ref={confirmButtonRef}
+            type="button"
+            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
+            onClick={onConfirm}
+            disabled={isSubmitting || confirmedCount === 0}
+          >
+            {isSubmitting ? 'Exporting...' : 'Export Confirmations'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -43,17 +43,10 @@ export const CasePreviewSection = ({
 
   if (!casePreview) return null;
 
-  const isEncrypted = casePreview.caseNumber === 'ENCRYPTED';
-
   return (
     <div className={styles.previewSection}>
       <h3 className={styles.previewTitle}>Case Import Preview</h3>
-      {isEncrypted ? (
-        <p className={styles.previewMessage}>
-          Encrypted package detected. Case details could not be read from the package.
-        </p>
-      ) : (
-        <div className={styles.previewMeta}>
+      <div className={styles.previewMeta}>
           <div className={styles.previewMetaRow}>
             <span className={styles.previewMetaLabel}>Case</span>
             <span className={styles.previewMetaValue}>{casePreview.caseNumber}</span>
@@ -89,7 +82,6 @@ export const CasePreviewSection = ({
             </div>
           )}
         </div>
-      )}
       {casePreview.archived && (
         <div className={styles.archivedImportNote}>
           {ARCHIVED_SELF_IMPORT_NOTE}

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

@@ -1,9 +1,15 @@
+import { type ConfirmationImportPreview } from '~/types';
 import styles from '../case-import.module.css';
 
-export type ConfirmationPreview = Record<string, never>;
+function formatDate(isoDate: string | undefined): string {
+  if (!isoDate) return 'Unknown';
+  const date = new Date(isoDate);
+  if (Number.isNaN(date.getTime())) return isoDate;
+  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+}
 
 interface ConfirmationPreviewSectionProps {
-  confirmationPreview: ConfirmationPreview | null;
+  confirmationPreview: ConfirmationImportPreview | null;
   isLoadingPreview: boolean;
 }
 
@@ -23,9 +29,34 @@ export const ConfirmationPreviewSection = ({ confirmationPreview, isLoadingPrevi
   return (
     <div className={styles.previewSection}>
       <h3 className={styles.previewTitle}>Confirmation Import Preview</h3>
-      <p className={styles.previewMessage}>
-        Encrypted confirmation package detected.
-      </p>
+      <div className={styles.previewMeta}>
+        <div className={styles.previewMetaRow}>
+          <span className={styles.previewMetaLabel}>Case</span>
+          <span className={styles.previewMetaValue}>{confirmationPreview.caseNumber}</span>
+        </div>
+        {(confirmationPreview.exportedByName || confirmationPreview.exportedBy) && (
+          <div className={styles.previewMetaRow}>
+            <span className={styles.previewMetaLabel}>Exported by</span>
+            <span className={styles.previewMetaValue}>
+              {confirmationPreview.exportedByName || confirmationPreview.exportedBy}
+            </span>
+          </div>
+        )}
+        {confirmationPreview.exportedByCompany && (
+          <div className={styles.previewMetaRow}>
+            <span className={styles.previewMetaLabel}>Organization</span>
+            <span className={styles.previewMetaValue}>{confirmationPreview.exportedByCompany}</span>
+          </div>
+        )}
+        <div className={styles.previewMetaRow}>
+          <span className={styles.previewMetaLabel}>Exported</span>
+          <span className={styles.previewMetaValue}>{formatDate(confirmationPreview.exportDate)}</span>
+        </div>
+        <div className={styles.previewMetaRow}>
+          <span className={styles.previewMetaLabel}>Confirmations</span>
+          <span className={styles.previewMetaValue}>{confirmationPreview.totalConfirmations}</span>
+        </div>
+      </div>
     </div>
   );
 };

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

@@ -1,12 +1,11 @@
 import { useState, useCallback } from 'react';
 import type { User } from 'firebase/auth';
-import { previewCaseImport, extractConfirmationImportPackage } from '~/components/actions/case-review';
-import { type CaseImportPreview } from '~/types';
-import { type ConfirmationPreview } from '../components/ConfirmationPreviewSection';
+import { previewCaseImport, previewConfirmationImport } from '~/components/actions/case-review';
+import { type CaseImportPreview, type ConfirmationImportPreview } from '~/types';
 
 interface UseFilePreviewReturn {
   casePreview: CaseImportPreview | null;
-  confirmationPreview: ConfirmationPreview | null;
+  confirmationPreview: ConfirmationImportPreview | null;
   loadCasePreview: (file: File) => Promise<void>;
   loadConfirmationPreview: (file: File) => Promise<void>;
   clearPreviews: () => void;
@@ -22,7 +21,7 @@ export const useFilePreview = (
   clearImportData: () => void
 ): UseFilePreviewReturn => {
   const [casePreview, setCasePreview] = useState<CaseImportPreview | null>(null);
-  const [confirmationPreview, setConfirmationPreview] = useState<ConfirmationPreview | null>(null);
+  const [confirmationPreview, setConfirmationPreview] = useState<ConfirmationImportPreview | null>(null);
 
   const loadCasePreview = useCallback(async (file: File) => {
     if (!user) {
@@ -51,10 +50,7 @@ export const useFilePreview = (
 
     setIsLoadingPreview(true);
     try {
-      await extractConfirmationImportPackage(file);
-
-      const preview: ConfirmationPreview = {};
-      
+      const preview = await previewConfirmationImport(file, user);
       setConfirmationPreview(preview);
     } catch (error) {
       console.error('Error loading confirmation preview:', error);

package/app/components/sidebar/case-import/index.ts

@@ -12,7 +12,4 @@ export { useFilePreview } from './hooks/useFilePreview';
 export { useImportExecution } from './hooks/useImportExecution';
 
 // Utils
-export * from './utils/file-validation';
-
-// Types
-export type { ConfirmationPreview } from './components/ConfirmationPreviewSection';
+export * from './utils/file-validation';

package/app/routes/auth/login.tsx

@@ -1,8 +1,8 @@
 import { useState, useEffect, useRef } from 'react';
-import { Link, useSearchParams, type MetaFunction } from 'react-router';
+import { Link, useSearchParams } from 'react-router';
 import { auth } from '~/services/firebase';
 import {
-    signInWithEmailAndPassword, 
+    signInWithEmailAndPassword,
     createUserWithEmailAndPassword,
     onAuthStateChanged,
     sendEmailVerification,
@@ -28,95 +28,7 @@ import { generateUniqueId } from '~/utils/common';
 import { evaluatePasswordPolicy, buildActionCodeSettings, userHasMFA } from '~/utils/auth';
 import type { UserData } from '~/types';
 
-const APP_CANONICAL_ORIGIN = 'https://striae.app';
-const SOCIAL_IMAGE_PATH = '/social-image.png';
-const SOCIAL_IMAGE_ALT = 'Striae forensic annotation and comparison workspace';
-const LOGIN_PATH_ALIASES = new Set(['/auth', '/auth/', '/auth/login', '/auth/login/']);
-
-type AuthMetaContent = {
-  title: string;
-  description: string;
-  robots: string;
-};
-
-const getCanonicalPath = (pathname: string): string => {
-  if (!pathname || LOGIN_PATH_ALIASES.has(pathname)) {
-    return '/';
-  }
-
-  return pathname.startsWith('/') ? pathname : `/${pathname}`;
-};
-
-const getAuthMetaContent = (mode: string | null, hasActionCode: boolean): AuthMetaContent => {
-  if (!mode && !hasActionCode) {
-    return {
-      title: 'Striae: A Firearms Examiner\'s Comparison Companion',
-      description: 'Sign in to Striae to access your comparison annotation workspace, case files, and review tools.',
-      robots: 'index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1',
-    };
-  }
-
-  if (mode === 'resetPassword') {
-    return {
-      title: 'Striae | Reset Your Password',
-      description: 'Use this secure page to reset your Striae account password and restore access to your workspace.',
-      robots: 'noindex,nofollow,noarchive',
-    };
-  }
-
-  if (mode === 'verifyEmail') {
-    return {
-      title: 'Striae | Verify Your Email Address',
-      description: 'Confirm your email address to complete Striae account activation and continue securely.',
-      robots: 'noindex,nofollow,noarchive',
-    };
-  }
-
-  if (mode === 'recoverEmail') {
-    return {
-      title: 'Striae | Recover Email Access',
-      description: 'Complete your Striae account email recovery steps securely.',
-      robots: 'noindex,nofollow,noarchive',
-    };
-  }
-
-  return {
-    title: 'Striae | Account Action',
-    description: 'Complete your Striae account action securely.',
-    robots: 'noindex,nofollow,noarchive',
-  };
-};
-
-export const meta: MetaFunction = ({ location }) => {
-  const searchParams = new URLSearchParams(location.search);
-  const mode = searchParams.get('mode');
-  const hasActionCode = Boolean(searchParams.get('oobCode'));
-
-  const canonicalPath = getCanonicalPath(location.pathname);
-  const canonicalHref = `${APP_CANONICAL_ORIGIN}${canonicalPath}`;
-  const socialImageHref = `${APP_CANONICAL_ORIGIN}${SOCIAL_IMAGE_PATH}`;
-  const { title, description, robots } = getAuthMetaContent(mode, hasActionCode);
-
-  return [
-    { title },
-    { name: 'description', content: description },
-    { name: 'robots', content: robots },
-    { property: 'og:site_name', content: 'Striae' },
-    { property: 'og:type', content: 'website' },
-    { property: 'og:url', content: canonicalHref },
-    { property: 'og:title', content: title },
-    { property: 'og:description', content: description },
-    { property: 'og:image', content: socialImageHref },
-    { property: 'og:image:secure_url', content: socialImageHref },
-    { property: 'og:image:alt', content: SOCIAL_IMAGE_ALT },
-    { name: 'twitter:card', content: 'summary_large_image' },
-    { name: 'twitter:title', content: title },
-    { name: 'twitter:description', content: description },
-    { name: 'twitter:image', content: socialImageHref },
-    { name: 'twitter:image:alt', content: SOCIAL_IMAGE_ALT },
-    { tagName: 'link', rel: 'canonical', href: canonicalHref },
-  ];
-};
+const DEMO_COMPANY_NAME = 'STRIAE DEMO';
 
 const SUPPORTED_EMAIL_ACTION_MODES = new Set(['resetPassword', 'verifyEmail', 'recoverEmail']);
 
@@ -157,7 +69,8 @@ export const Login = () => {
   const [isClient, setIsClient] = useState(false);
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
-  const [company, setCompany] = useState('');
+  const [company, setCompany] = useState(DEMO_COMPANY_NAME);
+  const [badgeId, setBadgeId] = useState('');
   const [confirmPasswordValue, setConfirmPasswordValue] = useState('');
   
   // MFA state
@@ -251,7 +164,6 @@ export const Login = () => {
       }      
       
       // Check if user exists in the USER_DB
-      let hasBadgeId = true;
       setIsCheckingUser(true);
       try {
         const userData = await checkUserExists(currentUser);
@@ -262,8 +174,6 @@ export const Login = () => {
           setError('This account does not exist or has been deleted');
           return;
         }
-
-        hasBadgeId = Boolean(userData.badgeId?.trim());
       } catch (error) {
         setIsCheckingUser(false);
         handleSignOut();
@@ -282,13 +192,8 @@ export const Login = () => {
       setShowMfaEnrollment(false);
 
       if (shouldShowWelcomeToastRef.current) {
-        if (hasBadgeId) {
-          setWelcomeToastType('success');
-          setWelcomeToastMessage(`Welcome to Striae, ${getUserFirstName(currentUser)}!`);
-        } else {
-          setWelcomeToastType('warning');
-          setWelcomeToastMessage('Your badge or ID number is not set. You can set one in Manage Profile.');
-        }
+        setWelcomeToastType('success');
+        setWelcomeToastMessage(`Welcome to Striae, ${getUserFirstName(currentUser)}!`);
         setIsWelcomeToastVisible(true);
         shouldShowWelcomeToastRef.current = false;
       }
@@ -373,6 +278,7 @@ export const Login = () => {
   const formFirstName = firstName;
   const formLastName = lastName;
   const formCompany = company;
+  const formBadgeId = badgeId;
 
   try {
     if (!isLogin) {
@@ -411,7 +317,8 @@ export const Login = () => {
         formFirstName,
         formLastName,
         companyName || '',
-        true
+        true,
+        formBadgeId.trim()
       );
 
       // Log user registration audit event
@@ -691,6 +598,17 @@ export const Login = () => {
                     disabled={isLoading}
                     value={company}
                     onChange={(e) => setCompany(e.target.value)}
+                  />
+                  <input
+                    type="text"
+                    name="badgeId"
+                    required
+                    placeholder="Badge/ID # (required)"
+                    autoComplete="off"
+                    className={styles.input}
+                    disabled={isLoading}
+                    value={badgeId}
+                    onChange={(e) => setBadgeId(e.target.value)}
                   />                      
                   {passwordStrength && (
                     <div className={styles.passwordStrength}>
@@ -740,6 +658,7 @@ export const Login = () => {
                   setFirstName('');
                   setLastName('');
                   setCompany('');
+                  setBadgeId('');
                   setConfirmPasswordValue('');
                 }}
                 className={styles.toggleButton}