Implementation:FlowiseAI Flowise AccountView
| Knowledge Sources | |
|---|---|
| Domains | Views, Account Management, Subscription, User Profile |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
AccountSettings is the main account management view that provides user profile editing, password changes, subscription plan management with seat allocation, usage monitoring, and billing portal access for the Flowise cloud platform.
Description
This view component combines multiple account management sections into a single page. It displays editable profile fields (name, email), a password change form with validation, and cloud-specific sections including current plan display with upgrade capability, usage statistics (predictions and storage) with progress bars, seat management with add/remove dialogs featuring proration previews, and billing portal integration. The component fetches user data, pricing plans, seat quantities, and usage metrics from their respective APIs and uses Redux for state management and snackbar notifications.
Usage
Use this component as the route handler for the account settings page. It is accessible to authenticated users and adapts its display based on whether the instance is running in cloud mode (showing subscription and billing features) or self-hosted mode (showing only profile management).
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/account/index.jsx
- Lines: 1-1388
Signature
const AccountSettings = () => { ... }
export default AccountSettings
Import
import AccountSettings from '@/views/account'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (none) | -- | -- | This is a route-level view component with no props; it reads current user from Redux store (state.auth.user) and config context (isCloud)
|
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered UI | JSX.Element | Full account settings page with profile form, password form, plan details, usage metrics, seat management dialogs, and billing access |
Key Internal State
- profileName / email -- Editable user profile fields loaded from
getUserByIdApi - oldPassword / newPassword / confirmPassword -- Password change form state with validation via
validatePassword - usage -- Object containing predictions and storage usage data with limits
- predictionsUsageInPercent / storageUsageInPercent -- Memoized percentage calculations for usage progress bars
- includedSeats / purchasedSeats / occupiedSeats / totalSeats -- Seat allocation tracking for the organization
- seatsQuantity / prorationInfo -- State for the add/remove seats dialogs with proration preview
- openPricingDialog / openRemoveSeatsDialog / openAddSeatsDialog -- Dialog visibility toggles
- currentPlanTitle -- Memoized current plan name derived from pricing plans API data
Key API Integrations
- userApi.getUserById -- Fetches user profile data
- pricingApi.getPricingPlans -- Fetches available pricing plans
- userApi.getAdditionalSeatsQuantity -- Gets current seat allocation for the organization
- userApi.getAdditionalSeatsProration -- Previews proration cost for seat changes
- userApi.getCurrentUsage -- Fetches predictions and storage usage metrics
- accountApi.getBillingData -- Opens the Stripe billing portal
- accountApi.logout -- Handles user logout
Usage Examples
Basic Usage
// In router configuration
import AccountSettings from '@/views/account'
<Route path="/account" element={<AccountSettings />} />