test: multi-tenant login tiles (#14940)

Just adds buttons for logging in with different types of users in the
plugin-multi-tenant test config.

<img width="658" height="863" alt="CleanShot 2025-12-16 at 09 31 49"
src="https://github.com/user-attachments/assets/7bfda8ec-8da7-44b0-892c-4f6fabe327e7"
/>

Author: JarrodMFlesch

test/plugin-multi-tenant/components/BeforeLogin/index.scss

@@ -0,0 +1,67 @@
+.before-login {
+  margin-bottom: calc(var(--base) * 1.5);
+
+  &__title {
+    margin-bottom: calc(var(--base) / 2);
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--theme-elevation-800);
+  }
+
+  &__description {
+    margin-bottom: var(--base);
+    font-size: 0.9rem;
+    color: var(--theme-elevation-600);
+  }
+
+  &__buttons {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) * 0.75);
+  }
+
+  &__button {
+    padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 4px;
+    background-color: var(--theme-elevation-0);
+    cursor: pointer;
+    text-align: left;
+    transition: all 0.2s;
+
+    &:hover:not(:disabled) {
+      background-color: var(--theme-success-50);
+      border-color: var(--theme-success-250);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    &--loading {
+      background-color: var(--theme-elevation-50);
+    }
+  }
+
+  &__button-name {
+    font-weight: 600;
+    margin-bottom: calc(var(--base) / 4);
+    color: var(--theme-elevation-800);
+  }
+
+  &__button-details {
+    font-size: 0.85rem;
+    color: var(--theme-elevation-600);
+  }
+
+  &__error {
+    margin-top: var(--base);
+    padding: calc(var(--base) * 0.75);
+    background-color: var(--theme-error-50);
+    border: 1px solid var(--theme-error-200);
+    border-radius: 4px;
+    color: var(--theme-error-600);
+    font-size: 0.9rem;
+  }
+}

test/plugin-multi-tenant/components/BeforeLogin/index.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import type { PayloadClientReactComponent, SanitizedConfig } from 'payload'
+
+import { useAuth, useRouteCache } from '@payloadcms/ui'
+import React, { useState } from 'react'
+
+import { credentials } from '../../credentials.js'
+import './index.scss'
+
+const baseClass = 'before-login'
+
+const testUsers = [
+  {
+    name: 'Admin (All Tenants)',
+    ...credentials.admin,
+  },
+  {
+    name: 'Blue Dog User',
+    ...credentials.blueDog,
+  },
+  {
+    name: 'Multi-Tenant Owner',
+    ...credentials.owner,
+  },
+  {
+    name: 'Steel Cat User',
+    ...credentials.steelCat,
+  },
+]
+
+export const BeforeLogin: PayloadClientReactComponent<
+  SanitizedConfig['admin']['components']['beforeLogin'][0]
+> = () => {
+  const { setUser } = useAuth()
+  const [loading, setLoading] = useState<null | string>(null)
+  const [error, setError] = useState<null | string>(null)
+  const { clearRouteCache } = useRouteCache()
+
+  const login = React.useCallback(
+    async (credentials: { email: string; password: string }) => {
+      const response = await fetch('/api/users/login', {
+        body: JSON.stringify(credentials),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+      })
+
+      if (!response.ok) {
+        throw new Error(`Login failed with status ${response.status}`)
+      }
+
+      const data = await response.json()
+      setUser(data)
+      clearRouteCache()
+    },
+    [setUser, clearRouteCache],
+  )
+
+  const handleQuickLogin = async (email: string, password: string) => {
+    setLoading(email)
+    setError(null)
+    try {
+      await login({ email, password })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed')
+      setLoading(null)
+    }
+  }
+
+  return (
+    <div className={baseClass}>
+      <h3 className={`${baseClass}__title`}>Multi-Tenant Test Users</h3>
+      <p className={`${baseClass}__description`}>
+        Quick login for testing different tenant access patterns
+      </p>
+      <div className={`${baseClass}__buttons`}>
+        {testUsers.map((user) => (
+          <button
+            className={`${baseClass}__button ${loading === user.email ? `${baseClass}__button--loading` : ''}`}
+            disabled={loading !== null}
+            key={user.email}
+            onClick={() => handleQuickLogin(user.email, user.password)}
+            type="button"
+          >
+            <div className={`${baseClass}__button-name`}>
+              {loading === user.email ? 'Logging in...' : user.email}
+            </div>
+            <div className={`${baseClass}__button-details`}>{user.name}</div>
+          </button>
+        ))}
+      </div>
+      {error && <div className={`${baseClass}__error`}>{error}</div>}
+    </div>
+  )
+}

test/plugin-multi-tenant/config.ts

@@ -25,6 +25,7 @@ export default buildConfigWithDefaults({
       baseDir: path.resolve(dirname),
     },
     components: {
+      beforeLogin: ['/components/BeforeLogin/index.js#BeforeLogin'],
       graphics: {
         Logo: '/components/Logo/index.js#Logo',
         Icon: '/components/Icon/index.js#Icon',

test/plugin-multi-tenant/credentials.ts

@@ -11,4 +11,8 @@ export const credentials = {
     email: 'owner@anchorAndBlueDog.com',
     password: 'test',
   },
+  steelCat: {
+    email: 'huel@steel-cat.com',
+    password: 'test',
+  },
 } as const

test/plugin-multi-tenant/payload-types.ts

@@ -98,6 +98,7 @@ export interface Config {
   db: {
     defaultIDType: string;
   };
+  fallbackLocale: ('false' | 'none' | 'null') | false | null | ('en' | 'es' | 'fr') | ('en' | 'es' | 'fr')[];
   globals: {};
   globalsSelect: {};
   locale: 'en' | 'es' | 'fr';

test/plugin-multi-tenant/seed/index.ts

@@ -239,8 +239,7 @@ export const seed: Config['onInit'] = async (payload) => {
   await payload.create({
     collection: usersSlug,
     data: {
-      email: 'huel@steel-cat.com',
-      password: 'test',
+      ...credentials.steelCat,
       roles: ['user'],
       tenants: [
         {