umami/components/pages/settings/users/UserEditForm.js

71 lines
2.0 KiB
JavaScript
Raw Normal View History

import {
Dropdown,
Item,
Form,
2023-01-06 07:56:36 +01:00
FormRow,
2020-08-09 08:48:43 +02:00
FormButtons,
FormInput,
TextField,
SubmitButton,
2023-01-24 00:32:35 +01:00
PasswordField,
} from 'react-basics';
2022-12-28 05:20:44 +01:00
import useApi from 'hooks/useApi';
import { ROLES } from 'lib/constants';
2023-03-22 22:05:55 +01:00
import useMessages from 'hooks/useMessages';
2020-08-09 08:48:43 +02:00
2023-01-24 00:32:35 +01:00
export default function UserEditForm({ userId, data, onSave }) {
2023-03-22 22:05:55 +01:00
const { formatMessage, labels, messages } = useMessages();
2023-01-21 02:12:53 +01:00
const { post, useMutation } = useApi();
2023-04-13 21:08:53 +02:00
const { mutate, error } = useMutation(({ username, password, role }) =>
post(`/users/${userId}`, { username, password, role }),
);
2020-08-09 08:48:43 +02:00
const handleSubmit = async data => {
mutate(data, {
onSuccess: async () => {
onSave(data);
},
});
2020-08-09 08:48:43 +02:00
};
2023-01-24 00:32:35 +01:00
const renderValue = value => {
if (value === ROLES.user) {
2023-01-25 16:42:46 +01:00
return formatMessage(labels.user);
2023-01-24 00:32:35 +01:00
}
if (value === ROLES.admin) {
2023-01-25 16:42:46 +01:00
return formatMessage(labels.admin);
2023-01-24 00:32:35 +01:00
}
};
2020-08-09 08:48:43 +02:00
return (
2023-01-25 16:42:46 +01:00
<Form onSubmit={handleSubmit} error={error} values={data} style={{ width: 300 }}>
<FormRow label={formatMessage(labels.username)}>
2023-01-06 07:56:36 +01:00
<FormInput name="username">
<TextField />
</FormInput>
</FormRow>
2023-01-25 16:42:46 +01:00
<FormRow label={formatMessage(labels.password)}>
2023-01-24 00:32:35 +01:00
<FormInput
name="newPassword"
rules={{
2023-04-19 01:00:33 +02:00
minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
2023-01-24 00:32:35 +01:00
}}
>
<PasswordField autoComplete="new-password" />
</FormInput>
</FormRow>
2023-01-25 16:42:46 +01:00
<FormRow label={formatMessage(labels.role)}>
2023-01-24 00:32:35 +01:00
<FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
2023-01-25 16:42:46 +01:00
<Dropdown renderValue={renderValue}>
<Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
<Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
2023-01-06 07:56:36 +01:00
</Dropdown>
</FormInput>
</FormRow>
<FormButtons>
2023-01-24 00:32:35 +01:00
<SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
</FormButtons>
</Form>
2020-08-09 08:48:43 +02:00
);
}