Integrate new server authentication to client
Changes:
- Use server authentication REST API
- Log in automatically after registration
- Store token in localStorage
- Give feedback to user if registration or login fails
GitLab: #75
Change-Id: Ib90e5b911621567c6825af5e275920d703cdfe88
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 303fc67..f2a0c37 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -19,7 +19,7 @@
import { MouseEvent, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
-import authManager from '../AuthManager';
+import { setAccessToken } from '../utils/auth';
export default function Header() {
const navigate = useNavigate();
@@ -28,20 +28,23 @@
const handleClose = () => setAnchorEl(null);
const params = useParams();
- const goToAccountSelection = () => navigate(`/account`);
- const goToContacts = () => navigate(`/Contacts`);
+ const goToContacts = () => navigate(`/contacts`);
const goToAccountSettings = () => navigate(`/account/${params.accountId}/settings`);
+ const logout = () => {
+ setAccessToken('');
+ navigate('/', { replace: true });
+ };
+
return (
<Box>
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
Menu
</Button>
<Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
- <MenuItem onClick={goToAccountSelection}>Change account</MenuItem>
<MenuItem onClick={goToContacts}>Contacts</MenuItem>
{params.accountId && <MenuItem onClick={goToAccountSettings}>Account settings</MenuItem>}
- <MenuItem onClick={() => authManager.disconnect()}>Log out</MenuItem>
+ <MenuItem onClick={logout}>Log out</MenuItem>
</Menu>
</Box>
);