ABP Framework Account Pro module for React - Translation of @volo/abp.ng.account
npm install @abpjs/account-pro@abpjs/account-pro provides enhanced authentication and account management components for ABP-based React applications. It extends the basic account module with advanced features like password reset, profile management, and personal settings.
@volo/abp.ng.account Angular package, bringing pro-level account management to React applications.
bash
Using npm
npm install @abpjs/account-pro
Using yarn
yarn add @abpjs/account-pro
Using pnpm
pnpm add @abpjs/account-pro
`
$3
This package requires the following peer dependencies:
`bash
npm install @abpjs/core @abpjs/theme-shared @chakra-ui/react @emotion/react react-hook-form zod @hookform/resolvers react-icons
`
Quick Start
$3
`tsx
import {
LoginForm,
RegisterForm,
ForgotPasswordForm,
ResetPasswordForm,
ChangePasswordForm,
ManageProfile,
PersonalSettings
} from '@abpjs/account-pro';
import { Routes, Route } from 'react-router-dom';
function App() {
return (
} />
} />
} />
} />
} />
} />
} />
);
}
`
$3
#### Login Form
`tsx
import { LoginForm } from '@abpjs/account-pro';
function LoginPage() {
const handleSuccess = () => {
navigate('/dashboard');
};
return (
Welcome Back
);
}
`
#### Forgot Password
`tsx
import { ForgotPasswordForm } from '@abpjs/account-pro';
function ForgotPasswordPage() {
return (
Forgot Password
onSuccess={() => console.log('Reset email sent!')}
/>
);
}
`
#### Change Password
`tsx
import { ChangePasswordForm } from '@abpjs/account-pro';
function ChangePasswordPage() {
return (
Change Password
onSuccess={() => console.log('Password changed!')}
/>
);
}
`
Components
$3
Enhanced login form with username/email and password fields.
`tsx
import { LoginForm } from '@abpjs/account-pro';
onSuccess={() => navigate('/dashboard')}
onError={(error) => console.error(error)}
showRegisterLink={true}
showForgotPassword={true}
/>
`
$3
User registration form with validation.
`tsx
import { RegisterForm } from '@abpjs/account-pro';
onSuccess={() => navigate('/login')}
onError={(error) => console.error(error)}
/>
`
$3
Request password reset via email.
`tsx
import { ForgotPasswordForm } from '@abpjs/account-pro';
onSuccess={() => console.log('Email sent')}
onError={(error) => console.error(error)}
/>
`
$3
Reset password using token from email.
`tsx
import { ResetPasswordForm } from '@abpjs/account-pro';
onSuccess={() => navigate('/login')}
onError={(error) => console.error(error)}
/>
`
$3
Change password for authenticated users.
`tsx
import { ChangePasswordForm } from '@abpjs/account-pro';
onSuccess={() => console.log('Password changed')}
onError={(error) => console.error(error)}
/>
`
$3
Profile management component.
`tsx
import { ManageProfile } from '@abpjs/account-pro';
onProfileUpdated={(profile) => console.log('Updated:', profile)}
/>
`
$3
User personal settings management.
`tsx
import { PersonalSettings } from '@abpjs/account-pro';
`
$3
Multi-tenant selection component.
`tsx
import { TenantBox } from '@abpjs/account-pro';
onTenantChange={(tenant) => console.log('Tenant changed:', tenant)}
/>
`
Hooks
$3
Hook for implementing OAuth2 resource owner password flow.
`tsx
import { usePasswordFlow } from '@abpjs/account-pro';
function CustomLoginForm() {
const { login, isLoading, error } = usePasswordFlow();
const handleSubmit = async (data) => {
await login({
username: data.username,
password: data.password,
});
};
return (
);
}
`
$3
Hook for account pro API operations.
`tsx
import { useAccountProService } from '@abpjs/account-pro';
function MyComponent() {
const service = useAccountProService();
const handleForgotPassword = async (email: string) => {
await service.sendPasswordResetCode({ email });
};
const handleResetPassword = async (data) => {
await service.resetPassword({
userId: data.userId,
resetToken: data.token,
password: data.newPassword,
});
};
}
``