@lsw-abpvue/account

@lsw-abpvue/account

Login, registration, password recovery and the profile page for Lsw.Abp.VueUI, an unofficial Vue UI for the ABP Framework.

pnpm add @lsw-abpvue/account

// main.ts: the menu entries, the profile link, at startup
import { provideAccountConfig } from '@lsw-abpvue/account/config';
import { provideManageProfileTabs } from '@lsw-abpvue/account';

provideAccountConfig();
provideManageProfileTabs();

// routes.ts: the pages, on the first navigation into /account
lazyRoutes('/account', () =>
  import('@lsw-abpvue/account').then(module => module.createAccountRoutes()),
);

provideAccountConfig() also points NAVIGATE_TO_MANAGE_PROFILE at /account/manage, so the user menu opens the profile page inside the application instead of the identity server's own.

The pages

Every page but the last is behind authenticationFlowGuard. With the authorization code flow the identity server owns them, and asking for one here hands over to it — except the reset password page, which is reached from a mail whatever the flow is.

Adding a tab to the profile page

The tabs are a tree in @lsw-abpvue/account-core, so a module adds one:

inject(ManageProfileTabsService).add([
  { name: 'MyModule.SecurityLog', text: 'MyModule::SecurityLog', component: SecurityLog, order: 3 },
]);

The module's own two are registered by provideManageProfileTabs() under ManageProfileTabs.ChangePassword and ManageProfileTabs.PersonalSettings, so they can be removed or reordered by name.

Configuration

createAccountRoutes({
  redirectUrl: '/books',
  appName: 'Vue',
  isPersonalSettingsChangedConfirmationActive: true,
  editFormPropContributors: { [AccountComponents.PersonalSettings]: [addAField] },
});

appName is the name ABP builds the password reset link for. It has to be one the backend registered in AppUrlOptions.Applications; ABP's own Angular UI sends Angular, and a backend that has never heard of the name cannot send the mail.

Compared with the Angular UI

Same component keys, same routes, same localization keys. What differs:

Registered in the design documents' api-parity-map.md.

Licence

MIT.