Fix logout button (#522)

fix #513

I also improved and optimized the rest of the navbar

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",

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",

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 }) {
           <Button fullWidth style={{ marginTop: 20 }} color="green" type="submit">
             {t('save_button')}
           </Button>
+          <Button
+            fullWidth
+            style={{ marginTop: 20 }}
+            color="red"
+            variant="outline"
+            leftSection={<IconLogout />}
+            onClick={() => performLogoutAndRedirect(t, router)}
+          >
+            {t('logout_title')}
+          </Button>
         </form>
       </Tabs.Panel>
       <Tabs.Panel value="password" pt="xs">

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,
     },
     {

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);
+    }
   }
 }
 

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) => (
-    <UnstyledButton
-      key={item.label}
-      className={classes.link}
-      onClick={async () => {
-        await router.push(item.link);
-      }}
-      data-active={pathName === item.link || undefined}
-    >
+    <a key={item.label} className={classes.link} href={item.link}>
       <Center>
         <item.icon />
         <span style={{ marginLeft: '0.25rem', marginTop: '0.2rem' }}>{item.label}</span>
       </Center>
-    </UnstyledButton>
+    </a>
   ));
   return (
     <Menu key={link.label} trigger="hover" transitionProps={{ exitDuration: 0 }} withinPortal>
       <Menu.Target>
-        <UnstyledButton
+        <Link
           className={classes.link}
-          onClick={async () => {
-            if (link.link) await router.push(link.link);
-          }}
+          href={link.link || ''}
           data-active={pathName === link.link || undefined}
         >
           <>{link.label}</>
-        </UnstyledButton>
+        </Link>
       </Menu.Target>
       {menuItems.length > 0 ? <Menu.Dropdown>{menuItems}</Menu.Dropdown> : null}
     </Menu>
@@ -85,16 +76,14 @@ export function HeaderAction({ links, navbarState, breadcrumbs }: HeaderActionPr
     }
 
     return (
-      <UnstyledButton
+      <Link
         key={link.label}
         className={classes.link}
-        onClick={async () => {
-          if (link.link) await router.push(link.link);
-        }}
+        href={link.link || ''}
         data-active={pathName === link.link || undefined}
       >
         {link.label}
-      </UnstyledButton>
+      </Link>
     );
   });
   return (

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: <IconCheck />,
         message: '',
       });
 

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: <IconCheck />,
+    message: '',
+    autoClose: 10000,
+  });
+  router.push('/login');
+}
+
 export function getLogin() {
   const login = localStorage.getItem('login');
   return login != null ? JSON.parse(login) : {};