@striae-org/striae 3.0.4

package/app/components/user/delete-account.tsx

@@ -0,0 +1,471 @@
+import { useState, useEffect } from 'react';
+import { signOut } from 'firebase/auth';
+import { auth } from '~/services/firebase';
+import paths from '~/config/config.json';
+import { getUserApiKey } from '~/utils/auth';
+import { auditService } from '~/services/audit.service';
+import styles from './delete-account.module.css';
+
+interface DeletionProgress {
+  totalCases: number;
+  completedCases: number;
+  currentCaseNumber: string;
+  percent: number;
+}
+
+const initialDeletionProgress: DeletionProgress = {
+  totalCases: 0,
+  completedCases: 0,
+  currentCaseNumber: '',
+  percent: 0
+};
+
+interface DeleteAccountProps {
+  isOpen: boolean;
+  onClose: () => void;
+  user: {
+    uid: string;
+    displayName: string | null;
+    email: string | null;
+  };
+  company: string;
+}
+
+export const DeleteAccount = ({ isOpen, onClose, user, company }: DeleteAccountProps) => {
+  const [uidConfirmation, setUidConfirmation] = useState('');
+  const [emailConfirmation, setEmailConfirmation] = useState('');
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [deletionProgress, setDeletionProgress] = useState<DeletionProgress>(initialDeletionProgress);
+
+  // Extract first and last name from display name
+  const [firstName, lastName] = (user.displayName || '').split(' ');
+  const fullName = `${firstName || ''} ${lastName || ''}`.trim();
+
+  // Check if confirmations match user data
+  const isConfirmationValid = uidConfirmation === user.uid && emailConfirmation === user.email;
+
+  const scheduleLogout = () => {
+    setTimeout(async () => {
+      try {
+        await signOut(auth);
+        onClose();
+      } catch (logoutError) {
+        console.error('Error during logout:', logoutError);
+        onClose();
+      }
+    }, 3000);
+  };
+
+  const updateProgress = (totalCases: number, completedCases: number, currentCaseNumber = '', forceComplete = false) => {
+    const safeTotal = totalCases > 0 ? totalCases : 0;
+    const safeCompleted = completedCases > safeTotal ? safeTotal : completedCases;
+    const percent = safeTotal > 0
+      ? Math.round((safeCompleted / safeTotal) * 100)
+      : (forceComplete ? 100 : 0);
+
+    setDeletionProgress({
+      totalCases: safeTotal,
+      completedCases: safeCompleted,
+      currentCaseNumber,
+      percent
+    });
+  };
+
+  const handleProgressStream = async (response: Response) => {
+    if (!response.body) {
+      throw new Error('No progress stream available from account deletion service.');
+    }
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    let streamError = '';
+    let streamCompleted = false;
+    let latestTotalCases = 0;
+    let latestCompletedCases = 0;
+
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+
+      let eventBoundary = buffer.indexOf('\n\n');
+      while (eventBoundary !== -1) {
+        const rawEvent = buffer.slice(0, eventBoundary);
+        buffer = buffer.slice(eventBoundary + 2);
+
+        const lines = rawEvent.split('\n');
+        const eventTypeLine = lines.find((line) => line.startsWith('event:'));
+        const dataLine = lines.find((line) => line.startsWith('data:'));
+
+        if (eventTypeLine && dataLine) {
+          const eventType = eventTypeLine.replace('event:', '').trim();
+
+          try {
+            const data = JSON.parse(dataLine.replace('data:', '').trim()) as {
+              totalCases?: number;
+              completedCases?: number;
+              currentCaseNumber?: string;
+              success?: boolean;
+              message?: string;
+            };
+
+            if (eventType === 'start') {
+              latestTotalCases = data.totalCases ?? 0;
+              latestCompletedCases = data.completedCases ?? 0;
+              updateProgress(latestTotalCases, latestCompletedCases, '');
+            }
+
+            if (eventType === 'case-start') {
+              latestTotalCases = data.totalCases ?? latestTotalCases;
+              latestCompletedCases = data.completedCases ?? latestCompletedCases;
+              updateProgress(
+                latestTotalCases,
+                latestCompletedCases,
+                data.currentCaseNumber ?? ''
+              );
+            }
+
+            if (eventType === 'case-complete') {
+              latestTotalCases = data.totalCases ?? latestTotalCases;
+              latestCompletedCases = data.completedCases ?? latestCompletedCases;
+              updateProgress(
+                latestTotalCases,
+                latestCompletedCases,
+                data.currentCaseNumber ?? ''
+              );
+            }
+
+            if (eventType === 'complete') {
+              latestTotalCases = data.totalCases ?? latestTotalCases;
+              latestCompletedCases = data.completedCases ?? latestCompletedCases;
+              streamCompleted = data.success === true;
+              updateProgress(latestTotalCases, latestCompletedCases, '', streamCompleted && latestTotalCases === 0);
+              if (!streamCompleted) {
+                streamError = data.message || 'Account deletion failed.';
+              }
+            }
+
+            if (eventType === 'error') {
+              streamError = data.message || 'Account deletion failed.';
+            }
+          } catch {
+            streamError = 'Failed to parse account deletion progress.';
+          }
+        }
+
+        eventBoundary = buffer.indexOf('\n\n');
+      }
+    }
+
+    if (streamError) {
+      throw new Error(streamError);
+    }
+
+    if (!streamCompleted) {
+      throw new Error('Account deletion did not complete successfully.');
+    }
+  };
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      // Reset form when modal opens
+      setUidConfirmation('');
+      setEmailConfirmation('');
+      setError('');
+      setSuccess(false);
+      setDeletionProgress(initialDeletionProgress);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen, onClose]);
+
+  const handleDeleteAccount = async () => {
+    if (!isConfirmationValid) return;
+    
+    // Additional confirmation dialog similar to case-sidebar patterns
+    const confirmed = window.confirm(
+      `Are you sure you want to permanently delete your Striae account? This action cannot be undone and will delete all your data, cases, and files. Your email address will be permanently disabled.`
+    );
+    
+    if (!confirmed) return;
+    
+    setIsDeleting(true);
+    setError('');
+    updateProgress(0, 0, '');
+    
+    try {
+      // Log account deletion attempt
+      await auditService.logAccountDeletionSimple(
+        user.uid,
+        user.email || '',
+        'pending',
+        'user-requested',
+        'uid-email',
+        undefined, // casesCount - to be filled after deletion
+        undefined, // filesCount - to be filled after deletion
+        undefined, // dataRetentionPeriod
+        false // emailNotificationSent - deletion emails disabled
+      );
+
+      // Get API key for user-worker authentication
+      const apiKey = await getUserApiKey();
+      
+      // Delete the user account via user-worker
+      const deleteResponse = await fetch(`${paths.user_worker_url}/${user.uid}?stream=true`, {
+        method: 'DELETE',
+        headers: {
+          'X-Custom-Auth-Key': apiKey,
+          'Accept': 'text/event-stream'
+        }
+      });
+
+      if (!deleteResponse.ok) {
+        const errorData = await deleteResponse.json().catch(() => ({})) as { message?: string };
+        throw new Error(errorData.message || 'Failed to delete account');
+      }
+
+      const contentType = deleteResponse.headers.get('content-type') || '';
+
+      if (contentType.includes('text/event-stream')) {
+        await handleProgressStream(deleteResponse);
+
+        // Log successful account deletion
+        await auditService.logAccountDeletionSimple(
+          user.uid,
+          user.email || '',
+          'success',
+          'user-requested',
+          'uid-email',
+          undefined, // casesCount - not available from response
+          undefined, // filesCount - not available from response
+          undefined, // dataRetentionPeriod
+          false // emailNotificationSent - deletion emails disabled
+        );
+
+        setSuccess(true);
+        scheduleLogout();
+      } else {
+        const result = await deleteResponse.json() as { success: boolean; message?: string };
+        if (result.success) {
+          updateProgress(1, 1, '');
+
+          await auditService.logAccountDeletionSimple(
+            user.uid,
+            user.email || '',
+            'success',
+            'user-requested',
+            'uid-email',
+            undefined,
+            undefined,
+            undefined,
+            false
+          );
+
+          setSuccess(true);
+          scheduleLogout();
+        } else {
+          throw new Error(result.message || 'Account deletion failed');
+        }
+      }
+      
+    } catch (err) {
+      // Log failed account deletion
+      await auditService.logAccountDeletionSimple(
+        user.uid,
+        user.email || '',
+        'failure',
+        'user-requested',
+        'uid-email',
+        undefined, // casesCount
+        undefined, // filesCount
+        undefined, // dataRetentionPeriod
+        false, // emailNotificationSent
+        undefined, // sessionId
+        [err instanceof Error ? err.message : 'Unknown error during account deletion']
+      );
+
+      console.error('Delete account error:', err);
+      setError(err instanceof Error ? err.message : 'Failed to delete account. Please try again or contact support.');
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const showProgress = isDeleting || success || (Boolean(error) && deletionProgress.totalCases > 0);
+  const progressStatus = success
+    ? 'All cases have been deleted.'
+    : error
+      ? (deletionProgress.currentCaseNumber
+          ? `Deletion stopped while processing case ${deletionProgress.currentCaseNumber}.`
+          : 'Deletion stopped before completion.')
+      : (deletionProgress.currentCaseNumber
+          ? `Deleting case ${deletionProgress.currentCaseNumber}...`
+          : 'Preparing account deletion...');
+
+  return (
+    <div 
+      className={styles.modalOverlay} 
+      onClick={onClose}
+      role="presentation"
+    >
+      <div 
+        className={styles.modal}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <header className={styles.modalHeader}>
+          <h1 id="modal-title" className={styles.dangerTitle}>Delete Striae Account</h1>
+          <button 
+            onClick={onClose} 
+            className={styles.closeButton}
+            aria-label="Close modal"
+          >
+            &times;
+          </button>
+        </header>
+
+        <div className={styles.modalContent}>
+          {/* User Information */}
+          <div className={styles.userInfo}>
+            <div className={styles.infoRow}>
+              <span className={styles.label}>UID:</span>
+              <span className={styles.value}>{user.uid}</span>
+            </div>
+            <div className={styles.infoRow}>
+              <span className={styles.label}>Name:</span>
+              <span className={styles.value}>{fullName || 'Not provided'}</span>
+            </div>
+            <div className={styles.infoRow}>
+              <span className={styles.label}>Email:</span>
+              <span className={styles.value}>{user.email}</span>
+            </div>
+            <div className={styles.infoRow}>
+              <span className={styles.label}>Lab/Company:</span>
+              <span className={styles.value}>{company || 'Not provided'}</span>
+            </div>
+          </div>
+
+          {/* Divider */}
+          <div className={styles.divider}></div>
+
+          {/* Warning Message */}
+          <div className={styles.warningSection}>
+            <p className={styles.warningText}>
+              {isDeleting 
+                ? 'Deleting your account now. If you have a lot of data, this may take a while...'
+                : <>
+                    Deleting your account is irreversible! All account information and data will be deleted from Striae. The email address associated with this account will be permanently disabled. <strong><em>Please be certain you want to take this action!</em></strong>
+                  </>
+              }
+            </p>
+          </div>
+
+          {/* Divider */}
+          <div className={styles.divider}></div>
+
+          {showProgress && (
+            <div className={styles.progressSection} aria-live="polite">
+              <div className={styles.progressHeader}>
+                <p className={styles.progressTitle}>Deletion Progress</p>
+                <p className={styles.progressMeta}>
+                  {deletionProgress.completedCases}/{deletionProgress.totalCases} cases
+                </p>
+              </div>
+              <div
+                className={styles.progressTrack}
+                role="progressbar"
+                aria-label="Account deletion progress"
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-valuenow={deletionProgress.percent}
+              >
+                <div
+                  className={styles.progressFill}
+                  style={{ width: `${deletionProgress.percent}%` }}
+                />
+              </div>
+              <p className={styles.progressStatus}>{progressStatus}</p>
+            </div>
+          )}
+
+          {/* Success/Error Messages */}
+          {error && (
+            <div className={styles.errorMessage}>
+              <p>{error}</p>
+            </div>
+          )}
+          
+          {success && (
+            <div className={styles.successMessage}>
+              <p>✓ Account deletion successful!</p>
+              <p>You will be logged out automatically in 3 seconds...</p>
+            </div>
+          )}
+
+          {/* Confirmation Form */}
+          {!success && (
+            <form className={styles.confirmationForm}>
+            <div className={styles.formGroup}>
+              <label htmlFor="uid-confirmation" className={styles.formLabel}>
+                Enter UID to confirm account deletion:
+              </label>
+              <input
+                id="uid-confirmation"
+                type="text"
+                value={uidConfirmation}
+                onChange={(e) => setUidConfirmation(e.target.value)}
+                className={styles.confirmationInput}
+                placeholder="Enter your User ID"
+                autoComplete="off"
+              />
+            </div>
+
+            <div className={styles.formGroup}>
+              <label htmlFor="email-confirmation" className={styles.formLabel}>
+                Enter your email address to confirm account deletion:
+              </label>
+              <input
+                id="email-confirmation"
+                type="email"
+                value={emailConfirmation}
+                onChange={(e) => setEmailConfirmation(e.target.value)}
+                onPaste={(e) => e.preventDefault()}
+                className={styles.confirmationInput}
+                placeholder="Enter your email address"
+                autoComplete="off"
+              />
+            </div>
+
+            <button
+              type="button"
+              onClick={handleDeleteAccount}
+              className={styles.deleteButton}
+              disabled={!isConfirmationValid || isDeleting}
+            >
+              {isDeleting ? 'Deleting Account...' : 'Delete Striae Account'}
+            </button>
+          </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/app/components/user/inactivity-warning.module.css

@@ -0,0 +1,145 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  backdrop-filter: blur(2px);
+}
+
+.modal {
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 2rem;
+  max-width: 400px;
+  width: 90%;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+  border: 1px solid #e0e0e0;
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.header h3 {
+  color: #1a1a1a;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.content {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.content p {
+  color: #4a4a4a;
+  margin: 0 0 1rem 0;
+  line-height: 1.5;
+  font-size: 1rem;
+}
+
+.countdown {
+  font-size: 2rem;
+  font-weight: bold;
+  color: #dc3545;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  background: rgba(220, 53, 69, 0.1);
+  padding: 1rem;
+  border-radius: 8px;
+  margin: 1rem 0;
+  border: 2px solid rgba(220, 53, 69, 0.2);
+}
+
+.actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.extendButton,
+.signOutButton {
+  padding: 0.75rem 1.5rem;
+  border-radius: 6px;
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.9rem;
+}
+
+.extendButton {
+  background: #007bff;
+  color: white;
+}
+
+.extendButton:hover {
+  background: #0056b3;
+}
+
+.signOutButton {
+  background: transparent;
+  color: #6c757d;
+  border: 1px solid #dee2e6;
+}
+
+.signOutButton:hover {
+  background: #f8f9fa;
+  color: #495057;
+  border-color: #adb5bd;
+}
+
+.extendButton:focus,
+.signOutButton:focus {
+  outline: 2px solid #007bff;
+  outline-offset: 2px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .overlay {
+    background-color: rgba(0, 0, 0, 0.9);
+  }
+  
+  .modal {
+    background: #2d2d2d;
+    border-color: #404040;
+  }
+  
+  .header h3 {
+    color: #ffffff;
+  }
+  
+  .content p {
+    color: #cccccc;
+  }
+  
+  .signOutButton {
+    color: #adb5bd;
+    border-color: #6c757d;
+  }
+  
+  .signOutButton:hover {
+    background: #404040;
+    color: #ffffff;
+    border-color: #adb5bd;
+  }
+}

package/app/components/user/inactivity-warning.tsx

@@ -0,0 +1,84 @@
+import { useState, useEffect } from 'react';
+import styles from './inactivity-warning.module.css';
+
+interface InactivityWarningProps {
+  isOpen: boolean;
+  remainingSeconds: number;
+  onExtendSession: () => void;
+  onSignOut: () => void;
+}
+
+export const InactivityWarning = ({
+  isOpen,
+  remainingSeconds,
+  onExtendSession,
+  onSignOut
+}: InactivityWarningProps) => {
+  const [countdown, setCountdown] = useState(remainingSeconds);
+
+  useEffect(() => {
+    setCountdown(remainingSeconds);
+  }, [remainingSeconds]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setCountdown(0);
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setCountdown(prev => {
+        if (prev <= 1) {
+          clearInterval(interval);
+          onSignOut();
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [isOpen, onSignOut]);
+
+  if (!isOpen) return null;
+
+  const minutes = Math.floor(countdown / 60);
+  const seconds = countdown % 60;
+
+  return (
+    <div className={styles.overlay}>
+      <div className={styles.modal}>
+        <div className={styles.header}>
+          <h3>Session Timeout Warning</h3>
+        </div>
+        
+        <div className={styles.content}>
+          <p>
+            Your session will expire due to inactivity in:
+          </p>
+          <div className={styles.countdown}>
+            {minutes}:{seconds.toString().padStart(2, '0')}
+          </div>
+          <p>
+            Would you like to extend your session?
+          </p>
+        </div>
+        
+        <div className={styles.actions}>
+          <button
+            onClick={onExtendSession}
+            className={styles.extendButton}
+          >
+            Extend Session
+          </button>
+          <button
+            onClick={onSignOut}
+            className={styles.signOutButton}
+          >
+            Sign Out Now
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};