Auth redirects, language switch, basic profile

2024-07-26 01:14:12 +02:00
parent 2091bdb4e3
commit 36a4659915
31 changed files with 5638 additions and 331 deletions
@@ -0,0 +1,55 @@
+import { Menu, MenuItem } from '@mui/material';
+import { FC } from 'react';
+import i18n from '../../../i18n';
+
+interface Props {
+  anchorEl: HTMLElement | null;
+  handleClose: () => void;
+}
+
+const LanguageMenu: FC<Props> = ({ anchorEl, handleClose }) => {
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      keepMounted
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+      open={Boolean(anchorEl)}
+      onClose={handleClose}
+      sx={{
+        '& .MuiMenu-paper': {
+          minWidth: '240px',
+        },
+      }}
+    >
+      <MenuItem
+        key="de"
+        selected={i18n.language === 'en'}
+        onClick={() => {
+          i18n.changeLanguage('en');
+          handleClose();
+        }}
+      >
+        English
+      </MenuItem>
+      <MenuItem
+        key="en"
+        selected={i18n.language === 'de'}
+        onClick={() => {
+          i18n.changeLanguage('de');
+          handleClose();
+        }}
+      >
+        Deutsch
+      </MenuItem>
+    </Menu>
+  );
+};
+
+export default LanguageMenu;
@@ -0,0 +1,69 @@
+import { Menu, MenuItem } from '@mui/material';
+import { useNavigate, useRouter } from '@tanstack/react-router';
+import { t } from 'i18next';
+import { FC } from 'react';
+import Api from '../../../api/Api';
+import { ROUTES } from '../../../types/Routes';
+import LoginForm from '../../Forms/Login/LoginForm';
+
+interface Props {
+  anchorEl: HTMLElement | null;
+  handleClose: () => void;
+}
+
+const UserMenu: FC<Props> = ({ anchorEl, handleClose }) => {
+  const navigate = useNavigate();
+  const router = useRouter();
+
+  const user = Api.getAuthenticatedUser();
+
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      keepMounted
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+      open={Boolean(anchorEl)}
+      onClose={handleClose}
+      sx={{
+        '& .MuiMenu-paper': {
+          minWidth: '240px',
+        },
+      }}
+    >
+      {user ? (
+        [
+          <MenuItem
+            key="profile"
+            onClick={() => {
+              navigate({ to: ROUTES.PROFILE });
+              handleClose();
+            }}
+          >
+            {t('Profile')}
+          </MenuItem>,
+          <MenuItem
+            key="logout"
+            onClick={() => {
+              Api.logOut();
+              router.invalidate();
+              handleClose();
+            }}
+          >
+            {t('Log out')}
+          </MenuItem>,
+        ]
+      ) : (
+        <LoginForm handleClose={handleClose} />
+      )}
+    </Menu>
+  );
+};
+
+export default UserMenu;