Implement logout functionality for account page

- Create LogoutButton client component using signOut from next-auth/react
- Update account page to use LogoutButton instead of static link
- Convert account page to async server component for proper i18n
- Add locale-aware routing for settings link
- Add logging-out-message translations (EN/HR)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/[locale]/account/LogoutButton.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { FC } from 'react';
+import LogoutIcon from "@mui/icons-material/Logout";
+import { signOut } from 'next-auth/react';
+import { useLocale, useTranslations } from 'next-intl';
+import { Button } from '@/app/ui/button';
+
+export const LogoutButton: FC = () => {
+    const t = useTranslations('account-page');
+    const locale = useLocale();
+
+    const handleLogout = () => {
+        signOut({ callbackUrl: `/${locale}/login` });
+    };
+
+    return (
+        <Button className='btn' onClick={handleLogout}><LogoutIcon /> {t('logout-button')}</Button>
+    )
+}

app/[locale]/account/page.tsx

@@ -2,12 +2,13 @@ import { FC } from 'react';
 import { Main } from '@/app/ui/Main';
 import Link from 'next/link';
 import SettingsIcon from "@mui/icons-material/Settings";
-import LogoutIcon from "@mui/icons-material/Logout";
 import AccountCircle from "@mui/icons-material/AccountCircle";
-import { useTranslations } from 'next-intl';
+import { getTranslations, getLocale } from 'next-intl/server';
+import { LogoutButton } from './LogoutButton';
 
-const Page: FC = () => {
-    const t = useTranslations('account-page');
+const Page: FC = async () => {
+    const t = await getTranslations('account-page');
+    const locale = await getLocale();
 
     return (
         <Main>
@@ -15,8 +16,8 @@ const Page: FC = () => {
                 <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
                     <div className="card-body">
                         <h2 className="card-title"><AccountCircle /> {t('title')}</h2>
-                        <Link href="/account/settings" className='btn btn-neutral'><SettingsIcon /> {t('settings-button')}</Link>
-                        <Link href="/account/logout" className='btn btn-error'><LogoutIcon /> {t('logout-button')}</Link>
+                        <Link href={`/${locale}/account/settings`} className='btn btn-neutral'><SettingsIcon /> {t('settings-button')}</Link>
+                        <LogoutButton />
                     </div>
                 </div>
             </div>

messages/en.json

@@ -5,7 +5,8 @@
   "account-page": {
     "title": "User account",
     "settings-button": "User Settings",
-    "logout-button": "Logout"
+    "logout-button": "Logout",
+    "logging-out-message": "Logging out..."
   },
   "PageFooter": {
     "app-description": "Helping you to stay on top of your utility bills",

messages/hr.json

@@ -5,7 +5,8 @@
   "account-page": {
     "title": "Korisnički račun",
     "settings-button": "Korisničke postavke",
-    "logout-button": "Odjava"
+    "logout-button": "Odjava",
+    "logging-out-message": "Odjavljujem se..."
   },
   "PageFooter": {
     "app-description": "Preuzmite kontrolu nad svojim režijama!",