Account Details Modal

This procedure guide explains how to use the Account Details Modal to manage your personal account settings, security preferences, and interaction defaults. The Account Details Modal allows you to update your profile information, configure security settings, customize your communication preferences, and adjust appearance settings.

---

Table of Contents

1. Accessing the Account Details Modal
2. Understanding the Modal Interface
3. Account Tab - Profile Information
4. Security Tab - Two-Factor Authentication
5. Security Tab - Password Management
6. Preferences Tab - Interaction Defaults
7. Appearance Tab - Theme Settings
8. Notifications Tab
9. Privacy Tab
10. Logging Out

---

Accessing the Account Details Modal

Step 1: Locate Access Points

The Account Details Modal can be accessed from the Chat Sidebar:

1. In the chat sidebar, locate your profile section at the bottom
2. Click on your profile avatar or “Account Details & Security” text
3. The Account Details Modal will open

---

Understanding the Modal Interface

After opening the Account Details Modal, you will see a two-panel interface:

Left Sidebar (Navigation):

• Settings Header: “Settings” title at the top
• Navigation Tabs: Six tabs for different settings categories:
  • Account: Profile information and avatar
  • Interaction Defaults: Communication preferences
  • Appearance: Theme selection
  • Security: Two-factor authentication and password
  • Notifications: Notification settings (coming soon)
  • Privacy: Privacy settings (coming soon)
• Logout Button: Red button at the bottom to sign out

Right Content Area:

• Tab Header: Shows the current tab name and close button (X)
• Scrollable Content: Main content area for the selected tab
• Action Buttons: Save, Cancel, or Discard buttons (varies by tab)

Modal Features:

• Click Outside to Close: Clicking the dark overlay closes the modal
• Close Button: Red X button in the top-right corner
• Tab Navigation: Click any tab in the left sidebar to switch sections
• Responsive Design: Modal adapts to different screen sizes

---

Account Tab - Profile Information

Step 1: View Account Tab

1. The Account tab is selected by default when the modal opens
2. If not selected, click “Account” in the left sidebar
3. The Account tab displays your profile information

Step 2: Upload or Change Avatar

1. Locate the avatar section at the top of the Account tab
2. Your current avatar (or default avatar) is displayed
3. Click the “Upload” or “Change” button
4. A file picker dialog will open
5. Select an image file from your computer
6. The avatar will update immediately after selection

Avatar Requirements:

• Supported Formats: Common image formats (JPG, PNG, etc.)
• Recommended Size: Square images work best
• File Size: Reasonable file sizes are recommended

Step 3: Update Username

1. Locate the Username field
2. Click inside the text input field
3. Type your desired username
4. The field validates as you type

Username Validation:

• Allowed Characters: Letters, spaces, apostrophes, and hyphens
• Minimum Length: At least one character
• Error Messages:
  • “Username must be at least one character long” (if empty)
  • “Only letters, spaces, apostrophes, and hyphens are allowed” (if invalid characters)

Visual Feedback:

• Valid Username: No error message, Save button enabled
• Invalid Username: Red error message appears below field

Step 4: View Read-Only Information

The following fields are read-only and cannot be changed:

1. First Name: Displays your first name (grayed out)
2. Last Name: Displays your last name (grayed out)
3. Email: Displays your email address (grayed out)

Note: These fields show a message: “First name cannot be changed”, “Last name cannot be changed”, or “Email cannot be changed”

Step 5: Save Account Changes

1. After making changes (username or avatar), review your updates
2. Click the “Save Changes” button at the bottom
3. The system will:
   • Update your username in the database
   • Update your avatar
   • Display a success message
   • Close the modal automatically

Step 6: Discard or Cancel Changes

Discard Changes:

1. Click the “Discard” button to revert all changes
2. Your username will revert to the original value
3. The modal will close

Cancel:

1. Click the “Cancel” button
2. The modal will close without saving changes
3. Your changes will be lost

---

Security Tab - Two-Factor Authentication

Step 1: Access Security Tab

1. Click “Security” in the left sidebar
2. The Security tab will display security options

Step 2: View 2FA Status

1. Locate the “Setup Authenticator App” section
2. You’ll see the current 2FA status:
   • “Enabled” (green badge) - 2FA is active
   • “Disabled” (gray badge) - 2FA is not set up

Step 3: Set Up Two-Factor Authentication

If 2FA is Required:

1. If 2FA setup is required, you’ll see a blue banner at the top
2. The banner states: “You must set up two-factor authentication to continue using your account”
3. Other tabs will be disabled until 2FA is completed
4. You cannot switch away from the Security tab

Step 3a: Start 2FA Setup

1. Click the “Setup” button next to “Setup Authenticator App”
2. A setup panel will expand below
3. The system will generate a QR code and secret key

Step 3b: Scan QR Code

1. Install an authenticator app on your mobile device:
   • Google Authenticator
   • Microsoft Authenticator
   • Any TOTP-compatible app
2. Open the authenticator app
3. Scan the QR code displayed in the modal
4. The app will add your account

Step 3c: Manual Entry (Alternative)

1. If you can’t scan the QR code, use the manual entry key
2. The key is displayed in a text field below the QR code
3. Click “Copy” to copy the key to your clipboard
4. Manually enter the key into your authenticator app

Step 3d: Continue to Verification

1. After scanning or entering the key, click “Continue”
2. You’ll proceed to the verification step
3. If 2FA is not required, you can click “Cancel” to close the setup

Step 4: Verify 2FA Setup

Step 4a: Enter Verification Code

1. In the verification step, you’ll see an input field
2. Open your authenticator app
3. Find the 6-digit code for “Preformance AI”
4. Enter the 6-digit code in the verification field
5. The code updates automatically as you type

Step 4b: Submit Verification

1. Click “Verify & Complete Setup” button
2. The system will verify your code
3. If successful:
   • 2FA will be enabled
   • Status badge changes to “Enabled” (green)
   • Setup panel closes
   • You can now access other tabs (if previously restricted)

Step 4c: Handle Verification Errors

• Invalid Code: Error message appears: “Invalid verification code. Please try again.”
• Network Error: Error message appears: “An error occurred. Please try again.”
• Solution: Wait for a new code (codes refresh every 30 seconds) and try again

Step 5: Back to Setup (If Needed)

1. If verification fails, click “Back” button
2. You’ll return to the QR code setup step
3. You can scan the QR code again or use manual entry

---

Security Tab - Password Management

Step 1: Access Change Password

1. In the Security tab, locate the “Change Password” section
2. Click the “Change” button
3. Note: Password change functionality may redirect to a separate page or show a placeholder

Current Status:

• The “Change Password” option is available but may require additional implementation
• Contact support if you need to change your password

---

Preferences Tab - Interaction Defaults

Step 1: Access Preferences Tab

1. Click “Interaction Defaults” in the left sidebar
2. The Preferences tab will display interaction settings

Step 2: Set Profile Role

1. Locate the “Profile Role” section
2. You’ll see your current role displayed: “Current: [Your Role]”
3. Click the role dropdown menu
4. Select from available roles:
   • Construction Manager
   • Director of Construction Technology
   • Compliance Expert
   • Air Conditioning Electrician
5. The role updates immediately when selected

Role Purpose:

• The profile role affects how the AI interacts with you
• Different roles may receive different types of responses
• Changes are saved automatically

Step 3: Adjust Communication Tone

1. Locate the “Communication Tone” slider
2. The current tone is displayed: “Communication Tone: Professional” or “Casual”
3. Drag the slider to adjust:
   • Left (0): Professional
   • Right (1): Casual
4. The tone updates immediately as you move the slider

Tone Options:

• Professional: Formal, business-like communication
• Casual: Relaxed, friendly communication

Step 4: Adjust Communication Style

1. Locate the “Communication Style” slider
2. The current style is displayed: “Communication Style: [Current Style]”
3. Drag the slider to adjust (increments of 25):
   • 0: Serious
   • 25: Reserved
   • 50: Balanced
   • 75: Lighthearted
   • 100: Humorous
4. The style updates immediately as you move the slider

Style Options:

• Serious: Formal and focused responses
• Reserved: Professional but approachable
• Balanced: Mix of professional and friendly
• Lighthearted: Friendly and relaxed
• Humorous: Playful and entertaining

Step 5: Toggle Suggestions

1. Locate the “Suggestions” section
2. Check or uncheck the checkbox to enable/disable suggestions
3. The status shows “On” or “Off” next to the checkbox

Suggestions Feature:

• When enabled, suggested actions are shown in the interface
• Suggestions help guide you through common tasks
• You can toggle this on or off at any time

Step 6: Save Preferences

1. After adjusting your preferences, click the “Save Preferences” button at the bottom
2. The system will:
   • Save all preference changes to the database
   • Update both global and organization-specific settings
   • Close the modal automatically
3. Your preferences will be applied immediately

Note: Some changes (like role, tone, style) update immediately as you adjust them, but clicking “Save Preferences” ensures all changes are persisted.

---

Appearance Tab - Theme Settings

Step 1: Access Appearance Tab

1. Click “Appearance” in the left sidebar
2. The Appearance tab will display theme options

Step 2: Select Theme

1. Locate the “Theme” dropdown menu
2. Click the dropdown to see available themes
3. Select from available options:
   • Light (default): Light color scheme
   • Dark: Dark color scheme
   • Accessible: Colorblind-friendly theme
4. The theme applies immediately when selected

Theme Options:

• Light: Default light theme with standard colors
• Dark: Dark theme for reduced eye strain
• Accessible: Optimized for colorblind users

Step 3: Preview Theme

1. After selecting a theme, the interface will update immediately
2. You can see the changes in real-time
3. The modal itself will reflect the new theme

Step 4: Save Appearance Settings

1. After selecting your preferred theme, click “Save Appearance Settings” button
2. The system will:
   • Save the theme preference to the database
   • Update both global and organization-specific settings
   • Close the modal automatically
3. Your theme preference will persist across sessions

---

Notifications Tab

Step 1: Access Notifications Tab

1. Click “Notifications” in the left sidebar
2. The Notifications tab will display

Step 2: Current Status

1. You’ll see a message: “Notification settings coming soon”
2. This feature is currently under development
3. Check back later for notification preferences

Future Features:

• Email notification preferences
• In-app notification settings
• Notification frequency controls

---

Privacy Tab

Step 1: Access Privacy Tab

1. Click “Privacy” in the left sidebar
2. The Privacy tab will display

Step 2: Current Status

1. You’ll see a message: “Privacy settings coming soon”
2. This feature is currently under development
3. Check back later for privacy preferences

Future Features:

• Data sharing preferences
• Privacy controls
• Account visibility settings

---

Logging Out

Step 1: Access Logout Button

1. Locate the “Logout” button at the bottom of the left sidebar
2. The button is red with a logout icon
3. It’s always visible regardless of which tab is active

Step 2: Confirm Logout

1. Click the “Logout” button
2. You will be signed out of your account immediately
3. You’ll be redirected to the login page or home page

Logout Behavior:

• Session is terminated immediately
• All local session data is cleared
• You’ll need to log in again to access your account

---

Key Features Summary

Account Management Features

• Avatar Upload: Upload or change your profile picture
• Username Update: Change your username with validation
• Profile Viewing: View your first name, last name, and email (read-only)

Security Features

• Two-Factor Authentication: Set up 2FA with QR code or manual entry
• 2FA Verification: Verify setup with 6-digit codes
• Password Management: Access password change options (when available)

Preference Management Features

• Profile Role: Select your professional role
• Communication Tone: Adjust between Professional and Casual
• Communication Style: Set style from Serious to Humorous
• Suggestions Toggle: Enable or disable suggested actions

Appearance Features

• Theme Selection: Choose Light, Dark, or Accessible theme
• Real-time Preview: See theme changes immediately
• Persistent Settings: Theme preference saved across sessions

Navigation Features

• Tab Navigation: Easy switching between settings categories
• Direct Tab Access: Open modal to specific tabs
• Quick Close: Click outside or use close button

---

Best Practices

Before Making Changes

1. Review Current Settings: Check your current preferences before changing them
2. Understand Impact: Know how each setting affects your experience
3. Test Changes: Try different settings to find what works best for you

When Setting Up 2FA

1. Use Trusted Device: Set up 2FA on a device you always have access to
2. Backup Codes: Save backup codes if provided
3. Test Setup: Verify 2FA works before closing the modal
4. Keep Authenticator App: Don’t delete your authenticator app after setup

When Adjusting Preferences

1. Start with Defaults: Try default settings first, then adjust as needed
2. Test Communication: Test how tone and style affect AI responses
3. Save Regularly: Click “Save Preferences” after making changes
4. Experiment: Don’t be afraid to try different combinations

When Changing Theme

1. Consider Environment: Choose a theme that works for your lighting conditions
2. Test All Themes: Try each theme to see which you prefer
3. Accessibility: Use the Accessible theme if you have color vision differences

Security Considerations

1. Enable 2FA: Always enable two-factor authentication for better security
2. Unique Username: Choose a username that’s unique but not too personal
3. Regular Updates: Review your security settings periodically
4. Secure Logout: Always log out when using shared devices

---

Troubleshooting

Issue: Modal Won’t Open

Solutions:

• Check that you’re logged in
• Refresh the page and try again
• Clear browser cache
• Try accessing from a different location (header vs sidebar)

Issue: Username Update Fails

Solutions:

• Check username validation rules (letters, spaces, apostrophes, hyphens only)
• Ensure username is at least one character long
• Check for network connectivity
• Try again after a few moments

Issue: Avatar Upload Fails

Solutions:

• Check file format is supported (JPG, PNG, etc.)
• Ensure file size is reasonable
• Try a different image file
• Check network connectivity

Issue: 2FA QR Code Not Generating

Solutions:

• Click “Retry QR Code Generation” button
• Use manual entry key instead
• Check network connectivity
• Refresh the page and try again

Issue: 2FA Verification Fails

Solutions:

• Ensure you’re entering the current 6-digit code (codes refresh every 30 seconds)
• Check that your device time is synchronized
• Wait for a new code and try again
• Verify you scanned the correct QR code
• Try using manual entry key instead

Issue: Preferences Not Saving

Solutions:

• Click “Save Preferences” button explicitly
• Check network connectivity
• Refresh the page and try again
• Verify you have proper permissions

Issue: Theme Not Applying

Solutions:

• Click “Save Appearance Settings” button
• Refresh the page after saving
• Clear browser cache
• Check that theme is supported

Issue: Cannot Switch Tabs (2FA Required)

Solutions:

• Complete 2FA setup first
• You cannot switch tabs until 2FA is enabled
• Follow the 2FA setup process completely
• Contact support if 2FA setup continues to fail

---

Security Notes

• 2FA Protection: Two-factor authentication significantly improves account security
• Username Privacy: Choose usernames that don’t reveal personal information
• Session Management: Always log out when using shared or public devices
• Settings Persistence: All settings are saved to your account and persist across devices
• Audit Logging: Account changes (like username) are logged in the audit trail
• Organization Settings: Some preferences (like theme) can be set per organization

---

Related Features

Integration Points

• Header Integration: Modal accessible from main header
• Sidebar Integration: Modal accessible from chat sidebar
• Admin Integration: Modal accessible from admin pages
• Theme System: Appearance settings integrate with global theme system

Data Storage

• Profile Data: Stored in profiles table
• Preferences: Stored in user settings and user_org_settings table
• Theme: Stored in both global settings and organization-specific settings
• 2FA Secrets: Securely stored in backend database

Audit Logging

• Username Changes: Logged with old and new values
• Role Changes: Logged when profile role is updated
• 2FA Setup: Logged when 2FA is enabled
• Theme Changes: Tracked for analytics

---