@striae-org/striae 4.0.3 → 4.2.0

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

@@ -10,9 +10,11 @@
   align-items: center;
   z-index: 9999;
   backdrop-filter: blur(2px);
+  cursor: default;
 }
 
 .modal {
+  position: relative;
   background: #ffffff;
   border-radius: 12px;
   padding: 2rem;
@@ -21,6 +23,7 @@
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
   border: 1px solid #e0e0e0;
   animation: slideIn 0.3s ease-out;
+  cursor: default;
 }
 
 @keyframes slideIn {
@@ -62,7 +65,7 @@
   font-size: 2rem;
   font-weight: bold;
   color: #dc3545;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
   background: rgba(220, 53, 69, 0.1);
   padding: 1rem;
   border-radius: 8px;
@@ -118,25 +121,25 @@
   .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;

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

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import styles from './inactivity-warning.module.css';
 
 interface InactivityWarningProps {
@@ -15,6 +16,15 @@ export const InactivityWarning = ({
   onSignOut
 }: InactivityWarningProps) => {
   const [countdown, setCountdown] = useState(remainingSeconds);
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen,
+    onClose: onExtendSession,
+    closeOnBackdrop: false,
+  });
 
   useEffect(() => {
     setCountdown(remainingSeconds);
@@ -46,8 +56,11 @@ export const InactivityWarning = ({
   const seconds = countdown % 60;
 
   return (
-    <div className={styles.overlay}>
+    <div className={styles.overlay} aria-label="Close inactivity warning" {...overlayProps}>
       <div className={styles.modal}>
+        <button className={styles.closeButton} {...getCloseButtonProps({ ariaLabel: 'Close inactivity warning' })}>
+          ×
+        </button>
         <div className={styles.header}>
           <h3>Session Timeout Warning</h3>
         </div>
@@ -66,7 +79,7 @@ export const InactivityWarning = ({
         
         <div className={styles.actions}>
           <button
-            onClick={onExtendSession}
+            onClick={requestClose}
             className={styles.extendButton}
           >
             Extend Session

package/app/components/user/manage-profile.module.css

@@ -7,6 +7,7 @@
   justify-content: center;
   align-items: center;
   z-index: var(--zIndex5);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
 }
 
@@ -22,6 +23,7 @@
   flex-direction: column;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
   overflow: hidden;
+  cursor: default;
 }
 
 /* Modal Header */

package/app/components/user/manage-profile.tsx

@@ -4,10 +4,12 @@ import { PasswordReset } from '~/routes/auth/passwordReset';
 import { DeleteAccount } from './delete-account';
 import { UserAuditViewer } from '../audit/user-audit-viewer';
 import { AuthContext } from '~/contexts/auth.context';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { getUserData, updateUserData } from '~/utils/data';
 import { auditService } from '~/services/audit';
 import { handleAuthError, ERROR_MESSAGES } from '~/services/firebase/errors';
-import { FormField, FormButton, FormMessage } from '../form';
+import { FormField, FormButton } from '../form';
+import { Toast } from '~/components/toast/toast';
 import { MfaPhoneUpdateSection } from './mfa-phone-update';
 import styles from './manage-profile.module.css';
 
@@ -19,29 +21,33 @@ interface ManageProfileProps {
 export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
   const { user } = useContext(AuthContext);
   const [displayName, setDisplayName] = useState(user?.displayName || '');
+  const [badgeId, setBadgeId] = useState('');
+  const [initialBadgeId, setInitialBadgeId] = useState('');
   const [company, setCompany] = useState('');
   const [email, setEmail] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [isMfaBusy, setIsMfaBusy] = useState(false);
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState('');
+  const [showToast, setShowToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+  const [toastType, setToastType] = useState<'success' | 'error'>('success');
   const [showResetForm, setShowResetForm] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [showAuditViewer, setShowAuditViewer] = useState(false);
   const isCloseBlocked = isMfaBusy || isLoading;
+  const {
+    requestClose,
+    handleOverlayMouseDown,
+    handleOverlayKeyDown
+  } = useOverlayDismiss({
+    isOpen,
+    onClose,
+    canDismiss: !isCloseBlocked
+  });
 
   const handleMfaBusyChange = useCallback((isBusy: boolean) => {
     setIsMfaBusy(isBusy);
   }, []);
 
-  const handleCloseRequest = () => {
-    if (isCloseBlocked) {
-      return;
-    }
-
-    onClose();
-  };
-
   useEffect(() => {
     if (isOpen && user) {
       const loadUserData = async () => {
@@ -51,6 +57,18 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
           if (userData) {
             setCompany(userData.company || '');
             setEmail(userData.email || '');
+            const storedBadgeId = userData.badgeId || '';
+            setBadgeId(storedBadgeId);
+            setInitialBadgeId(storedBadgeId);
+
+            if (userData.badgeId === undefined) {
+              try {
+                await updateUserData(user, { badgeId: '' });
+                setInitialBadgeId('');
+              } catch (badgeInitError) {
+                console.error('Failed to initialize badge ID field:', badgeInitError);
+              }
+            }
           }
         } catch (err) {
           console.error('Failed to load user data:', err);
@@ -61,29 +79,14 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
     }
   }, [isOpen, user]);
 
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isOpen && !isCloseBlocked) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [isOpen, isCloseBlocked, onClose]);
-
   const handleUpdateProfile = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
-    setError('');
-    setSuccess('');
+    setShowToast(false);
 
     const oldDisplayName = user?.displayName || '';
+    const oldBadgeId = initialBadgeId;
+    const normalizedBadgeId = badgeId.trim();
 
     try {
       if (!user) throw new Error(ERROR_MESSAGES.NO_USER);
@@ -98,6 +101,7 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
         email: user.email,
         firstName: firstName || '',
         lastName: lastName || '',
+        badgeId: normalizedBadgeId,
       });
 
       await auditService.logUserProfileUpdate(
@@ -105,10 +109,33 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
         'displayName',
         oldDisplayName,
         displayName,
-        'success'
+        'success',
+        undefined,
+        [],
+        normalizedBadgeId
       );
 
-      setSuccess(ERROR_MESSAGES.PROFILE_UPDATED);
+      if (oldBadgeId !== normalizedBadgeId) {
+        await auditService.logUserProfileUpdate(
+          user,
+          'badgeId',
+          oldBadgeId,
+          normalizedBadgeId,
+          'success',
+          undefined,
+          [],
+          normalizedBadgeId
+        );
+      }
+
+      setInitialBadgeId(normalizedBadgeId);
+
+      setToastType('success');
+      setToastMessage(ERROR_MESSAGES.PROFILE_UPDATED);
+      setShowToast(true);
+      setTimeout(() => {
+        window.location.reload();
+      }, 1500);
     } catch (err) {
       const { message } = handleAuthError(err);
 
@@ -119,10 +146,26 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
         displayName,
         'failure',
         undefined,
-        [message]
+        [message],
+        normalizedBadgeId
       );
 
-      setError(message);
+      if (oldBadgeId !== normalizedBadgeId) {
+        await auditService.logUserProfileUpdate(
+          user!,
+          'badgeId',
+          oldBadgeId,
+          normalizedBadgeId,
+          'failure',
+          undefined,
+          [message],
+          normalizedBadgeId
+        );
+      }
+
+      setToastType('error');
+      setToastMessage(message);
+      setShowToast(true);
     } finally {
       setIsLoading(false);
     }
@@ -158,19 +201,31 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
   }
 
   return (
-    <div className={styles.modalOverlay} onClick={handleCloseRequest} role="presentation">
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */}
+    <>
+    <Toast
+      message={toastMessage}
+      type={toastType}
+      isVisible={showToast}
+      onClose={() => setShowToast(false)}
+    />
+    <div
+      className={styles.modalOverlay}
+      onMouseDown={handleOverlayMouseDown}
+      onKeyDown={handleOverlayKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label="Close manage profile dialog"
+    >
       <div
         className={styles.modal}
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-title"
-        onClick={(e) => e.stopPropagation()}
       >
         <header className={styles.modalHeader}>
           <h1 id="modal-title">Manage Profile</h1>
           <button
-            onClick={handleCloseRequest}
+            onClick={requestClose}
             className={styles.closeButton}
             aria-label="Close modal"
             disabled={isCloseBlocked}
@@ -192,6 +247,21 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
             required
           />
 
+          <div className={styles.formGroup}>
+            <label htmlFor="badgeId">Badge/ID #</label>
+            <input
+              id="badgeId"
+              type="text"
+              value={badgeId}
+              onChange={(e) => setBadgeId(e.target.value)}
+              className={styles.input}
+              autoComplete="off"
+            />
+            <p className={styles.helpText}>
+              Enter your Badge/ID number for confirmations and reports. This can be updated as needed.
+            </p>
+          </div>
+
           <div className={styles.formGroup}>
             <label htmlFor="company">Lab/Company Name</label>
             <input
@@ -227,9 +297,6 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
 
           <MfaPhoneUpdateSection user={user} isOpen={isOpen} onBusyChange={handleMfaBusyChange} />
 
-          {error && <FormMessage type="error" message={error} />}
-          {success && <FormMessage type="success" message={success} />}
-
           <div className={styles.buttonGroup}>
             <FormButton variant="primary" type="submit" isLoading={isLoading} loadingText="Updating...">
               Update Profile
@@ -247,5 +314,6 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
         </form>
       </div>
     </div>
+    </>
   );
 };

package/app/hooks/useOverlayDismiss.ts

@@ -0,0 +1,116 @@
+import { useCallback, useEffect, type CSSProperties, type KeyboardEventHandler, type MouseEventHandler } from 'react';
+
+interface UseOverlayDismissOptions {
+  isOpen: boolean;
+  onClose: () => void;
+  canDismiss?: boolean;
+  closeOnEscape?: boolean;
+  closeOnBackdrop?: boolean;
+}
+
+interface CloseButtonOptions {
+  ariaLabel?: string;
+  title?: string;
+}
+
+const sharedCloseButtonStyle: CSSProperties = {
+  position: 'absolute',
+  top: '0.6rem',
+  right: '0.6rem',
+  width: '1.9rem',
+  height: '1.9rem',
+  borderRadius: '999px',
+  border: '1px solid #d6dce2',
+  background: '#f8f9fa',
+  color: '#495057',
+  fontSize: '1.2rem',
+  lineHeight: 1,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  zIndex: 1,
+};
+
+export const useOverlayDismiss = ({
+  isOpen,
+  onClose,
+  canDismiss = true,
+  closeOnEscape = true,
+  closeOnBackdrop = true
+}: UseOverlayDismissOptions) => {
+  const requestClose = useCallback(() => {
+    if (!canDismiss) {
+      return;
+    }
+
+    onClose();
+  }, [canDismiss, onClose]);
+
+  useEffect(() => {
+    if (!isOpen || !closeOnEscape || !canDismiss) {
+      return;
+    }
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        requestClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen, closeOnEscape, canDismiss, requestClose]);
+
+  const handleOverlayMouseDown = useCallback<MouseEventHandler<HTMLDivElement>>((event) => {
+    if (!closeOnBackdrop || event.target !== event.currentTarget) {
+      return;
+    }
+
+    requestClose();
+  }, [closeOnBackdrop, requestClose]);
+
+  const handleOverlayKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>((event) => {
+    if (!closeOnBackdrop || event.target !== event.currentTarget) {
+      return;
+    }
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      requestClose();
+    }
+  }, [closeOnBackdrop, requestClose]);
+
+  const overlayProps = {
+    role: 'button' as const,
+    tabIndex: 0,
+    onMouseDown: handleOverlayMouseDown,
+    onKeyDown: handleOverlayKeyDown,
+    style: { cursor: 'default' as const },
+  };
+
+  const getCloseButtonProps = useCallback((options?: CloseButtonOptions) => {
+    const ariaLabel = options?.ariaLabel || 'Close modal';
+
+    return {
+      type: 'button' as const,
+      onClick: requestClose,
+      disabled: !canDismiss,
+      'aria-label': ariaLabel,
+      title: options?.title || ariaLabel,
+      style: sharedCloseButtonStyle,
+    };
+  }, [requestClose, canDismiss]);
+
+  return {
+    requestClose,
+    handleOverlayMouseDown,
+    handleOverlayKeyDown,
+    overlayProps,
+    getCloseButtonProps,
+  };
+};

package/app/routes/auth/login.example.tsx

@@ -26,6 +26,7 @@ import { getUserData, createUser } from '~/utils/data';
 import { auditService } from '~/services/audit';
 import { generateUniqueId } from '~/utils/common';
 import { evaluatePasswordPolicy, buildActionCodeSettings, userHasMFA } from '~/utils/auth';
+import type { UserData } from '~/types';
 
 const APP_CANONICAL_ORIGIN = 'PAGES_CUSTOM_DOMAIN';
 const SOCIAL_IMAGE_PATH = '/social-image.png';
@@ -143,6 +144,7 @@ export const Login = () => {
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
   const [welcomeToastMessage, setWelcomeToastMessage] = useState('');
+  const [welcomeToastType, setWelcomeToastType] = useState<'success' | 'warning'>('success');
   const [isWelcomeToastVisible, setIsWelcomeToastVisible] = useState(false);
   const [isLogin, setIsLogin] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
@@ -212,11 +214,9 @@ export const Login = () => {
   };  
 
   // Check if user exists in the USER_DB using centralized function
-  const checkUserExists = async (currentUser: User): Promise<boolean> => {
+  const checkUserExists = async (currentUser: User): Promise<UserData | null> => {
     try {
-      const userData = await getUserData(currentUser);
-      
-      return userData !== null;
+      return await getUserData(currentUser);
     } catch (error) {
       console.error('Error checking user existence:', error);
       // On network/API errors, throw error to prevent login
@@ -251,16 +251,19 @@ export const Login = () => {
       }      
       
       // Check if user exists in the USER_DB
+      let hasBadgeId = true;
       setIsCheckingUser(true);
       try {
-        const userExists = await checkUserExists(currentUser);
+        const userData = await checkUserExists(currentUser);
         setIsCheckingUser(false);
         
-        if (!userExists) {
+        if (!userData) {
           handleSignOut();
           setError('This account does not exist or has been deleted');
           return;
         }
+
+        hasBadgeId = Boolean(userData.badgeId?.trim());
       } catch (error) {
         setIsCheckingUser(false);
         handleSignOut();
@@ -279,7 +282,13 @@ export const Login = () => {
       setShowMfaEnrollment(false);
 
       if (shouldShowWelcomeToastRef.current) {
-        setWelcomeToastMessage(`Welcome to Striae, ${getUserFirstName(currentUser)}!`);
+        if (hasBadgeId) {
+          setWelcomeToastType('success');
+          setWelcomeToastMessage(`Welcome to Striae, ${getUserFirstName(currentUser)}!`);
+        } else {
+          setWelcomeToastType('warning');
+          setWelcomeToastMessage('Your badge or ID number is not set. You can set one in Manage Profile.');
+        }
         setIsWelcomeToastVisible(true);
         shouldShowWelcomeToastRef.current = false;
       }
@@ -302,6 +311,7 @@ export const Login = () => {
       setShowMfaEnrollment(false);
       setIsCheckingUser(false);
       setIsWelcomeToastVisible(false);
+      setWelcomeToastType('success');
       shouldShowWelcomeToastRef.current = false;
     }
   });
@@ -517,6 +527,7 @@ export const Login = () => {
       setShowMfaVerification(false);
       setMfaResolver(null);
       setIsWelcomeToastVisible(false);
+      setWelcomeToastType('success');
       shouldShowWelcomeToastRef.current = false;
     } catch (err) {
       console.error('Sign out error:', err);
@@ -762,7 +773,7 @@ export const Login = () => {
       {!shouldHandleEmailAction && (
         <Toast
           message={welcomeToastMessage}
-          type="success"
+          type={welcomeToastType}
           isVisible={isWelcomeToastVisible}
           onClose={() => setIsWelcomeToastVisible(false)}
         />