legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: enhance login form with error handling and disable state

Browse Source
This commit is contained in:
Ardeman
2025-02-28 09:10:45 +08:00
parent e546ebd3dd
commit 0b6b43a951
3 changed files with 54 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/layouts/news/header-top.tsx
+36 -38
View File
@@ -11,49 +11,47 @@ export const HeaderTop = () => {
const fetcher = useFetcher()
return (
<>
<div className="flex h-[60px] items-center justify-between bg-white px-5 align-middle sm:h-[100px] sm:gap-[15px] sm:px-[50px] sm:py-[20px]">
<Link
to="/news"
className="mt-2 h-full py-2"
>
<img
src={APP.logo}
alt={APP.title}
className="h-3/4 w-auto sm:h-full"
/>
</Link>
<div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
{APP.description}
</div>
<div className="flex items-center gap-[15px]">
<Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
About Us
</Button>
{loaderData?.userToken ? (
<fetcher.Form
method="POST"
action="/actions/news/logout"
>
<Button
variant="newsSecondary"
className="hidden sm:block"
type="submit"
>
Logout
</Button>
</fetcher.Form>
) : (
<div className="flex h-[60px] items-center justify-between bg-white px-5 align-middle sm:h-[100px] sm:gap-[15px] sm:px-[50px] sm:py-[20px]">
<Link
to="/news"
className="mt-2 h-full py-2"
>
<img
src={APP.logo}
alt={APP.title}
className="h-3/4 w-auto sm:h-full"
/>
</Link>
<div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
{APP.description}
</div>
<div className="flex items-center gap-[15px]">
<Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
About Us
</Button>
{loaderData?.userToken ? (
<fetcher.Form
method="POST"
action="/actions/news/logout"
>
<Button
variant="newsSecondary"
className="hidden sm:block"
onClick={() => setIsLoginOpen(true)}
type="submit"
>
Masuk
Logout
</Button>
)}
</div>
</fetcher.Form>
) : (
<Button
variant="newsSecondary"
className="hidden sm:block"
onClick={() => setIsLoginOpen(true)}
>
Masuk
</Button>
)}
</div>
</>
</div>
)
}