refactor(Header): use logout server action

docker-compose.dev.yml

@@ -103,9 +103,7 @@ services:
 networks:
   tipi_main_network:
     driver: bridge
-    ipam:
-      driver: default
-      config:
-        - subnet: 10.21.21.0/24
+    name: runtipi_tipi_main_network
+
 volumes:
   pgdata:

src/app/(dashboard)/apps/page.tsx

@@ -2,13 +2,13 @@ import { AppServiceClass } from '@/server/services/apps/apps.service';
 import { db } from '@/server/db';
 import React from 'react';
 import { AppRouterOutput } from '@/server/routers/app/app.router';
-import { useUIStore } from '@/client/state/uiStore';
 import { Metadata } from 'next';
+import { getTranslatorFromCookie } from '@/lib/get-translator';
 import { AppTile } from './components/AppTile';
 import { EmptyPage } from '../../components/EmptyPage';
 
 export async function generateMetadata(): Promise<Metadata> {
-  const { translator } = useUIStore.getState();
+  const translator = await getTranslatorFromCookie();
 
   return {
     title: `${translator('apps.my-apps.title')} - Tipi`,

src/app/(dashboard)/components/Header/Header.tsx

@@ -9,6 +9,9 @@ import Link from 'next/link';
 import { Tooltip } from 'react-tooltip';
 import { useTranslations } from 'next-intl';
 import { useUIStore } from '@/client/state/uiStore';
+import { useAction } from 'next-safe-action/hook';
+import { logoutAction } from '@/actions/logout/logout-action';
+import Script from 'next/script';
 import { NavBar } from '../NavBar';
 
 interface IProps {
@@ -19,10 +22,11 @@ export const Header: React.FC<IProps> = ({ isUpdateAvailable }) => {
   const { setDarkMode } = useUIStore();
   const t = useTranslations('header');
 
-  const onLogout = async () => {};
+  const logoutMutation = useAction(logoutAction);
 
   return (
     <header className="text-white navbar navbar-expand-md navbar-dark navbar-overlap d-print-none" data-bs-theme="dark">
+      <Script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js" async />
       <div className="container-xl">
         <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
           <span className="navbar-toggler-icon" />
@@ -68,7 +72,14 @@ export const Header: React.FC<IProps> = ({ isUpdateAvailable }) => {
               <IconSun data-testid="icon-sun" size={20} />
             </div>
             <Tooltip anchorSelect=".logOut">{t('logout')}</Tooltip>
-            <div onClick={() => onLogout} tabIndex={0} onKeyPress={() => onLogout()} role="button" className="logOut nav-link px-0 cursor-pointer" data-testid="logout-button">
+            <div
+              onClick={() => logoutMutation.execute()}
+              tabIndex={0}
+              onKeyPress={() => logoutMutation.execute()}
+              role="button"
+              className="logOut nav-link px-0 cursor-pointer"
+              data-testid="logout-button"
+            >
               <IconLogout size={20} />
             </div>
           </div>

src/app/actions/logout/logout-action.ts

@@ -0,0 +1,31 @@
+'use server';
+
+import { z } from 'zod';
+import { cookies } from 'next/headers';
+import { db } from '@/server/db';
+import { AuthServiceClass } from '@/server/services/auth/auth.service';
+import { action } from '@/lib/safe-action';
+import { revalidatePath } from 'next/cache';
+
+/**
+ * Logs out the current user making the request.
+ */
+export const logoutAction = action(z.void(), async () => {
+  const cookieStore = cookies();
+  const sessionCookie = cookieStore.get('tipi.sid');
+
+  if (!sessionCookie) {
+    return {
+      success: true,
+    };
+  }
+
+  const authService = new AuthServiceClass(db);
+  await authService.logout(sessionCookie.value);
+
+  revalidatePath('/');
+
+  return {
+    success: true,
+  };
+});

src/client/mocks/handlers.ts

@@ -15,11 +15,6 @@ export const handlers = [
     response: true,
     delay: 100,
   }),
-  getTRPCMock({
-    path: ['system', 'systemInfo'],
-    type: 'query',
-    response: { cpu: { load: 0.1 }, disk: { available: 1, total: 2, used: 1 }, memory: { available: 1, total: 2, used: 1 } },
-  }),
   getTRPCMock({
     path: ['system', 'getSettings'],
     type: 'query',

src/server/routers/system/system.router.ts

@@ -9,7 +9,6 @@ const SystemService = new SystemServiceClass();
 
 export const systemRouter = router({
   status: publicProcedure.query(SystemServiceClass.status),
-  systemInfo: protectedProcedure.query(SystemServiceClass.systemInfo),
   getVersion: publicProcedure.query(SystemService.getVersion),
   restart: protectedProcedure.mutation(SystemService.restart),
   updateSettings: protectedProcedure.input(settingsSchema).mutation(({ input }) => TipiConfig.setSettings(input)),

src/shared/internationalization/locales.ts

@@ -23,6 +23,7 @@ const FALLBACK_LOCALES: { from: BaseLang<keyof typeof APP_LOCALES>; to: keyof ty
   { from: 'de', to: 'de-DE' },
   { from: 'en', to: 'en-US' },
   { from: 'es', to: 'es-ES' },
+  { from: 'el', to: 'el-GR' },
   { from: 'fr', to: 'fr-FR' },
   { from: 'it', to: 'it-IT' },
   { from: 'ja', to: 'ja-JP' },
@@ -30,6 +31,7 @@ const FALLBACK_LOCALES: { from: BaseLang<keyof typeof APP_LOCALES>; to: keyof ty
   { from: 'sv', to: 'sv-SE' },
   { from: 'ro', to: 'ro-RO' },
   { from: 'ru', to: 'ru-RU' },
+  { from: 'tr', to: 'tr-TR' },
   { from: 'vi', to: 'vi-VN' },
   { from: 'zh', to: 'zh-CN' },
 ];