定制登录页面

登录、注册、忘记密码、重置密码四个页面都是你应用里的代码,在 client/pages/auth/,用到的布局、表单、按钮在 client/extensions/ 下的 nocobase-auth-forms/、nocobase-auth-methods/、nocobase-auth-split-layout/,由 NocoBase UI Library 安装。这些组件只管展示,文案通过参数传入;页面负责接上插件的登录动作和翻译。它们不是插件的一部分,没有「覆盖」这回事,想改就直接改。

换成自己的样子

logo 和右侧宣传区在 client/pages/auth/shared.tsx 里定义一次,四个页面共用;标题和说明在各自页面里。

登录页和注册页换我们的 logo,浅色深色主题各一张,图放在 public/assets/。标题改成「欢迎使用 CRM」,右侧换三条产品亮点。别的页面不动。

Agent 只会改品牌文件和文案,表单不动。

一个页面放几种方式

布局支持多个表单用 tab 切换,表单下面还能放一排第三方登录按钮:

登录页保留账号密码,加一个「企业账号」tab 走 LDAP,下面放 GitHub 和 Google 两个按钮。

按钮点下去真正发生的登录属于增加认证方式,页面这边只是把它们摆好。

关掉自助注册

只允许管理员建账号。注册接口关掉,登录页去掉注册入口,忘记密码保留。

这要做两步:服务端配置关闭注册,让接口拒绝;再拿掉路由和链接。只藏链接不关接口,注册还是能用。

表单要完全换一种

想要不一样的表单外观,让 Agent 基于插件的无页面登录动作重写表单,不要自己调接口:

登录表单改成两步式,先输账号再输密码。登录逻辑不变。

插件提供登录、注册、请求重置、重置密码四个动作,各自处理进行中和出错状态,表单只管收集输入和展示。

让忘记密码真的能用

页面有了,邮件还没配。发送方式由应用决定,通常接通知:

配一下忘记密码的邮件,用现有邮件通道。链接指向重置密码页。不管邮箱存不存在,页面都显示同样的提示。

配好并真的收到一封之前,别在生产登录页放忘记密码入口,用户点了什么都收不到。

登录后去哪

没登录访问受保护页面会被带到 /login,登录成功默认回首页。想去别的地方,在首页或登录成功后再跳一次,Agent 会在你的页面里实现,不会改守卫。

验收

  • 四个页面在浅色和深色主题下品牌都对;
  • 关闭注册后直接请求注册接口被拒绝;
  • 多方式登录页每种都能登进去,出错提示可读;
  • 密码重置邮件真实收到,链接能打开重置页并完成重置;
  • 测试、typecheck 和构建通过。