fix: allows navigation to reset-pw route, adds customization for route (#6778)

Fixes #6745

Fixes the inability to navigate to the reset password route. Adds the ability to customize the route and docs for all customizable admin panel routes.

Author: JarrodMFlesch

docs/admin/overview.mdx

@@ -45,7 +45,7 @@ All options for the Admin panel are defined in your base Payload config file.
 | `components`      | Component overrides that affect the entirety of the Admin panel. [More](/docs/admin/components)                                                                                                                                                                             |
 | `webpack`         | Customize the Webpack config that's used to generate the Admin panel. [More](/docs/admin/webpack)                                                                                                                                                                           |
 | `vite`            | Customize the Vite config that's used to generate the Admin panel. [More](/docs/admin/vite)                                                                                                                                                                                 |
-| `routes`          | Replace built-in Admin Panel routes with your own custom routes. I.e. `{ logout: '/custom-logout', inactivity: 'custom-inactivity' }`                                                                                                                                       |
+| `routes`          | Replace built-in Admin Panel routes with your own custom routes. [More](/docs/admin/overview#custom-admin-panel-routes)                                                                                                                                                     |
 
 ### The Admin User Collection
 
@@ -88,3 +88,32 @@ Users in the admin panel have access to choosing between light mode and dark mod
 ### Restricting user access
 
 If you would like to restrict which users from a single Collection can access the Admin panel, you can use the `admin` access control function. [Click here](/docs/access-control/overview#admin) to learn more.
+
+### Custom admin panel routes
+
+You can configure custom routes in the admin panel for the following routes:
+
+| Option            | Default route                                                                                                                                                                                                                                                                 |
+| ----------------- | ----------------------- |
+| `account`         | `/account`              |
+| `createFirstUser` | `/create-first-user`    |
+| `forgot`          | `/forgot`               |
+| `inactivity`      | `/logout-inactivity`    |
+| `login`           | `/login`                |
+| `logout`          | `/logout`               |
+| `reset`           | `/reset`                |
+| `unauthorized`    | `/unauthorized`         |
+
+`payload.config.js`:
+
+```ts
+import { buildConfig } from 'payload/config'
+
+const config = buildConfig({
+  admin: {
+    routes: {
+      admin: '/custom-admin-route'
+    }
+  },
+})
+```

packages/next/src/utilities/initPage/shared.ts

@@ -8,6 +8,7 @@ const authRouteKeys: (keyof SanitizedConfig['admin']['routes'])[] = [
   'forgot',
   'inactivity',
   'unauthorized',
+  'reset',
 ]
 
 export const isAdminRoute = (route: string, adminRoute: string) => {

packages/next/src/views/Document/index.tsx

@@ -1,6 +1,5 @@
 import type { EditViewComponent } from 'payload/config'
-import type { AdminViewComponent, ServerSideEditViewProps } from 'payload/types'
-import type { AdminViewProps } from 'payload/types'
+import type { AdminViewComponent, AdminViewProps, ServerSideEditViewProps } from 'payload/types'
 
 import { DocumentHeader } from '@payloadcms/ui/elements/DocumentHeader'
 import { HydrateClientUser } from '@payloadcms/ui/elements/HydrateClientUser'

packages/next/src/views/Root/getViewFromConfig.tsx

@@ -26,7 +26,7 @@ const baseClasses = {
 }
 
 type OneSegmentViews = {
-  [K in keyof SanitizedConfig['admin']['routes']]: AdminViewComponent
+  [K in Exclude<keyof SanitizedConfig['admin']['routes'], 'reset'>]: AdminViewComponent
 }
 
 const oneSegmentViews: OneSegmentViews = {

packages/payload/src/auth/operations/forgotPassword.ts

@@ -108,7 +108,7 @@ export const forgotPasswordOperation = async (incomingArgs: Arguments): Promise<
           : `${protocol}//${req.headers.get('host')}`
 
       let html = `${req.t('authentication:youAreReceivingResetPassword')}
-    <a href="${serverURL}${config.routes.admin}/reset/${token}">${serverURL}${config.routes.admin}/reset/${token}</a>
+    <a href="${serverURL}${config.routes.admin}/${config.admin.routes.reset}/${token}">${serverURL}${config.routes.admin}/${config.admin.routes.reset}/${token}</a>
     ${req.t('authentication:youDidNotRequestPassword')}`
 
       if (typeof collectionConfig.auth.forgotPassword.generateEmailHTML === 'function') {

packages/payload/src/config/defaults.ts

@@ -18,6 +18,7 @@ export const defaults: Omit<Config, 'db' | 'editor' | 'secret'> = {
       inactivity: '/logout-inactivity',
       login: '/login',
       logout: '/logout',
+      reset: '/reset',
       unauthorized: '/unauthorized',
     },
   },

packages/payload/src/config/schema.ts

@@ -90,6 +90,7 @@ export default joi.object({
       inactivity: joi.string(),
       login: joi.string(),
       logout: joi.string(),
+      reset: joi.string(),
       unauthorized: joi.string(),
     }),
     user: joi.string(),

packages/payload/src/config/types.ts

@@ -564,6 +564,8 @@ export type Config = {
       login?: string
       /** The route for the logout page. */
       logout?: string
+      /** The route for the reset password page. */
+      reset?: string
       /** The route for the unauthorized page. */
       unauthorized?: string
     }