Add keycloak actions to navbar

flipdot · Nov 17, 2024 · 2204358 · 2204358
1 parent 60c13af
commit 2204358
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/src/NavBar.css b/src/NavBar.css
@@ -54,6 +54,7 @@
     padding: 0;
     user-select: none;
     width: 10em;
+    z-index: 1;
 }
 
 .navbar ul.nav-links > li > * {
@@ -77,6 +78,15 @@
 .navbar ul.nav-links li ul button {
     width: 100%;
     margin: 0.3em 0;
+    text-align: right;
+    background: none;
+    border: none;
+    border-right: 5px solid rgba(0, 0, 0, 0);
+    border-radius: 0;
+}
+
+.navbar ul.nav-links li ul button:hover {
+    border-right: 5px solid #fff;
 }
 
 .navbar ul.nav-links li > .title::after {

diff --git a/src/NavBar.tsx b/src/NavBar.tsx
@@ -6,14 +6,32 @@ import {useAuth} from "react-oidc-context";
 
 function NavBar() {
     const auth = useAuth();
-    const loginButton = <button className="login-button" onClick={() => auth.signinRedirect()}>Login</button>
+    const loginButton = <button className="login-button" onClick={() => auth.signinRedirect()}>Anmelden</button>
     const userMenu = <>
         <span className="title" style={{
             lineHeight: "1.1em",
             overflow: "hidden",
             textAlign: "right",
         }}>{auth.user?.profile.preferred_username}</span>
         <ul>
+            <li>
+                <button onClick={() => {
+                    auth.signinRedirect({
+                        extraQueryParams: {
+                            kc_action: "UPDATE_PROFILE",
+                        }
+                    })
+                }}>Profil aktualisieren
+                </button>
+                <button onClick={() => {
+                    auth.signinRedirect({
+                        extraQueryParams: {
+                            kc_action: "UPDATE_PASSWORD",
+                        }
+                    })
+                }}>Passwort ändern
+                </button>
+            </li>
             <li>
                 <button onClick={async () => {
                     await auth.revokeTokens();
@@ -22,7 +40,7 @@ function NavBar() {
                     // in other parts of the application.
                     // Therefore, let's just reload the application
                     window.location.reload()
-                }}>Logout
+                }}>Abmelden
                 </button>
             </li>
         </ul>