@striae-org/striae 4.0.1 → 4.0.3

package/app/routes/auth/login.module.example.css

@@ -0,0 +1,523 @@
+.container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  padding: var(--spaceL);
+  z-index: var(--zIndex0);
+}
+
+.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);
+}
+
+.logo:hover {
+  transform: scale(1.05);
+}
+
+.formWrapper {
+  background-color: 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%;
+  max-width: var(--maxWidthS);
+}
+
+.title {
+  text-align: center;
+  color: var(--textTitle);
+  margin-bottom: var(--spaceXL);
+  font-size: var(--fontSizeH4);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
+}
+
+.input {
+  padding: var(--spaceM);
+  border: 1.5px solid color-mix(in lab, var(--text) 20%, transparent);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyM);
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--primary) 25%, transparent);
+}
+
+.input:disabled {
+  background-color: color-mix(in lab, var(--background) 95%, transparent);
+  cursor: not-allowed;
+}
+
+.passwordField {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.passwordField .input {
+  padding-right: var(--space2XL);
+  width: 100%;
+}
+
+.passwordToggle {
+  position: absolute;
+  right: var(--spaceM);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  padding: var(--spaceXS);
+  border-radius: var(--spaceXS);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color var(--durationS) var(--bezierFastoutSlowin);
+  z-index: 1;
+  height: auto;
+  min-width: 24px;
+}
+
+.passwordToggle:hover {
+  background-color: color-mix(in lab, var(--text) 10%, transparent);
+}
+
+.passwordToggle:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.button {
+  padding: var(--spaceM) var(--spaceL);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyS);
+  cursor: pointer;
+  background-color: var(--primary);
+  color: var(--white);
+  border: none;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.button:hover:not(:disabled) {
+  background-color: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
+.button:disabled {
+  background-color: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+}
+
+.error {
+  color: color-mix(in lab, var(--error) 90%, var(--black));
+  text-align: left;
+  margin: var(--spaceXS) 0 var(--spaceS) 0;
+  font-size: var(--fontSizeBodyXS);
+  padding: var(--spaceS) var(--spaceM);
+  background: linear-gradient(
+    135deg,
+    color-mix(in lab, var(--error) 12%, transparent),
+    color-mix(in lab, var(--error) 8%, transparent)
+  );
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--error) 30%, transparent);
+  border-left: 3px solid var(--error);
+  animation: slideInError var(--durationS) var(--bezierFastoutSlowin);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 2px 8px color-mix(in lab, var(--text) 8%, transparent);
+}
+
+.error::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--error);
+  animation: errorPulse 1.5s ease-in-out infinite;
+}
+
+.success {
+  color: color-mix(in lab, var(--success) 90%, var(--black));
+  text-align: left;
+  margin: var(--spaceXS) 0 var(--spaceS) 0;
+  font-size: var(--fontSizeBodyXS);
+  padding: var(--spaceS) var(--spaceM);
+  background: linear-gradient(
+    135deg,
+    color-mix(in lab, var(--success) 12%, transparent),
+    color-mix(in lab, var(--success) 8%, transparent)
+  );
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--success) 30%, transparent);
+  border-left: 3px solid var(--success);
+  animation: slideInSuccess var(--durationS) var(--bezierFastoutSlowin);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 2px 8px color-mix(in lab, var(--text) 8%, transparent);
+}
+
+.success::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--success);
+  animation: successPulse 1.5s ease-in-out infinite;
+}
+
+.hint {
+  color: var(--textLight);
+  text-align: center;
+  margin: calc(var(--spaceS) * -0.5) 0 var(--spaceS) 0;
+  font-size: var(--fontSizeBodyXS);
+  line-height: 1.4;
+}
+
+.toggle {
+  text-align: center;
+  margin-top: var(--spaceL);
+  color: var(--textLight);
+}
+
+.toggleButton {
+  background: none;
+  border: none;
+  color: var(--primary);
+  cursor: pointer;
+  font-size: inherit;
+  padding: 0;
+  text-decoration: underline;
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.toggleButton:hover:not(:disabled) {
+  color: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
+.toggleButton:disabled {
+  color: var(--textLight);
+  cursor: not-allowed;
+}
+
+.resetLink {
+  background: none;
+  border: none;
+  color: var(--primary);
+  cursor: pointer;
+  font-size: inherit;
+  padding: 0;
+  text-decoration: underline;
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.resetLink:hover {
+  color: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
+.passwordStrength {
+  font-size: var(--fontSizeBodyXS);
+  color: var(--textLight);
+  margin-top: var(--spaceS);
+  white-space: pre-line;
+}
+
+.caseReviewToggleSection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spaceM);
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  margin: var(--spaceM) 0;
+}
+
+.caseReviewLabel {
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+  margin: 0;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in lab, var(--primary) 50%, transparent);
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.caseReviewLabel:hover {
+  color: var(--primary);
+  text-decoration-color: var(--primary);
+}
+
+.caseReviewToggle {
+  display: flex;
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+  border: 1px solid color-mix(in lab, var(--primary) 20%, transparent);
+  border-radius: var(--spaceXS);
+  overflow: hidden;
+  box-shadow: 0 1px 3px color-mix(in lab, var(--primary) 15%, transparent);
+}
+
+.caseReviewOption {
+  background: transparent;
+  border: none;
+  padding: var(--spaceS) var(--spaceM);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--primary);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  position: relative;
+  min-width: 50px;
+}
+
+.caseReviewOption:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 15%, transparent);
+  color: var(--primary);
+}
+
+.caseReviewOption:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.caseReviewOptionActive {
+  background: var(--primary) !important;
+  color: white !important;
+  box-shadow: 0 1px 3px color-mix(in lab, var(--primary) 30%, transparent);
+}
+
+.caseReviewOptionActive:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 85%, var(--black)) !important;
+}
+
+/* Animations */
+@keyframes slideInError {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--spaceM))) scaleY(0.8);
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+    max-height: 200px;
+    padding-top: var(--spaceS);
+    padding-bottom: var(--spaceS);
+    margin-top: var(--spaceXS);
+    margin-bottom: var(--spaceS);
+  }
+}
+
+@keyframes errorPulse {
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 color-mix(in lab, var(--error) 40%, transparent);
+  }
+  50% {
+    opacity: 0.7;
+    box-shadow: 0 0 0 4px color-mix(in lab, var(--error) 20%, transparent);
+  }
+}
+
+@keyframes slideInSuccess {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--spaceM))) scaleY(0.8);
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+    max-height: 200px;
+    padding-top: var(--spaceS);
+    padding-bottom: var(--spaceS);
+    margin-top: var(--spaceXS);
+    margin-bottom: var(--spaceS);
+  }
+}
+
+@keyframes successPulse {
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 color-mix(in lab, var(--success) 40%, transparent);
+  }
+  50% {
+    opacity: 0.7;
+    box-shadow: 0 0 0 4px color-mix(in lab, var(--success) 20%, transparent);
+  }
+}
+
+/* Reduce motion for accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .error,
+  .success {
+    animation: none;
+  }
+
+  .error::before,
+  .success::before {
+    animation: none;
+  }
+}
+
+/* Email Verification Description */
+.verificationDescription {
+  font-size: var(--fontSizeBodyM);
+  color: var(--textBody);
+  text-align: center;
+  margin-bottom: var(--spaceL);
+  line-height: var(--lineHeightBody);
+}
+
+.verificationActions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
+  width: 100%;
+  margin-bottom: var(--spaceL);
+}
+
+.secondaryButton {
+  background: transparent;
+  border: 1px solid var(--primary);
+  color: var(--primary);
+  padding: var(--spaceM) var(--spaceL);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.secondaryButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+}
+
+.secondaryButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.secondaryButtonLink {
+  display: inline-block;
+  background: transparent;
+  border: 1px solid var(--primary);
+  color: var(--primary);
+  padding: var(--spaceM) var(--spaceL);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  text-decoration: none;
+  text-align: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.secondaryButtonLink:hover {
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+  text-decoration: none;
+  color: var(--primary);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 6px color-mix(in lab, currentColor 20%, transparent);
+}
+
+.verificationHints {
+  text-align: left;
+  background: color-mix(in lab, var(--backgroundLight) 50%, transparent);
+  padding: var(--spaceL);
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+}
+
+.loginToStriaeButton {
+  width: 100%;
+  padding: var(--spaceL);
+  background-color: #1e7e34;
+  color: var(--white);
+  border: none;
+  border-radius: var(--spaceXS);
+  font-weight: var(--fontWeightMedium);
+  font-size: var(--fontSizeBodyM);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  box-sizing: border-box;
+}
+
+.loginToStriaeButton:hover:not(:disabled) {
+  background-color: #155724;
+}
+
+.loginToStriaeButton:disabled {
+  background-color: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+}
+
+.verificationHints .hint {
+  font-size: var(--fontSizeBodyS);
+  color: var(--textTitle);
+  margin: 0 0 var(--spaceS) 0;
+  font-weight: var(--fontWeightMedium);
+}
+
+.hintList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.hintList li {
+  font-size: var(--fontSizeBodyXS);
+  color: var(--textBody);
+  margin-bottom: var(--spaceXS);
+  padding-left: var(--spaceM);
+  position: relative;
+}
+
+.hintList li::before {
+  content: "•";
+  color: var(--primary);
+  position: absolute;
+  left: 0;
+  font-weight: bold;
+}

package/app/routes/auth/login.tsx

@@ -22,12 +22,10 @@ import { Toast } from '~/components/toast/toast';
 import { Icon } from '~/components/icon/icon';
 import styles from './login.module.css';
 import { Striae } from '~/routes/striae/striae';
-import { getUserData, createUser } from '~/utils/permissions';
+import { getUserData, createUser } from '~/utils/data';
 import { auditService } from '~/services/audit';
-import { generateUniqueId } from '~/utils/id-generator';
-import { evaluatePasswordPolicy } from '~/utils/password-policy';
-import { buildActionCodeSettings } from '~/utils/auth-action-settings';
-import { userHasMFA } from '~/utils/mfa';
+import { generateUniqueId } from '~/utils/common';
+import { evaluatePasswordPolicy, buildActionCodeSettings, userHasMFA } from '~/utils/auth';
 
 const APP_CANONICAL_ORIGIN = 'https://striae.app';
 const SOCIAL_IMAGE_PATH = '/social-image.png';
@@ -582,7 +580,7 @@ export const Login = () => {
           <Link 
             viewTransition
             prefetch="intent"
-            to="https://striae.app" 
+            to="/" 
             className={styles.logoLink}>
             <div className={styles.logo} />
           </Link>

package/app/routes/auth/passwordReset.tsx

@@ -4,7 +4,7 @@ import { sendPasswordResetEmail, signOut } from 'firebase/auth';
 import { auth } from '~/services/firebase';
 import { handleAuthError, ERROR_MESSAGES } from '~/services/firebase/errors';
 import { auditService } from '~/services/audit';
-import { buildActionCodeSettings } from '~/utils/auth-action-settings';
+import { buildActionCodeSettings } from '~/utils/auth';
 import styles from './passwordReset.module.css';
 
 interface PasswordResetProps {

package/app/routes/striae/striae.tsx

@@ -7,8 +7,8 @@ import { Toast } from '~/components/toast/toast';
 import { getImageUrl } from '~/components/actions/image-manage';
 import { getNotes, saveNotes } from '~/components/actions/notes-manage';
 import { generatePDF } from '~/components/actions/generate-pdf';
-import { fetchUserApi } from '~/utils/user-api-client';
-import { resolveEarliestAnnotationTimestamp } from '~/utils/annotation-timestamp';
+import { fetchUserApi } from '~/utils/api';
+import { resolveEarliestAnnotationTimestamp } from '~/utils/ui';
 import { type AnnotationData, type FileData } from '~/types';
 import { checkCaseIsReadOnly } from '~/components/actions/case-manage';
 import styles from './striae.module.css';

package/app/services/audit/audit-export-signing.ts

@@ -1,11 +1,11 @@
 import type { User } from 'firebase/auth';
-import { signAuditExportData } from '~/utils/data-operations';
+import { signAuditExportData } from '~/utils/data';
 import {
   AUDIT_EXPORT_SIGNATURE_VERSION,
   type AuditExportFormat,
   type AuditExportSigningPayload,
   type AuditExportType
-} from '~/utils/audit-export-signature';
+} from '~/utils/forensics';
 
 export interface AuditExportContext {
   user: User;

package/app/services/audit/audit-export.service.ts

@@ -1,6 +1,5 @@
 import { type ValidationAuditEntry, type AuditTrail } from '~/types';
-import { calculateSHA256Secure } from '~/utils/SHA256';
-import { type AuditExportType } from '~/utils/audit-export-signature';
+import { calculateSHA256Secure, type AuditExportType } from '~/utils/forensics';
 import { AUDIT_CSV_ENTRY_HEADERS, entryToCSVRow } from './audit-export-csv';
 import { buildAuditReportContent } from './audit-export-report';
 import { type AuditExportContext, signAuditExport } from './audit-export-signing';

package/app/services/audit/audit.service.ts

@@ -9,7 +9,7 @@ import type {
   AuditResult,
   PerformanceMetrics
 } from '~/types';
-import { generateWorkflowId } from '../../utils/id-generator';
+import { generateWorkflowId } from '~/utils/common';
 import {
   fetchAuditEntriesForUser,
   persistAuditEntryForUser

package/app/services/firebase/index.ts

@@ -6,7 +6,7 @@ import {
     //connectAuthEmulator,    
  } from 'firebase/auth';
 import firebaseConfig from '~/config/firebase';
-import { getAppVersion } from '~/utils/version';
+import { getAppVersion } from '~/utils/common';
 
 export const app = initializeApp(firebaseConfig, "Striae");
 export const auth = getAuth(app);

package/app/utils/api/index.ts

@@ -0,0 +1,4 @@
+export * from './data-api-client';
+export * from './image-api-client';
+export * from './pdf-api-client';
+export * from './user-api-client';

package/app/utils/auth/index.ts

@@ -0,0 +1,5 @@
+export * from './auth';
+export * from './auth-action-settings';
+export * from './mfa';
+export * from './mfa-phone';
+export * from './password-policy';

package/app/utils/common/index.ts

@@ -0,0 +1,3 @@
+export * from './batch-operations';
+export * from './id-generator';
+export * from './version';

package/app/utils/{version.ts → common/version.ts}

@@ -1,4 +1,4 @@
-import packageJson from '../../package.json';
+import packageJson from '../../../package.json';
 
 export const getAppVersion = () => {
   return packageJson.version;

package/app/utils/{data-operations.ts → data/data-operations.ts}

@@ -6,19 +6,19 @@
 
 import type { User } from 'firebase/auth';
 import { type CaseData, type AnnotationData, type ConfirmationImportData } from '~/types';
-import { fetchDataApi } from './data-api-client';
+import { fetchDataApi } from '../api';
 import { validateUserSession, canAccessCase, canModifyCase } from './permissions';
 import {
   type ForensicManifestData,
   type ForensicManifestSignature,
   FORENSIC_MANIFEST_VERSION
-} from './SHA256';
-import { CONFIRMATION_SIGNATURE_VERSION } from './confirmation-signature';
+} from '../forensics/SHA256';
+import { CONFIRMATION_SIGNATURE_VERSION } from '../forensics/confirmation-signature';
 import {
   AUDIT_EXPORT_SIGNATURE_VERSION,
   type AuditExportSigningPayload,
   isValidAuditExportSigningPayload
-} from './audit-export-signature';
+} from '../forensics/audit-export-signature';
 
 // ============================================================================
 // INTERFACES AND TYPES

package/app/utils/data/index.ts

@@ -0,0 +1,2 @@
+export * from './data-operations';
+export * from './permissions';

package/app/utils/{permissions.ts → data/permissions.ts}

@@ -1,7 +1,7 @@
 import type { User } from 'firebase/auth';
 import type { UserData, ExtendedUserData, UserLimits, ReadOnlyCaseMetadata } from '~/types';
 import paths from '~/config/config.json';
-import { fetchUserApi } from './user-api-client';
+import { fetchUserApi } from '../api';
 
 const MAX_CASES_REVIEW = paths.max_cases_review;
 const MAX_FILES_PER_CASE_REVIEW = paths.max_files_per_case_review;

package/app/utils/forensics/index.ts

@@ -0,0 +1,5 @@
+export * from './SHA256';
+export * from './audit-export-signature';
+export * from './confirmation-signature';
+export * from './export-verification';
+export * from './signature-utils';

package/app/utils/ui/index.ts

@@ -0,0 +1,2 @@
+export * from './annotation-timestamp';
+export * from './style';