@striae-org/striae 4.0.2 → 4.1.0

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

@@ -580,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.module.css

@@ -12,7 +12,8 @@
   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);
+  box-shadow: 0 var(--spaceXS) var(--spaceM)
+    color-mix(in lab, var(--black) 10%, transparent);
   width: 100%;
   max-width: var(--maxWidthS);
 }
@@ -29,7 +30,7 @@
   left: var(--spaceL);
   width: 150px;
   height: 150px;
-  background-image: url('/logo-dark.png');
+  background-image: url("/logo-dark.png");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
@@ -114,7 +115,8 @@
   margin: var(--spaceXS) 0 var(--spaceS) 0;
   font-size: var(--fontSizeBodyXS);
   padding: var(--spaceS) var(--spaceM);
-  background: linear-gradient(135deg, 
+  background: linear-gradient(
+    135deg,
     color-mix(in lab, var(--error) 12%, transparent),
     color-mix(in lab, var(--error) 8%, transparent)
   );
@@ -128,7 +130,7 @@
 }
 
 .error::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -144,7 +146,8 @@
   margin: var(--spaceXS) 0 var(--spaceS) 0;
   font-size: var(--fontSizeBodyXS);
   padding: var(--spaceS) var(--spaceM);
-  background: linear-gradient(135deg, 
+  background: linear-gradient(
+    135deg,
     color-mix(in lab, var(--success) 12%, transparent),
     color-mix(in lab, var(--success) 8%, transparent)
   );
@@ -158,7 +161,7 @@
 }
 
 .success::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -176,6 +179,7 @@
   justify-content: center;
   align-items: center;
   z-index: var(--zIndex5);
+  cursor: default;
 }
 
 .modal {
@@ -183,9 +187,11 @@
   border-radius: var(--spaceXS);
   width: 90%;
   max-width: 500px;
-  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  box-shadow: 0 var(--spaceXS) var(--spaceL)
+    color-mix(in lab, var(--black) 10%, transparent);
   overflow: hidden;
   padding: var(--space2XL);
+  cursor: default;
 }
 
 .modalHeader {
@@ -220,7 +226,8 @@
 }
 
 @keyframes errorPulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
     box-shadow: 0 0 0 0 color-mix(in lab, var(--error) 40%, transparent);
   }
@@ -252,7 +259,8 @@
 }
 
 @keyframes successPulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
     box-shadow: 0 0 0 0 color-mix(in lab, var(--success) 40%, transparent);
   }
@@ -264,11 +272,13 @@
 
 /* Reduce motion for accessibility */
 @media (prefers-reduced-motion: reduce) {
-  .error, .success {
+  .error,
+  .success {
     animation: none;
   }
-  
-  .error::before, .success::before {
+
+  .error::before,
+  .success::before {
     animation: none;
   }
-}
+}

package/app/routes/striae/striae.tsx

@@ -28,6 +28,8 @@ export const Striae = ({ user }: StriaePage) => {
   // User states
   const [userCompany, setUserCompany] = useState<string>('');
   const [userFirstName, setUserFirstName] = useState<string>('');
+  const [userLastName, setUserLastName] = useState<string>('');
+  const [userBadgeId, setUserBadgeId] = useState<string>('');
 
   // Case management states - All managed here
   const [currentCase, setCurrentCase] = useState<string>('');
@@ -80,9 +82,11 @@ export const Striae = ({ user }: StriaePage) => {
         });
         
         if (response.ok) {
-          const userData = await response.json() as { company?: string; firstName?: string };
+          const userData = await response.json() as { company?: string; firstName?: string; lastName?: string; badgeId?: string };
           setUserCompany(userData.company || '');
           setUserFirstName(userData.firstName || '');
+          setUserLastName(userData.lastName || '');
+          setUserBadgeId(userData.badgeId || '');
         }
       } catch (err) {
         console.error('Failed to load user company:', err);
@@ -167,6 +171,8 @@ export const Striae = ({ user }: StriaePage) => {
       selectedFilename,
       userCompany,
       userFirstName,
+      userLastName,
+      userBadgeId,
       currentCase,
       annotationData,
       activeAnnotations,
@@ -389,6 +395,7 @@ export const Striae = ({ user }: StriaePage) => {
             imageUrl={selectedImage} 
             filename={selectedFilename}
             company={userCompany}
+            badgeId={userBadgeId}
             firstName={userFirstName}
             error={error ?? ''}
             activeAnnotations={activeAnnotations}

package/app/routes.ts

@@ -0,0 +1,7 @@
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
+
+export default [
+	index("routes/_index.tsx"),
+	route("auth", "routes/auth/route.ts"),
+	route("auth/login", "routes/auth/route.ts", { id: "routes/auth/login-alias" }),
+] satisfies RouteConfig;

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

@@ -30,6 +30,7 @@ export const AUDIT_CSV_ENTRY_HEADERS = [
   'Profile Field',
   'Old Value',
   'New Value',
+  'Badge/ID',
   'Total Confirmations In File',
   'Confirmations Successfully Imported',
   'Validation Steps Failed',
@@ -112,6 +113,7 @@ export const entryToCSVRow = (entry: ValidationAuditEntry): string => {
     formatForCSV(userProfileDetails?.profileField),
     formatForCSV(userProfileDetails?.oldValue),
     formatForCSV(userProfileDetails?.newValue),
+    formatForCSV(userProfileDetails?.badgeId),
     caseDetails?.totalAnnotations?.toString() || '',
     performanceMetrics?.validationStepsCompleted?.toString() || '',
     performanceMetrics?.validationStepsFailed?.toString() || '',