feat: show proper user pic in Navbar

src/App.jsx

@@ -30,6 +30,7 @@ const onKeycloakEvent = (event) => {
       state.isAuthenticated = true;
       state.user = {
         name: keycloak.tokenParsed.name,
+        username: keycloak.tokenParsed.preferred_username,
         groups: keycloak.tokenParsed.groups,
         accessToken: keycloak.token,
       };

src/components/Navbar.jsx

@@ -66,7 +66,7 @@ const Navbar = () => {
                   <span className="head-heavy-2xs">{user.name}</span>
                   <div className="avatar avatar--2xs">
                     <img
-                      src="http://placeimg.com/100/100/people"
+                      src={`https://a.pirati.cz/piratar/${user.username}.jpg`}
                       alt="Avatar"
                     />
                   </div>

src/keycloak.js

@@ -8,8 +8,4 @@ const keycloak = Keycloak({
   clientId: "cf-online",
 });
 
-// keycloak.init({
-//   onLoad: "check-sso",
-// });
-
 export default keycloak;

typings/cf2021.d.ts

@@ -28,6 +28,7 @@ declare namespace CF2021 {
         isAuthenticated: true;
         user: {
             name: string;
+            username: string;
             groups: string[];
             accessToken: string;
         };