Rework organization page

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)
     }
   }

frontend/javascripts/admin/account/account_auth_token_view.tsx

@@ -3,7 +3,7 @@ import { getAuthToken, revokeAuthToken } from "admin/rest_api";
 import { Button, Descriptions, Popover, Spin, Typography } from "antd";
 import { useWkSelector } from "libs/react_hooks";
 import { useEffect, useState } from "react";
-import { AccountSettingsTitle } from "./account_profile_view";
+import { SettingsTitle } from "./helpers/settings_title";
 
 const { Text } = Typography;
 
@@ -80,7 +80,7 @@ function AccountAuthTokenView() {
 
   return (
     <div>
-      <AccountSettingsTitle
+      <SettingsTitle
         title="API Authorization"
         description="Access the WEBKNOSSO Python API with your API token"
       />

frontend/javascripts/admin/account/account_password_view.tsx

@@ -7,7 +7,7 @@ import { useState } from "react";
 import { type RouteComponentProps, withRouter } from "react-router-dom";
 import { logoutUserAction } from "viewer/model/actions/user_actions";
 import Store from "viewer/store";
-import { AccountSettingsTitle } from "./account_profile_view";
+import { SettingsTitle } from "./helpers/settings_title";
 const FormItem = Form.Item;
 const { Password } = Input;
 
@@ -186,7 +186,7 @@ function AccountPasswordView({ history }: Props) {
 
   return (
     <div>
-      <AccountSettingsTitle title="Password" description="Manage and update your password" />
+      <SettingsTitle title="Password" description="Manage and update your password" />
       <Descriptions
         column={2}
         layout="vertical"
@@ -195,7 +195,7 @@ function AccountPasswordView({ history }: Props) {
         style={{ marginBottom: "3rem" }}
       />
 
-      <AccountSettingsTitle title="Passkeys" description="Login passwordless with Passkeys" />
+      <SettingsTitle title="Passkeys" description="Login passwordless with Passkeys" />
       <List
         className="demo-loadmore-list"
         itemLayout="horizontal"

frontend/javascripts/admin/account/account_profile_view.tsx

@@ -1,6 +1,6 @@
 import { CheckOutlined, DownOutlined } from "@ant-design/icons";
 import { updateSelectedThemeOfUser } from "admin/rest_api";
-import { Descriptions, Divider, Dropdown, Typography } from "antd";
+import { Descriptions, Dropdown } from "antd";
 import { useWkSelector } from "libs/react_hooks";
 import * as Utils from "libs/utils";
 import { getSystemColorTheme } from "theme";
@@ -9,23 +9,7 @@ import { formatUserName } from "viewer/model/accessors/user_accessor";
 import { setThemeAction } from "viewer/model/actions/ui_actions";
 import { setActiveUserAction } from "viewer/model/actions/user_actions";
 import Store from "viewer/store";
-
-const { Text } = Typography;
-
-export function AccountSettingsTitle({
-  title,
-  description,
-}: { title: string; description: string }) {
-  return (
-    <div>
-      <h2 style={{ marginBottom: 0 }}>{title}</h2>
-      <Text type="secondary" style={{ display: "block" }}>
-        {description}
-      </Text>
-      <Divider style={{ margin: "12px 0 32px 0" }} />
-    </div>
-  );
-}
+import { SettingsTitle } from "./helpers/settings_title";
 
 function AccountProfileView() {
   const activeUser = useWkSelector((state) => state.activeUser);
@@ -100,7 +84,7 @@ function AccountProfileView() {
 
   return (
     <div>
-      <AccountSettingsTitle
+      <SettingsTitle
         title="Profile"
         description="Manage your personal information and preferences"
       />

frontend/javascripts/admin/account/helpers/settings_card.tsx

@@ -0,0 +1,31 @@
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { Card, Flex, Popover, Typography } from "antd";
+
+interface SettingsCardProps {
+  title: string;
+  description: React.ReactNode;
+  explanation?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export function SettingsCard({ title, description, explanation, action }: SettingsCardProps) {
+  return (
+    <Card style={{ minHeight: 105 }}>
+      <Typography.Text type="secondary" style={{ fontSize: 14 }}>
+        <Flex justify="space-between">
+          <div>
+            {title}
+
+            {explanation != null ? (
+              <Popover content={explanation}>
+                <InfoCircleOutlined style={{ marginLeft: 4 }} />
+              </Popover>
+            ) : null}
+          </div>
+          {action}
+        </Flex>
+      </Typography.Text>
+      <div style={{ fontSize: 16, marginTop: 4 }}>{description}</div>
+    </Card>
+  );
+}

frontend/javascripts/admin/account/helpers/settings_title.tsx

@@ -0,0 +1,21 @@
+import { Divider, Typography } from "antd";
+
+const { Text } = Typography;
+
+export function SettingsTitle({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <div>
+      <h2 style={{ marginBottom: 0 }}>{title}</h2>
+      <Text type="secondary" style={{ display: "block" }}>
+        {description}
+      </Text>
+      <Divider style={{ margin: "12px 0 32px 0" }} />
+    </div>
+  );
+}