112 lines
3.3 KiB
JavaScript
112 lines
3.3 KiB
JavaScript
import * as Yup from "yup";
|
|
import PropTypes from "prop-types";
|
|
import { Formik, Form } from "formik";
|
|
|
|
import { Button } from "../Button";
|
|
import { TextField } from "../Form/TextField";
|
|
import accountsService from "../../services/accountsService";
|
|
|
|
const isPopulated = (value) => value?.length > 0;
|
|
|
|
const emailUpdateSchema = Yup.object().shape({
|
|
email: Yup.string().email("Please provide a valid email address"),
|
|
confirmEmail: Yup.string()
|
|
.oneOf([Yup.ref("email"), null], "Emails must match")
|
|
.when("email", {
|
|
is: isPopulated,
|
|
then: (schema) => schema.required("Please confirm new email address"),
|
|
}),
|
|
password: Yup.string().min(1, "Password can't be blank"),
|
|
confirmPassword: Yup.string()
|
|
.oneOf([Yup.ref("password"), null], "Passwords must match")
|
|
.when("password", {
|
|
is: isPopulated,
|
|
then: (schema) => schema.required("Please confirm new password"),
|
|
}),
|
|
});
|
|
|
|
export const AccountSettingsForm = ({ user, onSuccess, onFailure }) => {
|
|
return (
|
|
<Formik
|
|
initialValues={{
|
|
email: "",
|
|
confirmEmail: "",
|
|
password: "",
|
|
confirmPassword: "",
|
|
}}
|
|
validationSchema={emailUpdateSchema}
|
|
onSubmit={async ({ email, password }, { resetForm }) => {
|
|
try {
|
|
const user = await accountsService
|
|
.put("user", {
|
|
json: {
|
|
email: email || undefined,
|
|
password: password || undefined,
|
|
},
|
|
})
|
|
.json();
|
|
|
|
resetForm();
|
|
await onSuccess(user);
|
|
} catch {
|
|
onFailure();
|
|
}
|
|
}}
|
|
>
|
|
{({ errors, touched, isValid, dirty }) => (
|
|
<Form>
|
|
<div className="flex flex-col w-full gap-8">
|
|
<div className="flex flex-col sm:flex-row gap-2">
|
|
<TextField
|
|
type="text"
|
|
id="email"
|
|
name="email"
|
|
label="Email address"
|
|
placeholder={user?.email}
|
|
error={errors.email}
|
|
touched={touched.email}
|
|
/>
|
|
<TextField
|
|
type="text"
|
|
id="confirmEmail"
|
|
name="confirmEmail"
|
|
label="Confirm new email address"
|
|
error={errors.confirmEmail}
|
|
touched={touched.confirmEmail}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row gap-2">
|
|
<TextField
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
label="New password"
|
|
error={errors.password}
|
|
touched={touched.password}
|
|
/>
|
|
<TextField
|
|
type="password"
|
|
id="confirmPassword"
|
|
name="confirmPassword"
|
|
label="Confirm new password"
|
|
error={errors.confirmPassword}
|
|
touched={touched.confirmPassword}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex mt-2 sm:mt-0 pt-5 justify-center">
|
|
<Button type="submit" className="px-24" disabled={!isValid || !dirty}>
|
|
Update
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
)}
|
|
</Formik>
|
|
);
|
|
};
|
|
|
|
AccountSettingsForm.propTypes = {
|
|
onSuccess: PropTypes.func.isRequired,
|
|
onFailure: PropTypes.func.isRequired,
|
|
};
|