umami/components/forms/ChangePasswordForm.js

106 lines
3.3 KiB
JavaScript
Raw Normal View History

2020-08-09 08:48:43 +02:00
import React, { useState } from 'react';
2020-09-06 02:27:01 +02:00
import { FormattedMessage } from 'react-intl';
2020-08-09 08:48:43 +02:00
import { Formik, Form, Field } from 'formik';
import Button from 'components/common/Button';
import FormLayout, {
FormButtons,
FormError,
FormMessage,
FormRow,
} from 'components/layout/FormLayout';
2022-02-23 08:52:31 +01:00
import useApi from 'hooks/useApi';
2020-08-09 08:48:43 +02:00
const initialValues = {
2020-08-09 11:03:37 +02:00
current_password: '',
new_password: '',
confirm_password: '',
2020-08-09 08:48:43 +02:00
};
2020-08-09 11:03:37 +02:00
const validate = ({ current_password, new_password, confirm_password }) => {
2020-08-09 08:48:43 +02:00
const errors = {};
2020-08-09 11:03:37 +02:00
if (!current_password) {
2020-09-06 02:27:01 +02:00
errors.current_password = <FormattedMessage id="label.required" defaultMessage="Required" />;
2020-08-09 08:48:43 +02:00
}
2020-08-09 11:03:37 +02:00
if (!new_password) {
2020-09-06 02:27:01 +02:00
errors.new_password = <FormattedMessage id="label.required" defaultMessage="Required" />;
2020-08-09 08:48:43 +02:00
}
2020-08-09 11:03:37 +02:00
if (!confirm_password) {
2020-09-06 02:27:01 +02:00
errors.confirm_password = <FormattedMessage id="label.required" defaultMessage="Required" />;
2020-08-09 11:03:37 +02:00
} else if (new_password !== confirm_password) {
2020-09-06 02:27:01 +02:00
errors.confirm_password = (
<FormattedMessage id="label.passwords-dont-match" defaultMessage="Passwords don't match" />
);
2020-08-09 08:48:43 +02:00
}
return errors;
};
export default function ChangePasswordForm({ values, onSave, onClose }) {
2022-02-23 08:52:31 +01:00
const { post } = useApi();
2020-08-09 08:48:43 +02:00
const [message, setMessage] = useState();
const handleSubmit = async values => {
2022-02-23 08:52:31 +01:00
const { ok, data } = await post('/account/password', values);
2020-08-09 08:48:43 +02:00
2020-10-01 00:14:44 +02:00
if (ok) {
2020-08-09 08:48:43 +02:00
onSave();
} else {
2020-09-06 02:27:01 +02:00
setMessage(
2020-10-01 00:14:44 +02:00
data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
2020-09-06 02:27:01 +02:00
);
2020-08-09 08:48:43 +02:00
}
};
return (
<FormLayout>
<Formik
initialValues={{ ...initialValues, ...values }}
validate={validate}
onSubmit={handleSubmit}
>
{() => (
<Form>
<FormRow>
2020-09-06 02:27:01 +02:00
<label htmlFor="current_password">
<FormattedMessage id="label.current-password" defaultMessage="Current password" />
</label>
<div>
<Field name="current_password" type="password" />
<FormError name="current_password" />
</div>
2020-08-09 08:48:43 +02:00
</FormRow>
<FormRow>
2020-09-06 02:27:01 +02:00
<label htmlFor="new_password">
<FormattedMessage id="label.new-password" defaultMessage="New password" />
</label>
<div>
<Field name="new_password" type="password" />
<FormError name="new_password" />
</div>
2020-08-09 08:48:43 +02:00
</FormRow>
<FormRow>
2020-09-06 02:27:01 +02:00
<label htmlFor="confirm_password">
<FormattedMessage id="label.confirm-password" defaultMessage="Confirm password" />
</label>
<div>
<Field name="confirm_password" type="password" />
<FormError name="confirm_password" />
</div>
2020-08-09 08:48:43 +02:00
</FormRow>
<FormButtons>
<Button type="submit" variant="action">
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.save" defaultMessage="Save" />
2020-09-06 02:27:01 +02:00
</Button>
<Button onClick={onClose}>
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.cancel" defaultMessage="Cancel" />
2020-08-09 08:48:43 +02:00
</Button>
</FormButtons>
<FormMessage>{message}</FormMessage>
</Form>
)}
</Formik>
</FormLayout>
);
}