86 lines
2.1 KiB
JavaScript
86 lines
2.1 KiB
JavaScript
import * as Yup from "yup";
|
|
import Layout from "../../components/Layout";
|
|
import SelfServiceForm from "../../components/Form/SelfServiceForm";
|
|
import accountsApi from "../../services/accountsApi";
|
|
|
|
const profileConfig = [
|
|
{
|
|
name: "email",
|
|
type: "text",
|
|
label: "New email address",
|
|
autoComplete: "email",
|
|
position: 0,
|
|
},
|
|
{
|
|
name: "confirmEmail",
|
|
type: "text",
|
|
label: "New email address repeated",
|
|
autoComplete: "email",
|
|
position: 1,
|
|
},
|
|
];
|
|
|
|
const passwordConfig = [
|
|
{
|
|
name: "password",
|
|
type: "password",
|
|
label: "New password",
|
|
position: 1,
|
|
},
|
|
{
|
|
name: "confirmPassword",
|
|
type: "password",
|
|
label: "New password repeated",
|
|
position: 2,
|
|
},
|
|
];
|
|
|
|
const emailValidationSchema = Yup.object().shape({
|
|
email: Yup.string().required("Email is required").email("This email is invalid"),
|
|
confirmEmail: Yup.string().oneOf([Yup.ref("email"), null], "Emails must match"),
|
|
});
|
|
|
|
const passwordValidationSchema = Yup.object().shape({
|
|
password: Yup.string().required("Password is required").min(6, "Password has to be at least 6 characters long"),
|
|
confirmPassword: Yup.string().oneOf([Yup.ref("password"), null], "Passwords must match"),
|
|
});
|
|
|
|
export default function Settings() {
|
|
const onEmailSubmit = async (values) => {
|
|
await accountsApi.put("user", {
|
|
json: {
|
|
email: values.email,
|
|
},
|
|
});
|
|
};
|
|
|
|
const onPasswordSubmit = async (values) => {
|
|
await accountsApi.put("user", {
|
|
json: {
|
|
password: values.password,
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Layout title="Settings">
|
|
<div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6 grid grid-cols-1 gap-5 sm:grid-cols-2">
|
|
<SelfServiceForm
|
|
fieldsConfig={profileConfig}
|
|
validationSchema={emailValidationSchema}
|
|
onSubmit={onEmailSubmit}
|
|
title="Account settings"
|
|
button="Update"
|
|
/>
|
|
<SelfServiceForm
|
|
fieldsConfig={passwordConfig}
|
|
validationSchema={passwordValidationSchema}
|
|
onSubmit={onPasswordSubmit}
|
|
title="Authentication settings"
|
|
button="Update"
|
|
/>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|