diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 53469b9f2..335cc7b33 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -106,6 +106,7 @@
"invalid_password_validation": "Invalid password",
"iterations_input_label": "Iterations",
"login_success_title": "Login successful",
+ "logout_success_title": "Logout successful",
"logout_title": "Logout",
"lowercase_required": "Includes lowercase letter",
"margin_minutes_choose_title": "Please choose a margin between matches",
diff --git a/frontend/public/locales/nl/common.json b/frontend/public/locales/nl/common.json
index 7245be86d..fa9f0fec9 100644
--- a/frontend/public/locales/nl/common.json
+++ b/frontend/public/locales/nl/common.json
@@ -106,6 +106,7 @@
"invalid_password_validation": "Ongeldig wachtwoord",
"iterations_input_label": "Iteraties",
"login_success_title": "Login succesvol",
+ "logout_success_title": "Uitloggen succesvol",
"logout_title": "Uitloggen",
"lowercase_required": "Heeft een kleine letter",
"margin_minutes_choose_title": "Vul de marge tussen wedstrijden in",
diff --git a/frontend/src/components/forms/user.tsx b/frontend/src/components/forms/user.tsx
index fd9d930b3..1651f5f82 100644
--- a/frontend/src/components/forms/user.tsx
+++ b/frontend/src/components/forms/user.tsx
@@ -1,14 +1,17 @@
import { Button, Tabs, TextInput } from '@mantine/core';
import { useForm } from '@mantine/form';
-import { IconHash, IconUser } from '@tabler/icons-react';
+import { IconHash, IconLogout, IconUser } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
import React from 'react';
import { UserInterface } from '../../interfaces/user';
+import { performLogoutAndRedirect } from '../../services/local_storage';
import { updatePassword, updateUser } from '../../services/user';
import { PasswordStrength } from '../utils/password';
export default function UserForm({ user }: { user: UserInterface }) {
+ const router = useRouter();
const { t } = useTranslation();
const details_form = useForm({
initialValues: {
@@ -67,6 +70,16 @@ export default function UserForm({ user }: { user: UserInterface }) {
+ }
+ onClick={() => performLogoutAndRedirect(t, router)}
+ >
+ {t('logout_title')}
+
diff --git a/frontend/src/components/navbar/_main_links.tsx b/frontend/src/components/navbar/_main_links.tsx
index e3ea1cef3..d70bfd8bf 100644
--- a/frontend/src/components/navbar/_main_links.tsx
+++ b/frontend/src/components/navbar/_main_links.tsx
@@ -7,7 +7,6 @@ import {
IconCalendar,
IconDots,
IconHome,
- IconLogout,
IconSettings,
IconSoccerField,
IconTournament,
@@ -93,7 +92,7 @@ export function getBaseLinksDict() {
{
link: '/user',
label: t('user_title'),
- links: [{ link: '/user', label: t('logout_title'), icon: IconLogout }],
+ links: [],
icon: IconUser,
},
{
diff --git a/frontend/src/pages/_layout.module.css b/frontend/src/pages/_layout.module.css
index 5787175b0..96f0f0178 100644
--- a/frontend/src/pages/_layout.module.css
+++ b/frontend/src/pages/_layout.module.css
@@ -23,12 +23,16 @@
font-weight: 500;
@mixin hover {
- background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+ background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-4));
}
&[data-active] {
- background-color: var(--mantine-color-blue-filled);
+ background-color: var(--mantine-color-blue-7);
color: var(--mantine-color-white);
+
+ &:hover {
+ background-color: var(--mantine-color-blue-9);
+ }
}
}
diff --git a/frontend/src/pages/_layout.tsx b/frontend/src/pages/_layout.tsx
index 515cb88ea..1f349d541 100644
--- a/frontend/src/pages/_layout.tsx
+++ b/frontend/src/pages/_layout.tsx
@@ -6,12 +6,12 @@ import {
Container,
Group,
Menu,
- UnstyledButton,
useComputedColorScheme,
useMantineColorScheme,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { Icon, IconMoonStars, IconSun } from '@tabler/icons-react';
+import Link from 'next/link';
import { NextRouter, useRouter } from 'next/router';
import React, { ReactNode } from 'react';
@@ -39,32 +39,23 @@ function getMenuItemsForLink(
pathName: string
) {
const menuItems = link.links?.map((item) => (
- {
- await router.push(item.link);
- }}
- data-active={pathName === item.link || undefined}
- >
+
{item.label}
-
+
));
return (
@@ -85,16 +76,14 @@ export function HeaderAction({ links, navbarState, breadcrumbs }: HeaderActionPr
}
return (
- {
- if (link.link) await router.push(link.link);
- }}
+ href={link.link || ''}
data-active={pathName === link.link || undefined}
>
{link.label}
-
+
);
});
return (
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
index 77a8e667f..8da922642 100644
--- a/frontend/src/pages/login.tsx
+++ b/frontend/src/pages/login.tsx
@@ -10,6 +10,7 @@ import {
} from '@mantine/core';
import { useForm } from '@mantine/form';
import { showNotification } from '@mantine/notifications';
+import { IconCheck } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useRouter } from 'next/router';
@@ -36,6 +37,7 @@ export default function Login() {
showNotification({
color: 'green',
title: t('login_success_title'),
+ icon: ,
message: '',
});
diff --git a/frontend/src/services/local_storage.tsx b/frontend/src/services/local_storage.tsx
index 824657ba1..9e6d63446 100644
--- a/frontend/src/services/local_storage.tsx
+++ b/frontend/src/services/local_storage.tsx
@@ -1,7 +1,27 @@
+import { showNotification } from '@mantine/notifications';
+import { IconCheck } from '@tabler/icons-react';
+import { NextRouter } from 'next/router';
+import React from 'react';
+
+import { Translator } from '../components/utils/types';
+
export function performLogout() {
localStorage.removeItem('login');
}
+export function performLogoutAndRedirect(t: Translator, router: NextRouter) {
+ performLogout();
+
+ showNotification({
+ color: 'green',
+ title: t('logout_success_title'),
+ icon: ,
+ message: '',
+ autoClose: 10000,
+ });
+ router.push('/login');
+}
+
export function getLogin() {
const login = localStorage.getItem('login');
return login != null ? JSON.parse(login) : {};