Customization of personal account

Add a new tab

igure 1. Additional tab on the personal account page

Using UEAccountSettingsTab you can add new tabs to the personal account page.

The Tab component will be connected via AccountSettingsPageStore, the main task of which is to manage tab switching and store information about changes in the current tab (flag isTabDirty).

If an attempt is made to switch tabs with unsaved data on the current tab (isTabDirty = false), the user will receive a warning window.

UEAccountSettingsTab

import {UeModuleBase, UserInfoType} from '@unidata/core-app';
import {ComponentType} from 'react';
import {AccountSettingsPageStore} from '../../page/user_settings/store/AccountSettingsPageStore';
import {Nullable} from '@unidata/core';

export type UEAccountSettingsTab = UeModuleBase & {
    default: {
        component: ComponentType<{
            store: AccountSettingsPageStore;
        }>;
        resolver: (userData: Nullable<UserInfoType>) => boolean;
        meta: {
           order: number;
           getTabName: () => string;
        };
    };
}

Add a new settings panel

Figure 2. Settings panel

Using UEAccountSettingsPanel you can add an additional settings panel to the "General Settings" tab.

In this case, the UE component will connect via the general account settings tab. A Store is passed to props, which stores information about the current user and provides methods for changing and saving user data.

UEAccountSettingsPanel

import {UeModuleBase, UserInfoType} from '@unidata/core-app';
import {ComponentType} from 'react';
import {AccountGeneralSettingsTabStore} from '../../uemodule/general_account_settings/store/AccountGeneralSettingsTabStore';
import {Nullable} from '@unidata/core';

export type UEAccountSettingsPanel = UeModuleBase & {
    default: {
        component: ComponentType<{
            store: AccountGeneralSettingsTabStore;
        }>;
        resolver: (userData: Nullable<UserInfoType>) => boolean;
        meta: {
           order: number;
        };
    };
}