feat: Add splash images and redesign the logout page user interface.

This commit is contained in:
pradeepkumar
2026-03-10 22:48:10 +05:30
parent 6055160b30
commit fd480992a3
3 changed files with 28 additions and 12 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

View File

@@ -3,6 +3,7 @@
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { clearAuthCookies } from './actions'; import { clearAuthCookies } from './actions';
import { signOut } from 'next-auth/react'; import { signOut } from 'next-auth/react';
import Image from 'next/image';
export default function LogoutPage() { export default function LogoutPage() {
const hasStarted = useRef(false); const hasStarted = useRef(false);
@@ -18,15 +19,15 @@ export default function LogoutPage() {
localStorage.removeItem('refreshToken'); localStorage.removeItem('refreshToken');
localStorage.removeItem('user'); localStorage.removeItem('user');
await signOut({ redirect: false }) await signOut({ redirect: false });
// Delete httpOnly cookies via server action (Next.js cookies() API) // Delete httpOnly cookies via server action (Next.js cookies() API)
await clearAuthCookies(); await clearAuthCookies();
setTimeout(() => { setTimeout(() => {
// Redirect to login // Redirect to login
window.location.reload() window.location.reload();
window.location.href = '/login'; window.location.href = '/login';
}, 3000) }, 3000);
}; };
performLogout().catch(() => { performLogout().catch(() => {
@@ -35,16 +36,31 @@ export default function LogoutPage() {
}, []); }, []);
return ( return (
<div className="min-h-screen flex items-center justify-center bg-white"> <div
<div className="text-center"> className="min-h-screen flex flex-col items-center justify-center"
<div className="w-12 h-12 border-4 border-[#e58625] border-t-transparent rounded-full animate-spin mx-auto mb-6" /> style={{
<h1 className="font-fractul font-bold text-[24px] text-[#00293D] mb-2"> background: 'linear-gradient(to bottom, #c4d9d4, #f0f5fc)',
Signing Out }}
</h1> >
<p className="font-serif text-[14px] text-[#00293D]/60"> <Image
Please wait while we securely log you out... src="/assets/images/splash-house.png"
</p> alt="House illustration"
width={150}
height={108}
priority
/>
<div className="mt-[35px]">
<Image
src="/assets/images/splash-logo.png"
alt="RE-Quest logo"
width={264}
height={55}
priority
/>
</div> </div>
<p className="mt-8 font-serif text-[14px] text-[#00293D]/60 animate-pulse">
Signing out...
</p>
</div> </div>
); );
} }