fix(ui): renders stay logged in modal (#6009)

packages/ui/src/elements/StayLoggedIn/index.scss

@@ -1,4 +1,4 @@
-@import '../../../scss/styles.scss';
+@import '../../scss/styles.scss';
 
 .stay-logged-in {
   @include blur-bg;

packages/ui/src/elements/StayLoggedIn/index.tsx

@@ -1,13 +1,10 @@
 'use client'
 import * as facelessUIImport from '@faceless-ui/modal'
+import { useAuth } from '@payloadcms/ui/providers/Auth'
 // TODO: abstract the `next/navigation` dependency out from this component
 import { useRouter } from 'next/navigation.js'
 import React from 'react'
 
-export type StayLoggedInProps = {
-  refreshCookie: () => void
-}
-
 import { Button } from '../../elements/Button/index.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
@@ -15,14 +12,15 @@ import './index.scss'
 
 const baseClass = 'stay-logged-in'
 
-const modalSlug = 'stay-logged-in'
+export const stayLoggedInModalSlug = 'stay-logged-in'
 
-export const StayLoggedInModal: React.FC<StayLoggedInProps> = (props) => {
+export const StayLoggedInModal: React.FC = () => {
   const { Modal, useModal } = facelessUIImport
+  const { refreshCookie } = useAuth()
 
-  const { refreshCookie } = props
   const router = useRouter()
   const config = useConfig()
+
   const {
     admin: { logoutRoute },
     routes: { admin },
@@ -31,7 +29,7 @@ export const StayLoggedInModal: React.FC<StayLoggedInProps> = (props) => {
   const { t } = useTranslation()
 
   return (
-    <Modal className={baseClass} slug="stay-logged-in">
+    <Modal className={baseClass} slug={stayLoggedInModalSlug}>
       <div className={`${baseClass}__wrapper`}>
         <div className={`${baseClass}__content`}>
           <h1>{t('authentication:stayLoggedIn')}</h1>
@@ -41,7 +39,7 @@ export const StayLoggedInModal: React.FC<StayLoggedInProps> = (props) => {
           <Button
             buttonStyle="secondary"
             onClick={() => {
-              toggleModal(modalSlug)
+              toggleModal(stayLoggedInModalSlug)
               router.push(`${admin}${logoutRoute}`)
             }}
           >
@@ -50,7 +48,7 @@ export const StayLoggedInModal: React.FC<StayLoggedInProps> = (props) => {
           <Button
             onClick={() => {
               refreshCookie()
-              toggleModal(modalSlug)
+              toggleModal(stayLoggedInModalSlug)
             }}
           >
             {t('authentication:stayLoggedIn')}

packages/ui/src/providers/Auth/index.tsx

@@ -3,6 +3,7 @@ import type { ClientUser, Permissions } from 'payload/auth'
 import type { MeOperationResult } from 'payload/types'
 
 import * as facelessUIImport from '@faceless-ui/modal'
+import { stayLoggedInModalSlug } from '@payloadcms/ui/elements/StayLoggedIn'
 import { usePathname, useRouter } from 'next/navigation.js'
 import qs from 'qs'
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
@@ -278,7 +279,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     if (remainingTime > 0) {
       reminder = setTimeout(
         () => {
-          openModal('stay-logged-in')
+          openModal(stayLoggedInModalSlug)
         },
         Math.max(Math.min((remainingTime - 60) * 1000, maxTimeoutTime)),
       )

packages/ui/src/providers/Root/index.tsx

@@ -5,6 +5,7 @@ import type { ClientConfig } from 'payload/types'
 import * as facelessUIImport from '@faceless-ui/modal'
 import * as facelessUIImport3 from '@faceless-ui/scroll-info'
 import * as facelessUIImport2 from '@faceless-ui/window-info'
+import { StayLoggedInModal } from '@payloadcms/ui/elements/StayLoggedIn'
 import React, { Fragment } from 'react'
 import { Slide, ToastContainer } from 'react-toastify'
 
@@ -104,6 +105,7 @@ export const RootProvider: React.FC<Props> = ({
                               </ThemeProvider>
                             </PreferencesProvider>
                             <ModalContainer />
+                            <StayLoggedInModal />
                           </AuthProvider>
                         </ModalProvider>
                       </SearchParamsProvider>

tsconfig.json

@@ -161,4 +161,4 @@
     ".next/types/**/*.ts",
     "scripts/**/*.ts"
   ]
-}
+}