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