feat: back port discriminators and display names

src/controllers/modals/ModalController.tsx

@@ -39,6 +39,7 @@ import MFAEnableTOTP from "./components/MFAEnableTOTP";
 import MFAFlow from "./components/MFAFlow";
 import MFARecovery from "./components/MFARecovery";
 import ModifyAccount from "./components/ModifyAccount";
+import ModifyDisplayname from "./components/ModifyDisplayname";
 import OutOfDate from "./components/OutOfDate";
 import PendingFriendRequests from "./components/PendingFriendRequests";
 import ReportContent from "./components/Report";
@@ -280,4 +281,5 @@ export const modalController = new ModalControllerExtended({
     user_profile: UserProfile,
     report: ReportContent,
     report_success: ReportSuccess,
+    modify_displayname: ModifyDisplayname,
 });

src/controllers/modals/components/ModifyAccount.tsx

@@ -3,7 +3,7 @@ import { SubmitHandler, useForm } from "react-hook-form";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
-import { Category, Error, Modal } from "@revoltchat/ui";
+import { Category, Error, InputBox, Modal, Tip } from "@revoltchat/ui";
 
 import { noopTrue } from "../../../lib/js";
 
@@ -120,14 +120,34 @@ export default function ModifyAccount({
                     />
                 )}
                 {field === "username" && (
-                    <FormField
-                        type="username"
-                        name="new_username"
-                        register={register}
-                        showOverline
-                        error={errors.new_username?.message}
-                        disabled={processing}
-                    />
+                    <div
+                        style={{
+                            display: "flex",
+                            alignItems: "end",
+                            gap: "8px",
+                        }}>
+                        <div style={{ flexGrow: 1 }}>
+                            <FormField
+                                type="username"
+                                name="new_username"
+                                register={register}
+                                showOverline
+                                error={errors.new_username?.message}
+                                disabled={processing}
+                            />
+                        </div>
+                        <div
+                            style={{
+                                flexShrink: 0,
+                                width: "80px",
+                                textAlign: "center",
+                            }}>
+                            <InputBox
+                                disabled
+                                value={"#" + client.user.discriminator}
+                            />
+                        </div>
+                    </div>
                 )}
                 <FormField
                     type="current_password"
@@ -146,6 +166,16 @@ export default function ModifyAccount({
                         />
                     </Category>
                 )}
+
+                {field === "username" && (
+                    <div style={{ marginTop: "8px" }}>
+                        <Tip palette="warning">
+                            Changing your username may change your
+                            discriminator. You can freely change the case of
+                            your username.
+                        </Tip>
+                    </div>
+                )}
             </form>
         </Modal>
     );

src/controllers/modals/components/ModifyDisplayname.tsx

@@ -0,0 +1,47 @@
+import { Text } from "preact-i18n";
+
+import { ModalForm } from "@revoltchat/ui";
+
+import { useClient } from "../../client/ClientController";
+import { ModalProps } from "../types";
+
+/**
+ * Modify display name modal
+ */
+export default function ModifyDisplayname({
+    ...props
+}: ModalProps<"modify_displayname">) {
+    const client = useClient();
+
+    return (
+        <ModalForm
+            {...props}
+            title="Update display name"
+            schema={{
+                display_name: "text",
+            }}
+            defaults={{
+                display_name: (
+                    client.user as unknown as { display_name: string }
+                )?.display_name as string,
+            }}
+            data={{
+                display_name: {
+                    field: "Display Name",
+                },
+            }}
+            callback={({ display_name }) =>
+                display_name && display_name !== client.user!.username
+                    ? client.users.edit({
+                          display_name,
+                      } as never)
+                    : client.users.edit({
+                          remove: ["DisplayName"],
+                      } as never)
+            }
+            submit={{
+                children: <Text id="app.special.modals.actions.save" />,
+            }}
+        />
+    );
+}

src/controllers/modals/components/legacy/Onboarding.tsx

@@ -71,6 +71,11 @@ export function OnboardingModal({
                                         error={error}
                                     />
                                 </div>
+                                <p>
+                                    You will be automatically assigned a
+                                    discriminator which you can find from
+                                    settings.
+                                </p>
                                 <Button palette="accent">
                                     {"Looks good!"}
                                 </Button>

src/controllers/modals/components/legacy/UserProfile.tsx

@@ -169,14 +169,14 @@ export const UserProfile = observer(
                                     onClick={() =>
                                         modalController.writeText(user.username)
                                     }>
-                                    {user.username}
+                                    {user.display_name ?? user.username}
                                 </span>
                                 <span
                                     className={styles.username}
                                     onClick={() =>
                                         modalController.writeText(user.username)
                                     }>
-                                    {user.username}#0000
+                                    {user.username}#{user.discriminator}
                                 </span>
                             </div>
                             {user.status?.text && (

src/controllers/modals/types.ts

@@ -9,6 +9,7 @@ export type Modal = {
               | "create_group"
               | "create_server"
               | "custom_status"
+              | "modify_displayname"
               | "add_friend";
       }
     | ({