feat: back port discriminators and display names

This commit is contained in:
Paul Makles 2023-06-11 12:44:05 +01:00
parent 86218a7272
commit 5b600bec20
No known key found for this signature in database
GPG key ID: 5059F398521BB0F6
16 changed files with 123 additions and 26 deletions

1
.env
View file

@ -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

@ -1 +1 @@
Subproject commit 393f87aaba71d6f11b3df05766cad982f1cdaa82
Subproject commit 32f73acbd51ad11d25feaa42a0ebc93294dc7028

2
external/lang vendored

@ -1 +1 @@
Subproject commit 1c99677d4f9319d7b380d525a4ca25e57a3d8730
Subproject commit 4cfba33bf590ccaec2ad957c43bec14b14ed2f8b

2
external/revolt.js vendored

@ -1 +1 @@
Subproject commit 1e45043151550187f0b2cb46cab4e8c5f4b087e0
Subproject commit cdc266ef164b43d715638cb895740155743d1529

View file

@ -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";

View file

@ -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;

View file

@ -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

View file

@ -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,
});

View file

@ -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>
);

View 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" />,
}}
/>
);
}

View file

@ -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>

View file

@ -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 && (

View file

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

View file

@ -708,7 +708,7 @@ section {
.new {
font-size: 10px;
background: red;
background: var(--accent);
padding: 3px 5px;
border-radius: 20px;
color: white;

View file

@ -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"}>

View file

@ -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