@abpjs/account 0.7.6

package/LICENSE

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version of
+       the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

package/README.md

@@ -0,0 +1,316 @@
+# @abpjs/account
+
+> Authentication UI components for ABP Framework in React
+
+[![npm version](https://img.shields.io/npm/v/@abpjs/account.svg)](https://www.npmjs.com/package/@abpjs/account)
+[![License: LGPL-3.0](https://img.shields.io/badge/License-LGPL--3.0-blue.svg)](https://www.gnu.org/licenses/lgpl-3.0)
+
+## Overview
+
+`@abpjs/account` provides ready-to-use authentication components for ABP-based React applications. It includes login forms, registration pages, and multi-tenant switching functionality - all styled with Chakra UI and fully customizable.
+
+This package is a React translation of the original `@abp/ng.account` Angular package, bringing the same reliable account management to React developers.
+
+## Features
+
+- **Login Form** - Complete login form with validation and error handling
+- **Registration Form** - User registration with configurable fields
+- **Tenant Switching** - Multi-tenant support with tenant selection UI
+- **Password Flow** - OAuth2 resource owner password flow support
+- **Form Validation** - Built-in validation using Zod schemas
+- **Chakra UI** - Beautiful, accessible components out of the box
+- **Fully Customizable** - Override styles and extend components easily
+- **TypeScript** - Full type safety
+
+## Installation
+
+```bash
+# Using npm
+npm install @abpjs/account
+
+# Using yarn
+yarn add @abpjs/account
+
+# Using pnpm
+pnpm add @abpjs/account
+```
+
+### Required Dependencies
+
+This package requires the following peer dependencies:
+
+```bash
+npm install @abpjs/core @abpjs/theme-shared @chakra-ui/react @emotion/react @emotion/styled framer-motion react-hook-form zod
+```
+
+## Quick Start
+
+### 1. Add Account Routes
+
+The simplest way to use this package is to add the pre-configured routes:
+
+```tsx
+import { accountRoutes } from '@abpjs/account';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+
+const router = createBrowserRouter([
+  ...accountRoutes,
+  // Your other routes
+]);
+
+function App() {
+  return <RouterProvider router={router} />;
+}
+```
+
+### 2. Using Individual Components
+
+#### Login Form
+
+```tsx
+import { LoginForm } from '@abpjs/account';
+
+function LoginPage() {
+  const handleSuccess = () => {
+    // Redirect after successful login
+    navigate('/dashboard');
+  };
+
+  return (
+    <div>
+      <h1>Welcome Back</h1>
+      <LoginForm onSuccess={handleSuccess} />
+    </div>
+  );
+}
+```
+
+#### Registration Form
+
+```tsx
+import { RegisterForm } from '@abpjs/account';
+
+function RegisterPage() {
+  const handleSuccess = () => {
+    // Redirect after successful registration
+    navigate('/login');
+  };
+
+  return (
+    <div>
+      <h1>Create Account</h1>
+      <RegisterForm onSuccess={handleSuccess} />
+    </div>
+  );
+}
+```
+
+#### Tenant Box
+
+```tsx
+import { TenantBox } from '@abpjs/account';
+
+function Header() {
+  return (
+    <header>
+      <TenantBox />
+      {/* Other header content */}
+    </header>
+  );
+}
+```
+
+### 3. Using Pre-built Pages
+
+```tsx
+import { LoginPage, RegisterPage } from '@abpjs/account';
+import { Routes, Route } from 'react-router-dom';
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/register" element={<RegisterPage />} />
+    </Routes>
+  );
+}
+```
+
+## Components
+
+### LoginForm
+
+A complete login form with username/email and password fields.
+
+```tsx
+import { LoginForm } from '@abpjs/account';
+
+<LoginForm
+  onSuccess={() => navigate('/dashboard')}
+  onError={(error) => console.error(error)}
+  showRegisterLink={true}
+  showForgotPassword={true}
+/>
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onSuccess` | `() => void` | - | Callback after successful login |
+| `onError` | `(error: Error) => void` | - | Callback on login error |
+| `showRegisterLink` | `boolean` | `true` | Show link to registration page |
+| `showForgotPassword` | `boolean` | `true` | Show forgot password link |
+
+### RegisterForm
+
+User registration form with validation.
+
+```tsx
+import { RegisterForm } from '@abpjs/account';
+
+<RegisterForm
+  onSuccess={() => navigate('/login')}
+  onError={(error) => console.error(error)}
+  showLoginLink={true}
+/>
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onSuccess` | `() => void` | - | Callback after successful registration |
+| `onError` | `(error: Error) => void` | - | Callback on registration error |
+| `showLoginLink` | `boolean` | `true` | Show link to login page |
+
+### TenantBox
+
+Multi-tenant selection component.
+
+```tsx
+import { TenantBox } from '@abpjs/account';
+
+<TenantBox
+  onTenantChange={(tenant) => console.log('Tenant changed:', tenant)}
+/>
+```
+
+## Hooks
+
+### usePasswordFlow
+
+Hook for implementing OAuth2 resource owner password flow.
+
+```tsx
+import { usePasswordFlow } from '@abpjs/account';
+
+function CustomLoginForm() {
+  const { login, isLoading, error } = usePasswordFlow();
+
+  const handleSubmit = async (data) => {
+    await login({
+      username: data.username,
+      password: data.password,
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {/* Your custom form */}
+    </form>
+  );
+}
+```
+
+## Customization
+
+### Styling with Chakra UI
+
+All components use Chakra UI and can be styled using Chakra's theming system:
+
+```tsx
+import { extendTheme, ChakraProvider } from '@chakra-ui/react';
+
+const theme = extendTheme({
+  components: {
+    Button: {
+      defaultProps: {
+        colorScheme: 'blue',
+      },
+    },
+  },
+});
+
+function App() {
+  return (
+    <ChakraProvider theme={theme}>
+      <LoginForm />
+    </ChakraProvider>
+  );
+}
+```
+
+### Custom Validation
+
+Override validation schemas using Zod:
+
+```tsx
+import { z } from 'zod';
+
+const customLoginSchema = z.object({
+  username: z.string().email('Must be a valid email'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+});
+```
+
+## Multi-Tenancy
+
+The account module fully supports ABP's multi-tenant architecture:
+
+1. **Tenant Selection** - Users can select their tenant before login
+2. **Tenant Header** - Automatically includes tenant header in API requests
+3. **Tenant Persistence** - Remembers selected tenant across sessions
+
+```tsx
+import { TenantBox } from '@abpjs/account';
+
+// Show tenant selector in your app header
+function AppHeader() {
+  return (
+    <header>
+      <Logo />
+      <TenantBox />
+      <UserMenu />
+    </header>
+  );
+}
+```
+
+## Integration with ABP Backend
+
+This package is designed to work seamlessly with ABP Framework backends:
+
+- Compatible with ABP's Identity Server integration
+- Supports ABP's account module API endpoints
+- Works with ABP's multi-tenant system
+
+## Related Packages
+
+- [@abpjs/core](https://www.npmjs.com/package/@abpjs/core) - Core infrastructure (required)
+- [@abpjs/theme-shared](https://www.npmjs.com/package/@abpjs/theme-shared) - Shared UI components (required)
+- [@abpjs/theme-basic](https://www.npmjs.com/package/@abpjs/theme-basic) - Layout components
+- [@abpjs/permission-management](https://www.npmjs.com/package/@abpjs/permission-management) - Permission management
+- [@abpjs/tenant-management](https://www.npmjs.com/package/@abpjs/tenant-management) - Tenant administration
+
+## Contributing
+
+This package is part of the [ABP React](https://github.com/abpjs/abp-react) monorepo. Contributions are welcome!
+
+## License
+
+LGPL-3.0 - See [LICENSE](https://github.com/abpjs/abp-react/blob/main/LICENSE) for details.
+
+---
+
+**[View Full Documentation](https://docs.abpjs.io/docs/packages/account/overview)** | **[Report Issues](https://github.com/abpjs/abp-react/issues)** | **[View Source](https://github.com/abpjs/abp-react/tree/main/packages/account)**

package/dist/components/LoginForm/LoginForm.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Props for LoginForm component
+ */
+export interface LoginFormProps {
+    /**
+     * Whether to show the tenant box
+     * @default true
+     */
+    showTenantBox?: boolean;
+    /**
+     * Whether to show the register link
+     * @default true
+     */
+    showRegisterLink?: boolean;
+    /**
+     * Custom register URL
+     * @default '/account/register'
+     */
+    registerUrl?: string;
+    /**
+     * Callback fired on successful login
+     */
+    onLoginSuccess?: () => void;
+    /**
+     * Callback fired on login error
+     */
+    onLoginError?: (error: string) => void;
+}
+/**
+ * LoginForm - User login form component
+ *
+ * This is the React equivalent of Angular's LoginComponent.
+ * It handles user authentication using OAuth password flow.
+ *
+ * @example
+ * ```tsx
+ * function LoginPage() {
+ *   return (
+ *     <LoginForm
+ *       showTenantBox={true}
+ *       onLoginSuccess={() => console.log('Logged in!')}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function LoginForm({ showTenantBox, showRegisterLink, registerUrl, onLoginSuccess, onLoginError, }: LoginFormProps): import("react/jsx-runtime").JSX.Element;
+export default LoginForm;

package/dist/components/LoginForm/image-placeholder.d.ts

@@ -0,0 +1 @@
+export declare const ImagePlaceholder: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/LoginForm/index.d.ts

@@ -0,0 +1,2 @@
+export { LoginForm, type LoginFormProps } from './LoginForm';
+export { LoginForm as default } from './LoginForm';

package/dist/components/RegisterForm/RegisterForm.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Props for RegisterForm component
+ */
+export interface RegisterFormProps {
+    /**
+     * Whether to show the tenant box
+     * @default true
+     */
+    showTenantBox?: boolean;
+    /**
+     * Whether to show the login link
+     * @default true
+     */
+    showLoginLink?: boolean;
+    /**
+     * Custom login URL
+     * @default '/account/login'
+     */
+    loginUrl?: string;
+    /**
+     * Callback fired on successful registration
+     */
+    onRegisterSuccess?: () => void;
+    /**
+     * Callback fired on registration error
+     */
+    onRegisterError?: (error: string) => void;
+}
+/**
+ * RegisterForm - User registration form component
+ *
+ * This is the React equivalent of Angular's RegisterComponent.
+ *
+ * Note: In v0.7.6, the onSubmit only validates the form but does not
+ * make an API call. This matches the Angular implementation.
+ *
+ * @example
+ * ```tsx
+ * function RegisterPage() {
+ *   return (
+ *     <RegisterForm
+ *       showTenantBox={true}
+ *       onRegisterSuccess={() => console.log('Registered!')}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function RegisterForm({ showTenantBox, showLoginLink, loginUrl, onRegisterSuccess, onRegisterError: _onRegisterError, }: RegisterFormProps): import("react/jsx-runtime").JSX.Element;
+export default RegisterForm;

package/dist/components/RegisterForm/index.d.ts

@@ -0,0 +1,2 @@
+export { RegisterForm, type RegisterFormProps } from './RegisterForm';
+export { RegisterForm as default } from './RegisterForm';

package/dist/components/TenantBox/TenantBox.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+/**
+ * Props for TenantBox component
+ */
+export interface TenantBoxProps {
+    /**
+     * Custom styles for the container
+     */
+    containerStyle?: React.CSSProperties;
+}
+/**
+ * TenantBox - Multi-tenant switching component
+ *
+ * Displays the currently selected tenant and allows users to switch tenants.
+ * This is a direct translation of Angular's TenantBoxComponent.
+ *
+ * Note: In v0.7.6, this component stores the tenant selection locally
+ * and does not integrate with the backend tenant resolution API.
+ */
+export declare function TenantBox({ containerStyle }: TenantBoxProps): import("react/jsx-runtime").JSX.Element;
+export default TenantBox;

package/dist/components/TenantBox/index.d.ts

@@ -0,0 +1,2 @@
+export { TenantBox, type TenantBoxProps } from './TenantBox';
+export { TenantBox as default } from './TenantBox';

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { TenantBox, type TenantBoxProps } from './TenantBox';
+export { LoginForm, type LoginFormProps } from './LoginForm';
+export { RegisterForm, type RegisterFormProps } from './RegisterForm';

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { usePasswordFlow, type PasswordFlowOptions } from './usePasswordFlow';
+export { useAccountOptions } from '../providers';

package/dist/hooks/usePasswordFlow.d.ts

@@ -0,0 +1,27 @@
+import type { PasswordFlowResult } from '../models';
+/**
+ * Options for password flow login
+ */
+export interface PasswordFlowOptions {
+    /**
+     * If true, store tokens in localStorage (persistent)
+     * If false, store in sessionStorage (session only)
+     * @default false
+     */
+    remember?: boolean;
+}
+/**
+ * Hook for OAuth Resource Owner Password Credentials (ROPC) flow
+ *
+ * This hook provides password-based authentication, which is used by the
+ * login form to authenticate users with username and password.
+ *
+ * Note: ROPC flow is considered legacy by OAuth 2.1 but is still used
+ * in many enterprise scenarios where the client is trusted.
+ */
+export declare function usePasswordFlow(): {
+    login: (username: string, password: string, flowOptions?: PasswordFlowOptions) => Promise<PasswordFlowResult>;
+    isLoading: boolean;
+    error: string | null;
+    clearError: () => void;
+};

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @abpjs/account
+ * ABP Framework Account module for React
+ * Translated from @abp/ng.account v0.7.6
+ */
+export * from './models';
+export * from './providers';
+export * from './hooks';
+export * from './components';
+export * from './pages';
+export * from './routes';