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

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/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/routes.ts

@@ -1,134 +1,132 @@
-import {
-  Settings,
-  Users,
-  ShieldCheck,
-  KeyRound,
-  ListFilter,
-} from 'lucide-react';
+import { Users, ShieldCheck, KeyRound, ListFilter } from 'lucide-react';
 import {
   defineAppRoutes,
   type AppClientRouteContribution,
 } from '@nocobase/app-client/plugins';
 
-/** Register this contribution as business capabilities are developed; keep a bare Home-only application free of settings. */
+/**
+ * Users and Permission management, in the Accounts and permissions category of the System settings shell
+ * (`shell-routes.ts`). Register this contribution as business capabilities are developed; a bare application stays
+ * without them.
+ */
 const systemSettingsRoutes: AppClientRouteContribution = defineAppRoutes([
   {
-    name: 'settings',
-    path: '/settings',
-    navigation: { title: 'settings.title', icon: Settings, order: 100 },
+    parent: 'settingsAccount',
+    name: 'settingsUsers',
+    path: '/users',
+    auth: 'required',
+    authz: { resource: { type: 'user', id: '*' }, action: 'read' },
+    navigation: {
+      title: 'settings.users',
+      description: 'settings.usersDescription',
+      icon: Users,
+    },
+    breadcrumb: { title: 'settings.users' },
+    componentLoader: () => import('./users.js'),
     children: [
       {
-        name: 'settingsUsers',
-        path: '/users',
-        auth: 'required',
-        authz: { resource: { type: 'user', id: '*' }, action: 'read' },
-        navigation: { title: 'settings.users', icon: Users },
-        breadcrumb: { title: 'settings.users' },
-        componentLoader: () => import('./users.js'),
+        name: 'settingsUserCreate',
+        path: 'create',
+        authz: { resource: { type: 'user', id: '*' }, action: 'create' },
+        componentLoader: () => import('./user-form.js'),
+      },
+      {
+        name: 'settingsUser',
+        path: ':userId',
+        componentLoader: () => import('./user-detail.js'),
         children: [
           {
-            name: 'settingsUserCreate',
-            path: 'create',
-            authz: { resource: { type: 'user', id: '*' }, action: 'create' },
+            name: 'settingsUserEdit',
+            path: 'edit',
             componentLoader: () => import('./user-form.js'),
           },
-          {
-            name: 'settingsUser',
-            path: ':userId',
-            componentLoader: () => import('./user-detail.js'),
-            children: [
-              {
-                name: 'settingsUserEdit',
-                path: 'edit',
-                componentLoader: () => import('./user-form.js'),
-              },
-            ],
-          },
         ],
       },
+    ],
+  },
+  {
+    parent: 'settingsAccount',
+    name: 'permissionManagement',
+    navigation: {
+      title: 'settings.permissionManagement',
+      description: 'settings.permissionManagementDescription',
+      icon: ShieldCheck,
+    },
+    breadcrumb: { title: 'settings.permissionManagement' },
+    children: [
       {
-        name: 'permissionManagement',
-        navigation: {
-          title: 'settings.permissionManagement',
-          icon: ShieldCheck,
+        name: 'settingsRoles',
+        path: '/roles',
+        auth: 'required',
+        authz: {
+          resource: {
+            type: 'settings',
+            id: 'authorization.permission-sets',
+          },
+          action: 'read',
         },
-        breadcrumb: { title: 'settings.permissionManagement' },
+        navigation: { title: 'settings.roles', icon: KeyRound },
+        breadcrumb: { title: 'settings.roles' },
+        componentLoader: () => import('./roles.js'),
         children: [
           {
-            name: 'settingsRoles',
-            path: '/roles',
-            auth: 'required',
+            name: 'settingsRoleCreate',
+            path: 'create',
             authz: {
               resource: {
                 type: 'settings',
                 id: 'authorization.permission-sets',
               },
-              action: 'read',
+              action: 'create',
             },
-            navigation: { title: 'settings.roles', icon: KeyRound },
-            breadcrumb: { title: 'settings.roles' },
-            componentLoader: () => import('./roles.js'),
-            children: [
-              {
-                name: 'settingsRoleCreate',
-                path: 'create',
-                authz: {
-                  resource: {
-                    type: 'settings',
-                    id: 'authorization.permission-sets',
-                  },
-                  action: 'create',
-                },
-                breadcrumb: { title: 'settings.newRole' },
-                componentLoader: () => import('./role-form.js'),
-              },
-              {
-                name: 'settingsRoleEdit',
-                path: ':key/edit',
-                breadcrumb: { title: 'settings.editRole' },
-                componentLoader: () => import('./role-form.js'),
-              },
-            ],
+            breadcrumb: { title: 'settings.newRole' },
+            componentLoader: () => import('./role-form.js'),
           },
           {
-            name: 'settingsDefaultAccess',
-            path: '/default-access',
-            auth: 'required',
+            name: 'settingsRoleEdit',
+            path: ':key/edit',
+            breadcrumb: { title: 'settings.editRole' },
+            componentLoader: () => import('./role-form.js'),
+          },
+        ],
+      },
+      {
+        name: 'settingsDefaultAccess',
+        path: '/default-access',
+        auth: 'required',
+        authz: {
+          resource: {
+            type: 'settings',
+            id: 'authorization.default-access',
+          },
+          action: 'read',
+        },
+        navigation: {
+          title: 'settings.defaultAccess.title',
+          icon: ListFilter,
+        },
+        breadcrumb: { title: 'settings.defaultAccess.title' },
+        componentLoader: () => import('./default-access.js'),
+        children: [
+          {
+            name: 'settingsDefaultAccessCreate',
+            path: 'create',
             authz: {
               resource: {
                 type: 'settings',
                 id: 'authorization.default-access',
               },
-              action: 'read',
-            },
-            navigation: {
-              title: 'settings.defaultAccess.title',
-              icon: ListFilter,
+              action: 'create',
             },
-            breadcrumb: { title: 'settings.defaultAccess.title' },
-            componentLoader: () => import('./default-access.js'),
-            children: [
-              {
-                name: 'settingsDefaultAccessCreate',
-                path: 'create',
-                authz: {
-                  resource: {
-                    type: 'settings',
-                    id: 'authorization.default-access',
-                  },
-                  action: 'create',
-                },
-                breadcrumb: { title: 'settings.defaultAccess.new' },
-                componentLoader: () => import('./default-access-form.js'),
-              },
-              // Read permission opens the full rule even when the viewer may not update it.
-              {
-                name: 'settingsDefaultAccessEdit',
-                path: ':key/edit',
-                breadcrumb: { title: 'settings.defaultAccess.edit' },
-                componentLoader: () => import('./default-access-form.js'),
-              },
-            ],
+            breadcrumb: { title: 'settings.defaultAccess.new' },
+            componentLoader: () => import('./default-access-form.js'),
+          },
+          // Read permission opens the full rule even when the viewer may not update it.
+          {
+            name: 'settingsDefaultAccessEdit',
+            path: ':key/edit',
+            breadcrumb: { title: 'settings.defaultAccess.edit' },
+            componentLoader: () => import('./default-access-form.js'),
           },
         ],
       },