|
@@ -1,7 +1,7 @@
|
|
|
'use client';
|
|
|
|
|
|
import React from 'react';
|
|
|
-import { IconBrandGithub, IconHeart, IconLogout, IconMoon, IconSun } from '@tabler/icons-react';
|
|
|
+import { IconBrandGithub, IconHeart, IconLogin, IconLogout, IconMoon, IconSun } from '@tabler/icons-react';
|
|
|
import Image from 'next/image';
|
|
|
import clsx from 'clsx';
|
|
|
import Link from 'next/link';
|
|
@@ -12,17 +12,33 @@ 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 { useRouter } from 'next/navigation';
|
|
|
import { NavBar } from '../NavBar';
|
|
|
|
|
|
interface IProps {
|
|
|
isUpdateAvailable?: boolean;
|
|
|
+ authenticated?: boolean;
|
|
|
}
|
|
|
|
|
|
-export const Header: React.FC<IProps> = ({ isUpdateAvailable }) => {
|
|
|
+export const Header: React.FC<IProps> = ({ isUpdateAvailable, authenticated = true }) => {
|
|
|
const { setDarkMode } = useUIStore();
|
|
|
const t = useTranslations('header');
|
|
|
|
|
|
- const logoutMutation = useAction(logoutAction);
|
|
|
+ const router = useRouter();
|
|
|
+
|
|
|
+ const logoutMutation = useAction(logoutAction, {
|
|
|
+ onSuccess: () => {
|
|
|
+ router.push('/');
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const logHandler = () => {
|
|
|
+ if (authenticated) {
|
|
|
+ logoutMutation.execute();
|
|
|
+ } else {
|
|
|
+ router.push('/login');
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
return (
|
|
|
<header className="text-white navbar navbar-expand-md navbar-dark navbar-overlap d-print-none" data-bs-theme="dark">
|
|
@@ -71,16 +87,9 @@ export const Header: React.FC<IProps> = ({ isUpdateAvailable }) => {
|
|
|
<div onClick={() => setDarkMode(false)} aria-hidden="true" className="lightMode nav-link px-0 hide-theme-light cursor-pointer" data-testid="light-mode-toggle">
|
|
|
<IconSun data-testid="icon-sun" size={20} />
|
|
|
</div>
|
|
|
- <Tooltip anchorSelect=".logOut">{t('logout')}</Tooltip>
|
|
|
- <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} />
|
|
|
+ <Tooltip anchorSelect=".logOut">{authenticated ? t('logout') : t('login')}</Tooltip>
|
|
|
+ <div onClick={() => logHandler()} tabIndex={0} onKeyPress={() => logHandler()} role="button" className="logOut nav-link px-0 cursor-pointer" data-testid="logout-button">
|
|
|
+ {authenticated ? <IconLogout size={20} /> : <IconLogin size={20} />}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|