Fix logout.

packages/webapp/src/classes/client/index.ts

@@ -91,7 +91,7 @@ export type ForgotPasswordResult = {
 
 interface Client {
   login(auth: JwtAuth): Promise<void>;
-
+  logout(): Promise<void>;
   deleteAccount(): Promise<void>;
   importMap(model: ImportMapInfo): Promise<number>;
   createMap(map: BasicMapInfo): Promise<number>;

packages/webapp/src/classes/client/mock-client/index.ts

@@ -128,6 +128,9 @@ class MockClient implements Client {
 
     this.labels = [label1, label2, label3];
   }
+  logout(): Promise<void> {
+    return Promise.resolve();
+  }
 
   login(auth: JwtAuth): Promise<void> {
     const cookies = new Cookies();

packages/webapp/src/classes/client/rest-client/index.ts

@@ -25,7 +25,7 @@ export default class RestClient implements Client {
     response?: AxiosResponse<T>;
   }): Promise<{ response?: AxiosResponse<T> }> => {
     // TODO: Improve session timeout response and response handling
-    if (error.response && error.response.status === 405) {
+    if (error.response && (error.response.status === 405 || error.response.status === 403)) {
       this.sessionExpired();
     }
     return Promise.reject(error);
@@ -63,6 +63,14 @@ export default class RestClient implements Client {
     );
   }
 
+  logout(): Promise<void> {
+    // Set jwt token on cookie ...
+    const cookies = new Cookies();
+    cookies.remove('jwt-auth-token', { path: '/' });
+
+    return Promise.resolve();
+  }
+
   login(model: JwtAuth): Promise<void> {
     const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
       this.axios

packages/webapp/src/components/maps-page/account-menu/index.tsx

@@ -13,12 +13,18 @@ import ChangePasswordDialog from './change-password-dialog';
 import LockOpenOutlined from '@mui/icons-material/LockOpenOutlined';
 import Link from '@mui/material/Link';
 import ExitToAppOutlined from '@mui/icons-material/ExitToAppOutlined';
+import { activeInstance } from '../../../redux/clientSlice';
+import { useSelector } from 'react-redux';
+import Client from '../../../classes/client';
+import { useNavigate } from 'react-router-dom';
 
 type ActionType = 'change-password' | 'account-info' | undefined;
 const AccountMenu = (): React.ReactElement => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const [action, setAction] = React.useState<ActionType>(undefined);
+  const client: Client = useSelector(activeInstance);
+  const navigate = useNavigate();
 
   const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -30,8 +36,9 @@ const AccountMenu = (): React.ReactElement => {
 
   const handleLogout = (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault();
-    const elem = document.getElementById('logoutFrom') as HTMLFormElement;
-    elem.submit();
+
+    client.logout();
+    navigate('/c/login');
   };
 
   const account = useFetchAccount();
@@ -85,7 +92,6 @@ const AccountMenu = (): React.ReactElement => {
         )}
 
         <MenuItem onClick={handleClose}>
-          <form action="/c/logout" method="POST" id="logoutFrom"></form>
           <Link color="textSecondary" href="/c/logout" onClick={(e) => handleLogout(e)}>
             <ListItemIcon>
               <ExitToAppOutlined fontSize="small" />

packages/webapp/src/components/maps-page/maps-list/index.tsx

@@ -372,6 +372,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
   );
 
   const handleStarred = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: number) => {
+    event.stopPropagation();
     event.preventDefault();
     starredMultation.mutate(id);
   };

packages/webapp/webpack.dev.js

@@ -17,9 +17,6 @@ module.exports = merge(common, {
           protocol: 'http:',
           port: 8080
         },
-        pathRewrite: {
-          '^/api': ''
-        }
       },
     },
     historyApiFallback: {

yarn.lock

@@ -4965,6 +4965,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cookie@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "@types/cookie@npm:0.6.0"
+  checksum: 5edce7995775b0b196b142883e4d4f71fd93c294eaec973670f1fa2540b70ea7390408ed513ddefef5fcb12a578100c76596e8f2a714b0c2ae9f70ee773f4510
+  languageName: node
+  linkType: hard
+
 "@types/cypress-image-snapshot@npm:^3.1.6":
   version: 3.1.6
   resolution: "@types/cypress-image-snapshot@npm:3.1.6"
@@ -6247,6 +6254,7 @@ __metadata:
     react-redux: ^7.2.2
     react-router-dom: ^6.4.3
     styled-components: ^5.3.6
+    universal-cookie: ^7.0.2
   languageName: unknown
   linkType: soft
 
@@ -8883,6 +8891,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "cookie@npm:0.6.0"
+  checksum: f56a7d32a07db5458e79c726b77e3c2eff655c36792f2b6c58d351fb5f61531e5b1ab7f46987150136e366c65213cbe31729e02a3eaed630c3bf7334635fb410
+  languageName: node
+  linkType: hard
+
 "copy-concurrently@npm:^1.0.0":
   version: 1.0.5
   resolution: "copy-concurrently@npm:1.0.5"
@@ -21904,6 +21919,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"universal-cookie@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "universal-cookie@npm:7.0.2"
+  dependencies:
+    "@types/cookie": ^0.6.0
+    cookie: ^0.6.0
+  checksum: c2c20cc4918fae7c912e2e154e4bed33a8a150685fec737cfe62d89b95b19be1658c3224b9d523a9269a9c5571c5ad5eb702b9db04c0544ea1061925289d82d2
+  languageName: node
+  linkType: hard
+
 "universal-user-agent@npm:^6.0.0":
   version: 6.0.0
   resolution: "universal-user-agent@npm:6.0.0"