@striae-org/striae 5.3.1 → 5.4.0

package/app/components/auth/mfa-verification.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { 
   PhoneAuthProvider, 
   PhoneMultiFactorGenerator, 
+  TotpMultiFactorGenerator,
   RecaptchaVerifier,
   type MultiFactorResolver,
   type UserCredential
@@ -11,7 +12,7 @@ import { handleAuthError, getValidationError } from '~/services/firebase/errors'
 import { SignOut } from '~/components/actions/signout';
 import { auditService } from '~/services/audit';
 import { generateUniqueId } from '~/utils/common';
-import styles from './mfa-verification.module.css';
+import styles from './auth.module.css';
 
 interface MFAVerificationProps {
   resolver: MultiFactorResolver;
@@ -45,6 +46,12 @@ export const MFAVerification = ({ resolver, onSuccess, onError, onCancel }: MFAV
 
   useEffect(() => {
     if (!isClient) return;
+
+    // Only initialize reCAPTCHA if there is at least one phone hint
+    const hasPhoneHint = resolver.hints.some(
+      (h) => h.factorId === PhoneMultiFactorGenerator.FACTOR_ID
+    );
+    if (!hasPhoneHint) return;
     
     // Initialize reCAPTCHA verifier
     const verifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
@@ -63,7 +70,7 @@ export const MFAVerification = ({ resolver, onSuccess, onError, onCancel }: MFAV
     return () => {
       verifier.clear();
     };
-  }, [isClient, onError]);
+  }, [isClient, onError, resolver.hints]);
 
   const sendVerificationCode = async () => {
     if (!recaptchaVerifier) {
@@ -188,8 +195,82 @@ export const MFAVerification = ({ resolver, onSuccess, onError, onCancel }: MFAV
   };
 
   const selectedHint = resolver.hints[selectedHintIndex];
+  const isTotpHint = selectedHint?.factorId === TotpMultiFactorGenerator.FACTOR_ID;
   const maskedPhoneNumber = selectedHint?.displayName || 'your phone';
 
+  const getHintLabel = (hint: (typeof resolver.hints)[number], index: number): string => {
+    if (hint.factorId === TotpMultiFactorGenerator.FACTOR_ID) {
+      return hint.displayName || 'Authenticator App';
+    }
+    if (hint.factorId === PhoneMultiFactorGenerator.FACTOR_ID) {
+      return hint.displayName || `Phone (SMS) ${index + 1}`;
+    }
+    return hint.displayName || `Verification method ${index + 1}`;
+  };
+
+  const verifyTotpCode = async () => {
+    if (!verificationCode.trim() || verificationCode.length !== 6) {
+      const error = getValidationError('MFA_CODE_REQUIRED');
+      setErrorMessage(error);
+      onError(error);
+      return;
+    }
+
+    setLoading(true);
+    setErrorMessage('');
+    try {
+      const assertion = TotpMultiFactorGenerator.assertionForSignIn(
+        selectedHint.uid,
+        verificationCode
+      );
+      const result = await resolver.resolveSignIn(assertion);
+
+      try {
+        const sessionId = `session_${result.user.uid}_${Date.now()}_${generateUniqueId(8)}`;
+        await auditService.logMfaAuthentication(
+          result.user,
+          'totp',
+          'success',
+          1,
+          sessionId,
+          navigator.userAgent
+        );
+      } catch (auditError) {
+        console.error('Failed to log TOTP authentication success audit:', auditError);
+      }
+
+      onSuccess(result);
+    } catch (error: unknown) {
+      const authError = error as { code?: string; message?: string };
+      let errorMsg = '';
+
+      if (authError.code === 'auth/invalid-verification-code') {
+        errorMsg = getValidationError('MFA_INVALID_CODE');
+      } else if (authError.code === 'auth/code-expired') {
+        errorMsg = getValidationError('MFA_CODE_EXPIRED');
+      } else {
+        errorMsg = handleAuthError(authError).message;
+      }
+      setErrorMessage(errorMsg);
+      onError(errorMsg);
+
+      try {
+        await auditService.logSecurityViolation(
+          null,
+          authError.code === 'auth/invalid-verification-code' ? 'brute-force' : 'unauthorized-access',
+          authError.code === 'auth/invalid-verification-code' ? 'high' : 'medium',
+          `Failed TOTP verification: ${authError.code} - ${errorMsg}`,
+          'mfa-verification-endpoint',
+          true
+        );
+      } catch (auditError) {
+        console.error('Failed to log TOTP security violation audit:', auditError);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
   if (!isClient) {
     return null;
   }
@@ -214,69 +295,110 @@ export const MFAVerification = ({ resolver, onSuccess, onError, onCancel }: MFAV
               value={selectedHintIndex} 
               onChange={(e) => {
                 setSelectedHintIndex(Number(e.target.value));
+                setCodeSent(false);
+                setVerificationCode('');
+                setVerificationId('');
                 if (errorMessage) setErrorMessage(''); // Clear error when changing method
               }}
               className={styles.select}
             >
               {resolver.hints.map((hint, index) => (
                 <option key={index} value={index}>
-                  {hint.displayName || `Phone verification ${index + 1}`}
+                  {getHintLabel(hint, index)}
                 </option>
               ))}
             </select>
           </div>
         )}
 
-        {!codeSent ? (
-          <div className={styles.sendCode}>
-            <p className={styles.description}>
-              We&apos;ll send a verification code to {maskedPhoneNumber}
-            </p>
-            <button 
-              onClick={sendVerificationCode} 
-              disabled={loading}
-              className={styles.button}
-            >
-              {loading ? 'Sending...' : 'Send Verification Code'}
-            </button>
-          </div>
-        ) : (
+        {isTotpHint ? (
           <div className={styles.verifyCode}>
             <p className={styles.description}>
-              Enter the verification code sent to {maskedPhoneNumber}
+              Enter the 6-digit code from your authenticator app.
             </p>
             <input
               type="text"
+              inputMode="numeric"
               placeholder="Enter 6-digit code"
               value={verificationCode}
               onChange={(e) => {
-                setVerificationCode(e.target.value);
-                if (errorMessage) setErrorMessage(''); // Clear error on input
+                setVerificationCode(e.target.value.replace(/\D/g, ''));
+                if (errorMessage) setErrorMessage('');
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && verificationCode.length === 6) {
+                  e.preventDefault();
+                  void verifyTotpCode();
+                }
               }}
               className={styles.input}
               maxLength={6}
+              autoComplete="one-time-code"
             />
             <div className={styles.buttons}>
-              <button 
-                onClick={verifyCode} 
+              <button
+                onClick={verifyTotpCode}
                 disabled={loading || verificationCode.length !== 6}
                 className={styles.button}
               >
                 {loading ? 'Verifying...' : 'Verify Code'}
               </button>
-              <button 
-                onClick={() => {
-                  setCodeSent(false);
-                  setVerificationCode('');
-                  setVerificationId('');
-                  setErrorMessage(''); // Clear errors when requesting new code
-                }}
-                className={styles.secondaryButton}
-              >
-                Send New Code
-              </button>
             </div>
           </div>
+        ) : (
+          <>
+            {!codeSent ? (
+              <div className={styles.sendCode}>
+                <p className={styles.description}>
+                  We&apos;ll send a verification code to {maskedPhoneNumber}
+                </p>
+                <button 
+                  onClick={sendVerificationCode} 
+                  disabled={loading}
+                  className={styles.button}
+                >
+                  {loading ? 'Sending...' : 'Send Verification Code'}
+                </button>
+              </div>
+            ) : (
+              <div className={styles.verifyCode}>
+                <p className={styles.description}>
+                  Enter the verification code sent to {maskedPhoneNumber}
+                </p>
+                <input
+                  type="text"
+                  placeholder="Enter 6-digit code"
+                  value={verificationCode}
+                  onChange={(e) => {
+                    setVerificationCode(e.target.value);
+                    if (errorMessage) setErrorMessage(''); // Clear error on input
+                  }}
+                  className={styles.input}
+                  maxLength={6}
+                />
+                <div className={styles.buttons}>
+                  <button 
+                    onClick={verifyCode} 
+                    disabled={loading || verificationCode.length !== 6}
+                    className={styles.button}
+                  >
+                    {loading ? 'Verifying...' : 'Verify Code'}
+                  </button>
+                  <button 
+                    onClick={() => {
+                      setCodeSent(false);
+                      setVerificationCode('');
+                      setVerificationId('');
+                      setErrorMessage(''); // Clear errors when requesting new code
+                    }}
+                    className={styles.secondaryButton}
+                  >
+                    Send New Code
+                  </button>
+                </div>
+              </div>
+            )}
+          </>
         )}
 
         <div className={styles.actions}>

package/app/components/{sidebar/cases/cases-modal.tsx → navbar/case-modals/all-cases-modal.tsx}

@@ -15,9 +15,9 @@ import {
   renameCase,
   validateCaseNumber,
 } from '~/components/actions/case-manage';
-import { RenameCaseModal } from '../../navbar/case-modals/rename-case-modal';
-import { ArchiveCaseModal } from '../../navbar/case-modals/archive-case-modal';
-import { DeleteCaseModal } from '../../navbar/case-modals/delete-case-modal';
+import { RenameCaseModal } from './rename-case-modal';
+import { ArchiveCaseModal } from './archive-case-modal';
+import { DeleteCaseModal } from './delete-case-modal';
 import {
   ensureCaseConfirmationSummary,
   getCaseData,
@@ -26,7 +26,7 @@ import {
   getUserReadOnlyCases,
 } from '~/utils/data';
 import { fetchFiles } from '~/components/actions/image-manage';
-import styles from './cases-modal.module.css';
+import styles from './all-cases-modal.module.css';
 
 interface CasesModalProps {
   isOpen: boolean;

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

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
-import sharedStyles from './case-modal-shared.module.css';
-import styles from './archive-case-modal.module.css';
+import styles from './case-modal-shared.module.css';
 
 interface ArchiveCaseModalProps {
   isOpen: boolean;
@@ -66,18 +65,18 @@ export const ArchiveCaseModal = ({
 
   return (
     <div
-      className={sharedStyles.overlay}
+      className={styles.overlay}
       aria-label="Close archive case dialog"
       {...overlayProps}
     >
-      <div className={`${sharedStyles.modal} ${styles.modal}`} role="dialog" aria-modal="true" aria-label="Archive Case">
+      <div className={`${styles.modal} ${styles.modalLarge}`} role="dialog" aria-modal="true" aria-label="Archive Case">
         <button {...getCloseButtonProps({ ariaLabel: 'Close archive case dialog' })}>
           ×
         </button>
-        <h3 className={sharedStyles.title}>Archive Case</h3>
-        <p className={sharedStyles.subtitle}>Case: {currentCase}</p>
+        <h3 className={styles.title}>Archive Case</h3>
+        <p className={styles.subtitle}>Case: {currentCase}</p>
 
-        <div className={sharedStyles.warningPanel}>
+        <div className={styles.warningPanel}>
           <p>
             Archiving a case permanently renders it read-only.
           </p>
@@ -104,10 +103,10 @@ export const ArchiveCaseModal = ({
           rows={3}
         />
 
-        <div className={sharedStyles.actions}>
+        <div className={styles.actions}>
           <button
             type="button"
-            className={sharedStyles.cancelButton}
+            className={styles.cancelButton}
             onClick={requestClose}
             disabled={isCloseBlocked}
           >
@@ -115,7 +114,7 @@ export const ArchiveCaseModal = ({
           </button>
           <button
             type="button"
-            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
+            className={`${styles.confirmButton} ${styles.confirmButtonDanger}`}
             onClick={() => {
               void handleSubmit();
             }}

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

@@ -92,3 +92,91 @@
   cursor: not-allowed;
   opacity: 0.6;
 }
+
+/* Modal width variants */
+.modalCompact {
+  width: min(400px, calc(100vw - 2rem));
+}
+
+.modalStandard {
+  width: min(460px, calc(100vw - 2rem));
+}
+
+.modalWide {
+  width: min(480px, calc(100vw - 2rem));
+}
+
+.modalLarge {
+  width: min(560px, calc(100vw - 2rem));
+}
+
+/* Confirm button color variants */
+.confirmButtonDanger {
+  background: #dc3545;
+  color: #ffffff;
+  border-color: #c82333;
+}
+
+.confirmButtonPrimary {
+  background: #1f6feb;
+  color: #ffffff;
+  border-color: #1560d4;
+}
+
+.confirmButtonPrimary:not(:disabled):hover {
+  background: #1560d4;
+}
+
+.confirmButtonSuccess {
+  background: #198754;
+  color: #ffffff;
+  border-color: #157347;
+}
+
+.confirmButtonWarning {
+  background: #ffc107;
+  color: #3f2f00;
+  border-color: #e8b103;
+}
+
+/* Archive reason input */
+.reasonLabel {
+  display: block;
+  margin-bottom: 0.35rem;
+  color: #495057;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.reasonInput {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #cdd5dd;
+  border-radius: 8px;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.9rem;
+  font-family: inherit;
+  resize: vertical;
+}
+
+.reasonInput:focus {
+  outline: none;
+  border-color: #1f6feb;
+  box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.2);
+}
+
+/* Export description */
+.description {
+  margin: 0 0 0.9rem;
+  color: #4b5563;
+  font-size: 0.86rem;
+  line-height: 1.5;
+}
+
+/* Export email error */
+.emailError {
+  margin: 0.45rem 0 0;
+  color: #b91c1c;
+  font-size: 0.83rem;
+  line-height: 1.4;
+}

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

@@ -1,6 +1,5 @@
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
-import sharedStyles from './case-modal-shared.module.css';
-import styles from './delete-case-modal.module.css';
+import styles from './case-modal-shared.module.css';
 
 interface DeleteCaseModalProps {
   isOpen: boolean;
@@ -35,28 +34,28 @@ export const DeleteCaseModal = ({
 
   return (
     <div
-      className={sharedStyles.overlay}
+      className={styles.overlay}
       aria-label="Close delete case dialog"
       {...overlayProps}
     >
-      <div className={`${sharedStyles.modal} ${styles.modal}`} role="dialog" aria-modal="true" aria-label="Delete Case">
+      <div className={`${styles.modal} ${styles.modalLarge}`} role="dialog" aria-modal="true" aria-label="Delete Case">
         <button {...getCloseButtonProps({ ariaLabel: 'Close delete case dialog' })}>
           ×
         </button>
 
-        <h3 className={sharedStyles.title}>Delete Case</h3>
-        <p className={sharedStyles.subtitle}>Case: {currentCase}</p>
+        <h3 className={styles.title}>Delete Case</h3>
+        <p className={styles.subtitle}>Case: {currentCase}</p>
 
-        <div className={sharedStyles.warningPanel}>
+        <div className={styles.warningPanel}>
           <p>This action permanently deletes the case and all associated files.</p>
           <p>This operation cannot be undone.</p>
           <p>Any image assets that are already missing will be skipped automatically.</p>
         </div>
 
-        <div className={sharedStyles.actions}>
+        <div className={styles.actions}>
           <button
             type="button"
-            className={sharedStyles.cancelButton}
+            className={styles.cancelButton}
             onClick={requestClose}
             disabled={isCloseBlocked}
           >
@@ -64,7 +63,7 @@ export const DeleteCaseModal = ({
           </button>
           <button
             type="button"
-            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
+            className={`${styles.confirmButton} ${styles.confirmButtonDanger}`}
             onClick={() => {
               void onSubmit();
             }}

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

@@ -1,7 +1,6 @@
 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';
+import styles from './case-modal-shared.module.css';
 
 interface ExportCaseModalProps {
   isOpen: boolean;
@@ -69,12 +68,12 @@ export const ExportCaseModal = ({
 
   return (
     <div
-      className={sharedStyles.overlay}
+      className={styles.overlay}
       aria-label="Close export case dialog"
       {...overlayProps}
     >
       <div
-        className={`${sharedStyles.modal} ${styles.modal}`}
+        className={`${styles.modal} ${styles.modalWide}`}
         role="dialog"
         aria-modal="true"
         aria-label="Export Case"
@@ -82,8 +81,8 @@ export const ExportCaseModal = ({
         <button {...getCloseButtonProps({ ariaLabel: 'Close export case dialog' })}>
           ×
         </button>
-        <h3 className={sharedStyles.title}>Export Case</h3>
-        <p className={sharedStyles.subtitle}>Case: {caseNumber}</p>
+        <h3 className={styles.title}>Export Case</h3>
+        <p className={styles.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
@@ -94,7 +93,7 @@ export const ExportCaseModal = ({
           type="email"
           value={email}
           onChange={(event) => setEmail(event.target.value)}
-          className={sharedStyles.input}
+          className={styles.input}
           placeholder="Reviewer email address (optional)"
           disabled={isSubmitting}
           onKeyDown={(event) => {
@@ -108,10 +107,10 @@ export const ExportCaseModal = ({
             You cannot designate yourself as the reviewer. The recipient must be a different Striae user.
           </p>
         )}
-        <div className={sharedStyles.actions}>
+        <div className={styles.actions}>
           <button
             type="button"
-            className={sharedStyles.cancelButton}
+            className={styles.cancelButton}
             onClick={requestClose}
             disabled={isSubmitting}
           >
@@ -119,7 +118,7 @@ export const ExportCaseModal = ({
           </button>
           <button
             type="button"
-            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
+            className={`${styles.confirmButton} ${styles.confirmButtonPrimary}`}
             onClick={() => void handleSubmit()}
             disabled={isSubmitDisabled}
           >

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

@@ -1,7 +1,6 @@
 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';
+import styles from './case-modal-shared.module.css';
 
 interface ExportConfirmationsModalProps {
   isOpen: boolean;
@@ -52,12 +51,12 @@ export const ExportConfirmationsModal = ({
 
   return (
     <div
-      className={sharedStyles.overlay}
+      className={styles.overlay}
       aria-label="Close export confirmations dialog"
       {...overlayProps}
     >
       <div
-        className={`${sharedStyles.modal} ${styles.modal}`}
+        className={`${styles.modal} ${styles.modalCompact}`}
         role="dialog"
         aria-modal="true"
         aria-label="Export Confirmations"
@@ -65,10 +64,10 @@ export const ExportConfirmationsModal = ({
         <button {...getCloseButtonProps({ ariaLabel: 'Close export confirmations dialog' })}>
           ×
         </button>
-        <h3 className={sharedStyles.title}>Export Confirmations</h3>
-        <p className={sharedStyles.subtitle}>Case: {caseNumber}</p>
+        <h3 className={styles.title}>Export Confirmations</h3>
+        <p className={styles.subtitle}>Case: {caseNumber}</p>
         {unconfirmedCount > 0 && (
-          <div className={`${sharedStyles.warningPanel} ${styles.warningPanel}`}>
+          <div className={styles.warningPanel}>
             <p>
               <strong>
                 {unconfirmedCount} image{unconfirmedCount !== 1 ? 's' : ''}{' '}
@@ -83,10 +82,10 @@ export const ExportConfirmationsModal = ({
             ? 'No confirmed images found for this case.'
             : `${confirmationLabel} will be exported.`}
         </p>
-        <div className={sharedStyles.actions}>
+        <div className={styles.actions}>
           <button
             type="button"
-            className={sharedStyles.cancelButton}
+            className={styles.cancelButton}
             onClick={requestClose}
             disabled={isSubmitting}
           >
@@ -95,7 +94,7 @@ export const ExportConfirmationsModal = ({
           <button
             ref={confirmButtonRef}
             type="button"
-            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
+            className={`${styles.confirmButton} ${styles.confirmButtonPrimary}`}
             onClick={onConfirm}
             disabled={isSubmitting || confirmedCount === 0}
           >

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

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
-import styles from './open-case-modal.module.css';
+import styles from './case-modal-shared.module.css';
 
 interface OpenCaseModalProps {
   isOpen: boolean;
@@ -74,12 +74,12 @@ export const OpenCaseModal = ({
       aria-label="Close open case dialog"
       {...overlayProps}
     >
-      <div className={styles.modal} role="dialog" aria-modal="true" aria-label="Open Case">
+      <div className={`${styles.modal} ${styles.modalStandard}`} role="dialog" aria-modal="true" aria-label="Open Case">
         <button {...getCloseButtonProps({ ariaLabel: 'Close open case dialog' })}>
           ×
         </button>
         <h3 className={styles.title}>{title}</h3>
-        {helperText ? <p className={styles.helperText}>{helperText}</p> : null}
+        {helperText ? <p className={styles.subtitle}>{helperText}</p> : null}
         <input
           ref={inputRef}
           type="text"
@@ -105,7 +105,7 @@ export const OpenCaseModal = ({
           </button>
           <button
             type="button"
-            className={styles.confirmButton}
+            className={`${styles.confirmButton} ${styles.confirmButtonSuccess}`}
             onClick={() => {
               void handleSubmit();
             }}