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

78 lines
2.2 KiB
JavaScript
Raw Normal View History

import { useRef } from 'react';
2023-01-06 07:56:36 +01:00
import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
2022-12-28 05:20:44 +01:00
import useApi from 'hooks/useApi';
import useUser from 'hooks/useUser';
export default function UserPasswordForm({ onSave, onClose, userId }) {
const user = useUser();
const isCurrentUser = !userId || user?.id === userId;
const url = isCurrentUser ? `/users/${user?.id}/password` : `/users/${user?.id}`;
const { post, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => post(url, data));
const ref = useRef(null);
const handleSubmit = async data => {
const payload = isCurrentUser
? data
: {
2022-12-27 02:36:48 +01:00
password: data.newPassword,
};
mutate(payload, {
onSuccess: async () => {
onSave();
ref.current.reset();
},
});
};
const samePassword = value => {
2022-12-27 02:36:48 +01:00
if (value !== ref?.current?.getValues('newPassword')) {
return "Passwords don't match";
}
return true;
};
return (
<Form ref={ref} onSubmit={handleSubmit} error={error}>
{isCurrentUser && (
2023-01-06 07:56:36 +01:00
<FormRow label="Current password">
<FormInput name="currentPassword" rules={{ required: 'Required' }}>
<PasswordField autoComplete="off" />
</FormInput>
</FormRow>
)}
<FormRow label="New password">
<FormInput
name="newPassword"
rules={{
required: 'Required',
minLength: { value: 8, message: 'Minimum length 8 characters' },
}}
>
<PasswordField autoComplete="off" />
</FormInput>
2023-01-06 07:56:36 +01:00
</FormRow>
<FormRow label="Confirm password">
<FormInput
name="confirmPassword"
rules={{
required: 'Required',
minLength: { value: 8, message: 'Minimum length 8 characters' },
validate: samePassword,
}}
>
<PasswordField autoComplete="off" />
</FormInput>
</FormRow>
<FormButtons flex>
<Button type="submit" variant="primary" disabled={isLoading}>
Save
</Button>
<Button onClick={onClose}>Close</Button>
</FormButtons>
</Form>
);
}