Update navbar links and add account settings route

- Changed the "Change Password" link to point to "/account/password".
- Added new links for "Auth Token" and "Account Settings" in the navbar.
- Introduced secured routes for account settings in the router.

Author: hotzenklotz

frontend/javascripts/admin/auth/account_settings_view.tsx

@@ -0,0 +1,148 @@
+import { Layout, Menu } from "antd";
+import { Route, Switch, useLocation, useHistory } from "react-router-dom";
+import {
+  CheckOutlined,
+  LockOutlined,
+  MailOutlined,
+  SafetyOutlined,
+  SettingOutlined,
+} from "@ant-design/icons";
+import ChangePasswordView from "./change_password_view";
+import AuthTokenView from "./auth_token_view";
+import { useWkSelector } from "libs/react_hooks";
+import type { APIUserTheme } from "types/api_types";
+import { getSystemColorTheme } from "theme";
+import { updateSelectedThemeOfUser } from "admin/rest_api";
+import Store from "viewer/store";
+import { setActiveUserAction } from "viewer/model/actions/user_actions";
+import { setThemeAction } from "viewer/model/actions/ui_actions";
+
+const { Sider, Content } = Layout;
+
+function EmailSettings() {
+  return (
+    <div>
+      <h2>Email Settings</h2>
+      <p>Email settings page content will be added here.</p>
+    </div>
+  );
+}
+
+function PasskeysSettings() {
+  return (
+    <div>
+      <h2>Passkeys</h2>
+      <p>Passkeys settings page content will be added here.</p>
+    </div>
+  );
+}
+
+function AppearanceSettings() {
+  const activeUser = useWkSelector((state) => state.activeUser);
+  const { selectedTheme } = activeUser || { selectedTheme: "auto" };
+
+  const setSelectedTheme = async (newTheme: APIUserTheme) => {
+    if (!activeUser) return;
+
+    if (newTheme === "auto") newTheme = getSystemColorTheme();
+
+    if (selectedTheme !== newTheme) {
+      const newUser = await updateSelectedThemeOfUser(activeUser.id, newTheme);
+      Store.dispatch(setThemeAction(newTheme));
+      Store.dispatch(setActiveUserAction(newUser));
+    }
+  };
+
+  return (
+    <div>
+      <h2>Appearance</h2>
+      <div style={{ marginTop: 16 }}>
+        <h3>Theme</h3>
+        <Menu
+          mode="inline"
+          selectedKeys={[selectedTheme]}
+          items={[
+            {
+              key: "auto",
+              label: "System Default",
+              icon: selectedTheme === "auto" ? <CheckOutlined /> : null,
+              onClick: () => setSelectedTheme("auto"),
+            },
+            {
+              key: "light",
+              label: "Light",
+              icon: selectedTheme === "light" ? <CheckOutlined /> : null,
+              onClick: () => setSelectedTheme("light"),
+            },
+            {
+              key: "dark",
+              label: "Dark",
+              icon: selectedTheme === "dark" ? <CheckOutlined /> : null,
+              onClick: () => setSelectedTheme("dark"),
+            },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+
+function AccountSettingsView() {
+  const location = useLocation();
+  const history = useHistory();
+  const selectedKey = location.pathname.split("/").pop() || "email";
+
+  const menuItems = [
+    {
+      key: "email",
+      icon: <MailOutlined />,
+      label: "Email",
+    },
+    {
+      key: "password",
+      icon: <LockOutlined />,
+      label: "Password",
+    },
+    {
+      key: "passkeys",
+      icon: <SafetyOutlined />,
+      label: "Passkeys",
+    },
+    {
+      key: "token",
+      icon: <SettingOutlined />,
+      label: "Auth Token",
+    },
+    {
+      key: "appearance",
+      icon: <SettingOutlined />,
+      label: "Appearance",
+    },
+  ];
+
+  return (
+    <Layout style={{ minHeight: "calc(100vh - 64px)" }}>
+      <Sider width={200} theme="light">
+        <Menu
+          mode="inline"
+          selectedKeys={[selectedKey]}
+          style={{ height: "100%" }}
+          items={menuItems}
+          onClick={({ key }) => history.push(`/account/${key}`)}
+        />
+      </Sider>
+      <Content style={{ padding: "24px", minHeight: 280 }}>
+        <Switch>
+          <Route path="/account/email" component={EmailSettings} />
+          <Route path="/account/password" component={ChangePasswordView} />
+          <Route path="/account/passkeys" component={PasskeysSettings} />
+          <Route path="/account/token" component={AuthTokenView} />
+          <Route path="/account/appearance" component={AppearanceSettings} />
+          <Route path="/account" component={EmailSettings} />
+        </Switch>
+      </Content>
+    </Layout>
+  );
+}
+
+export default AccountSettingsView;

frontend/javascripts/navbar.tsx

@@ -488,7 +488,7 @@ function NotificationIcon({
     sendAnalyticsEvent("open_whats_new_view");
 
     if (window.Olvy) {
-      // Setting the target lazily, to finally let olvy load the “what’s new” modal, as it should be shown now.
+      // Setting the target lazily, to finally let olvy load the "what's new" modal, as it should be shown now.
       window.Olvy.config.target = "#unused-olvy-target";
       window.Olvy.show();
     }
@@ -675,9 +675,13 @@ function LoggedInAvatar({
               : null,
             {
               key: "resetpassword",
-              label: <Link to="/auth/changePassword">Change Password</Link>,
+              label: <Link to="/account/password">Change Password</Link>,
+            },
+            { key: "token", label: <Link to="/account/token">Auth Token</Link> },
+            {
+              key: "account",
+              label: <Link to="/account">Account Settings</Link>,
             },
-            { key: "token", label: <Link to="/auth/token">Auth Token</Link> },
             {
               key: "theme",
               label: "Theme",

frontend/javascripts/router.tsx

@@ -75,6 +75,7 @@ import type { EmptyObject } from "types/globals";
 import { getDatasetIdOrNameFromReadableURLPart } from "viewer/model/accessors/dataset_accessor";
 import { Store } from "viewer/singletons";
 import { CommandPalette } from "viewer/view/components/command_palette";
+import AccountSettingsView from "admin/auth/account_settings_view";
 
 const { Content } = Layout;
 
@@ -814,6 +815,16 @@ class ReactRouter extends React.Component<Props> {
               {!features().isWkorgInstance && (
                 <RouteWithErrorBoundary path="/onboarding" component={Onboarding} />
               )}
+              <SecuredRouteWithErrorBoundary
+                isAuthenticated={isAuthenticated}
+                path="/account"
+                render={() => <AccountSettingsView />}
+              />
+              <SecuredRouteWithErrorBoundary
+                isAuthenticated={isAuthenticated}
+                path="/account/:tab"
+                render={() => <AccountSettingsView />}
+              />
               <RouteWithErrorBoundary component={PageNotFoundView} />
             </Switch>
           </Content>