feat: Add splash images and redesign the logout page user interface.
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user