Expose user avatar URL field in the UI (#27)

* wip * some fixes * update readme * update readme * Add option to change/erase any user's avatar * Fix README * Remove mutationMode from Edit * remove log * update readme
2024-09-17 23:06:12 +03:00
parent d5113aad72
commit 24cf0a60bf
13 changed files with 138 additions and 78 deletions
--- a/src/i18n/de.ts
+++ b/src/i18n/de.ts
@@ -147,6 +147,7 @@ const de: SynapseTranslationMessages = {
      },
      action: {
        erase: "Lösche Benutzerdaten",
+        erase_avatar: "Avatar löschen"
      },
    },
    rooms: {
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -146,6 +146,7 @@ const en: SynapseTranslationMessages = {
      },
      action: {
        erase: "Erase user data",
+        erase_avatar: "Erase avatar"
      },
    },
    rooms: {
--- a/src/i18n/fr.ts
+++ b/src/i18n/fr.ts
@@ -144,6 +144,7 @@ const fr: SynapseTranslationMessages = {
      },
      action: {
        erase: "Effacer les données de l'utilisateur",
+        erase_avatar: "Effacer l'avatar",
      },
    },
    rooms: {
--- a/src/i18n/index.d.ts
+++ b/src/i18n/index.d.ts
@@ -142,6 +142,7 @@ interface SynapseTranslationMessages extends TranslationMessages {
      };
      action: {
        erase: string;
+        erase_avatar: string;
      };
    };
    rooms: {
--- a/src/i18n/ru.ts
+++ b/src/i18n/ru.ts
@@ -155,6 +155,7 @@ const ru: SynapseTranslationMessages = {
      },
      action: {
        erase: "Удалить данные пользователя",
+        erase_avatar: "Удалить аватар",
      },
    },
    rooms: {
--- a/src/i18n/zh.ts
+++ b/src/i18n/zh.ts
@@ -139,6 +139,7 @@ const zh: SynapseTranslationMessages = {
      },
      action: {
        erase: "抹除用户信息",
+        erase_avatar: "抹掉头像",
      },
    },
    rooms: {
--- a/src/resources/users.tsx
+++ b/src/resources/users.tsx
@@ -55,6 +55,8 @@ import {
  ToolbarClasses,
  Identifier,
  RaRecord,
+  ImageInput,
+  ImageField,
 } from "react-admin";
 import { Link } from "react-router-dom";

@@ -101,26 +103,24 @@ const userFilters = [
  <BooleanInput label="resources.users.fields.show_locked" source="locked" alwaysOn />,
 ];

-const UserPreventSelfDelete: React.FC<{ children: React.ReactNode, ownUserIsSelected: boolean }> = (props) => {
+const UserPreventSelfDelete: React.FC<{ children: React.ReactNode; ownUserIsSelected: boolean }> = props => {
  const ownUserIsSelected = props.ownUserIsSelected;
  const notify = useNotify();
  const translate = useTranslate();

  const handleDeleteClick = (ev: React.MouseEvent<HTMLDivElement>) => {
    if (ownUserIsSelected) {
-      notify(<Alert severity="error">{translate("resources.users.helper.erase_admin_error")}</Alert>)
+      notify(<Alert severity="error">{translate("resources.users.helper.erase_admin_error")}</Alert>);
      ev.stopPropagation();
    }
  };

-  return <div onClickCapture={handleDeleteClick}>
-    {props.children}
-  </div>
+  return <div onClickCapture={handleDeleteClick}>{props.children}</div>;
 };

 const UserBulkActionButtons = () => {
  const record = useListContext();
-  const [ ownUserIsSelected, setOwnUserIsSelected ] = useState(false);
+  const [ownUserIsSelected, setOwnUserIsSelected] = useState(false);
  const selectedIds = record.selectedIds;
  const ownUserId = localStorage.getItem("user_id");
  const notify = useNotify();
@@ -128,19 +128,20 @@ const UserBulkActionButtons = () => {

  useEffect(() => {
    setOwnUserIsSelected(selectedIds.includes(ownUserId));
-  }, [ selectedIds ]);
+  }, [selectedIds]);

-
-  return <>
-    <ServerNoticeBulkButton />
-    <UserPreventSelfDelete ownUserIsSelected={ownUserIsSelected}>
-      <BulkDeleteButton
-        label="resources.users.action.erase"
-        confirmTitle="resources.users.helper.erase"
-        mutationMode="pessimistic"
-      />
-    </UserPreventSelfDelete>
-  </>
+  return (
+    <>
+      <ServerNoticeBulkButton />
+      <UserPreventSelfDelete ownUserIsSelected={ownUserIsSelected}>
+        <BulkDeleteButton
+          label="resources.users.action.erase"
+          confirmTitle="resources.users.helper.erase"
+          mutationMode="pessimistic"
+        />
+      </UserPreventSelfDelete>
+    </>
+  );
 };

 const usersRowClick = (id: Identifier, resource: string, record: RaRecord): string => {
@@ -204,9 +205,12 @@ const UserEditActions = () => {
 };

 export const UserCreate = (props: CreateProps) => (
- <Create { ...props} redirect={(resource, id, data) => {
-    return `users/${id}`;
-  }}>
+  <Create
+    {...props}
+    redirect={(resource, id, data) => {
+      return `users/${id}`;
+    }}
+  >
    <SimpleForm>
      <TextInput source="id" autoComplete="off" validate={validateUser} />
      <TextInput source="displayname" validate={maxLength(256)} />
@@ -237,7 +241,7 @@ const UserTitle = () => {
      {translate("resources.users.name", {
        smart_count: 1,
      })}{" "}
-      {record ? ( record.displayname ? `"${record.displayname}"` : `"${record.name}"`) : ""}
+      {record ? (record.displayname ? `"${record.displayname}"` : `"${record.name}"`) : ""}
    </span>
  );
 };
@@ -250,29 +254,34 @@ const UserEditToolbar = () => {
    ownUserIsSelected = record.id === ownUserId;
  }

-  return <>
-   <div className={ToolbarClasses.defaultToolbar}>
-      <Toolbar sx={{ justifyContent: "space-between" }}>
+  return (
+    <>
+      <div className={ToolbarClasses.defaultToolbar}>
+        <Toolbar sx={{ justifyContent: "space-between" }}>
          <SaveButton />
          <UserPreventSelfDelete ownUserIsSelected={ownUserIsSelected}>
            <DeleteButton />
          </UserPreventSelfDelete>
-      </Toolbar>
-    </div>
-  </>
+        </Toolbar>
+      </div>
+    </>
+  );
 };

-const UserBooleanInput = (props) => {
+const UserBooleanInput = props => {
  const record = useRecordContext();
  const ownUserId = localStorage.getItem("user_id");
-  const isOwnUser = false;
  let ownUserIsSelected = false;
-  if (record && (record.id === ownUserId)) {
+  if (record && record.id === ownUserId) {
    ownUserIsSelected = true;
  }

-  return <UserPreventSelfDelete ownUserIsSelected={ownUserIsSelected}><BooleanInput {...props} disabled={ownUserIsSelected} /></UserPreventSelfDelete>
-}
+  return (
+    <UserPreventSelfDelete ownUserIsSelected={ownUserIsSelected}>
+      <BooleanInput {...props} disabled={ownUserIsSelected} />
+    </UserPreventSelfDelete>
+  );
+};

 export const UserEdit = (props: EditProps) => {
  const translate = useTranslate();
@@ -281,7 +290,11 @@ export const UserEdit = (props: EditProps) => {
    <Edit {...props} title={<UserTitle />} actions={<UserEditActions />}>
      <TabbedForm toolbar={<UserEditToolbar />}>
        <FormTab label={translate("resources.users.name", { smart_count: 1 })} icon={<PersonPinIcon />}>
-          <AvatarField source="avatar_src" sortable={false} sx={{ height: "120px", width: "120px", float: "right" }} />
+          <AvatarField source="avatar_src" sortable={false} sx={{ height: "120px", width: "120px" }} />
+          <BooleanInput source="avatar_erase" label="resources.users.action.erase_avatar" />
+          <ImageInput source="avatar_file" label="resources.users.fields.avatar" accept="image/*">
+            <ImageField source="src" title="Avatar"  />
+          </ImageInput>
          <TextInput source="id" disabled />
          <TextInput source="displayname" />
          <PasswordInput source="password" autoComplete="new-password" helperText="resources.users.helper.password" />
--- a/src/synapse/authProvider.test.ts
+++ b/src/synapse/authProvider.test.ts
@@ -101,7 +101,7 @@ describe("authProvider", () => {
    });

    it("should reject if error.status is 401", async () => {
-      await expect(authProvider.checkError({ status: 401 })).rejects.toBeUndefined();
+      await expect(authProvider.checkError(new HttpError("test-error", 401, {errcode: "test-errcode", error: "test-error"}))).rejects.toBeDefined();
    });

    it("should reject if error.status is 403", async () => {
--- a/src/synapse/dataProvider.test.ts
+++ b/src/synapse/dataProvider.test.ts
@@ -18,7 +18,7 @@ describe("dataProvider", () => {
      JSON.stringify({
        users: [
          {
-            name: "user_id1",
+            name: "@user_id1:provider",
            password_hash: "password_hash1",
            is_guest: 0,
            admin: 0,
@@ -27,7 +27,7 @@ describe("dataProvider", () => {
            displayname: "User One",
          },
          {
-            name: "user_id2",
+            name: "@user_id2:provider",
            password_hash: "password_hash2",
            is_guest: 0,
            admin: 1,
@@ -47,7 +47,7 @@ describe("dataProvider", () => {
      filter: { author_id: 12 },
    });

-    expect(users.data[0].id).toEqual("user_id1");
+    expect(users.data[0].id).toEqual("@user_id1:provider");
    expect(users.total).toEqual(200);
    expect(fetch).toHaveBeenCalledTimes(1);
  });
@@ -55,7 +55,7 @@ describe("dataProvider", () => {
  it("fetches one user", async () => {
    fetchMock.mockResponseOnce(
      JSON.stringify({
-        name: "user_id1",
+        name: "@user_id1:provider",
        password: "user_password",
        displayname: "User",
        threepids: [
@@ -74,9 +74,9 @@ describe("dataProvider", () => {
      })
    );

-    const user = await dataProvider.getOne("users", { id: "user_id1" });
+    const user = await dataProvider.getOne("users", { id: "@user_id1:provider" });

-    expect(user.data.id).toEqual("user_id1");
+    expect(user.data.id).toEqual("@user_id1:provider");
    expect(user.data.displayname).toEqual("User");
    expect(fetch).toHaveBeenCalledTimes(1);
  });
--- a/src/synapse/dataProvider.ts
+++ b/src/synapse/dataProvider.ts
@@ -1,16 +1,26 @@
 import { stringify } from "query-string";

-import { DataProvider, DeleteParams, HttpError, Identifier, Options, RaRecord, fetchUtils } from "react-admin";
+import {
+  DataProvider,
+  DeleteParams,
+  HttpError,
+  Identifier,
+  Options,
+  RaRecord,
+  UpdateParams,
+  fetchUtils,
+  withLifecycleCallbacks,
+} from "react-admin";

 import storage from "../storage";
-import { returnMXID } from "./synapse.ts"
+import { returnMXID } from "./synapse";
 import { MatrixError, displayError } from "../components/error";

 // Adds the access token to all requests
 const jsonClient = async (url: string, options: Options = {}) => {
  const token = storage.getItem("access_token");
  console.log("httpClient " + url);
-  if (token != null) {
+  if (token !== null) {
    options.user = {
      authenticated: true,
      token: `Bearer ${token}`,
@@ -23,7 +33,9 @@ const jsonClient = async (url: string, options: Options = {}) => {
    const error = err as HttpError;
    const errorStatus = error.status;
    const errorBody = error.body as MatrixError;
-    const errMsg = !!errorBody?.errcode ? displayError(errorBody.errcode, errorStatus, errorBody.error) : displayError("M_INVALID", errorStatus, error.message);
+    const errMsg = !!errorBody?.errcode
+      ? displayError(errorBody.errcode, errorStatus, errorBody.error)
+      : displayError("M_INVALID", errorStatus, error.message);

    return Promise.reject(new HttpError(errMsg, errorStatus, errorBody));
  }
@@ -226,8 +238,19 @@ export interface DeleteMediaResult {
  total: number;
 }

+export interface UploadMediaParams {
+  file: File;
+  filename: string;
+  content_type: string;
+}
+
+export interface UploadMediaResult {
+  content_uri: string;
+}
+
 export interface SynapseDataProvider extends DataProvider {
  deleteMedia: (params: DeleteMediaParams) => Promise<DeleteMediaResult>;
+  uploadMedia: (params: UploadMediaParams) => Promise<UploadMediaResult>;
 }

 const resourceMap = {
@@ -500,7 +523,7 @@ function getSearchOrder(order: "ASC" | "DESC") {
  }
 }

-const dataProvider: SynapseDataProvider = {
+const baseDataProvider: SynapseDataProvider = {
  getList: async (resource, params) => {
    console.log("getList " + resource);
    const { user_id, name, guests, deactivated, locked, search_term, destination, valid } = params.filter;
@@ -742,6 +765,46 @@ const dataProvider: SynapseDataProvider = {
    const { json } = await jsonClient(endpoint_url, { method: "POST" });
    return json as DeleteMediaResult;
  },
+
+  uploadMedia: async ({ file, filename, content_type }: UploadMediaParams) => {
+    const base_url = storage.getItem("base_url");
+    const uploadMediaURL = `${base_url}/_matrix/media/v3/upload`;
+
+    const { json } = await jsonClient(`${uploadMediaURL}?filename=${filename}`, {
+      method: "POST",
+      body: file,
+      headers: new Headers({
+        Accept: "application/json",
+        "Content-Type": content_type,
+      }) as Headers,
+    });
+    return json as UploadMediaResult;
+  },
 };

+const dataProvider = withLifecycleCallbacks(baseDataProvider, [
+  {
+    resource: "users",
+    beforeUpdate: async (params: UpdateParams<any>, dataProvider: DataProvider) => {
+      const avatarFile = params.data.avatar_file?.rawFile;
+      const avatarErase = params.data.avatar_erase;
+
+      if (avatarErase) {
+        params.data.avatar_url = "";
+        return params;
+      }
+
+      if (avatarFile instanceof File) {
+        const reponse = await dataProvider.uploadMedia({
+          file: avatarFile,
+          filename: params.data.avatar_file.title,
+          content_type: params.data.avatar_file.rawFile.type,
+        });
+        params.data.avatar_url = reponse.content_uri;
+      }
+      return params;
+    },
+  },
+]);
+
 export default dataProvider;
--- a/src/synapse/synapse.ts
+++ b/src/synapse/synapse.ts
@@ -1,4 +1,4 @@
-import { fetchUtils } from "react-admin";
+import { Identifier, fetchUtils } from "react-admin";

 import storage from "../storage";

@@ -77,17 +77,17 @@ export function generateRandomMxId(): string {
 * @param input  the input string
 * @returns full MXID as string
 */
-export function returnMXID(input: string): string {
+export function returnMXID(input: string | Identifier): string {
  const homeserver = storage.getItem("home_server");

  // Check if the input already looks like a valid MXID (i.e., starts with "@" and contains ":")
  const mxidPattern = /^@[^@:]+:[^@:]+$/;
-  if (mxidPattern.test(input)) {
+  if (typeof input === 'string' && mxidPattern.test(input)) {
    return input; // Already a valid MXID
  }

  // If input is not a valid MXID, assume it's a localpart and construct the MXID
-  const localpart = input.startsWith('@') ? input.slice(1) : input;
+  const localpart = typeof input === 'string' && input.startsWith('@') ? input.slice(1) : input;
  return `@${localpart}:${homeserver}`;
 }