Merge pull request #6 from ciandt-china-dev/feature/Change-240514

Fix siteguard under chat router issue.

web/app/(commonLayout)/layout.tsx

@@ -5,15 +5,13 @@ import { AppContextProvider } from '@/context/app-context'
 import GA, { GaType } from '@/app/components/base/ga'
 import HeaderWrapper from '@/app/components/header/HeaderWrapper'
 import Header from '@/app/components/header'
-import SiteGuard from '@/app/components/site-guard'
 import { EventEmitterContextProvider } from '@/context/event-emitter'
 import { ProviderContextProvider } from '@/context/provider-context'
 import { ModalContextProvider } from '@/context/modal-context'
 
 const Layout = ({ children }: { children: ReactNode }) => {
   return (
     <>
-    <SiteGuard/>
       <GA gaType={GaType.admin} />
       <SwrInitor>
         <AppContextProvider>

web/app/(shareLayout)/layout.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import type { FC } from 'react'
 import GA, { GaType } from '@/app/components/base/ga'
+import SiteGuard from '../components/site-guard'
 
 const Layout: FC<{
   children: React.ReactNode
 }> = ({ children }) => {
   return (
     <div className="min-w-[300px] h-full pb-[env(safe-area-inset-bottom)]">
       <GA gaType={GaType.webapp} />
+      <SiteGuard />
       {children}
     </div>
   )

web/app/components/site-guard/index.tsx

@@ -1,18 +1,18 @@
 'use client'
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useEffect, useState, useRef } from 'react';
 import { usePathname } from 'next/navigation';
 
 const SiteGuard = () => {
   const router = usePathname();
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [isCheckingAuth, setIsCheckingAuth] = useState(true);
-  const [promptShown, setPromptShown] = useState(false);
+  const promptShown = useRef(false);
 
   useEffect(() => {
     const checkAuth = async () => {
-      if (router.startsWith('/chat') && !promptShown) {
+      if (router.startsWith('/chat') && !promptShown.current) {
         const password = prompt('Enter password:');
-        setPromptShown(true);
+        promptShown.current = true;
 
         if (password === 'cit2024') {
           setIsAuthenticated(true);
@@ -27,7 +27,7 @@ const SiteGuard = () => {
     };
 
     checkAuth();
-  }, [router, promptShown]);
+  }, [router]);
 
   if (isCheckingAuth) {
     return <div style={{ height: '100vh', backgroundColor: 'white' }} />;