Merge branch 'hotfix/2.6.2'

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

@@ -1,33 +1,28 @@
-import { FC, Suspense } from 'react';
+import { FC } from 'react';
 import { Main } from '@/app/ui/Main';
-import { UserSettingsForm as UserSettingsForm, UserSettingsFormSkeleton } from '@/app/ui/UserSettingsForm';
+import Link from 'next/link';
-import { getUserSettings } from '@/app/lib/actions/userSettingsActions';
+import SettingsIcon from "@mui/icons-material/Settings";
+import AccountCircle from "@mui/icons-material/AccountCircle";
+import { getTranslations, getLocale } from 'next-intl/server';
+import { LogoutButton } from './LogoutButton';
 
-const AccountPage: FC = async () => {
+const Page: FC = async () => {
-    const userSettings = await getUserSettings();
+    const t = await getTranslations('account-page');
+    const locale = await getLocale();
 
     return (
         <Main>
             <div className="flex flex-col items-center">
-                <UserSettingsForm userSettings={userSettings} />
+                <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={`/${locale}/account/settings`} className='btn btn-neutral'><SettingsIcon /> {t('settings-button')}</Link>
+                        <LogoutButton />
+                    </div>
+                </div>
             </div>
         </Main>
     );
 };
 
-const Page: FC = () => {
-    return (
-        <Suspense fallback={
-            <Main>
-                <div className="flex flex-col items-center">
-                    <div className="h-8 w-48 skeleton mb-4"></div>
-                    <UserSettingsFormSkeleton />
-                </div>
-            </Main>
-        }>
-            <AccountPage />
-        </Suspense>
-    );
-};
-
 export default Page;

app/[locale]/account/settings/page.tsx

@@ -0,0 +1,33 @@
+import { FC, Suspense } from 'react';
+import { Main } from '@/app/ui/Main';
+import { UserSettingsForm as UserSettingsForm, UserSettingsFormSkeleton } from '@/app/ui/UserSettingsForm';
+import { getUserSettings } from '@/app/lib/actions/userSettingsActions';
+
+const UserSettingsPage: FC = async () => {
+    const userSettings = await getUserSettings();
+
+    return (
+        <Main>
+            <div className="flex flex-col items-center">
+                <UserSettingsForm userSettings={userSettings} />
+            </div>
+        </Main>
+    );
+};
+
+const Page: FC = () => {
+    return (
+        <Suspense fallback={
+            <Main>
+                <div className="flex flex-col items-center">
+                    <div className="h-8 w-48 skeleton mb-4"></div>
+                    <UserSettingsFormSkeleton />
+                </div>
+            </Main>
+        }>
+            <UserSettingsPage />
+        </Suspense>
+    );
+};
+
+export default Page;

app/lib/auth.ts

@@ -35,8 +35,8 @@ export const authConfig: NextAuthConfig = {
       // see: https://stackoverflow.com/questions/70409219/get-user-id-from-session-in-next-auth-client
       jwt({ token, account, user }) {
          if (account) {
-            // console.log("(jwt) account:", account);
+            // console.log("(JWT) account:", account);
-            // console.log("(jwt) user:", user);
+            // console.log("(JWT) user:", user);
            token.accessToken = account.access_token;
            // attach Google account ID to the token
            token.piggyback_providerAccountId = account.providerAccountId;
@@ -51,7 +51,7 @@ export const authConfig: NextAuthConfig = {
          if(session.user && token) {
             // assign Google account ID from the token to the Session user ID
             session.user.id = token.piggyback_providerAccountId;
-            // console.log("(jwt) token:", token);
+//            console.log("(SESSION) token:", token);
          }
          return session;
        },

app/ui/PageHeader.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { SelectLanguage } from "./SelectLanguage";
-import Settings from "@mui/icons-material/Settings";
+import AccountCircle from "@mui/icons-material/AccountCircle";
 
 export const PageHeader = () =>
     <div className="navbar bg-base-100 mb-6">
@@ -9,6 +9,6 @@ export const PageHeader = () =>
         <span className="grow">&nbsp;</span>
         <SelectLanguage />
         <Link href="/account/" className="btn btn-ghost btn-circle">
-            <Settings className="w-6 h-6" />
+            <AccountCircle  />
         </Link>
     </div>

messages/en.json

@@ -2,6 +2,11 @@
   "Index": {
     "title": "Welcome!"
   },
+  "account-page": {
+    "title": "User account",
+    "settings-button": "User Settings",
+    "logout-button": "Logout"
+  },
   "PageFooter": {
     "app-description": "Helping you to stay on top of your utility bills",
     "links": {

messages/hr.json

@@ -2,6 +2,11 @@
   "Index": {
     "title": "Dobrodošli"
   },
+  "account-page": {
+    "title": "Korisnički račun",
+    "settings-button": "Korisničke postavke",
+    "logout-button": "Odjava"
+  },
   "PageFooter": {
     "app-description": "Preuzmite kontrolu nad svojim režijama!",
     "links": {

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "evidencija-rezija",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "version": "2.6.0",
+      "version": "2.6.2",
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",

package.json

@@ -59,5 +59,5 @@
   "engines": {
     "node": ">=18.17.0"
   },
-  "version": "2.6.0"
+  "version": "2.6.2"
 }