✨ Add working sign-in / sign-out, add working registration with token

src/components/layout/header/Header.tsx

@@ -1,5 +1,6 @@
 import { Box, Group, Indicator, Header as MantineHeader, createStyles } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
+import { useSession } from 'next-auth/react';
 
 import { REPO_URL } from '../../../../data/constants';
 import { useEditModeInformationStore } from '../../../hooks/useEditModeInformation';

src/components/layout/header/SettingsMenu.tsx

@@ -1,14 +1,21 @@
 import { Badge, Button, Menu } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons-react';
+import {
+  IconInfoCircle,
+  IconLogin,
+  IconLogout,
+  IconMenu2,
+  IconSettings,
+} from '@tabler/icons-react';
+import { signOut, useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
 
 import { useEditModeInformationStore } from '../../../hooks/useEditModeInformation';
 import { AboutModal } from '../../Dashboard/Modals/AboutModal/AboutModal';
 import { SettingsDrawer } from '../../Settings/SettingsDrawer';
 import { useCardStyles } from '../useCardStyles';
 import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';
-import { EditModeToggle } from './SettingsMenu/EditModeToggle';
 
 export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
   const [drawerOpened, drawer] = useDisclosure(false);
@@ -16,6 +23,7 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str
   const [aboutModalOpened, aboutModal] = useDisclosure(false);
   const { classes } = useCardStyles(true);
   const { editModeEnabled } = useEditModeInformationStore();
+  const { data: sessionData } = useSession();
 
   return (
     <>
@@ -27,7 +35,6 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str
         </Menu.Target>
         <Menu.Dropdown>
           <ColorSchemeSwitch />
-          <EditModeToggle />
           <Menu.Divider />
           {!editModeEnabled && (
             <Menu.Item icon={<IconSettings strokeWidth={1.2} size={18} />} onClick={drawer.open}>
@@ -47,6 +54,19 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str
           >
             {t('about')}
           </Menu.Item>
+          {sessionData?.user ? (
+            <Menu.Item icon={<IconLogout strokeWidth={1.2} size={18} />} onClick={() => signOut()}>
+              {t('header.logout')}
+            </Menu.Item>
+          ) : (
+            <Menu.Item
+              icon={<IconLogin strokeWidth={1.2} size={18} />}
+              component={Link}
+              href="/login"
+            >
+              {t('header.sign-in')}
+            </Menu.Item>
+          )}
         </Menu.Dropdown>
       </Menu>
       <SettingsDrawer

src/components/layout/header/SettingsMenu/EditModeToggle.tsx

@@ -1,79 +0,0 @@
-import { Button, Code, Menu, PasswordInput, Stack, Text } from '@mantine/core';
-import { useForm } from '@mantine/form';
-import { openModal } from '@mantine/modals';
-import { showNotification } from '@mantine/notifications';
-import { IconEdit, IconEditOff } from '@tabler/icons-react';
-import axios from 'axios';
-
-import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation';
-
-function ModalContent() {
-  const form = useForm({
-    initialValues: {
-      triedPassword: '',
-    },
-  });
-  return (
-    <form
-      onSubmit={form.onSubmit((values) => {
-        axios
-          .post('/api/configs/tryPassword', { tried: values.triedPassword, type: 'edit' })
-          .then((res) => {
-            showNotification({
-              title: 'Success',
-              message: 'Successfully toggled edit mode, reloading the page...',
-              color: 'green',
-            });
-            setTimeout(() => {
-              window.location.reload();
-            }, 500);
-          })
-          .catch((_) => {
-            showNotification({
-              title: 'Error',
-              message: 'Failed to toggle edit mode, please try again.',
-              color: 'red',
-            });
-          });
-      })}
-    >
-      <Stack>
-        <Text size="sm">
-          In order to toggle edit mode, you need to enter the password you entered in the
-          environment variable named <Code>EDIT_MODE_PASSWORD</Code> . If it is not set, you are not
-          able to toggle edit mode on and off.
-        </Text>
-        <PasswordInput
-          id="triedPassword"
-          label="Edit password"
-          autoFocus
-          required
-          {...form.getInputProps('triedPassword')}
-        />
-        <Button type="submit">Submit</Button>
-      </Stack>
-    </form>
-  );
-}
-
-export function EditModeToggle() {
-  const { editModeEnabled } = useEditModeInformationStore();
-  const Icon = editModeEnabled ? IconEdit : IconEditOff;
-
-  return (
-    <Menu.Item
-      closeMenuOnClick={false}
-      icon={<Icon strokeWidth={1.2} size={18} />}
-      onClick={() =>
-        openModal({
-          title: 'Toggle edit mode',
-          centered: true,
-          size: 'lg',
-          children: <ModalContent />,
-        })
-      }
-    >
-      {editModeEnabled ? 'Enable edit mode' : 'Disable edit mode'}
-    </Menu.Item>
-  );
-}