@nocobase/app-template-default 1.0.0-beta.87 → 1.0.0-beta.89

package/client/pages/auth/register.tsx

@@ -5,6 +5,7 @@ import type { ReactElement } from 'react';
 import { Link, Navigate } from 'react-router';
 
 import { PasswordRegistrationForm } from '#extensions/nocobase-auth-forms/password-registration-form';
+import { AuthFormStatus } from '#extensions/nocobase-auth-forms/form-parts';
 
 import { AuthPage } from './shared.js';
 
@@ -17,30 +18,46 @@ export default function RegisterPage(): ReactElement {
 
   return (
     <AuthPage
-      description={t('auth.registerDescription')}
-      title={t('auth.registerTitle')}
+      description={registration.isSuccess ? '' : t('auth.registerDescription')}
+      title={t(
+        registration.isSuccess
+          ? 'auth.registrationAccepted'
+          : 'auth.registerTitle',
+      )}
     >
-      <PasswordRegistrationForm
-        error={registration.error?.message}
-        footer={
-          <>
-            {t('auth.existingAccount')}{' '}
+      {registration.isSuccess ? (
+        <div className='space-y-4'>
+          <AuthFormStatus type='success'>
+            {t('auth.registrationGuidance')}
+          </AuthFormStatus>
+          <p className='flex justify-center gap-4 text-sm'>
             <Link to='/login'>{t('auth.signIn')}</Link>
-          </>
-        }
-        labels={{
-          confirmPassword: t('auth.confirmPassword'),
-          email: t('auth.email'),
-          name: t('auth.name'),
-          password: t('auth.password'),
-          passwordMismatch: t('auth.passwordMismatch'),
-          submit: t('auth.createAccount'),
-          submitting: t('auth.creatingAccount'),
-          username: t('auth.username'),
-        }}
-        onSubmit={registration.submit}
-        submitting={registration.isPending}
-      />
+            <Link to='/forgot-password'>{t('auth.forgotLink')}</Link>
+          </p>
+        </div>
+      ) : (
+        <PasswordRegistrationForm
+          error={registration.error?.message}
+          footer={
+            <>
+              {t('auth.existingAccount')}{' '}
+              <Link to='/login'>{t('auth.signIn')}</Link>
+            </>
+          }
+          labels={{
+            confirmPassword: t('auth.confirmPassword'),
+            email: t('auth.email'),
+            name: t('auth.name'),
+            password: t('auth.password'),
+            passwordMismatch: t('auth.passwordMismatch'),
+            submit: t('auth.createAccount'),
+            submitting: t('auth.creatingAccount'),
+            username: t('auth.username'),
+          }}
+          onSubmit={registration.submit}
+          submitting={registration.isPending}
+        />
+      )}
     </AuthPage>
   );
 }

package/client/pages/auth/shared.tsx

@@ -78,12 +78,10 @@ function BrandPanel(): ReactElement {
         <p className='text-xs font-semibold tracking-[0.16em] text-(--auth-brand-highlight) uppercase'>
           {t('auth.platform')}
         </p>
-        <h2 className='mt-6 text-4xl leading-tight font-semibold tracking-tight'>
+        <h2 className='mt-6 text-3xl leading-tight font-semibold tracking-tight'>
           {t('auth.marketingTitleFirst')}
           <br />
           {t('auth.marketingTitleSecond')}
-          <br />
-          {t('auth.marketingTitleThird')}
         </h2>
         <p className='mt-6 text-sm leading-7 text-(--auth-brand-muted)'>
           {t('auth.marketingDescription')}

package/client/pages/settings/default-access.tsx

@@ -399,7 +399,7 @@ export default function DefaultAccessPage(): ReactElement {
           getRowId={(rule) => rule.key}
           showSelectedCount={false}
           pageSize={20}
-          loading={rules.loading || catalog.loading}
+          loading={active && (rules.loading || catalog.loading)}
           listState={listState}
           onRetry={() => {
             rules.reload();

package/client/pages/settings/hooks.tsx

@@ -1,9 +1,4 @@
-import { useNavigationGuard } from '@nocobase/app-client';
 import { useCan } from '@nocobase/app-plugin-authorization/client';
-import { useTranslation } from '@nocobase/i18n/client';
-import { useEffect, useRef, useState } from 'react';
-import { useLocation } from 'react-router';
-import { ConfirmAction } from './shared.js';
 
 /** Compatibility entry for prepared settings pages and application-owned consumers. */
 export { useListData as useSettingsData } from '#hooks/use-list-data';
@@ -17,66 +12,6 @@ export function useRolePermission(action: string) {
     action,
   }).can;
 }
-/** The same decision covers overlay close, sidebar links, browser history and refresh. */
-export function useSettingsLeave(
-  dirty: boolean,
-  busy: boolean,
-  onDiscard?: () => void,
-) {
-  const { t } = useTranslation();
-  const location = useLocation();
-  const allowedRef = useRef(false);
-  useEffect(() => {
-    allowedRef.current = false;
-  }, [location.key]);
-  const pendingRef = useRef<
-    { promise: Promise<boolean>; resolve: (value: boolean) => void } | undefined
-  >(undefined);
-  const [open, setOpen] = useState(false);
-  const guard = () => {
-    if (allowedRef.current) return true;
-    if (busy) return false;
-    if (!dirty) return true;
-    if (pendingRef.current) return pendingRef.current.promise;
-    let resolve!: (value: boolean) => void;
-    const promise = new Promise<boolean>((done) => {
-      resolve = done;
-    });
-    pendingRef.current = { promise, resolve };
-    setOpen(true);
-    return promise;
-  };
-  useNavigationGuard(guard);
-  useEffect(() => {
-    if (!dirty) return;
-    const handler = (event: BeforeUnloadEvent) => {
-      event.preventDefault();
-      event.returnValue = '';
-    };
-    window.addEventListener('beforeunload', handler);
-    return () => window.removeEventListener('beforeunload', handler);
-  }, [dirty]);
-  const decide = (value: boolean) => {
-    if (value) onDiscard?.();
-    allowedRef.current = value;
-    pendingRef.current?.resolve(value);
-    pendingRef.current = undefined;
-    setOpen(false);
-  };
-  return {
-    guard,
-    allow: () => {
-      allowedRef.current = true;
-    },
-    dialog: (
-      <ConfirmAction
-        open={open}
-        title={t('settings.discardTitle')}
-        description={t('settings.discardHint')}
-        busy={false}
-        onCancel={() => decide(false)}
-        onConfirm={() => decide(true)}
-      />
-    ),
-  };
-}
+
+/** Leave protection is owned by the shell while page Effects are suspended. */
+export { usePageLeave as useSettingsLeave } from '../../routing/route-leave-boundary.js';

package/client/pages/settings/notification-routes.ts

@@ -0,0 +1,109 @@
+import { Bell, FileText, Settings } from 'lucide-react';
+import {
+  defineAppRoutes,
+  type AppClientRouteContribution,
+  type AppClientRouteDefinition,
+} from '@nocobase/app-client/plugins';
+
+/** Enable once notification business scenarios are used. Reuse this module for logs and other real views. */
+export const notificationTemplateRoute = {
+  name: 'notificationTemplates',
+  path: '/settings/notifications/templates',
+  auth: 'required' as const,
+  authz: {
+    resource: { type: 'page', id: 'notification.templates' },
+    action: 'access',
+  },
+  navigation: { title: 'settings.notificationTemplates', icon: FileText },
+  breadcrumb: { title: 'settings.notificationTemplates' },
+  componentLoader: () => import('./notification-templates.js'),
+};
+
+/** Add the template view once to the existing module, preserving logs, paths and grants. */
+export function includeNotificationTemplateRoutes(
+  contributions: readonly AppClientRouteContribution[],
+  invitationConfigured: boolean,
+): readonly AppClientRouteContribution[] {
+  const roots = contributions.flatMap((contribution) => contribution.routes);
+  const nodes = new Map<
+    string,
+    { route: AppClientRouteDefinition; parent?: string }
+  >();
+  const collect = (
+    items: readonly AppClientRouteDefinition[],
+    parent?: string,
+  ): void => {
+    for (const route of items) {
+      nodes.set(route.name, { route, parent: route.parent ?? parent });
+      collect(route.children ?? [], route.name);
+    }
+  };
+  collect(roots);
+  const pathOf = (name: string): string => {
+    const node = nodes.get(name);
+    if (!node) return '';
+    const base = node.parent ? pathOf(node.parent) : '';
+    return `${base}/${node.route.path ?? ''}`
+      .replace(/\/{2,}/g, '/')
+      .replace(/\/$/, '');
+  };
+  const templateUnder = (base: string) => ({
+    ...notificationTemplateRoute,
+    path:
+      base && notificationTemplateRoute.path.startsWith(`${base}/`)
+        ? notificationTemplateRoute.path.slice(base.length)
+        : notificationTemplateRoute.path,
+  });
+  if (nodes.has('notificationTemplates')) return contributions;
+  if (nodes.has('notificationManagement')) {
+    const add = (
+      items: readonly AppClientRouteDefinition[],
+    ): readonly AppClientRouteDefinition[] =>
+      items.map((route) => ({
+        ...route,
+        ...(route.name === 'notificationManagement'
+          ? {
+              children: [
+                ...(route.children ?? []),
+                templateUnder(pathOf('notificationManagement')),
+              ],
+            }
+          : route.children
+            ? { children: add(route.children) }
+            : {}),
+      }));
+    return contributions.map((contribution) =>
+      defineAppRoutes(add(contribution.routes)),
+    );
+  }
+  if (!invitationConfigured) return contributions;
+  const parent = nodes.has('settingsSystem') ? 'settingsSystem' : 'settings';
+  const module = {
+    name: 'notificationManagement',
+    navigation: {
+      title: 'settings.notificationManagement',
+      description: 'settings.notificationManagementDescription',
+      icon: Bell,
+    },
+    breadcrumb: { title: 'settings.notificationManagement' },
+    children: [templateUnder(pathOf(parent))],
+  };
+  if (nodes.has(parent))
+    return [
+      ...contributions.slice(0, 1),
+      defineAppRoutes([{ ...module, parent }]),
+      ...contributions.slice(1),
+    ];
+  // A configured built-in invitation is business use even before other settings pages are enabled.
+  return [
+    ...contributions,
+    defineAppRoutes([
+      {
+        name: 'settings',
+        navigation: { title: 'settings.title', icon: Settings, order: 100 },
+        breadcrumb: { title: 'settings.title' },
+        children: [module],
+      },
+    ]),
+  ];
+}

package/client/pages/settings/notification-templates.tsx

@@ -0,0 +1,26 @@
+import type { ReactElement } from 'react';
+import { useSearchParams } from 'react-router';
+import { useTranslation } from '@nocobase/i18n/client';
+import { NotificationTemplates } from '@nocobase/app-plugin-notification/client/templates';
+import { SettingsModulePage } from './settings-module-page.js';
+
+export default function NotificationTemplatesPage(): ReactElement {
+  const { t } = useTranslation('@nocobase/app-plugin-notification');
+  const [query, setQuery] = useSearchParams();
+  return (
+    // A view of the Notifications settings module: it gains tabs once the module has another view, such as logs.
+    <SettingsModulePage title={t('templates.title')}>
+      <NotificationTemplates
+        selectedId={query.get('template')}
+        onSelect={(id) =>
+          setQuery((previous) => {
+            const next = new URLSearchParams(previous);
+            if (id) next.set('template', id);
+            else next.delete('template');
+            return next;
+          })
+        }
+      />
+    </SettingsModulePage>
+  );
+}

package/client/pages/settings/permission-management-page.tsx

@@ -1,11 +1,9 @@
-import { useEffect, useRef, type ReactElement, type ReactNode } from 'react';
-import { useNavigate, useResolvedPath, useLocation } from 'react-router';
-import { useCan } from '@nocobase/app-plugin-authorization/client';
+import type { ReactElement, ReactNode } from 'react';
 import { useTranslation } from '@nocobase/i18n/client';
-import { PageContainer } from '#components/page-container';
-import { PageHeader } from '#components/page-header';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '#components/ui/tabs';
 
+import { SettingsModulePage } from './settings-module-page.js';
+
+/** Permission management: Roles and permissions and Default data scopes as tabs of one settings module. */
 export function PermissionManagementPage({
   tab,
   actions,
@@ -16,90 +14,17 @@ export function PermissionManagementPage({
   children: ReactNode;
 }): ReactElement {
   const { t } = useTranslation();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const activeRef = useRef<HTMLButtonElement>(null);
-  const focusedRef = useRef(false);
-  const current = useResolvedPath('.').pathname;
-  const prefix = current.slice(0, current.lastIndexOf('/'));
-  const roles = useCan({
-    resource: { type: 'settings', id: 'authorization.permission-sets' },
-    action: 'read',
-  }).can;
-  const defaults = useCan({
-    resource: { type: 'settings', id: 'authorization.default-access' },
-    action: 'read',
-  }).can;
-  // Route changes remount each existing page; keep keyboard focus on the selected tab.
-  useEffect(() => {
-    if (
-      !focusedRef.current &&
-      location.state &&
-      typeof location.state === 'object' &&
-      Reflect.get(location.state, 'permissionTabNavigation') === true &&
-      activeRef.current
-    ) {
-      const frame = requestAnimationFrame(() => {
-        if (activeRef.current) {
-          const selected = activeRef.current;
-          if (
-            !selected
-              .closest('[role="tablist"]')
-              ?.contains(selected.ownerDocument.activeElement)
-          )
-            selected.focus();
-          focusedRef.current = true;
-        }
-      });
-      return () => cancelAnimationFrame(frame);
-    }
-  }, [location.state, roles, defaults]);
   return (
-    <PageContainer>
-      <PageHeader
-        title={t('settings.permissionManagement')}
-        description={t(
-          tab === 'roles'
-            ? 'settings.rolesDescription'
-            : 'settings.defaultAccess.description',
-        )}
-        actions={actions}
-      />
-      <Tabs
-        className='gap-6'
-        value={tab}
-        onValueChange={(value) => {
-          if (value === 'roles' || value === 'default-access')
-            void navigate(`${prefix}/${value}`, {
-              state: { permissionTabNavigation: true },
-            });
-        }}
-      >
-        <TabsList
-          variant='line'
-          aria-label={t('settings.permissionManagement')}
-        >
-          {roles && (
-            <TabsTrigger
-              ref={tab === 'roles' ? activeRef : undefined}
-              value='roles'
-            >
-              {t('settings.roles')}
-            </TabsTrigger>
-          )}
-          {defaults && (
-            <TabsTrigger
-              ref={tab === 'default-access' ? activeRef : undefined}
-              value='default-access'
-            >
-              {t('settings.defaultAccess.title')}
-            </TabsTrigger>
-          )}
-        </TabsList>
-        <TabsContent value={tab} className='space-y-6'>
-          {children}
-        </TabsContent>
-      </Tabs>
-    </PageContainer>
+    <SettingsModulePage
+      title={t('settings.permissionManagement')}
+      description={t(
+        tab === 'roles'
+          ? 'settings.rolesDescription'
+          : 'settings.defaultAccess.description',
+      )}
+      actions={actions}
+    >
+      {children}
+    </SettingsModulePage>
   );
 }

package/client/pages/settings/roles.tsx

@@ -12,7 +12,6 @@ import { PlusIcon } from 'lucide-react';
 import { PermissionManagementPage } from './permission-management-page.js';
 import { Input } from '#components/ui/input';
 import { Button } from '#components/ui/button';
-import { Spinner } from '#components/ui/spinner';
 import { useTableUrlState } from '#hooks/use-table-url-state';
 import { RoleList } from '#components/role-list';
 import { ListFeedback, ListFeedbackActions } from '#components/list-feedback';
@@ -123,34 +122,35 @@ export default function RolesPage(): ReactElement {
             state={listState}
             onClear={clearSearch}
             onRetry={request.reload}
-            busy={request.loading}
+            busy={active && request.loading}
           />
-          {active && request.loading && request.data ? (
-            <Spinner className='text-muted-foreground' />
-          ) : null}
         </div>
-        <ListFeedback state={listState}>
-          <RoleList
-            tableState={tableState}
-            ariaLabel={t('settings.roles')}
-            roles={rows.map((role) => ({
-              key: role.key,
-              title: text(role.title ?? role.key),
-              to: {
-                pathname: `${encodeURIComponent(role.key)}/edit`,
-                search: location.search,
-              },
-              protected: Boolean(role.protection),
-            }))}
-            labels={{
-              name: t('settings.roleName'),
-              key: t('settings.key'),
-              type: t('settings.roleType'),
-              protected: t('settings.protected'),
-              custom: t('settings.custom'),
-            }}
-          />
-        </ListFeedback>
+        {active || listState !== 'loading' ? (
+          <ListFeedback state={listState}>
+            <RoleList
+              tableState={tableState}
+              // After a refresh failure the toolbar's retry button owns the wait.
+              loading={active && request.loading && listState === 'ready'}
+              ariaLabel={t('settings.roles')}
+              roles={rows.map((role) => ({
+                key: role.key,
+                title: text(role.title ?? role.key),
+                to: {
+                  pathname: `${encodeURIComponent(role.key)}/edit`,
+                  search: location.search,
+                },
+                protected: Boolean(role.protection),
+              }))}
+              labels={{
+                name: t('settings.roleName'),
+                key: t('settings.key'),
+                type: t('settings.roleType'),
+                protected: t('settings.protected'),
+                custom: t('settings.custom'),
+              }}
+            />
+          </ListFeedback>
+        ) : null}
       </PermissionManagementPage>
       <Outlet context={{ reload: request.reload }} />
     </>