@abpjs/account 0.8.0 → 0.9.0

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

@@ -31,8 +31,10 @@ export interface RegisterFormProps {
  *
  * 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.
+ * In v0.9.0, this component now makes API calls for registration using
+ * AccountService and automatically logs in the user after successful registration.
+ *
+ * @since 0.9.0 - Now uses AccountService for registration
  *
  * @example
  * ```tsx
@@ -46,5 +48,5 @@ export interface RegisterFormProps {
  * }
  * ```
  */
-export declare function RegisterForm({ showTenantBox, showLoginLink, loginUrl, onRegisterSuccess, onRegisterError: _onRegisterError, }: RegisterFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function RegisterForm({ showTenantBox, showLoginLink, loginUrl, onRegisterSuccess, onRegisterError, }: RegisterFormProps): import("react/jsx-runtime").JSX.Element;
 export default RegisterForm;

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

@@ -14,8 +14,10 @@ export interface TenantBoxProps {
  * 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.
+ * In v0.9.0, this component integrates with the backend tenant resolution API
+ * and properly updates the session state.
+ *
+ * @since 0.9.0 - Now uses AccountService for tenant lookup
  */
 export declare function TenantBox({ containerStyle }: TenantBoxProps): import("react/jsx-runtime").JSX.Element;
 export default TenantBox;

package/dist/hooks/index.d.ts

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

package/dist/hooks/useAccountService.d.ts

@@ -0,0 +1,27 @@
+import { AccountService } from '../services/account.service';
+/**
+ * Hook to access the AccountService
+ *
+ * Provides account-related API operations like tenant lookup and registration.
+ *
+ * @returns AccountService instance
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const accountService = useAccountService();
+ *
+ *   const handleFindTenant = async (name: string) => {
+ *     const result = await accountService.findTenant(name);
+ *     if (result.success) {
+ *       console.log('Found tenant:', result.tenantId);
+ *     }
+ *   };
+ *
+ *   return <button onClick={() => handleFindTenant('myTenant')}>Find</button>;
+ * }
+ * ```
+ *
+ * @since 0.9.0
+ */
+export declare function useAccountService(): AccountService;

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 /**
  * @abpjs/account
  * ABP Framework Account module for React
- * Translated from @abp/ng.account v0.8.0
+ * Translated from @abp/ng.account v0.9.0
  */
 export * from './models';
+export * from './services';
 export * from './providers';
 export * from './hooks';
 export * from './components';

package/dist/index.js

@@ -23,6 +23,7 @@ __export(index_exports, {
   ACCOUNT_PATHS: () => ACCOUNT_PATHS,
   ACCOUNT_ROUTES: () => ACCOUNT_ROUTES,
   AccountProvider: () => AccountProvider,
+  AccountService: () => AccountService,
   DEFAULT_REDIRECT_URL: () => DEFAULT_REDIRECT_URL,
   LoginForm: () => LoginForm,
   LoginPage: () => LoginPage,
@@ -31,10 +32,42 @@ __export(index_exports, {
   TenantBox: () => TenantBox,
   useAccountContext: () => useAccountContext,
   useAccountOptions: () => useAccountOptions,
+  useAccountService: () => useAccountService,
   usePasswordFlow: () => usePasswordFlow
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/services/account.service.ts
+var AccountService = class {
+  constructor(rest) {
+    this.rest = rest;
+  }
+  /**
+   * Find a tenant by name
+   *
+   * @param tenantName - The name of the tenant to find
+   * @returns Promise resolving to TenantIdResponse
+   */
+  findTenant(tenantName) {
+    return this.rest.get(
+      `/api/abp/multi-tenancy/tenants/by-name/${tenantName}`
+    );
+  }
+  /**
+   * Register a new user
+   *
+   * @param body - The registration request data
+   * @returns Promise resolving to RegisterResponse
+   */
+  register(body) {
+    return this.rest.post(
+      "/api/account/register",
+      body,
+      { skipHandleError: true }
+    );
+  }
+};
+
 // src/providers/AccountProvider.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -173,40 +206,80 @@ function usePasswordFlow() {
   };
 }
 
-// src/components/TenantBox/TenantBox.tsx
+// src/hooks/useAccountService.ts
 var import_react3 = require("react");
-var import_react_hook_form = require("react-hook-form");
 var import_core2 = require("@abpjs/core");
+function useAccountService() {
+  const restService = (0, import_core2.useRestService)();
+  return (0, import_react3.useMemo)(() => new AccountService(restService), [restService]);
+}
+
+// src/components/TenantBox/TenantBox.tsx
+var import_react4 = require("react");
+var import_react_redux = require("react-redux");
+var import_core3 = require("@abpjs/core");
 var import_theme_shared = require("@abpjs/theme-shared");
-var import_react4 = require("@chakra-ui/react");
+var import_react5 = require("@chakra-ui/react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function TenantBox({ containerStyle }) {
-  const { t } = (0, import_core2.useLocalization)();
-  const [selected, setSelected] = (0, import_react3.useState)(null);
-  const [modalVisible, setModalVisible] = (0, import_react3.useState)(false);
-  const { register, handleSubmit, reset } = (0, import_react_hook_form.useForm)({
-    defaultValues: {
-      name: ""
-    }
-  });
-  const openModal = (0, import_react3.useCallback)(() => {
-    reset({ name: selected?.name || "" });
-    setModalVisible(true);
-  }, [selected, reset]);
-  const onSwitch = (0, import_react3.useCallback)(() => {
-    setSelected(null);
-    openModal();
-  }, [openModal]);
-  const onSave = (0, import_react3.useCallback)((data) => {
-    setSelected(data.name ? data : null);
-    setModalVisible(false);
-  }, []);
-  const onClose = (0, import_react3.useCallback)(() => {
-    setModalVisible(false);
+  const { t } = (0, import_core3.useLocalization)();
+  const dispatch = (0, import_react_redux.useDispatch)();
+  const accountService = useAccountService();
+  const toaster = (0, import_theme_shared.useToaster)();
+  const currentTenant = (0, import_react_redux.useSelector)(import_core3.selectTenant);
+  const [tenantName, setTenantName] = (0, import_react4.useState)("");
+  const [isModalVisible, setIsModalVisible] = (0, import_react4.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    setTenantName(currentTenant?.name || "");
+  }, [currentTenant]);
+  const onSwitch = (0, import_react4.useCallback)(() => {
+    setIsModalVisible(true);
   }, []);
+  const save = (0, import_react4.useCallback)(async () => {
+    if (tenantName) {
+      setIsLoading(true);
+      try {
+        const { success, tenantId } = await accountService.findTenant(tenantName);
+        if (success) {
+          const newTenant = {
+            id: tenantId,
+            name: tenantName
+          };
+          dispatch(import_core3.sessionActions.setTenant(newTenant));
+          setIsModalVisible(false);
+        } else {
+          toaster.error(
+            t("AbpUiMultiTenancy::GivenTenantIsNotAvailable", tenantName) || `Tenant "${tenantName}" is not available`,
+            t("AbpUi::Error") || "Error"
+          );
+          setTenantName("");
+        }
+      } catch (err) {
+        const errorMessage = err?.error?.error_description || err?.error?.error?.message || t("AbpUi::DefaultErrorMessage") || "An error occurred";
+        toaster.error(errorMessage, t("AbpUi::Error") || "Error");
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      dispatch(import_core3.sessionActions.setTenant({ id: "", name: "" }));
+      setIsModalVisible(false);
+    }
+  }, [tenantName, accountService, dispatch, toaster, t]);
+  const onClose = (0, import_react4.useCallback)(() => {
+    setTenantName(currentTenant?.name || "");
+    setIsModalVisible(false);
+  }, [currentTenant]);
+  const handleSubmit = (0, import_react4.useCallback)(
+    (e) => {
+      e.preventDefault();
+      save();
+    },
+    [save]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      import_react4.Box,
+      import_react5.Box,
       {
         className: "tenant-switch-box",
         bg: "gray.100",
@@ -217,15 +290,15 @@ function TenantBox({ containerStyle }) {
         borderRadius: "md",
         style: containerStyle,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react4.Text, { as: "span", color: "gray.600", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react5.Text, { as: "span", color: "gray.600", children: [
             t("AbpUiMultiTenancy::Tenant"),
             ":",
             " "
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Text, { as: "strong", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Text, { as: "i", children: selected?.name || t("AbpUiMultiTenancy::NotSelected") }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react5.Text, { as: "strong", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react5.Text, { as: "i", children: currentTenant?.name || t("AbpUiMultiTenancy::NotSelected") }) }),
           " (",
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_react4.Link,
+            import_react5.Link,
             {
               id: "abp-tenant-switch-link",
               color: "gray.700",
@@ -242,20 +315,41 @@ function TenantBox({ containerStyle }) {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_theme_shared.Modal,
       {
-        visible: modalVisible,
-        onVisibleChange: setModalVisible,
+        visible: isModalVisible,
+        onVisibleChange: setIsModalVisible,
         size: "md",
         header: t("AbpUiMultiTenancy::SwitchTenant") || "Switch Tenant",
         footer: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_theme_shared.Button, { variant: "ghost", colorPalette: "gray", onClick: onClose, children: t("AbpTenantManagement::Cancel") }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_theme_shared.Button, { colorPalette: "blue", onClick: handleSubmit(onSave), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}),
-            t("AbpTenantManagement::Save")
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            import_theme_shared.Button,
+            {
+              colorPalette: "blue",
+              onClick: save,
+              loading: isLoading,
+              loadingText: t("AbpTenantManagement::Save"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}),
+                t("AbpTenantManagement::Save")
+              ]
+            }
+          )
         ] }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("form", { onSubmit: handleSubmit(onSave), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react4.VStack, { gap: 4, align: "stretch", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_theme_shared.FormField, { label: t("AbpUiMultiTenancy::Name"), htmlFor: "tenant-name", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Input, { id: "tenant-name", type: "text", ...register("name") }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Text, { fontSize: "sm", color: "gray.600", children: t("AbpUiMultiTenancy::SwitchTenantHint") })
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react5.VStack, { gap: 4, align: "stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react5.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react5.Text, { as: "label", mb: 1, display: "block", children: t("AbpUiMultiTenancy::Name") }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_react5.Input,
+              {
+                id: "tenant-name",
+                type: "text",
+                value: tenantName,
+                onChange: (e) => setTenantName(e.target.value),
+                autoFocus: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react5.Text, { fontSize: "sm", color: "gray.600", children: t("AbpUiMultiTenancy::SwitchTenantHint") })
         ] }) })
       }
     )
@@ -280,14 +374,14 @@ function CheckIcon() {
 }
 
 // src/components/LoginForm/LoginForm.tsx
-var import_react_hook_form2 = require("react-hook-form");
+var import_react_hook_form = require("react-hook-form");
 var import_zod = require("@hookform/resolvers/zod");
 var import_zod2 = require("zod");
 var import_react_router_dom2 = require("react-router-dom");
-var import_core3 = require("@abpjs/core");
+var import_core4 = require("@abpjs/core");
 var import_theme_shared2 = require("@abpjs/theme-shared");
-var import_react5 = require("@chakra-ui/react");
 var import_react6 = require("@chakra-ui/react");
+var import_react7 = require("@chakra-ui/react");
 var import_lu = require("react-icons/lu");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var loginSchema = import_zod2.z.object({
@@ -302,13 +396,13 @@ function LoginForm({
   onLoginSuccess,
   onLoginError
 }) {
-  const { t } = (0, import_core3.useLocalization)();
+  const { t } = (0, import_core4.useLocalization)();
   const { login, isLoading, error, clearError } = usePasswordFlow();
   const {
     register,
     handleSubmit,
     formState: { errors, isSubmitting }
-  } = (0, import_react_hook_form2.useForm)({
+  } = (0, import_react_hook_form.useForm)({
     resolver: (0, import_zod.zodResolver)(loginSchema),
     defaultValues: {
       username: "",
@@ -328,16 +422,16 @@ function LoginForm({
     }
   };
   const isFormLoading = isLoading || isSubmitting;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Flex, { height: "full", flex: "1", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Box, { flex: "1.5", py: { base: "24", md: "32" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Container, { maxW: "md", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react6.Stack, { gap: "8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Show, { when: showTenantBox, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TenantBox, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Stack, { gap: { base: "2", md: "3" }, textAlign: "center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Heading, { size: { base: "2xl", md: "3xl" }, children: t("AbpAccount::Login") }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.Flex, { height: "full", flex: "1", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Box, { flex: "1.5", py: { base: "24", md: "32" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.Container, { maxW: "md", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react7.Stack, { gap: "8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Show, { when: showTenantBox, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TenantBox, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.Stack, { gap: { base: "2", md: "3" }, textAlign: "center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Heading, { size: { base: "2xl", md: "3xl" }, children: t("AbpAccount::Login") }) }),
     error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_theme_shared2.Alert, { status: "error", children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("form", { onSubmit: handleSubmit(onSubmit), noValidate: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react6.Stack, { gap: "6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react6.Stack, { gap: "5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react6.Field.Root, { invalid: !!errors.username, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Field.Label, { children: t("AbpAccount::UserNameOrEmailAddress") }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.InputGroup, { startElement: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lu.LuMail, {}), width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_react5.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("form", { onSubmit: handleSubmit(onSubmit), noValidate: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react7.Stack, { gap: "6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react7.Stack, { gap: "5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react7.Field.Root, { invalid: !!errors.username, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.Field.Label, { children: t("AbpAccount::UserNameOrEmailAddress") }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.InputGroup, { startElement: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lu.LuMail, {}), width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_react6.Input,
             {
               id: "login-input-user-name-or-email-address",
               type: "text",
@@ -346,12 +440,12 @@ function LoginForm({
               ...register("username")
             }
           ) }),
-          errors.username && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Field.ErrorText, { children: errors.username.message })
+          errors.username && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.Field.ErrorText, { children: errors.username.message })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react6.Field.Root, { invalid: !!errors.password, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Field.Label, { children: t("AbpAccount::Password") }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.InputGroup, { startElement: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lu.LuLock, {}), width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_react5.Input,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react7.Field.Root, { invalid: !!errors.password, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.Field.Label, { children: t("AbpAccount::Password") }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.InputGroup, { startElement: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lu.LuLock, {}), width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_react6.Input,
             {
               id: "login-input-password",
               type: "password",
@@ -360,7 +454,7 @@ function LoginForm({
               ...register("password")
             }
           ) }),
-          errors.password && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Field.ErrorText, { children: errors.password.message })
+          errors.password && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.Field.ErrorText, { children: errors.password.message })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_theme_shared2.Checkbox, { id: "login-input-remember-me", ...register("remember"), children: t("AbpAccount::RememberMe") }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -373,25 +467,26 @@ function LoginForm({
             children: t("AbpAccount::Login")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Link, { variant: "plain", children: t("AbpAccount::ForgotPassword") })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Link, { variant: "plain", children: t("AbpAccount::ForgotPassword") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Show, { when: showRegisterLink, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Card.Root, { size: "sm", mt: "10", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Card.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.HStack, { textStyle: "sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Text, { children: t("AbpAccount::AreYouANewUser") }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Link, { asChild: true, variant: "underline", fontWeight: "semibold", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_router_dom2.Link, { to: registerUrl, children: t("AbpAccount::Register") }) })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Show, { when: showRegisterLink, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.Card.Root, { size: "sm", mt: "10", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.Card.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react6.HStack, { textStyle: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.Text, { children: t("AbpAccount::AreYouANewUser") }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Link, { asChild: true, variant: "underline", fontWeight: "semibold", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_router_dom2.Link, { to: registerUrl, children: t("AbpAccount::Register") }) })
       ] }) }) }) })
     ] }) })
   ] }) }) }) });
 }
 
 // src/components/RegisterForm/RegisterForm.tsx
-var import_react_hook_form3 = require("react-hook-form");
+var import_react8 = require("react");
+var import_react_hook_form2 = require("react-hook-form");
 var import_zod3 = require("@hookform/resolvers/zod");
 var import_zod4 = require("zod");
 var import_react_router_dom3 = require("react-router-dom");
-var import_core4 = require("@abpjs/core");
+var import_core5 = require("@abpjs/core");
 var import_theme_shared3 = require("@abpjs/theme-shared");
-var import_react7 = require("@chakra-ui/react");
-var import_react8 = require("@chakra-ui/react");
+var import_react9 = require("@chakra-ui/react");
+var import_react10 = require("@chakra-ui/react");
 var import_lu2 = require("react-icons/lu");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var passwordValidation = {
@@ -422,16 +517,20 @@ function RegisterForm({
   showLoginLink = true,
   loginUrl = "/account/login",
   onRegisterSuccess,
-  // Note: onRegisterError will be used when registration API is implemented
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onRegisterError: _onRegisterError
+  onRegisterError
 }) {
-  const { t } = (0, import_core4.useLocalization)();
+  const { t } = (0, import_core5.useLocalization)();
+  const navigate = (0, import_react_router_dom3.useNavigate)();
+  const accountService = useAccountService();
+  const toaster = (0, import_theme_shared3.useToaster)();
+  const userManager = (0, import_core5.useUserManager)();
+  const { store, applicationConfigurationService } = (0, import_core5.useAbp)();
+  const [inProgress, setInProgress] = (0, import_react8.useState)(false);
   const {
     register,
     handleSubmit,
-    formState: { errors, isSubmitting }
-  } = (0, import_react_hook_form3.useForm)({
+    formState: { errors }
+  } = (0, import_react_hook_form2.useForm)({
     resolver: (0, import_zod3.zodResolver)(registerSchema),
     defaultValues: {
       username: "",
@@ -440,18 +539,59 @@ function RegisterForm({
     }
   });
   const onSubmit = async (data) => {
-    console.log("Register form submitted (no API call in v0.7.6):", data);
-    onRegisterSuccess?.();
+    setInProgress(true);
+    const newUser = {
+      userName: data.username,
+      password: data.password,
+      emailAddress: data.email,
+      appName: "React"
+    };
+    try {
+      await accountService.register(newUser);
+      if (userManager) {
+        try {
+          await userManager.signinResourceOwnerCredentials({
+            username: newUser.userName,
+            password: newUser.password
+          });
+          const config = await applicationConfigurationService.getConfiguration();
+          store.dispatch(import_core5.configActions.setApplicationConfiguration(config));
+          navigate("/");
+          onRegisterSuccess?.();
+        } catch (loginErr) {
+          console.warn("Auto-login failed after registration:", loginErr);
+          toaster.success(
+            t("AbpAccount::SuccessfullyRegistered") || "Successfully registered! Please log in.",
+            t("AbpAccount::Success") || "Success"
+          );
+          navigate(loginUrl);
+          onRegisterSuccess?.();
+        }
+      } else {
+        toaster.success(
+          t("AbpAccount::SuccessfullyRegistered") || "Successfully registered! Please log in.",
+          t("AbpAccount::Success") || "Success"
+        );
+        navigate(loginUrl);
+        onRegisterSuccess?.();
+      }
+    } catch (err) {
+      const errorMessage = err?.error?.error_description || err?.error?.error?.message || t("AbpAccount::DefaultErrorMessage") || "An error occurred";
+      toaster.error(errorMessage, t("AbpUi::Error") || "Error", { life: 7e3 });
+      onRegisterError?.(errorMessage);
+    } finally {
+      setInProgress(false);
+    }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Flex, { height: "full", flex: "1", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Box, { flex: "1.5", py: { base: "24", md: "32" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Container, { maxW: "md", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react8.Stack, { gap: "8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Show, { when: showTenantBox, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TenantBox, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Stack, { gap: { base: "2", md: "3" }, textAlign: "center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Heading, { size: { base: "2xl", md: "3xl" }, children: t("AbpAccount::Register") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("form", { onSubmit: handleSubmit(onSubmit), noValidate: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react8.Stack, { gap: "6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react8.Stack, { gap: "5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react8.Field.Root, { invalid: !!errors.username, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Field.Label, { children: t("AbpAccount::UserName") }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.InputGroup, { startElement: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lu2.LuUser, {}), width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_react7.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Flex, { height: "full", flex: "1", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.Box, { flex: "1.5", py: { base: "24", md: "32" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Container, { maxW: "md", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react10.Stack, { gap: "8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.Show, { when: showTenantBox, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TenantBox, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Stack, { gap: { base: "2", md: "3" }, textAlign: "center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.Heading, { size: { base: "2xl", md: "3xl" }, children: t("AbpAccount::Register") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("form", { onSubmit: handleSubmit(onSubmit), noValidate: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react10.Stack, { gap: "6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react10.Stack, { gap: "5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react10.Field.Root, { invalid: !!errors.username, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Field.Label, { children: t("AbpAccount::UserName") }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.InputGroup, { startElement: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lu2.LuUser, {}), width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_react9.Input,
             {
               id: "input-user-name",
               type: "text",
@@ -461,12 +601,12 @@ function RegisterForm({
               ...register("username")
             }
           ) }),
-          errors.username && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Field.ErrorText, { children: errors.username.message })
+          errors.username && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Field.ErrorText, { children: errors.username.message })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react8.Field.Root, { invalid: !!errors.email, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Field.Label, { children: t("AbpAccount::EmailAddress") }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.InputGroup, { startElement: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lu2.LuMail, {}), width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_react7.Input,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react10.Field.Root, { invalid: !!errors.email, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Field.Label, { children: t("AbpAccount::EmailAddress") }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.InputGroup, { startElement: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lu2.LuMail, {}), width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_react9.Input,
             {
               id: "input-email-address",
               type: "email",
@@ -475,12 +615,12 @@ function RegisterForm({
               ...register("email")
             }
           ) }),
-          errors.email && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Field.ErrorText, { children: errors.email.message })
+          errors.email && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Field.ErrorText, { children: errors.email.message })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react8.Field.Root, { invalid: !!errors.password, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Field.Label, { children: t("AbpAccount::Password") }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.InputGroup, { startElement: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lu2.LuLock, {}), width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_react7.Input,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react10.Field.Root, { invalid: !!errors.password, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Field.Label, { children: t("AbpAccount::Password") }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.InputGroup, { startElement: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lu2.LuLock, {}), width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_react9.Input,
             {
               id: "input-password",
               type: "password",
@@ -489,69 +629,71 @@ function RegisterForm({
               ...register("password")
             }
           ) }),
-          errors.password && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Field.ErrorText, { children: errors.password.message })
+          errors.password && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Field.ErrorText, { children: errors.password.message })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           import_theme_shared3.Button,
           {
             type: "submit",
             colorPalette: "blue",
-            loading: isSubmitting,
+            loading: inProgress,
             loadingText: t("AbpAccount::Register"),
             children: t("AbpAccount::Register")
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Show, { when: showLoginLink, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Card.Root, { size: "sm", mt: "10", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Card.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react7.HStack, { textStyle: "sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Text, { children: t("AbpAccount::AlreadyRegistered") }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Link, { asChild: true, variant: "underline", fontWeight: "semibold", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_router_dom3.Link, { to: loginUrl, children: t("AbpAccount::Login") }) })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.Show, { when: showLoginLink, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Card.Root, { size: "sm", mt: "10", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Card.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react9.HStack, { textStyle: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.Text, { children: t("AbpAccount::AlreadyRegistered") }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.Link, { asChild: true, variant: "underline", fontWeight: "semibold", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_router_dom3.Link, { to: loginUrl, children: t("AbpAccount::Login") }) })
       ] }) }) }) })
     ] }) })
   ] }) }) }) });
 }
 
 // src/pages/LoginPage.tsx
-var import_react9 = require("@chakra-ui/react");
+var import_react11 = require("@chakra-ui/react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function LoginPage({
   maxWidth = "container.sm",
   ...loginFormProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.Container, { maxW: maxWidth, py: 10, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoginForm, { ...loginFormProps }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react11.Container, { maxW: maxWidth, py: 10, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react11.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoginForm, { ...loginFormProps }) }) });
 }
 
 // src/pages/RegisterPage.tsx
-var import_react10 = require("@chakra-ui/react");
+var import_react12 = require("@chakra-ui/react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function RegisterPage({
   maxWidth = "container.sm",
   ...registerFormProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Container, { maxW: maxWidth, py: 10, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RegisterForm, { ...registerFormProps }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react12.Container, { maxW: maxWidth, py: 10, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react12.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RegisterForm, { ...registerFormProps }) }) });
 }
 
 // src/routes/index.ts
-var import_core5 = require("@abpjs/core");
-var ACCOUNT_ROUTES = [
-  {
-    name: "Account",
-    path: "account",
-    invisible: true,
-    layout: import_core5.eLayoutType.application,
-    children: [
-      {
-        path: "login",
-        name: "Login",
-        order: 1
-      },
-      {
-        path: "register",
-        name: "Register",
-        order: 2
-      }
-    ]
-  }
-];
+var import_core6 = require("@abpjs/core");
+var ACCOUNT_ROUTES = {
+  routes: [
+    {
+      name: "Account",
+      path: "account",
+      invisible: true,
+      layout: import_core6.eLayoutType.application,
+      children: [
+        {
+          path: "login",
+          name: "Login",
+          order: 1
+        },
+        {
+          path: "register",
+          name: "Register",
+          order: 2
+        }
+      ]
+    }
+  ]
+};
 var DEFAULT_REDIRECT_URL = "/";
 var ACCOUNT_PATHS = {
   login: "/account/login",
@@ -562,6 +704,7 @@ var ACCOUNT_PATHS = {
   ACCOUNT_PATHS,
   ACCOUNT_ROUTES,
   AccountProvider,
+  AccountService,
   DEFAULT_REDIRECT_URL,
   LoginForm,
   LoginPage,
@@ -570,5 +713,6 @@ var ACCOUNT_PATHS = {
   TenantBox,
   useAccountContext,
   useAccountOptions,
+  useAccountService,
   usePasswordFlow
 });

package/dist/index.mjs

@@ -1,3 +1,34 @@
+// src/services/account.service.ts
+var AccountService = class {
+  constructor(rest) {
+    this.rest = rest;
+  }
+  /**
+   * Find a tenant by name
+   *
+   * @param tenantName - The name of the tenant to find
+   * @returns Promise resolving to TenantIdResponse
+   */
+  findTenant(tenantName) {
+    return this.rest.get(
+      `/api/abp/multi-tenancy/tenants/by-name/${tenantName}`
+    );
+  }
+  /**
+   * Register a new user
+   *
+   * @param body - The registration request data
+   * @returns Promise resolving to RegisterResponse
+   */
+  register(body) {
+    return this.rest.post(
+      "/api/account/register",
+      body,
+      { skipHandleError: true }
+    );
+  }
+};
+
 // src/providers/AccountProvider.tsx
 import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -136,37 +167,77 @@ function usePasswordFlow() {
   };
 }
 
+// src/hooks/useAccountService.ts
+import { useMemo as useMemo2 } from "react";
+import { useRestService } from "@abpjs/core";
+function useAccountService() {
+  const restService = useRestService();
+  return useMemo2(() => new AccountService(restService), [restService]);
+}
+
 // src/components/TenantBox/TenantBox.tsx
-import { useState as useState2, useCallback as useCallback2 } from "react";
-import { useForm } from "react-hook-form";
-import { useLocalization } from "@abpjs/core";
-import { Modal, Button, FormField } from "@abpjs/theme-shared";
+import { useState as useState2, useCallback as useCallback2, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useLocalization, sessionActions, selectTenant } from "@abpjs/core";
+import { Modal, Button, useToaster } from "@abpjs/theme-shared";
 import { Box, Text, Link, Input, VStack } from "@chakra-ui/react";
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function TenantBox({ containerStyle }) {
   const { t } = useLocalization();
-  const [selected, setSelected] = useState2(null);
-  const [modalVisible, setModalVisible] = useState2(false);
-  const { register, handleSubmit, reset } = useForm({
-    defaultValues: {
-      name: ""
-    }
-  });
-  const openModal = useCallback2(() => {
-    reset({ name: selected?.name || "" });
-    setModalVisible(true);
-  }, [selected, reset]);
+  const dispatch = useDispatch();
+  const accountService = useAccountService();
+  const toaster = useToaster();
+  const currentTenant = useSelector(selectTenant);
+  const [tenantName, setTenantName] = useState2("");
+  const [isModalVisible, setIsModalVisible] = useState2(false);
+  const [isLoading, setIsLoading] = useState2(false);
+  useEffect(() => {
+    setTenantName(currentTenant?.name || "");
+  }, [currentTenant]);
   const onSwitch = useCallback2(() => {
-    setSelected(null);
-    openModal();
-  }, [openModal]);
-  const onSave = useCallback2((data) => {
-    setSelected(data.name ? data : null);
-    setModalVisible(false);
+    setIsModalVisible(true);
   }, []);
+  const save = useCallback2(async () => {
+    if (tenantName) {
+      setIsLoading(true);
+      try {
+        const { success, tenantId } = await accountService.findTenant(tenantName);
+        if (success) {
+          const newTenant = {
+            id: tenantId,
+            name: tenantName
+          };
+          dispatch(sessionActions.setTenant(newTenant));
+          setIsModalVisible(false);
+        } else {
+          toaster.error(
+            t("AbpUiMultiTenancy::GivenTenantIsNotAvailable", tenantName) || `Tenant "${tenantName}" is not available`,
+            t("AbpUi::Error") || "Error"
+          );
+          setTenantName("");
+        }
+      } catch (err) {
+        const errorMessage = err?.error?.error_description || err?.error?.error?.message || t("AbpUi::DefaultErrorMessage") || "An error occurred";
+        toaster.error(errorMessage, t("AbpUi::Error") || "Error");
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      dispatch(sessionActions.setTenant({ id: "", name: "" }));
+      setIsModalVisible(false);
+    }
+  }, [tenantName, accountService, dispatch, toaster, t]);
   const onClose = useCallback2(() => {
-    setModalVisible(false);
-  }, []);
+    setTenantName(currentTenant?.name || "");
+    setIsModalVisible(false);
+  }, [currentTenant]);
+  const handleSubmit = useCallback2(
+    (e) => {
+      e.preventDefault();
+      save();
+    },
+    [save]
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       Box,
@@ -185,7 +256,7 @@ function TenantBox({ containerStyle }) {
             ":",
             " "
           ] }),
-          /* @__PURE__ */ jsx2(Text, { as: "strong", children: /* @__PURE__ */ jsx2(Text, { as: "i", children: selected?.name || t("AbpUiMultiTenancy::NotSelected") }) }),
+          /* @__PURE__ */ jsx2(Text, { as: "strong", children: /* @__PURE__ */ jsx2(Text, { as: "i", children: currentTenant?.name || t("AbpUiMultiTenancy::NotSelected") }) }),
           " (",
           /* @__PURE__ */ jsx2(
             Link,
@@ -205,19 +276,40 @@ function TenantBox({ containerStyle }) {
     /* @__PURE__ */ jsx2(
       Modal,
       {
-        visible: modalVisible,
-        onVisibleChange: setModalVisible,
+        visible: isModalVisible,
+        onVisibleChange: setIsModalVisible,
         size: "md",
         header: t("AbpUiMultiTenancy::SwitchTenant") || "Switch Tenant",
         footer: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx2(Button, { variant: "ghost", colorPalette: "gray", onClick: onClose, children: t("AbpTenantManagement::Cancel") }),
-          /* @__PURE__ */ jsxs(Button, { colorPalette: "blue", onClick: handleSubmit(onSave), children: [
-            /* @__PURE__ */ jsx2(CheckIcon, {}),
-            t("AbpTenantManagement::Save")
-          ] })
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              colorPalette: "blue",
+              onClick: save,
+              loading: isLoading,
+              loadingText: t("AbpTenantManagement::Save"),
+              children: [
+                /* @__PURE__ */ jsx2(CheckIcon, {}),
+                t("AbpTenantManagement::Save")
+              ]
+            }
+          )
         ] }),
-        children: /* @__PURE__ */ jsx2("form", { onSubmit: handleSubmit(onSave), children: /* @__PURE__ */ jsxs(VStack, { gap: 4, align: "stretch", children: [
-          /* @__PURE__ */ jsx2(FormField, { label: t("AbpUiMultiTenancy::Name"), htmlFor: "tenant-name", children: /* @__PURE__ */ jsx2(Input, { id: "tenant-name", type: "text", ...register("name") }) }),
+        children: /* @__PURE__ */ jsx2("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs(VStack, { gap: 4, align: "stretch", children: [
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx2(Text, { as: "label", mb: 1, display: "block", children: t("AbpUiMultiTenancy::Name") }),
+            /* @__PURE__ */ jsx2(
+              Input,
+              {
+                id: "tenant-name",
+                type: "text",
+                value: tenantName,
+                onChange: (e) => setTenantName(e.target.value),
+                autoFocus: true
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx2(Text, { fontSize: "sm", color: "gray.600", children: t("AbpUiMultiTenancy::SwitchTenantHint") })
         ] }) })
       }
@@ -243,7 +335,7 @@ function CheckIcon() {
 }
 
 // src/components/LoginForm/LoginForm.tsx
-import { useForm as useForm2 } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { Link as RouterLink } from "react-router-dom";
@@ -279,7 +371,7 @@ function LoginForm({
     register,
     handleSubmit,
     formState: { errors, isSubmitting }
-  } = useForm2({
+  } = useForm({
     resolver: zodResolver(loginSchema),
     defaultValues: {
       username: "",
@@ -355,12 +447,13 @@ function LoginForm({
 }
 
 // src/components/RegisterForm/RegisterForm.tsx
-import { useForm as useForm3 } from "react-hook-form";
+import { useState as useState3 } from "react";
+import { useForm as useForm2 } from "react-hook-form";
 import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
 import { z as z2 } from "zod";
-import { Link as RouterLink2 } from "react-router-dom";
-import { useLocalization as useLocalization3 } from "@abpjs/core";
-import { Button as Button3 } from "@abpjs/theme-shared";
+import { Link as RouterLink2, useNavigate as useNavigate2 } from "react-router-dom";
+import { useLocalization as useLocalization3, useUserManager, useAbp as useAbp2, configActions as configActions2 } from "@abpjs/core";
+import { Button as Button3, useToaster as useToaster2 } from "@abpjs/theme-shared";
 import { Box as Box3, Heading as Heading2, Input as Input3, Link as Link3, HStack as HStack2, Show as Show2 } from "@chakra-ui/react";
 import {
   Card as Card2,
@@ -401,16 +494,20 @@ function RegisterForm({
   showLoginLink = true,
   loginUrl = "/account/login",
   onRegisterSuccess,
-  // Note: onRegisterError will be used when registration API is implemented
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onRegisterError: _onRegisterError
+  onRegisterError
 }) {
   const { t } = useLocalization3();
+  const navigate = useNavigate2();
+  const accountService = useAccountService();
+  const toaster = useToaster2();
+  const userManager = useUserManager();
+  const { store, applicationConfigurationService } = useAbp2();
+  const [inProgress, setInProgress] = useState3(false);
   const {
     register,
     handleSubmit,
-    formState: { errors, isSubmitting }
-  } = useForm3({
+    formState: { errors }
+  } = useForm2({
     resolver: zodResolver2(registerSchema),
     defaultValues: {
       username: "",
@@ -419,8 +516,49 @@ function RegisterForm({
     }
   });
   const onSubmit = async (data) => {
-    console.log("Register form submitted (no API call in v0.7.6):", data);
-    onRegisterSuccess?.();
+    setInProgress(true);
+    const newUser = {
+      userName: data.username,
+      password: data.password,
+      emailAddress: data.email,
+      appName: "React"
+    };
+    try {
+      await accountService.register(newUser);
+      if (userManager) {
+        try {
+          await userManager.signinResourceOwnerCredentials({
+            username: newUser.userName,
+            password: newUser.password
+          });
+          const config = await applicationConfigurationService.getConfiguration();
+          store.dispatch(configActions2.setApplicationConfiguration(config));
+          navigate("/");
+          onRegisterSuccess?.();
+        } catch (loginErr) {
+          console.warn("Auto-login failed after registration:", loginErr);
+          toaster.success(
+            t("AbpAccount::SuccessfullyRegistered") || "Successfully registered! Please log in.",
+            t("AbpAccount::Success") || "Success"
+          );
+          navigate(loginUrl);
+          onRegisterSuccess?.();
+        }
+      } else {
+        toaster.success(
+          t("AbpAccount::SuccessfullyRegistered") || "Successfully registered! Please log in.",
+          t("AbpAccount::Success") || "Success"
+        );
+        navigate(loginUrl);
+        onRegisterSuccess?.();
+      }
+    } catch (err) {
+      const errorMessage = err?.error?.error_description || err?.error?.error?.message || t("AbpAccount::DefaultErrorMessage") || "An error occurred";
+      toaster.error(errorMessage, t("AbpUi::Error") || "Error", { life: 7e3 });
+      onRegisterError?.(errorMessage);
+    } finally {
+      setInProgress(false);
+    }
   };
   return /* @__PURE__ */ jsx4(Flex2, { height: "full", flex: "1", children: /* @__PURE__ */ jsx4(Box3, { flex: "1.5", py: { base: "24", md: "32" }, children: /* @__PURE__ */ jsx4(Container2, { maxW: "md", children: /* @__PURE__ */ jsxs3(Stack2, { gap: "8", children: [
     /* @__PURE__ */ jsx4(Show2, { when: showTenantBox, children: /* @__PURE__ */ jsx4(TenantBox, {}) }),
@@ -475,7 +613,7 @@ function RegisterForm({
           {
             type: "submit",
             colorPalette: "blue",
-            loading: isSubmitting,
+            loading: inProgress,
             loadingText: t("AbpAccount::Register"),
             children: t("AbpAccount::Register")
           }
@@ -511,26 +649,28 @@ function RegisterPage({
 
 // src/routes/index.ts
 import { eLayoutType } from "@abpjs/core";
-var ACCOUNT_ROUTES = [
-  {
-    name: "Account",
-    path: "account",
-    invisible: true,
-    layout: eLayoutType.application,
-    children: [
-      {
-        path: "login",
-        name: "Login",
-        order: 1
-      },
-      {
-        path: "register",
-        name: "Register",
-        order: 2
-      }
-    ]
-  }
-];
+var ACCOUNT_ROUTES = {
+  routes: [
+    {
+      name: "Account",
+      path: "account",
+      invisible: true,
+      layout: eLayoutType.application,
+      children: [
+        {
+          path: "login",
+          name: "Login",
+          order: 1
+        },
+        {
+          path: "register",
+          name: "Register",
+          order: 2
+        }
+      ]
+    }
+  ]
+};
 var DEFAULT_REDIRECT_URL = "/";
 var ACCOUNT_PATHS = {
   login: "/account/login",
@@ -540,6 +680,7 @@ export {
   ACCOUNT_PATHS,
   ACCOUNT_ROUTES,
   AccountProvider,
+  AccountService,
   DEFAULT_REDIRECT_URL,
   LoginForm,
   LoginPage,
@@ -548,5 +689,6 @@ export {
   TenantBox,
   useAccountContext,
   useAccountOptions,
+  useAccountService,
   usePasswordFlow
 };

package/dist/models/index.d.ts

@@ -40,3 +40,44 @@ export interface PasswordFlowResult {
     success: boolean;
     error?: string;
 }
+/**
+ * Request body for user registration
+ */
+export interface RegisterRequest {
+    userName: string;
+    emailAddress: string;
+    password: string;
+    appName?: string;
+}
+/**
+ * Response from user registration API
+ */
+export interface RegisterResponse {
+    tenantId: string;
+    userName: string;
+    name: string;
+    surname: string;
+    email: string;
+    emailConfirmed: boolean;
+    phoneNumber: string;
+    phoneNumberConfirmed: boolean;
+    twoFactorEnabled: boolean;
+    lockoutEnabled: boolean;
+    lockoutEnd: string;
+    concurrencyStamp: string;
+    isDeleted: boolean;
+    deleterId: string;
+    deletionTime: string;
+    lastModificationTime: string;
+    lastModifierId: string;
+    creationTime: string;
+    creatorId: string;
+    id: string;
+}
+/**
+ * Response from tenant lookup API
+ */
+export interface TenantIdResponse {
+    success: boolean;
+    tenantId: string;
+}

package/dist/routes/index.d.ts

@@ -9,8 +9,12 @@ import { type ABP } from '@abpjs/core';
  * - /account (invisible, uses account layout)
  *   - /account/login
  *   - /account/register
+ *
+ * @since 0.9.0 - Changed from array to object with `routes` property
  */
-export declare const ACCOUNT_ROUTES: ABP.FullRoute[];
+export declare const ACCOUNT_ROUTES: {
+    routes: ABP.FullRoute[];
+};
 /**
  * Default redirect path after login
  */

package/dist/services/account.service.d.ts

@@ -0,0 +1,28 @@
+import { RestService } from '@abpjs/core';
+import type { RegisterRequest, RegisterResponse, TenantIdResponse } from '../models';
+/**
+ * AccountService - Service for account-related API operations
+ *
+ * This is the React equivalent of Angular's AccountService.
+ * Provides methods for tenant lookup and user registration.
+ *
+ * @since 0.9.0
+ */
+export declare class AccountService {
+    private rest;
+    constructor(rest: RestService);
+    /**
+     * Find a tenant by name
+     *
+     * @param tenantName - The name of the tenant to find
+     * @returns Promise resolving to TenantIdResponse
+     */
+    findTenant(tenantName: string): Promise<TenantIdResponse>;
+    /**
+     * Register a new user
+     *
+     * @param body - The registration request data
+     * @returns Promise resolving to RegisterResponse
+     */
+    register(body: RegisterRequest): Promise<RegisterResponse>;
+}

package/dist/services/index.d.ts

@@ -0,0 +1 @@
+export * from './account.service';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abpjs/account",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "ABP Framework Account module for React - Translation of @abp/ng.account",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -49,13 +49,14 @@
     "@emotion/react": "^11.11.0",
     "@hookform/resolvers": "^3.3.0",
     "react-hook-form": "^7.48.0",
+    "react-redux": "^9.0.0",
     "zod": "^3.22.0",
     "react-icons": "^5.0.0",
-    "@abpjs/core": "0.8.0",
-    "@abpjs/theme-shared": "0.8.0"
+    "@abpjs/theme-shared": "0.9.0",
+    "@abpjs/core": "0.9.0"
   },
   "devDependencies": {
-    "@abp/ng.account": "0.8.0"
+    "@abp/ng.account": "0.9.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --clean && tsc -p tsconfig.build.json",