diff --git a/.env b/.env index f571df9d..5f746f79 100644 --- a/.env +++ b/.env @@ -1,3 +1,4 @@ VITE_API_URL=https://api.revolt.chat +# VITE_API_URL=http://local.revolt.chat:8000 # VITE_API_URL=https://revolt.chat/api VITE_THEMES_URL=https://themes.revolt.chat diff --git a/external/components b/external/components index 393f87aa..32f73acb 160000 --- a/external/components +++ b/external/components @@ -1 +1 @@ -Subproject commit 393f87aaba71d6f11b3df05766cad982f1cdaa82 +Subproject commit 32f73acbd51ad11d25feaa42a0ebc93294dc7028 diff --git a/external/lang b/external/lang index 1c99677d..4cfba33b 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 1c99677d4f9319d7b380d525a4ca25e57a3d8730 +Subproject commit 4cfba33bf590ccaec2ad957c43bec14b14ed2f8b diff --git a/external/revolt.js b/external/revolt.js index 1e450431..cdc266ef 160000 --- a/external/revolt.js +++ b/external/revolt.js @@ -1 +1 @@ -Subproject commit 1e45043151550187f0b2cb46cab4e8c5f4b087e0 +Subproject commit cdc266ef164b43d715638cb895740155743d1529 diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx index 65bae756..ac1467d3 100644 --- a/src/components/common/messaging/Message.tsx +++ b/src/components/common/messaging/Message.tsx @@ -5,7 +5,7 @@ import { useTriggerEvents } from "preact-context-menu"; import { memo } from "preact/compat"; import { useEffect, useState } from "preact/hooks"; -import { Category, Button } from "@revoltchat/ui"; +import { Category } from "@revoltchat/ui"; import { internalEmit } from "../../../lib/eventEmitter"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; diff --git a/src/components/common/user/UserShort.tsx b/src/components/common/user/UserShort.tsx index bae06c44..ef2d2586 100644 --- a/src/components/common/user/UserShort.tsx +++ b/src/components/common/user/UserShort.tsx @@ -68,7 +68,9 @@ export const Username = observer( override, ...otherProps }: UsernameProps) => { - let username = user?.username; + let username = + (user as unknown as { display_name: string })?.display_name ?? + user?.username; let color = masquerade?.colour; let timed_out: Date | undefined; diff --git a/src/components/settings/account/EditAccount.tsx b/src/components/settings/account/EditAccount.tsx index dfd596d2..5d263ece 100644 --- a/src/components/settings/account/EditAccount.tsx +++ b/src/components/settings/account/EditAccount.tsx @@ -37,7 +37,13 @@ export default observer(() => { {( [ - ["username", client.user!.username + "#0000", At], + [ + "username", + client.user!.username + + "#" + + client.user!.discriminator, + At, + ], ["email", email, Envelope], ["password", "•••••••••", Key], ] as const diff --git a/src/controllers/modals/ModalController.tsx b/src/controllers/modals/ModalController.tsx index bb3a80f7..bfba6ba5 100644 --- a/src/controllers/modals/ModalController.tsx +++ b/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, }); diff --git a/src/controllers/modals/components/ModifyAccount.tsx b/src/controllers/modals/components/ModifyAccount.tsx index 8103647d..f3652aaf 100644 --- a/src/controllers/modals/components/ModifyAccount.tsx +++ b/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" && ( - +
+
+ +
+
+ +
+
)} )} + + {field === "username" && ( +
+ + Changing your username may change your + discriminator. You can freely change the case of + your username. + +
+ )} ); diff --git a/src/controllers/modals/components/ModifyDisplayname.tsx b/src/controllers/modals/components/ModifyDisplayname.tsx new file mode 100644 index 00000000..d00e5da7 --- /dev/null +++ b/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 ( + + display_name && display_name !== client.user!.username + ? client.users.edit({ + display_name, + } as never) + : client.users.edit({ + remove: ["DisplayName"], + } as never) + } + submit={{ + children: , + }} + /> + ); +} diff --git a/src/controllers/modals/components/legacy/Onboarding.tsx b/src/controllers/modals/components/legacy/Onboarding.tsx index eb726801..fa3f2b73 100644 --- a/src/controllers/modals/components/legacy/Onboarding.tsx +++ b/src/controllers/modals/components/legacy/Onboarding.tsx @@ -71,6 +71,11 @@ export function OnboardingModal({ error={error} /> +

+ You will be automatically assigned a + discriminator which you can find from + settings. +

diff --git a/src/controllers/modals/components/legacy/UserProfile.tsx b/src/controllers/modals/components/legacy/UserProfile.tsx index a134efdb..299eb68b 100644 --- a/src/controllers/modals/components/legacy/UserProfile.tsx +++ b/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} modalController.writeText(user.username) }> - {user.username}#0000 + {user.username}#{user.discriminator} {user.status?.text && ( diff --git a/src/controllers/modals/types.ts b/src/controllers/modals/types.ts index ff9a1970..e47b9af1 100644 --- a/src/controllers/modals/types.ts +++ b/src/controllers/modals/types.ts @@ -9,6 +9,7 @@ export type Modal = { | "create_group" | "create_server" | "custom_status" + | "modify_displayname" | "add_friend"; } | ({ diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index 30a4e7b9..896341e8 100644 --- a/src/pages/settings/panes/Panes.module.scss +++ b/src/pages/settings/panes/Panes.module.scss @@ -708,9 +708,9 @@ section { .new { font-size: 10px; - background: red; + background: var(--accent); padding: 3px 5px; border-radius: 20px; color: white; } -} \ No newline at end of file +} diff --git a/src/pages/settings/panes/Profile.tsx b/src/pages/settings/panes/Profile.tsx index 1f03be2c..c71985ef 100644 --- a/src/pages/settings/panes/Profile.tsx +++ b/src/pages/settings/panes/Profile.tsx @@ -1,10 +1,9 @@ import { Markdown } from "@styled-icons/boxicons-logos"; +import { UserCircle } from "@styled-icons/boxicons-solid"; import { observer } from "mobx-react-lite"; import { useHistory } from "react-router-dom"; import { API } from "revolt.js"; -import { UserCircle } from "@styled-icons/boxicons-solid"; - import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useCallback, useContext, useEffect, useState } from "preact/hooks"; @@ -19,6 +18,7 @@ import AutoComplete, { } from "../../../components/common/AutoComplete"; import { useSession } from "../../../controllers/client/ClientController"; import { FileUploader } from "../../../controllers/client/jsx/legacy/FileUploads"; +import { modalController } from "../../../controllers/modals/ModalController"; import { UserProfile } from "../../../controllers/modals/components/legacy/UserProfile"; export const Profile = observer(() => { @@ -84,6 +84,9 @@ export const Profile = observer(() => {
NEW
+ modalController.push({ type: "modify_displayname" }) + } icon={} action="chevron" description={"Change your display name to whatever you like"}> diff --git a/yarn.lock b/yarn.lock index 9671c489..5d7c9e4f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8016,14 +8016,14 @@ __metadata: languageName: node linkType: hard -"revolt-api@npm:0.5.8": - version: 0.5.8 - resolution: "revolt-api@npm:0.5.8" +"revolt-api@npm:0.6.0": + version: 0.6.0 + resolution: "revolt-api@npm:0.6.0" dependencies: "@insertish/oapi": 0.1.18 axios: ^0.26.1 lodash.defaultsdeep: ^4.6.1 - checksum: d488fa87774e4e9d0b3136779c555cbed257d2b76a298b17dca346cc3909f81e84aa516c10a415a7c20cd31990d540ade5489f69e06f69e14ba4974a26aa145e + checksum: 94865aa1aee5b05682ffe4e40a0fe431809f879437399943fc429d078160a5fe24686011b43639d6fae88e9a7a43fbe4bb9beb9bbe1bb3070965636f0ec051fd languageName: node linkType: hard @@ -8040,7 +8040,7 @@ __metadata: lodash.isequal: ^4.5.0 long: ^5.2.0 mobx: ^6.3.2 - revolt-api: 0.5.8 + revolt-api: 0.6.0 ulid: ^2.3.0 ws: ^8.2.2 languageName: node