+ {imageSrc ? 
:
+
+ );
+}
diff --git a/src/components/Avatar/avatar.module.scss b/src/components/Avatar/avatar.module.scss
new file mode 100644
index 00000000..68fa56c1
--- /dev/null
+++ b/src/components/Avatar/avatar.module.scss
@@ -0,0 +1,30 @@
+@use '@statisticsnorway/ssb-component-library/src/style/variables' as variables;
+
+.avatar {
+ width: 50px;
+ height: 50px;
+ margin: 0 1.5rem 0 0;
+ border: 1px solid variables.$ssb-dark-2;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #fff;
+ transition: transform 0.3s;
+ cursor: pointer;
+
+ .initials {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: variables.$ssb-dark-5;
+ }
+
+ img {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 2px solid #ffffff;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+}
\ No newline at end of file
diff --git a/src/components/Breadcrumb.tsx b/src/components/Breadcrumb.tsx
index 562fdaea..7f8b121a 100644
--- a/src/components/Breadcrumb.tsx
+++ b/src/components/Breadcrumb.tsx
@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
export default function Breadcrumb() {
const location = useLocation();
- const pathnames = location.pathname.split('/').filter(x => x);
+ const pathnames = location.pathname.split('/').filter(x => x).map(x => decodeURI(x));
const breadcrumbItems = pathnames.map((value, index) => {
const last = index === pathnames.length - 1;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index fbba7be0..bc4026d9 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,14 +1,33 @@
import styles from './header.module.scss'
-import { Link } from 'react-router-dom';
+import { Link } from '@statisticsnorway/ssb-component-library';
+import Avatar from '../Avatar/Avatar';
+import { useNavigate } from 'react-router-dom';
+import {
+ jwtRegex
+} from '../../utils/regex';
-export default function Header(props) {
+export default function Header(props: { isLoggedIn: boolean }) {
const { isLoggedIn } = props
+ const token = localStorage.getItem('access_token');
+ let decoded_jwt;
+
+ if (token && jwtRegex.test(token))
+ decoded_jwt = JSON.parse(atob(token.split('.')[1]));
+
+ const navigate = useNavigate();
return (
{`${userProfile.firstName[0]}${userProfile.lastName[0]}`}
}
+
- Dapla ctrl
- {isLoggedIn && Medlemmer}
+
)
}
\ No newline at end of file
diff --git a/src/components/Header/header.module.scss b/src/components/Header/header.module.scss
index 8297715b..0fe8c999 100644
--- a/src/components/Header/header.module.scss
+++ b/src/components/Header/header.module.scss
@@ -1,7 +1,25 @@
+@use '@statisticsnorway/ssb-component-library/src/style/variables' as variables;
+
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
- border-bottom: 1px solid gray;
+ border-bottom: 1px solid variables.$ssb-dark-2;
+ color: variables.$ssb-dark-5;
+ align-items: center;
padding: 1rem;
+
+ .navigation {
+ @extend .header;
+ gap: 2rem;
+ border-bottom: 0; // unset border-bottom from the inherited .header class
+ padding: 0; // unset padding
+ }
+
+ .title {
+ @extend .header;
+ cursor: pointer;
+ border-bottom: 0; // unset border-bottom from the inherited .header class
+ padding: 0; // unset padding
+ }
}
\ No newline at end of file
diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx
index 9a434dc7..8fbac708 100644
--- a/src/components/ProtectedRoute.tsx
+++ b/src/components/ProtectedRoute.tsx
@@ -12,6 +12,7 @@ export const ProtectedRoute = () => {
setIsAuthenticated(isValid);
if (!isValid) {
localStorage.removeItem('access_token');
+ localStorage.removeItem('userProfile');
navigate('/login', { state: { from: from } });
}
});
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index f7b1262c..2517b669 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -2,14 +2,14 @@ import PageLayout from '../components/PageLayout/PageLayout'
import Table from '../components/Table/Table'
import { useEffect, useState } from "react"
-import { getAllTeams, TeamApiResponse, Team } from "../api/teamApi"
+import { getAllTeams, Team } from "../api/TeamApi"
import { Title, Dialog, Link } from "@statisticsnorway/ssb-component-library"
export default function Home() {
- const [teams, setTeams] = useStatenavigate("/")}>Dapla ctrl
+ {isLoggedIn && +
+ Teammedlemmer
+ {token &&
+ }
Loading...
|| ( -No teams found.
+ + ) ||Loading...
|| ( +No teams found.
) } } diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx index 9e6ef25d..7346ecc1 100644 --- a/src/pages/Login/Login.tsx +++ b/src/pages/Login/Login.tsx @@ -1,11 +1,11 @@ -import styles from './login.module.scss'; +import styles from './login.module.scss' import { Title, Input, Link } from "@statisticsnorway/ssb-component-library"; import { useEffect, useState } from "react"; import { verifyKeycloakToken } from "../../api/VerifyKeycloakToken"; import { useLocation, useNavigate } from 'react-router-dom'; - -const jwtRegex = /^[A-Za-z0-9-_=]+\.[A-Za-z0-9-_=]+\.?[A-Za-z0-9-_.+/=]*$/; +import { jwtRegex } from "../../utils/regex"; +import { getUserProfile, getUserProfileFallback } from "../../api/UserApi"; export default function Login() { const [error, setError] = useState(false); @@ -28,31 +28,36 @@ export default function Login() { }, [navigate]); useEffect(() => { - const validateAccessToken = (accessToken: string) => { + const validateToken = async (accessToken: string) => { // Check if the token matches the JWT pattern - if (!jwtRegex.test(accessToken)) { - return Promise.resolve(false); - } + if (!jwtRegex.test(accessToken)) return false; // Check if the token is invalid - return verifyKeycloakToken(accessToken).then(isValid => { - if (!isValid) { - return false; - } - setValue(accessToken); - return true; - }); + const isValid = await verifyKeycloakToken(accessToken); + if (!isValid) return false; + setValue(accessToken); + + try { + const userProfile = await getUserProfile(accessToken); + localStorage.setItem("userProfile", JSON.stringify(userProfile)); + } catch (error) { + console.error("Could not fetch user profile, using fallback", error); + const userProfile = getUserProfileFallback(accessToken); + localStorage.setItem("userProfile", JSON.stringify(userProfile)); + } + + return true; }; if (!value) { setError(false); } else { - validateAccessToken(value).then(isValidToken => { - if (isValidToken) { - localStorage.setItem('access_token', value) + validateToken(value).then(isValidAccessToken => { + if (isValidAccessToken) { + localStorage.setItem("access_token", value); navigate(from); } - setError(!isValidToken); + setError(!isValidAccessToken); }); } }, [value, from]); @@ -69,11 +74,10 @@ export default function Login() { ) diff --git a/src/pages/Users.tsx b/src/pages/Users.tsx index fa0733a7..5c911af2 100644 --- a/src/pages/Users.tsx +++ b/src/pages/Users.tsx @@ -1,10 +1,10 @@ import PageLayout from "../components/PageLayout/PageLayout" -import { getAllTeams, TeamApiResponse } from "../api/teamApi" +import { getAllTeams, Team } from "../api/TeamApi" import { useEffect, useState } from "react" import { Dialog } from "@statisticsnorway/ssb-component-library" export default function Users() { - const [teams, setTeams] = useStateTeam List
| {team.uniformName} | {team.displayName} | diff --git a/src/utils/regex.ts b/src/utils/regex.ts new file mode 100644 index 00000000..0be8b190 --- /dev/null +++ b/src/utils/regex.ts @@ -0,0 +1,2 @@ + +export const jwtRegex = /^[A-Za-z0-9-_=]+\.[A-Za-z0-9-_=]+\.?[A-Za-z0-9-_.+/=]*$/; \ No newline at end of file