@striae-org/striae 3.0.4

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

@@ -0,0 +1,190 @@
+/* Modal Overlay & Container */
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background-color: color-mix(in lab, var(--background) 50%, transparent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--zIndex5);
+  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
+}
+
+.modal {
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  width: 90%;
+  max-width: 500px;
+  max-height: min(90vh, 90vw);
+  box-shadow: 0 var(--spaceXS) var(--spaceL)
+    color-mix(in lab, var(--black) 10%, transparent);
+  display: flex;
+  flex-direction: column;
+  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
+  overflow: hidden;
+}
+
+/* Modal Header */
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceL);
+  font-size: var(--fontSizeBodyL);
+  border-bottom: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  color: var(--textTitle);
+}
+
+.modalHeader h1 {
+  font-size: var(--fontSizeBodyM);
+  margin: 0;
+  font-weight: var(--fontWeightMedium);
+}
+
+/* Close Button */
+.closeButton {
+  background: none;
+  border: none;
+  font-size: var(--fontSizeH5);
+  cursor: pointer;
+  padding: var(--spaceS);
+  color: var(--textLight);
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.closeButton:hover {
+  color: var(--text);
+}
+
+/* Form & Form Groups */
+.form {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  gap: var(--spaceL);
+  width: 100%;
+  max-width: 100%;
+  padding: var(--spaceL);
+  margin: 0 auto;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.formGroup {
+  margin-bottom: var(--spaceXS);
+}
+
+.formGroup label {
+  display: block;
+  margin-bottom: var(--spaceS);
+  color: var(--textBody);
+}
+
+/* Readonly Input Styling (for company/email fields) */
+.input {
+  width: 100%;
+  padding: var(--spaceM);
+  border: 1.5px solid color-mix(in lab, var(--text) 20%, transparent);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyS);
+  background: var(--backgroundLight);
+  color: var(--textBody);
+  box-sizing: border-box;
+}
+
+.input:disabled {
+  background-color: color-mix(in lab, var(--background) 95%, transparent);
+  cursor: not-allowed;
+}
+
+/* Helper Text */
+.helpText {
+  font-size: var(--fontSizeBodyXS);
+  color: var(--textLight);
+  margin-top: var(--spaceXS);
+  line-height: 1.4;
+}
+
+/* Button Group */
+.buttonGroup {
+  display: flex;
+  gap: var(--spaceS);
+  margin-top: var(--spaceL);
+}
+
+.mfaVerificationSection {
+  margin-top: var(--spaceM);
+}
+
+.mfaReauthSection {
+  margin-top: var(--spaceM);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceS);
+}
+
+.mfaReauthSection label {
+  color: var(--textBody);
+}
+
+.mfaButtonGroup {
+  display: flex;
+  gap: var(--spaceS);
+  flex-wrap: wrap;
+  margin-top: var(--spaceS);
+}
+
+.resendTimer {
+  margin: 0;
+  font-size: var(--fontSizeBodyXS);
+  color: var(--textLight);
+  display: inline-flex;
+  align-items: center;
+}
+
+.recaptchaContainer {
+  height: 0;
+  overflow: hidden;
+}
+
+/* Delete Button (error variant) */
+.deleteButton {
+  background-color: var(--error);
+  color: var(--white);
+  border: none;
+  padding: var(--spaceM) var(--spaceL);
+  border-radius: var(--spaceXS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  margin-top: var(--spaceXL);
+  width: 100%;
+  font-size: var(--fontSizeBodyS);
+}
+
+.deleteButton:hover:not(:disabled) {
+  background-color: color-mix(in lab, var(--error) 85%, var(--black));
+}
+
+.deleteButton:focus {
+  outline: 2px solid var(--error);
+  outline-offset: 2px;
+}
+
+.deleteNotice {
+  margin-top: var(--spaceXL);
+  font-size: var(--fontSizeBodyXS);
+  text-align: center;
+  color: var(--textLight);
+}
+
+.deleteLink {
+  color: var(--error);
+  text-decoration: underline;
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.deleteLink:hover {
+  color: color-mix(in lab, var(--error) 85%, var(--black));
+}

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

@@ -0,0 +1,253 @@
+import { useState, useContext, useEffect, useCallback } from 'react';
+import { updateProfile } from 'firebase/auth';
+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 { getUserData, updateUserData } from '~/utils/permissions';
+import { auditService } from '~/services/audit.service';
+import { handleAuthError, ERROR_MESSAGES } from '~/services/firebase-errors';
+import { FormField, FormButton, FormMessage } from '../form';
+import { MfaPhoneUpdateSection } from './mfa-phone-update';
+import styles from './manage-profile.module.css';
+
+interface ManageProfileProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
+  const { user } = useContext(AuthContext);
+  const [displayName, setDisplayName] = useState(user?.displayName || '');
+  const [company, setCompany] = useState('');
+  const [email, setEmail] = useState('');
+  const [permitted, setPermitted] = useState(false); // Default to false for safety - updated after data loads.
+  const [isLoading, setIsLoading] = useState(false);
+  const [isMfaBusy, setIsMfaBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [showResetForm, setShowResetForm] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showAuditViewer, setShowAuditViewer] = useState(false);
+  const isCloseBlocked = isMfaBusy || isLoading;
+
+  const handleMfaBusyChange = useCallback((isBusy: boolean) => {
+    setIsMfaBusy(isBusy);
+  }, []);
+
+  const handleCloseRequest = () => {
+    if (isCloseBlocked) {
+      return;
+    }
+
+    onClose();
+  };
+
+  useEffect(() => {
+    if (isOpen && user) {
+      const loadUserData = async () => {
+        try {
+          const userData = await getUserData(user);
+
+          if (userData) {
+            setCompany(userData.company || '');
+            setEmail(userData.email || '');
+            setPermitted(userData.permitted === true);
+          }
+        } catch (err) {
+          console.error('Failed to load user data:', err);
+        }
+      };
+
+      void loadUserData();
+    }
+  }, [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('');
+
+    const oldDisplayName = user?.displayName || '';
+
+    try {
+      if (!user) throw new Error(ERROR_MESSAGES.NO_USER);
+
+      await updateProfile(user, {
+        displayName,
+      });
+
+      const [firstName, lastName] = displayName.split(' ');
+
+      await updateUserData(user, {
+        email: user.email,
+        firstName: firstName || '',
+        lastName: lastName || '',
+      });
+
+      await auditService.logUserProfileUpdate(
+        user,
+        'displayName',
+        oldDisplayName,
+        displayName,
+        'success'
+      );
+
+      setSuccess(ERROR_MESSAGES.PROFILE_UPDATED);
+    } catch (err) {
+      const { message } = handleAuthError(err);
+
+      await auditService.logUserProfileUpdate(
+        user!,
+        'displayName',
+        oldDisplayName,
+        displayName,
+        'failure',
+        undefined,
+        [message]
+      );
+
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDeleteAccountClick = () => {
+    setShowDeleteModal(true);
+  };
+
+  if (!isOpen) return null;
+
+  if (showAuditViewer) {
+    return <UserAuditViewer isOpen={showAuditViewer} onClose={() => setShowAuditViewer(false)} />;
+  }
+
+  if (showResetForm) {
+    return <PasswordReset isModal={true} onBack={() => setShowResetForm(false)} />;
+  }
+
+  if (showDeleteModal && user) {
+    return (
+      <DeleteAccount
+        isOpen={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+        user={{
+          uid: user.uid,
+          displayName: user.displayName,
+          email: user.email,
+        }}
+        company={company}
+      />
+    );
+  }
+
+  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 */}
+      <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}
+            className={styles.closeButton}
+            aria-label="Close modal"
+            disabled={isCloseBlocked}
+          >
+            &times;
+          </button>
+        </header>
+
+        <form onSubmit={handleUpdateProfile} className={styles.form}>
+          <FormField
+            label="Display Name"
+            component="input"
+            type="text"
+            name="displayName"
+            id="displayName"
+            value={displayName}
+            onChange={(e) => setDisplayName(e.target.value)}
+            autoComplete="name"
+            required
+          />
+
+          <div className={styles.formGroup}>
+            <label htmlFor="company">Lab/Company Name</label>
+            <input
+              id="company"
+              type="text"
+              value={company}
+              disabled
+              readOnly
+              className={styles.input}
+              style={{ backgroundColor: '#f8f9fa', cursor: 'not-allowed' }}
+            />
+            <p className={styles.helpText}>
+              Company name can only be changed by an administrator. Contact support if changes are needed.
+            </p>
+          </div>
+
+          <div className={styles.formGroup}>
+            <label htmlFor="email">Email</label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              disabled
+              readOnly
+              className={styles.input}
+              autoComplete="email"
+              style={{ backgroundColor: '#f8f9fa', cursor: 'not-allowed' }}
+            />
+            <p className={styles.helpText}>
+              Email address cannot be changed for security reasons. Contact support if changes are needed.
+            </p>
+          </div>
+
+          <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
+            </FormButton>
+            <FormButton variant="secondary" type="button" onClick={() => setShowAuditViewer(true)}>
+              View My Audit Trail
+            </FormButton>
+            <FormButton variant="secondary" type="button" onClick={() => setShowResetForm(true)}>
+              Reset Password
+            </FormButton>
+          </div>
+          <button type="button" onClick={handleDeleteAccountClick} className={styles.deleteButton}>
+            Delete Striae Account
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};