@nocobase/app-template-default 0.0.0-stage → 1.0.0-beta.57

package/client/pages/auth/device.tsx

@@ -0,0 +1,41 @@
+import { useAuthentication } from '@nocobase/app-plugin-authentication/client';
+import { useTranslation } from '@nocobase/i18n/client';
+import type { ReactElement } from 'react';
+import { Navigate, useLocation, useSearchParams } from 'react-router';
+
+import { DeviceApproval } from '#extensions/nocobase-device-approval/device-approval';
+
+import { AuthPage } from './shared.js';
+
+/**
+ * `/device?user_code=…`: where a command line's sign-in (Better Auth's device authorization, `deviceAuthorization()` in
+ * `server/config/auth.ts`) sends the person to approve it. The route is `auth: 'optional'`, so it renders outside the
+ * application's shell, like the sign-in pages; a person who is not signed in goes to the sign-in page, which brings
+ * them back here with the code.
+ */
+export default function DevicePage(): ReactElement | null {
+  const { t } = useTranslation();
+  const { isPending, session } = useAuthentication();
+  const { pathname, search } = useLocation();
+  const [params, setParams] = useSearchParams();
+
+  if (isPending) return null;
+  if (!session)
+    return (
+      <Navigate
+        replace
+        to={`/login?redirect=${encodeURIComponent(`${pathname}${search}`)}`}
+      />
+    );
+  return (
+    <AuthPage
+      description={t('deviceApproval.description')}
+      title={t('deviceApproval.title')}
+    >
+      <DeviceApproval
+        onUserCodeChange={(code) => setParams(code ? { user_code: code } : {})}
+        userCode={params.get('user_code')}
+      />
+    </AuthPage>
+  );
+}

package/client/pages/auth/forgot-password.tsx

@@ -0,0 +1,39 @@
+import { usePasswordResetRequest } from '@nocobase/app-plugin-authentication/client/actions';
+import { useTranslation } from '@nocobase/i18n/client';
+import type { ReactElement } from 'react';
+import { Link } from 'react-router';
+
+import { PasswordResetRequestForm } from '#extensions/nocobase-auth-forms/password-reset-request-form';
+
+import { AuthPage } from './shared.js';
+
+export default function ForgotPasswordPage(): ReactElement {
+  const { t } = useTranslation();
+  const request = usePasswordResetRequest();
+
+  return (
+    <AuthPage
+      description={t('auth.forgotDescription')}
+      title={t('auth.forgotTitle')}
+    >
+      <PasswordResetRequestForm
+        error={request.error?.message}
+        footer={
+          <>
+            {t('auth.rememberPassword')}{' '}
+            <Link to='/login'>{t('auth.signIn')}</Link>
+          </>
+        }
+        labels={{
+          email: t('auth.email'),
+          submit: t('auth.sendResetLink'),
+          submitting: t('auth.sending'),
+          success: t('auth.resetSent'),
+        }}
+        onSubmit={request.submit}
+        submitting={request.isPending}
+        success={request.isSuccess}
+      />
+    </AuthPage>
+  );
+}

package/client/pages/auth/login.tsx

@@ -0,0 +1,66 @@
+import { useSignUpAvailable } from '@nocobase/app-plugin-authentication/client';
+import { usePasswordLogin } from '@nocobase/app-plugin-authentication/client/actions';
+import { useTranslation } from '@nocobase/i18n/client';
+import type { ReactElement } from 'react';
+import { Link } from 'react-router';
+
+import { PasswordLoginForm } from '#extensions/nocobase-auth-forms/password-login-form';
+import { AuthMethods } from '#extensions/nocobase-auth-methods/auth-methods';
+
+import { AuthPage } from './shared.js';
+
+export default function LoginPage(): ReactElement {
+  const { t } = useTranslation();
+  const login = usePasswordLogin();
+  // The sign-up link follows the server: it is hidden while `auth.emailAndPassword` turns sign-up off.
+  const signUpAvailable = useSignUpAvailable();
+
+  return (
+    <AuthPage
+      description={t('auth.loginDescription')}
+      title={t('auth.welcome')}
+    >
+      {/* Add another sign-in method to `methods`, or SSO buttons as `providers`; the guest route redirects once
+          the session exists. */}
+      <AuthMethods
+        labels={{
+          continueWith: t('auth.continueWith'),
+          methods: t('auth.methods'),
+          separator: t('auth.or'),
+        }}
+        methods={[
+          {
+            content: (
+              <PasswordLoginForm
+                error={login.error?.message}
+                footer={
+                  signUpAvailable ? (
+                    <>
+                      {t('auth.noAccount')}{' '}
+                      <Link to='/register'>{t('auth.signUp')}</Link>
+                    </>
+                  ) : undefined
+                }
+                forgotPasswordLink={
+                  <Link to='/forgot-password'>{t('auth.forgotLink')}</Link>
+                }
+                labels={{
+                  hidePassword: t('auth.hidePassword'),
+                  identifier: t('auth.identifier'),
+                  password: t('auth.password'),
+                  showPassword: t('auth.showPassword'),
+                  submit: t('auth.signIn'),
+                  submitting: t('auth.signingIn'),
+                }}
+                onSubmit={login.submit}
+                submitting={login.isPending}
+              />
+            ),
+            id: 'password',
+            label: t('auth.password'),
+          },
+        ]}
+      />
+    </AuthPage>
+  );
+}

package/client/pages/auth/register.tsx

@@ -0,0 +1,46 @@
+import { useSignUpAvailable } from '@nocobase/app-plugin-authentication/client';
+import { usePasswordRegistration } from '@nocobase/app-plugin-authentication/client/actions';
+import { useTranslation } from '@nocobase/i18n/client';
+import type { ReactElement } from 'react';
+import { Link, Navigate } from 'react-router';
+
+import { PasswordRegistrationForm } from '#extensions/nocobase-auth-forms/password-registration-form';
+
+import { AuthPage } from './shared.js';
+
+export default function RegisterPage(): ReactElement {
+  const { t } = useTranslation();
+  const registration = usePasswordRegistration();
+  const signUpAvailable = useSignUpAvailable();
+  // The page stays so registration can be turned back on; while the server refuses sign-up it only redirects.
+  if (!signUpAvailable) return <Navigate replace to='/login' />;
+
+  return (
+    <AuthPage
+      description={t('auth.registerDescription')}
+      title={t('auth.registerTitle')}
+    >
+      <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/reset-password.tsx

@@ -0,0 +1,38 @@
+import { usePasswordReset } from '@nocobase/app-plugin-authentication/client/actions';
+import { useTranslation } from '@nocobase/i18n/client';
+import type { ReactElement } from 'react';
+import { Link, useSearchParams } from 'react-router';
+
+import { PasswordResetForm } from '#extensions/nocobase-auth-forms/password-reset-form';
+
+import { AuthPage } from './shared.js';
+
+export default function ResetPasswordPage(): ReactElement {
+  const { t } = useTranslation();
+  const reset = usePasswordReset();
+  const [searchParams] = useSearchParams();
+  // The link in the reset email carries the token; without one the form cannot do anything.
+  const token = searchParams.get('token') ?? '';
+
+  return (
+    <AuthPage
+      description={t('auth.resetDescription')}
+      title={t('auth.resetTitle')}
+    >
+      <PasswordResetForm
+        disabled={!token}
+        error={token ? reset.error?.message : t('auth.invalidResetLink')}
+        footer={<Link to='/login'>{t('auth.backToSignIn')}</Link>}
+        labels={{
+          confirmPassword: t('auth.confirmNewPassword'),
+          password: t('auth.newPassword'),
+          passwordMismatch: t('auth.passwordMismatch'),
+          submit: t('auth.resetTitle'),
+          submitting: t('auth.resetting'),
+        }}
+        onSubmit={({ password }) => reset.submit({ password, token })}
+        submitting={reset.isPending}
+      />
+    </AuthPage>
+  );
+}

package/client/pages/auth/shared.tsx

@@ -0,0 +1,111 @@
+import { resolveAssetUrl } from '@nocobase/app-client';
+import { useTranslation } from '@nocobase/i18n/client';
+import { Blocks, ShieldCheck, Sparkles } from 'lucide-react';
+import type { ReactElement, ReactNode } from 'react';
+
+import { AuthSplitLayout } from '#extensions/nocobase-auth-split-layout/auth-split-layout';
+
+export interface AuthPageProps {
+  readonly title: ReactNode;
+  readonly description: ReactNode;
+  readonly children: ReactNode;
+}
+
+/**
+ * The frame every sign-in, sign-up and password page shares: the form on the left, and on wide screens the NocoBase
+ * brand panel on the right. Replace `BrandPanel` with the application's own content, or install
+ * `auth-centered-layout` from the UI Library to drop the panel.
+ */
+export function AuthPage({
+  children,
+  description,
+  title,
+}: AuthPageProps): ReactElement {
+  const { t } = useTranslation();
+  return (
+    <AuthSplitLayout
+      aside={<BrandPanel />}
+      asideLabel={t('auth.about')}
+      description={description}
+      logo={
+        <>
+          <img
+            alt=''
+            className='dark:hidden'
+            src={resolveAssetUrl('/assets/logo-mark.png')}
+          />
+          <img
+            alt=''
+            className='hidden dark:block'
+            src={resolveAssetUrl('/assets/logo-mark-dark.png')}
+          />
+        </>
+      }
+      name={t('app.title')}
+      title={title}
+    >
+      {children}
+    </AuthSplitLayout>
+  );
+}
+
+// The brand panel is deliberately dark in both color modes, so it uses fixed neutrals rather than theme tokens.
+function BrandPanel(): ReactElement {
+  const { t } = useTranslation();
+  const features = [
+    {
+      description: t('auth.frontendDescription'),
+      icon: Sparkles,
+      id: 'frontend',
+      title: t('auth.frontend'),
+    },
+    {
+      description: t('auth.foundationDescription'),
+      icon: ShieldCheck,
+      id: 'foundation',
+      title: t('auth.foundation'),
+    },
+  ];
+
+  return (
+    <div className='relative grid h-full place-items-center overflow-hidden bg-neutral-950 p-12 text-white'>
+      <div className='pointer-events-none absolute inset-0 [background-image:linear-gradient(currentColor_1px,transparent_1px),linear-gradient(90deg,currentColor_1px,transparent_1px)] [background-size:48px_48px] opacity-[0.08]' />
+      <div className='relative w-full max-w-xl'>
+        <p className='text-xs font-semibold tracking-[0.16em] text-white/55 uppercase'>
+          {t('auth.platform')}
+        </p>
+        <h2 className='mt-4 text-5xl leading-[1.05] font-semibold tracking-[-0.045em]'>
+          {t('auth.marketingTitleFirst')}
+          <br />
+          {t('auth.marketingTitleSecond')}
+          <br />
+          {t('auth.marketingTitleThird')}
+        </h2>
+        <p className='mt-5 text-sm leading-6 text-white/60'>
+          {t('auth.marketingDescription')}
+        </p>
+        <div className='mt-8 overflow-hidden rounded-2xl bg-white text-neutral-950 shadow-2xl'>
+          <div className='space-y-5 p-6'>
+            {features.map(({ description, icon: Icon, id, title }) => (
+              <div className='flex gap-4' key={id}>
+                <span className='grid size-11 shrink-0 place-items-center rounded-xl bg-neutral-100 text-neutral-700'>
+                  <Icon aria-hidden='true' className='size-5' />
+                </span>
+                <div>
+                  <p className='font-semibold'>{title}</p>
+                  <p className='mt-1 text-sm leading-6 text-neutral-500'>
+                    {description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className='flex items-center gap-3 bg-neutral-100 px-6 py-4 text-sm font-medium text-neutral-600'>
+            <Blocks aria-hidden='true' className='size-4' />
+            <span>{t('auth.marketingFooter')}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/client/pages/home.tsx

@@ -0,0 +1,16 @@
+import { useTranslation } from '@nocobase/i18n/client';
+import type { ReactElement } from 'react';
+
+export default function HomePage(): ReactElement {
+  const { t } = useTranslation();
+  return (
+    <section className='mx-auto grid min-h-[calc(100svh-4rem)] w-full max-w-5xl place-items-center px-6 py-10'>
+      <div className='max-w-xl space-y-6 text-center'>
+        <h1 className='font-heading text-3xl font-semibold tracking-tight'>
+          {t('home.title')}
+        </h1>
+        <p className='text-muted-foreground'>{t('home.description')}</p>
+      </div>
+    </section>
+  );
+}

package/client/pages/inbox.tsx

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+
+import { InboxPage as InboxBlock } from '#extensions/nocobase-inbox/inbox-page';
+
+/**
+ * Route `/inbox`: the UI Library's inbox block over the in-app notification plugin, reached from the header's inbox
+ * button. Every message reads as a notification; to add decisions that wait on the viewer, pass a `source` and a
+ * `registry`, as `client/extensions/nocobase-inbox/source.ts` describes.
+ */
+export default function InboxPage(): ReactElement {
+  return <InboxBlock />;
+}

package/client/plugins.ts

@@ -0,0 +1,41 @@
+import defaultAccess from '@nocobase/app-plugin-authz-default-access/client';
+import sharingRules from '@nocobase/app-plugin-authz-sharing-rules/client';
+import restrictionRules from '@nocobase/app-plugin-authz-restriction-rules/client';
+import {
+  defineClientPlugins,
+  type AppClientPlugins,
+} from '@nocobase/app-client/plugins';
+import aiEmployee from '@nocobase/app-plugin-ai-employee/client';
+import apiKeys from '@nocobase/app-plugin-api-keys/client';
+import authentication from '@nocobase/app-plugin-authentication/client';
+import authorization from '@nocobase/app-plugin-authorization/client';
+import databaseExplorer from '@nocobase/app-plugin-database-explorer/client';
+import users from '@nocobase/app-plugin-users/client';
+import notificationInApp from '@nocobase/app-plugin-notification-in-app/client';
+import i18n from '@nocobase/app-plugin-i18n/client';
+import workflow from '@nocobase/app-plugin-workflow/client';
+import notification from '@nocobase/app-plugin-notification/client';
+import scheduler from '@nocobase/app-plugin-scheduler/client';
+import file from '@nocobase/app-plugin-file/client';
+
+// Array order is contribution order. A plugin is enabled by appearing in this
+// list; removing its entry and its import disables it.
+const clientPlugins: AppClientPlugins = defineClientPlugins([
+  authentication(),
+  aiEmployee(),
+  authorization(),
+  defaultAccess(),
+  sharingRules(),
+  restrictionRules(),
+  databaseExplorer(),
+  users({ mount: 'settings', path: '/users' }),
+  apiKeys({ path: '/api-keys' }),
+  i18n(),
+  notificationInApp(),
+  workflow(),
+  notification(),
+  file(),
+  scheduler(),
+]);
+
+export default clientPlugins;

package/client/react-providers.ts

@@ -0,0 +1,27 @@
+import {
+  defineClientReactProviders,
+  type AppClientReactProviderDefinition,
+} from '@nocobase/app-client/plugins';
+
+import { Toaster } from '#components/ui/toast';
+
+import { AppThemeProvider } from './theme/theme-provider.js';
+
+export const reactProviders: readonly AppClientReactProviderDefinition[] =
+  defineClientReactProviders([
+    {
+      component: AppThemeProvider,
+      layer: 'root',
+      name: 'theme',
+    },
+    // The one toast host. It renders what plugins and pages report through
+    // `useToaster()`, which `client/service-provider.ts` connects to it.
+    // Pages must not mount another.
+    {
+      component: Toaster,
+      layer: 'application',
+      name: 'toaster',
+    },
+  ]);
+
+export default reactProviders;

package/client/route-overrides.ts

@@ -0,0 +1,9 @@
+import {
+  defineClientRouteComponentOverrides,
+  type AppClientRouteComponentOverrideDefinition,
+} from '@nocobase/app-client/plugins';
+
+export const routeComponentOverrides: readonly AppClientRouteComponentOverrideDefinition[] =
+  defineClientRouteComponentOverrides([]);
+
+export default routeComponentOverrides;

package/client/routes.ts

@@ -0,0 +1,75 @@
+import { Home } from 'lucide-react';
+import {
+  defineAppRoutes,
+  defineSettingsRoutes,
+  type AppClientRouteContribution,
+} from '@nocobase/app-client/plugins';
+
+const appRoutes: AppClientRouteContribution = defineAppRoutes([
+  {
+    // Every signed-in user reaches the landing page. `authz: 'skip'` takes it out of page authorization entirely, so
+    // no permission change can leave a user signed in with nowhere to land.
+    authz: 'skip',
+    auth: 'required',
+    componentLoader: () => import('./pages/home.js'),
+    name: 'home',
+    navigation: { title: 'navigation.home', icon: Home },
+    path: '/',
+  },
+  {
+    // The header's inbox button is where a user looks for messages, so this page is reached from there. Declaring no
+    // navigation keeps a second menu entry from pointing at the one destination the button already owns. The plugin's
+    // API answers each person's own messages only, so the page needs no authorization of its own.
+    authz: 'skip',
+    auth: 'required',
+    componentLoader: () => import('./pages/inbox.js'),
+    name: 'inbox',
+    path: '/inbox',
+  },
+  {
+    auth: 'guest',
+    authz: 'skip',
+    componentLoader: () => import('./pages/auth/login.js'),
+    name: 'login',
+    path: '/login',
+  },
+  {
+    auth: 'guest',
+    authz: 'skip',
+    componentLoader: () => import('./pages/auth/register.js'),
+    name: 'register',
+    path: '/register',
+  },
+  {
+    auth: 'guest',
+    authz: 'skip',
+    componentLoader: () => import('./pages/auth/forgot-password.js'),
+    name: 'forgot-password',
+    path: '/forgot-password',
+  },
+  {
+    auth: 'guest',
+    authz: 'skip',
+    componentLoader: () => import('./pages/auth/reset-password.js'),
+    name: 'reset-password',
+    path: '/reset-password',
+  },
+  {
+    // Where a command line's sign-in sends the person to approve it (`pages/auth/device.tsx`). Optional rather than
+    // required so it renders outside the shell, like the sign-in pages; the page sends a guest to sign in and back.
+    auth: 'optional',
+    authz: 'skip',
+    componentLoader: () => import('./pages/auth/device.js'),
+    name: 'device',
+    path: '/device',
+  },
+]);
+
+const settingsRoutes: AppClientRouteContribution = defineSettingsRoutes([]);
+
+const routes: readonly AppClientRouteContribution[] = [
+  appRoutes,
+  settingsRoutes,
+];
+
+export default routes;

package/client/routing/app-router.tsx

@@ -0,0 +1,127 @@
+import { useTranslation } from '@nocobase/i18n/client';
+import {
+  GuestAuthentication,
+  RequiredAuthentication,
+} from '@nocobase/app-plugin-authentication/client';
+import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
+import { lazy, Suspense, useMemo, type ReactElement } from 'react';
+import { Navigate, Outlet, Route, Routes } from 'react-router';
+
+import { Loading } from '#components/loading';
+import { EMPTY_ARRAY } from '#lib/constants';
+
+import { AppLayout } from '../layouts/app-layout.js';
+import { renderRouteTree } from './route-tree.js';
+import { StandalonePageLayout } from './standalone-page-layout.js';
+
+// The settings centre brings its own chrome and navigation, none of which the application needs until someone opens
+// it. Loading it lazily keeps it out of the entry chunk, the same way every page it hosts stays out.
+const SettingsLayout = lazy(async () => ({
+  default: (await import('../layouts/settings-layout.js')).SettingsLayout,
+}));
+
+export interface AppRouterProps {
+  readonly settingsRouteTree: readonly AppClientRegisteredRoute[];
+  readonly devRouteTree: readonly AppClientRegisteredRoute[];
+  readonly clientRoutes: readonly AppClientRegisteredRoute[];
+}
+
+export function AppRouter(inputProps: AppRouterProps): ReactElement {
+  const { t } = useTranslation();
+  const { settingsRouteTree, devRouteTree, clientRoutes } = inputProps;
+
+  const settingsRoutes = useMemo(
+    () =>
+      filterRouteTree(
+        clientRoutes,
+        (route) =>
+          route.auth === 'required' && route.path.startsWith('/settings/'),
+      ),
+    [clientRoutes],
+  );
+  const routeGroups = useMemo(
+    () => ({
+      guest: clientRoutes.filter((route) => route.auth === 'guest'),
+      optional: clientRoutes.filter((route) => route.auth === 'optional'),
+      required: filterRouteTree(
+        clientRoutes,
+        (route) =>
+          route.auth === 'required' && !route.path.startsWith('/settings/'),
+      ),
+    }),
+    [clientRoutes],
+  );
+
+  return (
+    <Routes>
+      <Route
+        element={
+          <RequiredAuthentication>
+            <Outlet />
+          </RequiredAuthentication>
+        }
+      >
+        <Route
+          element={
+            <AppLayout routes={routeGroups.required} devRoutes={devRouteTree} />
+          }
+        >
+          {renderRouteTree(routeGroups.required)}
+          {/* Pages plugins declare with `defineDevRoutes()` keep their `/dev/...` paths inside the application shell.
+            A production build resolves no dev routes, so nothing is rendered here. */}
+          {renderRouteTree(devRouteTree)}
+        </Route>
+        <Route
+          path='/settings/*'
+          element={
+            <Suspense
+              fallback={
+                <Loading
+                  className='min-h-svh'
+                  label={t('status.loadingSettings', {
+                    defaultValue: 'Loading settings',
+                  })}
+                />
+              }
+            >
+              <SettingsLayout
+                routeTree={settingsRouteTree}
+                routes={settingsRoutes}
+              />
+            </Suspense>
+          }
+        />
+      </Route>
+
+      <Route
+        element={
+          <GuestAuthentication>
+            <Outlet />
+          </GuestAuthentication>
+        }
+      >
+        <Route element={<StandalonePageLayout />}>
+          {renderRouteTree(routeGroups.guest)}
+        </Route>
+      </Route>
+
+      <Route element={<StandalonePageLayout />}>
+        {renderRouteTree(routeGroups.optional)}
+      </Route>
+
+      <Route path='*' element={<Navigate to='/' replace />} />
+    </Routes>
+  );
+}
+
+/** Pure groups can span surfaces; a page and its descendants always share their shell. */
+function filterRouteTree(
+  routes: readonly AppClientRegisteredRoute[],
+  predicate: (route: AppClientRegisteredRoute) => boolean,
+): AppClientRegisteredRoute[] {
+  return routes.flatMap((route) => {
+    if (route.componentLoader) return predicate(route) ? [route] : [];
+    const children = filterRouteTree(route.children ?? EMPTY_ARRAY, predicate);
+    return children.length ? [{ ...route, children }] : [];
+  });
+}