diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 7197c93..598d603 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -14,6 +14,7 @@ "@bem-react/classnames": "^1.3.10", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", + "@mui/icons-material": "^6.4.1", "@mui/material": "^6.4.1", "keycloak-js": "^26.1.0", "react": "^19.0.0", @@ -674,6 +675,32 @@ "url": "https://opencollective.com/mui-org" } }, + "node_modules/@mui/icons-material": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.4.1.tgz", + "integrity": "sha512-wsxFcUTQxt4s+7Bg4GgobqRjyaHLmZGNOs+HJpbwrwmLbT6mhIJxhpqsKzzWq9aDY8xIe7HCjhpH7XI5UD6teA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.26.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^6.4.1", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/material": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index b2a6d3e..b1bd6f9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,6 +15,7 @@ "@bem-react/classnames": "^1.3.10", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", + "@mui/icons-material": "^6.4.1", "@mui/material": "^6.4.1", "keycloak-js": "^26.1.0", "react": "^19.0.0", diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx index cfd0364..9dc3ccb 100644 --- a/frontend/src/app/app.tsx +++ b/frontend/src/app/app.tsx @@ -3,6 +3,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'; import { ThemeProvider } from '@mui/material'; import { Root } from '../pages/root'; import { Search } from '../pages/search'; +import { Header } from '../features/auth'; import theme from '../features/theme'; import './normalize.css'; @@ -12,6 +13,7 @@ export const App: React.FC = () => { return ( +
} /> } /> diff --git a/frontend/src/features/auth/header.scss b/frontend/src/features/auth/header.scss new file mode 100644 index 0000000..35baf42 --- /dev/null +++ b/frontend/src/features/auth/header.scss @@ -0,0 +1,14 @@ +.Header { + padding: 20px; + border-bottom: 1px solid #444444; + + &-Auth { + display: flex; + justify-content: end; + } + + &-Bar { + display: flex; + justify-content: space-between; + } +} \ No newline at end of file diff --git a/frontend/src/features/auth/header.tsx b/frontend/src/features/auth/header.tsx new file mode 100644 index 0000000..fa4f750 --- /dev/null +++ b/frontend/src/features/auth/header.tsx @@ -0,0 +1,62 @@ +import { cn } from '@bem-react/classname'; +import React, { useEffect, useState } from 'react'; +import { Button, IconButton } from '@mui/material'; +import SettingsIcon from '@mui/icons-material/Settings'; +import './header.scss'; +import { useNavigate } from 'react-router-dom'; +import useKeycloakAuth from './keycloak'; + +const name = cn('Header'); + +export const Header: React.FC = () => { + const navigate = useNavigate(); + + const {authenticated, keycloak} = useKeycloakAuth(); + + return ( +
+ {authenticated ?
+ {!window.location.pathname.includes('/search') ? + : } +
+ + document.location = `${process.env.KEYCLOAK_URL}/realms/${process.env.KEYCLOAK_REALM}/account/`} + > + + +
+
:
+ + +
} +
+ ); +} \ No newline at end of file diff --git a/frontend/src/features/auth/index.ts b/frontend/src/features/auth/index.ts new file mode 100644 index 0000000..3c1a136 --- /dev/null +++ b/frontend/src/features/auth/index.ts @@ -0,0 +1,2 @@ +export * from './header'; +export * from './keycloak'; \ No newline at end of file diff --git a/frontend/src/features/auth/keycloak.ts b/frontend/src/features/auth/keycloak.ts index a03ca9d..af53ec1 100644 --- a/frontend/src/features/auth/keycloak.ts +++ b/frontend/src/features/auth/keycloak.ts @@ -1,4 +1,5 @@ import Keycloak from 'keycloak-js'; +import { useEffect, useState } from 'react'; const kc = new Keycloak({ url: process.env.KEYCLOAK_URL as string, @@ -6,15 +7,33 @@ const kc = new Keycloak({ clientId: process.env.KEYCLOAK_CLIENT as string, }); -kc.init({ - onLoad: 'check-sso', - silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html", - checkLoginIframe: false, - pkceMethod: 'S256' -}).then(() => { - if (kc.onTokenExpired) { - kc.onTokenExpired = () => kc.updateToken(); - } -}) +const initKeycloak = () => { + return kc.init({ + onLoad: 'check-sso', + silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html", + checkLoginIframe: false, + pkceMethod: 'S256', + }); +}; -export default kc; \ No newline at end of file +export default function useKeycloakAuth() { + const [authenticated, setAuthenticated] = useState(null); + + useEffect(() => { + initKeycloak().then(auth => { + setAuthenticated(auth); + }); + + // Handle token expiration + if (kc.onTokenExpired) { + kc.onTokenExpired = () => kc.updateToken().then(() => setAuthenticated(true)); + } + + // Listen for authentication events + kc.onAuthSuccess = () => setAuthenticated(true); + kc.onAuthError = () => setAuthenticated(false); + kc.onAuthLogout = () => setAuthenticated(false); + }, []); + + return { authenticated, keycloak: kc }; +} \ No newline at end of file diff --git a/frontend/src/shared/components/Page/Page.scss b/frontend/src/shared/components/Page/Page.scss index 8fe1fc9..c2cb16d 100644 --- a/frontend/src/shared/components/Page/Page.scss +++ b/frontend/src/shared/components/Page/Page.scss @@ -2,6 +2,8 @@ .Page { background-color: $background-secondary; + padding: 20px; + box-sizing: border-box; height: 100%; width: 80%; margin: auto;