Allow admin to change member's name (#5233)

* feat: allow admins to change user names

* fix: review

app/components/UserRoleDialogs.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import User from "~/models/User";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
+import Input from "~/components/Input";
 import useStores from "~/hooks/useStores";
 
 type Props = {
@@ -106,3 +107,37 @@ export function UserSuspendDialog({ user, onSubmit }: Props) {
     </ConfirmationDialog>
   );
 }
+
+export function UserChangeNameDialog({ user, onSubmit }: Props) {
+  const { t } = useTranslation();
+  const [name, setName] = React.useState<string>(user.name);
+
+  const handleSubmit = async () => {
+    await user.save({ name });
+    onSubmit();
+  };
+
+  const handleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    setName(ev.target.value);
+  };
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("Save")}
+      savingText={`${t("Saving")}…`}
+      disabled={!name}
+    >
+      <Input
+        type="text"
+        name="name"
+        label={t("New name")}
+        onChange={handleChange}
+        error={!name ? t("Name can't be empty") : undefined}
+        value={name}
+        required
+        flex
+      />
+    </ConfirmationDialog>
+  );
+}