forked from abner/for-legacy-web
feat(modal): port ModifyAccount and PendingRequest
This commit is contained in:
Paul Makles
@@ -1,154 +0,0 @@
|
||||
import { SubmitHandler, useForm } from "react-hook-form";
|
||||
|
||||
import { Text } from "preact-i18n";
|
||||
import { useContext, useState } from "preact/hooks";
|
||||
|
||||
import { Category, Error, Modal } from "@revoltchat/ui";
|
||||
|
||||
import FormField from "../../../pages/login/FormField";
|
||||
import { AppContext } from "../../revoltjs/RevoltClient";
|
||||
import { takeError } from "../../revoltjs/util";
|
||||
|
||||
interface Props {
|
||||
onClose: () => void;
|
||||
field: "username" | "email" | "password";
|
||||
}
|
||||
|
||||
interface FormInputs {
|
||||
password: string;
|
||||
new_email: string;
|
||||
new_username: string;
|
||||
new_password: string;
|
||||
|
||||
// TODO: figure out if this is correct or not
|
||||
// it wasn't in the types before this was typed but the element itself was there
|
||||
current_password?: string;
|
||||
}
|
||||
|
||||
export function ModifyAccountModal({ onClose, field }: Props) {
|
||||
const client = useContext(AppContext);
|
||||
const [processing, setProcessing] = useState(false);
|
||||
const { handleSubmit, register, errors } = useForm<FormInputs>();
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const onSubmit: SubmitHandler<FormInputs> = async ({
|
||||
password,
|
||||
new_username,
|
||||
new_email,
|
||||
new_password,
|
||||
}) => {
|
||||
if (processing) return;
|
||||
setProcessing(true);
|
||||
|
||||
try {
|
||||
if (field === "email") {
|
||||
await client.api.patch("/auth/account/change/email", {
|
||||
current_password: password,
|
||||
email: new_email,
|
||||
});
|
||||
onClose();
|
||||
} else if (field === "password") {
|
||||
await client.api.patch("/auth/account/change/password", {
|
||||
current_password: password,
|
||||
password: new_password,
|
||||
});
|
||||
onClose();
|
||||
} else if (field === "username") {
|
||||
await client.api.patch("/users/@me/username", {
|
||||
username: new_username,
|
||||
password,
|
||||
});
|
||||
onClose();
|
||||
}
|
||||
} catch (err) {
|
||||
setError(takeError(err));
|
||||
setProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
onClose={onClose}
|
||||
title={<Text id={`app.special.modals.account.change.${field}`} />}
|
||||
disabled={processing}
|
||||
actions={[
|
||||
{
|
||||
confirmation: true,
|
||||
onClick: async () => {
|
||||
await handleSubmit(onSubmit)();
|
||||
return true;
|
||||
},
|
||||
children:
|
||||
field === "email" ? (
|
||||
<Text id="app.special.modals.actions.send_email" />
|
||||
) : (
|
||||
<Text id="app.special.modals.actions.update" />
|
||||
),
|
||||
},
|
||||
{
|
||||
onClick: onClose,
|
||||
children: <Text id="app.special.modals.actions.cancel" />,
|
||||
palette: "plain",
|
||||
},
|
||||
]}>
|
||||
{/* Preact / React typing incompatabilities */}
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleSubmit(
|
||||
onSubmit,
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
)(e as any);
|
||||
}}>
|
||||
{field === "email" && (
|
||||
<FormField
|
||||
type="email"
|
||||
name="new_email"
|
||||
register={register}
|
||||
showOverline
|
||||
error={errors.new_email?.message}
|
||||
disabled={processing}
|
||||
/>
|
||||
)}
|
||||
{field === "password" && (
|
||||
<FormField
|
||||
type="password"
|
||||
name="new_password"
|
||||
register={register}
|
||||
showOverline
|
||||
error={errors.new_password?.message}
|
||||
autoComplete="new-password"
|
||||
disabled={processing}
|
||||
/>
|
||||
)}
|
||||
{field === "username" && (
|
||||
<FormField
|
||||
type="username"
|
||||
name="new_username"
|
||||
register={register}
|
||||
showOverline
|
||||
error={errors.new_username?.message}
|
||||
disabled={processing}
|
||||
/>
|
||||
)}
|
||||
<FormField
|
||||
type="current_password"
|
||||
register={register}
|
||||
showOverline
|
||||
error={errors.current_password?.message}
|
||||
autoComplete="current-password"
|
||||
disabled={processing}
|
||||
/>
|
||||
{error && (
|
||||
<Category compact>
|
||||
<Error
|
||||
error={
|
||||
<Text id="app.special.modals.account.failed" />
|
||||
}
|
||||
/>
|
||||
</Category>
|
||||
)}
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { User } from "revolt.js";
|
||||
|
||||
import styles from "./UserPicker.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
|
||||
import { Modal } from "@revoltchat/ui";
|
||||
|
||||
import { Friend } from "../../../pages/friends/Friend";
|
||||
|
||||
interface Props {
|
||||
users: User[];
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const PendingRequests = observer(({ users, onClose }: Props) => {
|
||||
return (
|
||||
<Modal
|
||||
title={<Text id="app.special.friends.pending" />}
|
||||
onClose={onClose}>
|
||||
<div className={styles.list}>
|
||||
{users.map((x) => (
|
||||
<Friend user={x!} key={x!._id} />
|
||||
))}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user