mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-06 07:25:53 -05:00
feat: back port discriminators and display names
This commit is contained in:
parent
86218a7272
commit
5b600bec20
16 changed files with 123 additions and 26 deletions
1
.env
1
.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
|
||||
|
|
2
external/components
vendored
2
external/components
vendored
|
@ -1 +1 @@
|
|||
Subproject commit 393f87aaba71d6f11b3df05766cad982f1cdaa82
|
||||
Subproject commit 32f73acbd51ad11d25feaa42a0ebc93294dc7028
|
2
external/lang
vendored
2
external/lang
vendored
|
@ -1 +1 @@
|
|||
Subproject commit 1c99677d4f9319d7b380d525a4ca25e57a3d8730
|
||||
Subproject commit 4cfba33bf590ccaec2ad957c43bec14b14ed2f8b
|
2
external/revolt.js
vendored
2
external/revolt.js
vendored
|
@ -1 +1 @@
|
|||
Subproject commit 1e45043151550187f0b2cb46cab4e8c5f4b087e0
|
||||
Subproject commit cdc266ef164b43d715638cb895740155743d1529
|
|
@ -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";
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
47
src/controllers/modals/components/ModifyDisplayname.tsx
Normal file
47
src/controllers/modals/components/ModifyDisplayname.tsx
Normal file
|
@ -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" />,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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 && (
|
||||
|
|
|
@ -9,6 +9,7 @@ export type Modal = {
|
|||
| "create_group"
|
||||
| "create_server"
|
||||
| "custom_status"
|
||||
| "modify_displayname"
|
||||
| "add_friend";
|
||||
}
|
||||
| ({
|
||||
|
|
|
@ -708,7 +708,7 @@ section {
|
|||
|
||||
.new {
|
||||
font-size: 10px;
|
||||
background: red;
|
||||
background: var(--accent);
|
||||
padding: 3px 5px;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
|
|
|
@ -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(() => {
|
|||
<div className={styles.new}>NEW</div>
|
||||
</div>
|
||||
<CategoryButton
|
||||
onClick={() =>
|
||||
modalController.push({ type: "modify_displayname" })
|
||||
}
|
||||
icon={<UserCircle size={24} />}
|
||||
action="chevron"
|
||||
description={"Change your display name to whatever you like"}>
|
||||
|
|
10
yarn.lock
10
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
|
||||
|
|
Loading…
Reference in a new issue