feat: Add splash images and redesign the logout page user interface.
This commit is contained in:
BIN
public/assets/images/splash-house.png
Normal file
BIN
public/assets/images/splash-house.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
public/assets/images/splash-logo.png
Normal file
BIN
public/assets/images/splash-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user