Add moderator bots and editable MineGeo usernames

components/AccountSettings.tsx

@@ -19,6 +19,7 @@ export function AccountSettings({
   accountId,
   email,
   displayName,
+  username,
   avatarPath,
   appearance,
   passwordUpdated = false,
@@ -26,6 +27,7 @@ export function AccountSettings({
   accountId: string;
   email: string;
   displayName: string;
+  username: string | null;
   avatarPath: string | null;
   appearance: ProfileAppearance;
   passwordUpdated?: boolean;
@@ -39,6 +41,21 @@ export function AccountSettings({
     [recoveryError, setRecoveryError] = useState(""),
     [sending, setSending] = useState(false);
   const router = useRouter();
+  const [handle, setHandle] = useState(username ?? "");
+  const [handleMessage, setHandleMessage] = useState("");
+  const [handleBusy, setHandleBusy] = useState(false);
+  async function saveHandle(event: React.FormEvent) {
+    event.preventDefault();
+    setHandleBusy(true);
+    setHandleMessage("");
+    try {
+      const result = await api<{ profile: { username: string } }>("profile", { username: handle }, "PATCH");
+      setHandle(result.profile.username);
+      setHandleMessage("Username saved.");
+      router.refresh();
+    } catch (e) { setHandleMessage((e as Error).message); }
+    finally { setHandleBusy(false); }
+  }
   const [color, setColor] = useState(appearance.glow_color ?? defaultGlowColor);
   const [colorBusy, setColorBusy] = useState(false),
     [colorError, setColorError] = useState(""),
@@ -246,6 +263,18 @@ export function AccountSettings({
           </button>
         </form>
       </section>
+      <section className="settings-card">
+        <h2>{t("MineGeo username")}</h2>
+        <p className="muted">{t("Your unique username for applications. You can change it anytime.")}</p>
+        <form onSubmit={saveHandle}>
+          <label className="field">{t("Username")}
+            <input value={handle} onChange={(e) => setHandle(e.target.value)} minLength={3} maxLength={32} pattern="[A-Za-z0-9_]{3,32}" required disabled={handleBusy} />
+            <small>{t("3–32 letters, numbers or underscores.")}</small>
+          </label>
+          {handleMessage && <p role="status">{t(handleMessage)}</p>}
+          <button className="button primary" disabled={handleBusy}>{t("Save username")}</button>
+        </form>
+      </section>
       <section className="settings-card glow-settings">
         <h2>{t("Username glow")}</h2>
         <p className="muted">