Profile Settings

Manage your personal information, security settings, and organization details in your Scriptix profile.

Overview

The Profile page contains all personal and organization settings, security features, and account management options. Access it by navigating to Profile in the main navigation.

Accessing Profile Settings

Navigation:

1. Log in to Scriptix
2. Click Profile in navigation menu
3. Profile page opens with all sections

Profile Sections:

• Account Details
• Password Change
• Organization Details (ADMIN/SYSOP only to edit)
• Security Settings (2FA)
• Account Personalization (Export Templates)
• Keymap Settings (Keyboard Shortcuts)
• Danger Zone (Delete Account Settings)

Page Structure:

• Single page with all sections
• No tabs (all sections visible by scrolling)
• Forms with independent save buttons

Account Details

Personal Information

Editable Fields:

Field	Description	Required
First Name	Your given name	Yes
Last Name	Your family name	Yes
Email	Account email address	Yes
Newsletter	Receive updates via email	Optional

Update Account Details:

1. Navigate to Account Details section (top of profile page)
2. Update first name or last name
3. Update email address
4. Toggle newsletter subscription (checkbox)
5. Click Update button (only enabled when changes made)
6. Success toast: "Account details updated successfully"

Form Validation:

• First name is required
• Last name is required
• Valid email address required
• Email format validation

Update Button:

• Disabled until changes are made (isAccountDirty check)
• Shows save icon (16px width)
• Variant: secondary
• Label: "Update"
• Type: submit

Newsletter Subscription:

• Checkbox control
• Label: "Get newsletter updates"
• Can toggle anytime
• Included in form submission

Password Management

Change Password Button:

• Located in Account Details section
• Button label: "Change password"
• Size: medium
• Variant: text
• Full width button
• Opens password change modal

Password Change Modal:

Modal Properties:

• Size: small
• Title: "New password"
• Caption: "Change your password here"
• Footer actions: Update and Cancel buttons

Password Form Fields:

Field	Description
Current Password	Old password for verification
New Password	New password (meets requirements)
Confirm New Password	Re-type new password (must match)

Password Requirements:

• Minimum 12 characters
• At least 1 uppercase letter (A-Z)
• At least 1 lowercase letter (a-z)
• At least 1 number (0-9)
• Validation messages for each requirement

Validation Messages:

• "Old password is required"
• "New password is required"
• "Password must be at least 12 characters"
• "Password must have at least one uppercase letter"
• "Password must have at least one lowercase letter"
• "Password must have at least one number"
• "Confirm password is required"
• "Passwords must match"

Change Password Process:

1. Click "Change password" button
2. Modal opens with 3 input fields
3. Enter current password
4. Enter new password (meets requirements)
5. Confirm new password (must match)
6. Click Update button
7. Button disabled until form is dirty
8. Loading state: button label "Updating..."
9. Success toast: "Password changed successfully"
10. Modal closes automatically
11. Form resets

Update Button in Modal:

• Disabled if form not dirty (!isPasswordDirty)
• Label: "Updating..." when submitting, "Update" otherwise
• Type: button
• Variant: primary

Cancel Button:

• Closes modal without saving
• Variant: secondary
• Label: "Cancel"

Organization Details

Organization Information

Organization details can be viewed by all users but only edited by ADMIN and SYSOP roles.

Access Control Check:

const userRoles = (user?.result?.roles ?? []) as unknown as string[];
const isAdmin = userRoles.includes('admin') || userRoles.includes('sysop');

Organization Fields:

Field	Description	Required
Name	Organization name	Yes
Email	Organization contact email	Yes
Phone	International phone number (E.164 format)	Optional
Street Address	Address street	Yes
City	Address city	Optional
Postal Code	Address postal code	Optional
Country	Country selection dropdown	Optional
Billing VAT	VAT/Tax ID number	Yes

Update Organization:

1. Navigate to Organization Details section (if ADMIN/SYSOP)
2. Edit fields as needed
3. Click Update button (only enabled when changes made)
4. Success toast: "Organization details updated successfully"

Phone Validation:

• Optional field
• If provided, must be valid international format (E.164)
• Uses libphonenumber-js for validation
• Error: "Enter a valid international phone number"

Default Settings

Diarization:

• Checkbox labeled "Separate speakers"
• Default value for new transcription uploads
• Can be overridden per upload
• Variant: primary

Magic Link Export:

• Checkbox labeled "Allow magic link export"
• Default value: true (checked)
• Controls organization-wide magic link export permission
• Description text below checkbox
• Variant: primary

Branding (Reseller Only)

Resellers can customize branding with logo and brand color. See Organization Settings for detailed branding documentation.

Branding Section:

• Only visible for RESELLER role users
• Logo upload with immediate save
• Brand color picker
• Delete logo button

Security Settings

Two-Factor Authentication (2FA)

2FA Status Display:

• Section title: "Security settings"
• Status label: "2FA settings"
• Green text: "2FA enabled" (if active)
• Red text: "2FA disabled" (if inactive)

Enable 2FA:

Step 1: Click Activate Button

1. Click Activate 2FA button (smoke variant, small size)
2. QR code component displays below button

Step 2: Scan QR Code

1. QR code fetched from API
2. Open authenticator app on phone
3. Scan QR code displayed
4. App generates 6-digit codes

Step 3: Verify Code

1. Input field appears next to QR code
2. Enter 6-digit code from authenticator app
3. Input properties:
   • Type: text
   • inputMode: numeric
   • pattern: [0-9]*
   • autoComplete: one-time-code
4. Click Verify button (primary variant)

Step 4: Backup Codes Modal

1. Verification successful
2. Success toast: "2FA enabled"
3. Backup codes modal opens automatically
4. Title: "Backup codes"
5. Caption: "Don't lose these codes"

Backup Codes Display:

• List of backup codes (numbered 1, 2, 3...)
• Each code displayed with index
• Font: medium weight

Download Backup Codes:

1. Click Download codes button
2. Creates text file blob
3. Downloads as "backup-codes.txt"
4. Format: One code per line
5. Toast: "Backup codes downloaded"
6. Modal automatically closes after download

Modal Footer Actions:

• Close window button (smoke variant)
• Download codes button (primary variant)

Deactivate 2FA:

1. Status shows "2FA enabled" in green
2. Click Deactivate 2FA button (danger variant, red)
3. Input field appears
4. Enter 6-digit code OR backup code
5. Placeholder: "2FA or recovery code"
6. Click Deactivate button (danger variant)
7. Success toast: "2FA disabled"
8. User queries invalidated

Error Handling:

• Error toast format: "2FA error: [error_description]"
• Falls back to error message if no description
• User profile refreshed on success/error

Account Personalization

Export templates for customizing document exports. See User Preferences for detailed documentation.

Features:

• View existing export templates
• Add new templates (EXPORT_TEMPLATE or SUMMARIZATION)
• Edit templates (ORGADMIN only)
• Download template files (DOCX/PDF)
• Delete templates

Keymap Settings

Keyboard shortcuts for transcript editor. See User Preferences for detailed documentation.

Features:

• View existing keyboard shortcuts
• Add custom shortcuts (up to 3 keys)
• Key combination capture
• Delete shortcuts

Danger Zone

Account management section with destructive actions.

Section Header

Display:

• Title: "Danger zone" (red text, font-semibold)
• Border-top separator
• Subsection: "User account settings"

Deactivate Account

What It Does:

• Temporarily disables your account
• Cannot log in while deactivated
• Data preserved
• Reversible (contact support to reactivate)

Deactivate Process:

1. Click Deactivate Account button (danger variant, red)
2. Confirmation modal opens
3. Title: "Deactivate account confirmation"
4. Caption: "Are you sure you want to deactivate your account? You will not be able to recover it without contacting support."
5. Modal size: small
6. Footer actions: Cancel (smoke) and Deactivate (primary)

Confirmation:

1. Review warning
2. Click Deactivate to confirm
3. Button label changes to "Deactivating..." when processing
4. Success toast: "Account deactivated successfully"
5. Modal closes
6. Account immediately deactivated

Modal Properties:

• Disabled buttons during processing (isDeactivating state)
• Cancel button available
• Auto-closes on success

Delete Account

What It Does:

• Permanently deletes your user account
• Cannot be undone
• Personal data removed

Delete Process:

1. Click Delete Account button (danger variant, red)
2. Confirmation modal opens
3. Title: "Delete account confirmation"
4. Caption: "Are you sure you want to delete your account? This action cannot be undone."
5. Modal size: small

Confirmation:

1. Review warning carefully
2. Click Delete to confirm
3. 300ms delay for user consideration
4. Button label: "Deleting..." when processing
5. Success toast: "Account deleted successfully"
6. Account permanently removed

Important Note:

• Line 136 in delete-account-settings.tsx shows "Delete Account" button actually calls setDeleteOrgAccountConfirmation(true)
• This appears to be a bug - the button labeled "Delete Account" opens organization deletion modal
• The deleteAccountConfirmation modal (lines 189-215) exists but is never triggered

Delete Organization (ADMIN Only)

Access Control:

• Only shown if user has ADMIN or SYSOP role
• Section: "Organization account settings"
• Separate from user account deletion

What It Does:

• Deletes entire organization
• Removes all organization users
• Deletes all organization data
• Extremely destructive - cannot be undone

Delete Process:

1. Click Delete Organization button (danger variant, red)
2. Confirmation modal opens
3. Title: "Delete organization account confirmation"
4. Caption: "Are you sure you want to delete your organization account? This action will delete everything in your account and other user accounts in this organization and this action cannot be undone."
5. Modal size: small

Confirmation:

1. Review critical warning
2. Understand all users and data will be deleted
3. Click Delete to confirm
4. 300ms delay
5. Button label: "Deleting..." when processing
6. Success toast: "Account deleted successfully"
7. Organization permanently removed

Organization Deletion Details:

• Requires organization ID
• Calls DELETE endpoint with org ID
• All users in organization deleted
• All documents and data deleted
• Cannot be reversed

Component Structure

The Profile page is composed of multiple components:

Main Components:

1. AccountDetailsForm - Personal information
2. PasswordForm - Password change modal
3. OrganizationDetailsForm - Organization details (ADMIN/SYSOP only to edit)
4. SecuritySettings - 2FA management
5. AccountPersonalization - Export templates
6. Keymap - Keyboard shortcuts
7. DeleteAccountSettings - Danger zone

Component Order: Components render in this order on the page, each as a separate section.

Form Management

React Hook Form:

• All forms use react-hook-form for state management
• Yup schema validation
• isDirty state for save button enablement
• Error display below each field

Account Form:

• Schema: accountDetailsSchema
• Fields: first_name, last_name, email, newsletter
• Submit: updateMe mutation

Organization Form:

• Schema: organizationSchema
• Fields: name, email, phone, address fields, billing_vat, diarization, allow_magic_link_export, reseller_branding
• Submit: updateOrganization mutation

Password Form:

• Schema: passwordSchema (min 12 chars, uppercase, lowercase, number)
• Fields: old_password, new_password, confirm_new_password
• Submit: changePassword mutation

Error Handling

Toast Notifications:

• Success toasts in green
• Error toasts in red
• Loading states shown in button labels

Error Message Priority:

1. detail array from response (field-specific)
2. message field
3. error_description field
4. Fallback message from translations

Example Error Handling:

if (Array.isArray(data?.detail)) {
  messages = data.detail.map((err: any) => {
    const field = err.loc?.[1] ?? 'field';
    return `${field}: ${err.msg}`;
  });
} else if (data?.message) {
  messages = [data.message];
} else if (data?.error_description) {
  messages = [data.error_description];
} else {
  messages = [fallbackMessage];
}

---

Keep your profile current! Update information, enable security features, and manage account settings for optimal experience.

Next Steps

Manage your account:

• API Keys - Generate API tokens for integrations
• Billing & Subscription - Manage payments and plans
• Usage & Limits - Track your usage and quotas
• User Preferences - Customize your experience