Add Account Settings page (#8672)

This PR adds a new "Account Settings" page to host various other
sub-pages for:
- changing email (soon)
- changing password
- appearance/theme
- passkeys (future)
- API Auth Token

<img width="1269" alt="Screenshot 2025-06-25 at 10 45 45"
src="https://github.com/user-attachments/assets/848cc79b-b636-4de1-b495-e15059e7d452"
/>
<img width="1268" alt="Screenshot 2025-06-25 at 10 45 54"
src="https://github.com/user-attachments/assets/fcfb3c08-8a58-450e-b50d-96bd58ed9f1a"
/>
<img width="1269" alt="Screenshot 2025-06-25 at 10 46 01"
src="https://github.com/user-attachments/assets/4a7da90e-a2ed-4a60-ac9b-ebff65d8e140"
/>


### URL of deployed dev instance (used for testing):
- https://accountsettingspage.webknossos.xyz/

### Steps to test:
- Go to new Account settings page
- Change PW 
- Try dark/light mode

### Issues:
- Blocked by #8671
- Blocked by #8679
- fixes #5408

------
(Please delete unneeded items, merge only when none are left open)
- [x] Updated
[changelog](../blob/master/CHANGELOG.unreleased.md#unreleased)
- [ ] Updated [migration
guide](../blob/master/MIGRATIONS.unreleased.md#unreleased) if applicable
- [ ] Updated [documentation](../blob/master/docs) if applicable
- [ ] Adapted [wk-libs python
client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client)
if relevant API parts change
- [ ] Removed dev-only changes like prints and application.conf edits
- [x] Considered [common edge
cases](../blob/master/.github/common_edge_cases.md)
- [ ] Needs datastore update after deployment

---------

Co-authored-by: Philipp Otto <philippotto@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Philipp Otto <philipp.4096@gmail.com>

Author: 3 people

app/controllers/OrganizationController.scala

@@ -154,7 +154,7 @@ class OrganizationController @Inject()(
           _ <- Fox.fromBool(request.identity.isAdminOf(organization._id)) ?~> "notAllowed" ~> FORBIDDEN
           _ <- organizationDAO.updateFields(organization._id, name, newUserMailingList)
           updated <- organizationDAO.findOne(organization._id)
-          organizationJson <- organizationService.publicWrites(updated)
+          organizationJson <- organizationService.publicWrites(updated, Some(request.identity))
         } yield Ok(organizationJson)
     }
   }

biome.json

@@ -100,12 +100,10 @@
   },
   "overrides": [
     {
-      "include": [
-        "**/package.json"
-      ],
+      "include": ["**/package.json"],
       "formatter": {
         "lineWidth": 1
       }
     }
   ]
-}
+}

frontend/javascripts/admin/account/account_auth_token_view.tsx

@@ -0,0 +1,108 @@
+import { ExportOutlined, SwapOutlined } from "@ant-design/icons";
+import { getAuthToken, revokeAuthToken } from "admin/rest_api";
+import { Button, Col, Row, Spin, Typography } from "antd";
+import { useWkSelector } from "libs/react_hooks";
+import Toast from "libs/toast";
+import { useEffect, useState } from "react";
+import { SettingsCard } from "./helpers/settings_card";
+import { SettingsTitle } from "./helpers/settings_title";
+
+const { Text } = Typography;
+
+function AccountAuthTokenView() {
+  const activeUser = useWkSelector((state) => state.activeUser);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [currentToken, setCurrentToken] = useState<string>("");
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  async function fetchData(): Promise<void> {
+    try {
+      const token = await getAuthToken();
+      setCurrentToken(token);
+    } catch (error) {
+      Toast.error("Failed to fetch auth token. Please refresh the page to try again.");
+      console.error("Failed to fetch auth token:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  const handleRevokeToken = async (): Promise<void> => {
+    try {
+      setIsLoading(true);
+      await revokeAuthToken();
+      const token = await getAuthToken();
+      setCurrentToken(token);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const APIitems = [
+    {
+      title: "Auth Token",
+      value: (
+        <Text code copyable>
+          {currentToken}
+        </Text>
+      ),
+    },
+    {
+      title: "Token Revocation",
+      explanation:
+        "Revoke your token if it has been compromised or if you suspect someone else has gained access to it. This will invalidate all active sessions.",
+      value: (
+        <Button icon={<SwapOutlined />} type="primary" ghost onClick={handleRevokeToken}>
+          Revoke and Generate New Token
+        </Button>
+      ),
+    },
+    ...(activeUser
+      ? [
+          {
+            title: "Organization ID",
+            value: (
+              <Text code copyable>
+                {activeUser.organization}
+              </Text>
+            ),
+          },
+        ]
+      : []),
+    {
+      title: "API Documentation",
+      value: (
+        <a href="https://docs.webknossos.org/webknossos-py/index.html">
+          Read the docs <ExportOutlined />
+        </a>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <SettingsTitle
+        title="API Authorization"
+        description="Access the WEBKNOSSO Python API with your API token"
+      />
+      <Spin size="large" spinning={isLoading}>
+        <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
+          {APIitems.map((item) => (
+            <Col span={12} key={item.title}>
+              <SettingsCard
+                title={item.title}
+                description={item.value}
+                explanation={item.explanation}
+              />
+            </Col>
+          ))}
+        </Row>
+      </Spin>
+    </div>
+  );
+}
+
+export default AccountAuthTokenView;

frontend/javascripts/admin/account/account_password_view.tsx

@@ -0,0 +1,200 @@
+import { EditOutlined, LockOutlined } from "@ant-design/icons";
+import { changePassword, logoutUser } from "admin/rest_api";
+import { Alert, Button, Col, Form, Input, Row, Space } from "antd";
+import Toast from "libs/toast";
+import messages from "messages";
+import { useState } from "react";
+import { useHistory } from "react-router-dom";
+import { logoutUserAction } from "viewer/model/actions/user_actions";
+import Store from "viewer/store";
+import { SettingsCard } from "./helpers/settings_card";
+import { SettingsTitle } from "./helpers/settings_title";
+const FormItem = Form.Item;
+const { Password } = Input;
+
+const MIN_PASSWORD_LENGTH = 8;
+
+function AccountPasswordView() {
+  const history = useHistory();
+  const [form] = Form.useForm();
+  const [isResetPasswordVisible, setResetPasswordVisible] = useState(false);
+
+  function onFinish(formValues: Record<string, any>) {
+    changePassword(formValues)
+      .then(async () => {
+        Toast.success(messages["auth.reset_pw_confirmation"]);
+        await logoutUser();
+        Store.dispatch(logoutUserAction());
+        history.push("/auth/login");
+      })
+      .catch((error) => {
+        console.error("Password change failed:", error);
+        Toast.error("Failed to change password. Please try again.");
+      });
+  }
+
+  function checkPasswordsAreMatching(value: string, otherPasswordFieldKey: string[]) {
+    const otherFieldValue = form.getFieldValue(otherPasswordFieldKey);
+
+    if (value && otherFieldValue) {
+      if (value !== otherFieldValue) {
+        return Promise.reject(new Error(messages["auth.registration_password_mismatch"]));
+      } else if (form.getFieldError(otherPasswordFieldKey).length > 0) {
+        // If the other password field still has errors, revalidate it.
+        form.validateFields([otherPasswordFieldKey]);
+      }
+    }
+
+    return Promise.resolve();
+  }
+
+  function getPasswordComponent() {
+    return isResetPasswordVisible ? (
+      <Form onFinish={onFinish} form={form}>
+        <FormItem
+          name="oldPassword"
+          rules={[
+            {
+              required: true,
+              message: messages["auth.reset_old_password"],
+            },
+          ]}
+        >
+          <Password
+            prefix={
+              <LockOutlined
+                style={{
+                  fontSize: 13,
+                }}
+              />
+            }
+            placeholder="Old Password"
+          />
+        </FormItem>
+        <FormItem
+          hasFeedback
+          name={["password", "password1"]}
+          rules={[
+            {
+              required: true,
+              message: messages["auth.reset_new_password"],
+            },
+            {
+              min: MIN_PASSWORD_LENGTH,
+              message: messages["auth.registration_password_length"],
+            },
+            {
+              validator: (_, value: string) =>
+                checkPasswordsAreMatching(value, ["password", "password2"]),
+            },
+          ]}
+        >
+          <Password
+            prefix={
+              <LockOutlined
+                style={{
+                  fontSize: 13,
+                }}
+              />
+            }
+            placeholder="New Password"
+          />
+        </FormItem>
+        <FormItem
+          hasFeedback
+          name={["password", "password2"]}
+          rules={[
+            {
+              required: true,
+              message: messages["auth.reset_new_password2"],
+            },
+            {
+              min: MIN_PASSWORD_LENGTH,
+              message: messages["auth.registration_password_length"],
+            },
+            {
+              validator: (_, value: string) =>
+                checkPasswordsAreMatching(value, ["password", "password1"]),
+            },
+          ]}
+        >
+          <Password
+            prefix={
+              <LockOutlined
+                style={{
+                  fontSize: 13,
+                }}
+              />
+            }
+            placeholder="Confirm New Password"
+          />
+        </FormItem>
+        <Alert
+          type="info"
+          message={messages["auth.reset_logout"]}
+          showIcon
+          style={{
+            marginBottom: 24,
+          }}
+        />
+        <FormItem>
+          <Space>
+            <Button onClick={() => setResetPasswordVisible(false)}>Cancel</Button>
+            <Button type="primary" htmlType="submit">
+              Update Password
+            </Button>
+          </Space>
+        </FormItem>
+      </Form>
+    ) : (
+      "***********"
+    );
+  }
+
+  function handleResetPassword() {
+    setResetPasswordVisible(true);
+  }
+
+  const passKeyList = [
+    {
+      title: "Coming soon",
+      value: "Passwordless login with passkeys is coming soon",
+      // action: <Button type="default" shape="circle" icon={<DeleteOutlined />} size="small" />,
+      action: undefined,
+    },
+  ];
+
+  return (
+    <div>
+      <SettingsTitle title="Password" description="Manage and update your password" />
+      <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
+        <Col span={12}>
+          <SettingsCard
+            title="Password"
+            description={getPasswordComponent()}
+            action={
+              <Button
+                type="default"
+                shape="circle"
+                icon={<EditOutlined />}
+                size="small"
+                onClick={handleResetPassword}
+              />
+            }
+          />
+        </Col>
+      </Row>
+
+      <SettingsTitle title="Passkeys" description="Login passwordless with Passkeys" />
+      <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
+        {passKeyList.map((item) => (
+          <Col span={12} key={item.title}>
+            <SettingsCard title={item.title} description={item.value} action={item.action} />
+          </Col>
+        ))}
+      </Row>
+    </div>
+  );
+}
+
+export default AccountPasswordView;