@striae-org/striae 3.0.4

package/app/services/firebase-errors.ts

@@ -0,0 +1,106 @@
+import { FirebaseError } from 'firebase/app';
+
+export const ERROR_MESSAGES = {
+  // Auth Errors
+  INVALID_EMAIL: 'Invalid email address',
+  INVALID_PASSWORD: 'Invalid password',
+  INVALID_CREDENTIALS: 'Invalid credentials',
+  USER_NOT_FOUND: 'No account found with this email',
+  EMAIL_IN_USE: 'An account with this email already exists',
+  ACTION_RESTRICTED: 'Operation not allowed',
+  PASSWORDS_MISMATCH: 'Passwords do not match',
+  WEAK_PASSWORD: 'Password does not meet strength requirements',
+  REQUIRES_RECENT_LOGIN: 'Please sign in again to complete this action',
+  USER_DISABLED: 'This account has been disabled',
+  
+  // Reset/Verify Errors
+  RESET_EMAIL_SENT: 'Password reset email sent! Check your inbox',
+  INVALID_ACTION_CODE: 'This email action link is invalid or has already been used.',
+  EXPIRED_ACTION_CODE: 'This email action link has expired. Please request a new one.',
+  INVALID_CONTINUE_URL: 'This email action link has an invalid redirect URL.',
+  
+  // MFA Errors
+  MFA_REQUIRED: 'Multi-factor authentication required',
+  MFA_INVALID_CODE: 'Invalid verification code. Please check your code and try again.',
+  MFA_CODE_EXPIRED: 'Verification code has expired. Please request a new code.',
+  MFA_TOO_MANY_REQUESTS: 'Too many requests. Please try again later',
+  MFA_INVALID_PHONE: 'Please enter a valid phone number',
+  MFA_NO_VERIFICATION_ID: 'No verification ID found. Please request a new code.',
+  MFA_RECAPTCHA_EXPIRED: 'reCAPTCHA expired. Please send another code.',
+  MFA_RECAPTCHA_ERROR: 'reCAPTCHA needs to be reset. Please send another code.',
+  MFA_CODE_REQUIRED: 'Please enter the verification code',
+  
+  // General
+  GENERAL_ERROR: 'Something went wrong. Please contact support.',
+  NO_USER: 'No user found',
+  PROFILE_UPDATED: 'Profile updated successfully'
+};
+
+interface AuthErrorData {
+  code: string;
+  message: string;
+}
+
+export const handleAuthError = (err: unknown): { message: string; data?: AuthErrorData } => {
+  if (err instanceof FirebaseError) {
+    const errorData: AuthErrorData = {
+      code: err.code,
+      message: err.message
+    };
+    
+    switch (err.code) {
+      // Standard Auth Errors
+      case 'auth/invalid-credential':
+        return { message: ERROR_MESSAGES.INVALID_CREDENTIALS, data: errorData };
+      case 'auth/wrong-password':
+        return { message: ERROR_MESSAGES.INVALID_PASSWORD, data: errorData };
+      case 'auth/user-not-found':
+        return { message: ERROR_MESSAGES.USER_NOT_FOUND, data: errorData };
+      case 'auth/email-already-in-use':
+        return { message: ERROR_MESSAGES.EMAIL_IN_USE, data: errorData };
+      case 'auth/invalid-email':
+        return { message: ERROR_MESSAGES.INVALID_EMAIL, data: errorData };
+      case 'auth/weak-password':
+        return { message: ERROR_MESSAGES.WEAK_PASSWORD, data: errorData };
+      case 'auth/requires-recent-login':
+        return { message: ERROR_MESSAGES.REQUIRES_RECENT_LOGIN, data: errorData };
+      case 'auth/user-disabled':
+        return { message: ERROR_MESSAGES.USER_DISABLED, data: errorData };
+      case 'auth/invalid-action-code':
+        return { message: ERROR_MESSAGES.INVALID_ACTION_CODE, data: errorData };
+      case 'auth/expired-action-code':
+        return { message: ERROR_MESSAGES.EXPIRED_ACTION_CODE, data: errorData };
+      case 'auth/invalid-continue-uri':
+      case 'auth/missing-continue-uri':
+      case 'auth/unauthorized-continue-uri':
+        return { message: ERROR_MESSAGES.INVALID_CONTINUE_URL, data: errorData };
+      
+      // MFA Errors
+      case 'auth/multi-factor-auth-required':
+        return { message: ERROR_MESSAGES.MFA_REQUIRED, data: errorData };
+      case 'auth/invalid-verification-code':
+        return { message: ERROR_MESSAGES.MFA_INVALID_CODE, data: errorData };
+      case 'auth/code-expired':
+        return { message: ERROR_MESSAGES.MFA_CODE_EXPIRED, data: errorData };
+      case 'auth/too-many-requests':
+        return { message: ERROR_MESSAGES.MFA_TOO_MANY_REQUESTS, data: errorData };
+      
+      // Operation Errors
+      case 'auth/operation-not-allowed':
+      case 'auth/admin-restricted-operation':
+        return { message: ERROR_MESSAGES.ACTION_RESTRICTED, data: errorData };
+      
+      default:
+        console.error('Firebase Auth Error:', errorData);
+        return { message: ERROR_MESSAGES.GENERAL_ERROR, data: errorData };
+    }
+  }
+  
+  console.error('Unknown Error:', err);
+  return { message: ERROR_MESSAGES.GENERAL_ERROR };
+};
+
+// Helper function to get validation error messages
+export const getValidationError = (type: keyof typeof ERROR_MESSAGES): string => {
+  return ERROR_MESSAGES[type];
+};

package/app/services/firebase.ts

@@ -0,0 +1,15 @@
+import { initializeApp } from 'firebase/app';
+import { 
+    getAuth,
+    //connectAuthEmulator,    
+ } from 'firebase/auth';
+import firebaseConfig from '~/config/firebase';
+import { getAppVersion } from '~/utils/version';
+
+export const app = initializeApp(firebaseConfig, "Striae");
+export const auth = getAuth(app);
+
+console.log(`Welcome to ${app.name} v${getAppVersion()}`);
+
+//Connect to the Firebase Auth emulator if running locally
+//connectAuthEmulator(auth, 'http://127.0.0.1:9099');

package/app/styles/legal-pages.module.css

@@ -0,0 +1,113 @@
+.content {
+  background: color-mix(in lab, var(--backgroundLight) 95%, transparent);
+  border-radius: var(--spaceXS);
+  padding: var(--space2XL);
+  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  line-height: var(--lineHeightBody);
+}
+
+.content h1 {
+  font-size: var(--fontSizeH4);
+  margin-bottom: var(--spaceM);
+  color: var(--textTitle);
+}
+
+.content p {
+  margin-bottom: var(--spaceM);
+  color: var(--textBody);
+}
+
+.content h2 {
+  font-size: var(--fontSizeH5);
+}
+
+.section {
+  margin-bottom: var(--space2XL);
+}
+
+.section h4 {
+  color: var(--textTitle);
+  margin-bottom: var(--spaceM);
+}
+
+.section h2 {
+  font-size: var(--fontSizeH5);
+  margin-top: var(--spaceXL);
+}
+
+.section h2:first-child {
+  margin-top: 0;
+}
+
+.section h3 {
+  font-size: var(--fontSizeBodyXL);
+  margin-top: var(--spaceXL);
+}
+
+.section h4 {
+  font-size: var(--fontSizeBodyL);
+}
+
+.section p,
+.section ul {
+  margin-bottom: var(--spaceM);
+  color: var(--textBody);
+}
+
+.section ul {
+  padding-left: var(--spaceXL);
+  list-style-type: disc;
+}
+
+.section ol {
+  padding-left: var(--spaceXL);
+  list-style-type: decimal;
+  margin-bottom: var(--spaceM);
+  color: var(--textBody);
+}
+
+.section li {
+  margin-bottom: var(--spaceS);
+  color: var(--textBody);
+}
+
+.lastUpdated {
+  color: var(--textLight);
+  font-size: var(--fontSizeBodyXS);
+  margin-bottom: var(--space2XL);
+}
+
+.section p small {
+  font-size: var(--fontSizeBodyS);
+  color: var(--textLight);
+  opacity: 0.9;
+}
+
+.section a {
+  color: var(--primary);
+  text-decoration: underline;
+}
+
+.section a:hover {
+  color: var(--accent);
+}
+
+@media (max-width: 1296px) {
+  .logo {
+    display: none;
+  }
+
+  .returnLink {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .container {
+    padding: var(--spaceM);
+  }
+
+  .content {
+    padding: var(--spaceXL);
+  }
+}

package/app/styles/root.module.css

@@ -0,0 +1,146 @@
+@layer layout {
+
+  .container {
+    width: 100%;
+    position: relative;
+    transition: opacity 0.8s var(--bezierFastoutSlowin);    
+
+    &[data-loading='true'] {
+      opacity: 0;
+    }
+  }
+
+  .skip {
+    isolation: isolate;
+    color: var(--background);
+    z-index: var(--zIndex4);
+
+    &:focus {
+      padding: var(--spaceS) var(--spaceM);
+      position: fixed;
+      top: var(--spaceM);
+      left: var(--spaceM);
+      text-decoration: none;
+      font-weight: var(--fontWeightMedium);
+      line-height: 1;
+      box-shadow: 0 0 0 4px var(--background), 0 0 0 8px var(--text);
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: var(--primary);
+      clip-path: polygon(
+        0 0,
+        100% 0,
+        100% calc(100% - 8px),
+        calc(100% - 8px) 100%,
+        0 100%
+      );
+      z-index: -1;
+    }
+  }
+
+  .errorContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    padding: var(--space2XL);
+    text-align: center;
+    background: var(--background);
+  }
+
+  .errorTitle {
+    font-size: var(--fontSizeH0);
+    font-weight: var(--fontWeightBold);
+    color: var(--textTitle);
+    margin-bottom: var(--spaceXL);
+    line-height: 1;
+  }
+
+  .errorMessage {
+    font-size: var(--fontSizeH4);
+    color: var(--textBody);
+    margin: var(--spaceL) 0 var(--spaceXL);
+    max-width: 600px;
+  }
+
+  .errorLink {
+    color: var(--primary);
+    text-decoration: none;
+    font-size: var(--fontSizeBodyL);
+    font-weight: var(--fontWeightMedium);
+    padding: var(--spaceM) var(--spaceL);
+    border-radius: var(--radiusS);
+    transition: all var(--durationS) var(--bezierFastoutSlowin);
+  }
+
+  .errorLink:hover {
+    background: color-mix(in lab, var(--primary) 10%, transparent);
+    color: color-mix(in lab, var(--primary) 85%, var(--black));
+  }
+
+  .returnToTop {
+    position: fixed;
+    right: var(--space2XL);
+    bottom: var(--spaceM);
+    width: 50px;
+    height: 50px;
+    border: none;
+    background: transparent;
+    color: color-mix(in lab, var(--white) 60%, var(--textLight));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    z-index: var(--zIndex4);
+    cursor: pointer;
+    transition: all var(--durationS) var(--bezierFastoutSlowin);
+  }
+
+  .returnToTop:hover {
+    color: var(--primary);
+  }
+
+  .returnToTopIcon {
+    transform: rotate(-90deg);
+    color: color-mix(in lab, var(--white) 60%, var(--textLight));
+    filter: drop-shadow(0 0 1px color-mix(in lab, var(--black) 45%, transparent))
+      drop-shadow(0 0 1px color-mix(in lab, var(--white) 45%, transparent));
+    transition: color var(--durationS) var(--bezierFastoutSlowin);
+  }
+
+  .returnToTop:hover .returnToTopIcon {
+    color: var(--primary);
+  }
+
+  /* Global enhanced button hover effects */
+  :global(button:not([data-no-enhance]):hover:not(:disabled)) {
+    transform: translateY(-1px);
+    transition: all var(--durationS) var(--bezierFastoutSlowin);
+  }
+
+  :global(button[class*="Button"]:hover:not(:disabled)) {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px color-mix(in lab, currentColor 20%, transparent);
+    transition: all var(--durationS) var(--bezierFastoutSlowin);
+  }
+
+  /* Ensure disabled buttons don't get transforms */
+  :global(button:disabled) {
+    transform: none !important;
+  }
+
+  @media (max-width: 768px) {
+    .errorTitle {
+      font-size: var(--fontSizeH1);
+    }
+
+    .errorMessage {
+      font-size: var(--fontSizeBodyL);
+    }
+  }
+
+}

package/app/tailwind.css

@@ -0,0 +1,225 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    --mobileNavOffset: calc(var(--spaceOuter) * 2 + var(--space2XL));
+  }
+
+  :where(html, body) {
+    min-height: 100%;
+    width: 100%;
+  }
+
+  :where(*, *::before, *::after) {
+    box-sizing: border-box;
+    margin: 0;
+    min-width: 0;
+  }
+
+  :where(input, textarea, select, button) {
+    font: inherit;
+    color: inherit;
+    border: 0;
+    padding: 0;
+    background-color: transparent;
+    border-radius: 0;
+    appearance: auto;
+    -moz-appearance: auto;
+    -webkit-appearance: auto;
+    color: var(--textBody, rgba(0, 0, 0, 0.8));
+  }
+
+  :where(button, a) {
+    touch-action: manipulation;
+  }
+
+  :where(svg, img, picture, video, iframe, canvas) {
+    display: block;
+  }
+
+  ul {
+    padding: 0;
+  }
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    width: 100vw;
+    min-height: screen;
+    overflow-x: hidden;
+    font-family: var(--fontStack);
+    font-weight: var(--fontWeightRegular);
+    color: var(--textBody);
+    background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.95)),
+      url("/assets/striae.jpg") center/cover no-repeat fixed;
+    background-blend-mode: normal;
+    transition: background var(--durationM) ease, opacity var(--durationM) ease;
+    opacity: 1;
+  }
+
+  a {
+    color: var(--primary);
+    text-decoration: none;
+    transition: color var(--durationS) ease;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+      text-decoration-style: dotted;
+      text-underline-offset: 3px;
+    }
+  }
+
+  h2 {
+    color: var(--textTitle);
+    font-size: var(--fontSizeH4);
+    font-weight: var(--fontWeightBold);
+    line-height: var(--lineHeightHeading);
+    margin: var(--spaceM) 0 var(--spaceM);
+  }
+
+  h3 {
+    color: var(--textTitle);
+    font-size: var(--fontSizeH5);
+    font-weight: var(--fontWeightMedium);
+    line-height: var(--lineHeightHeading);
+    margin: var(--spaceL) 0 var(--spaceM);
+  }
+
+  code,
+  pre {
+    font-family: var(--monoFontStack);
+  }
+
+  ::selection {
+    background: var(--primary);
+    color: var(--white);
+  }
+
+  :focus {
+    outline: 4px solid var(--text);
+    outline-offset: 4px;
+
+    &:not(:focus-visible) {
+      outline: none;
+    }
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes reveal {
+  0% {
+    transform: scale3d(0, 1, 1);
+    transform-origin: left;
+  }
+  50% {
+    transform: scale3d(1, 1, 1);
+    transform-origin: left;
+  }
+  51% {
+    transform: scale3d(1, 1, 1);
+    transform-origin: right;
+  }
+  100% {
+    transform: scale3d(0, 1, 1);
+    transform-origin: right;
+  }
+}
+
+@layer components {
+  .route-legal-container {
+    max-width: var(--maxWidthL);
+    margin: 0 auto;
+    padding: var(--space2XL);
+  }
+
+  .route-centered-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: var(--spaceL);
+    z-index: var(--zIndex0);
+  }
+
+  .route-brand-logo {
+    position: fixed;
+    top: var(--spaceL);
+    left: var(--spaceL);
+    width: 150px;
+    height: 150px;
+    background-image: url("/logo-dark.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    z-index: var(--zIndex2);
+    transition: transform var(--durationM) var(--bezierFastoutSlowin);
+  }
+
+  .route-brand-logo-link {
+    position: absolute;
+    top: var(--spaceL);
+    left: var(--spaceL);
+    text-decoration: none;
+  }
+
+  .route-brand-return-link {
+    display: none;
+    width: 150px;
+    height: 150px;
+    background-image: url("/logo-dark.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    margin-bottom: var(--spaceM);
+    transition: transform var(--durationM) var(--bezierFastoutSlowin);
+  }
+
+  .route-brand-logo:hover,
+  .route-brand-return-link:hover {
+    transform: scale(1.05);
+  }
+
+  .route-form-wrapper {
+    background: color-mix(in lab, var(--backgroundLight) 95%, transparent);
+    padding: var(--space2XL);
+    border-radius: var(--spaceXS);
+    box-shadow: 0 var(--spaceXS) var(--spaceM)
+      color-mix(in lab, var(--black) 10%, transparent);
+    width: 100%;
+    margin: var(--spaceL) auto;
+  }
+
+  .route-form-title {
+    text-align: center;
+    color: var(--textTitle);
+    margin-bottom: var(--spaceXL);
+    font-size: var(--fontSizeH4);
+  }
+
+  .route-form-subtitle {
+    text-align: center;
+    color: var(--textBody);
+    margin-bottom: var(--space2XL);
+    font-size: var(--fontSizeBodyM);
+    line-height: var(--lineHeightBody);
+  }
+}

package/app/types/annotations.ts

@@ -0,0 +1,45 @@
+// Annotation-related types and interfaces
+
+export interface BoxAnnotation {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color: string;
+  label?: string;
+  timestamp: string;
+}
+
+export interface ConfirmationData {
+  fullName: string;           // Confirming examiner's full name
+  badgeId: string;            // Badge/ID number of confirming examiner  
+  timestamp: string;          // Human-readable confirmation timestamp
+  confirmationId: string;     // Unique ID generated at confirmation time
+  confirmedBy: string;        // User UID of the confirming examiner
+  confirmedByEmail: string;   // Email of the confirming examiner
+  confirmedByCompany: string; // Company/Lab of the confirming examiner
+  confirmedAt: string;        // ISO timestamp of confirmation
+}
+
+export interface AnnotationData {
+  leftCase: string;
+  rightCase: string;
+  leftItem: string;
+  rightItem: string;
+  caseFontColor?: string;
+  classType?: 'Bullet' | 'Cartridge Case' | 'Other';
+  customClass?: string;
+  classNote?: string;
+  indexType?: 'number' | 'color';
+  indexNumber?: string;
+  indexColor?: string;
+  supportLevel?: 'ID' | 'Exclusion' | 'Inconclusive';
+  hasSubclass?: boolean;
+  includeConfirmation: boolean;
+  confirmationData?: ConfirmationData;
+  additionalNotes?: string;
+  boxAnnotations?: BoxAnnotation[];
+  updatedAt: string;
+  earliestAnnotationTimestamp?: string; // ISO timestamp of first annotation created (notes or box)
+}