167 lines
4.6 KiB
TypeScript
167 lines
4.6 KiB
TypeScript
import {
|
|
Button,
|
|
DialogTitle,
|
|
Input,
|
|
Modal,
|
|
ModalDialog,
|
|
Stack,
|
|
} from "@mui/joy";
|
|
import { useForm } from "@tanstack/react-form";
|
|
import { useMutation } from "@tanstack/react-query";
|
|
import { useTranslation } from "react-i18next";
|
|
import type { AlertInterface, ChangePasswordIntf } from "../../misc/interfaces";
|
|
import { mutatePassword } from "../../utils/api/auth";
|
|
import { useState } from "react";
|
|
import { USER_ERROR_CODE } from "@stockhome/shared";
|
|
import { MyAlert } from "../MyAlert.tsx";
|
|
|
|
interface ChangePasswordProps {
|
|
isOpen: boolean;
|
|
setOpen: (value: boolean) => void;
|
|
alert: (alert: AlertInterface) => void;
|
|
}
|
|
|
|
export const ChangePasswordModal = (props: ChangePasswordProps) => {
|
|
const { t } = useTranslation();
|
|
const [alert, setAlert] = useState<AlertInterface>({
|
|
isAlert: false,
|
|
type: "neutral",
|
|
header: "",
|
|
text: "",
|
|
});
|
|
|
|
const form = useForm({
|
|
defaultValues: {
|
|
currentPassword: "",
|
|
newPassword: "",
|
|
newPasswordRep: "",
|
|
},
|
|
onSubmit: async ({ value }) => {
|
|
if (
|
|
value.newPassword === value.newPasswordRep &&
|
|
value.newPassword !== ""
|
|
) {
|
|
mutate(value);
|
|
} else {
|
|
setAlert({
|
|
isAlert: true,
|
|
type: "danger",
|
|
header: t("error"),
|
|
text: t(USER_ERROR_CODE.PASSWORDS_NOT_MATCHED[0]),
|
|
});
|
|
}
|
|
},
|
|
});
|
|
|
|
const { mutate } = useMutation({
|
|
mutationFn: (values: ChangePasswordIntf) => mutatePassword(values),
|
|
onError: (error: { code?: string }) => {
|
|
setAlert({
|
|
isAlert: true,
|
|
type: "danger",
|
|
header: t("error"),
|
|
text: error.code ? t(error.code) : t("unknown-error"),
|
|
});
|
|
},
|
|
onSuccess: () => {
|
|
props.alert({
|
|
isAlert: true,
|
|
type: "success",
|
|
header: t("success"),
|
|
text: t("SU005"),
|
|
});
|
|
|
|
setAlert({
|
|
isAlert: true,
|
|
type: "success",
|
|
header: t("success"),
|
|
text: t("SU005"),
|
|
});
|
|
props.setOpen(false);
|
|
},
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<Modal open={props.isOpen} onClose={() => props.setOpen(false)}>
|
|
<ModalDialog
|
|
className="rounded-3xl p-6"
|
|
sx={{
|
|
border: "1px solid",
|
|
borderColor: "divider",
|
|
bgcolor: "background.surface",
|
|
}}
|
|
>
|
|
<DialogTitle sx={{ color: "var(--joy-palette-text-primary)" }}>
|
|
{t("new-password-title")}
|
|
</DialogTitle>
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
form.handleSubmit();
|
|
}}
|
|
>
|
|
<Stack spacing={2} className="mt-4">
|
|
<form.Field name="currentPassword">
|
|
{(field) => (
|
|
<Input
|
|
type="password"
|
|
value={field.state.value}
|
|
onChange={(e) => field.handleChange(e.target.value)}
|
|
placeholder={t("current-password")}
|
|
variant="outlined"
|
|
size="lg"
|
|
className="rounded-2xl"
|
|
/>
|
|
)}
|
|
</form.Field>
|
|
<form.Field name="newPassword">
|
|
{(field) => (
|
|
<Input
|
|
type="password"
|
|
value={field.state.value}
|
|
onChange={(e) => field.handleChange(e.target.value)}
|
|
placeholder={t("new-password")}
|
|
variant="outlined"
|
|
size="lg"
|
|
className="rounded-2xl"
|
|
/>
|
|
)}
|
|
</form.Field>
|
|
<form.Field name="newPasswordRep">
|
|
{(field) => (
|
|
<Input
|
|
type="password"
|
|
value={field.state.value}
|
|
onChange={(e) => field.handleChange(e.target.value)}
|
|
placeholder={t("new-password-rep")}
|
|
variant="outlined"
|
|
size="lg"
|
|
className="rounded-2xl"
|
|
/>
|
|
)}
|
|
</form.Field>
|
|
<Button
|
|
type="submit"
|
|
size="lg"
|
|
color="primary"
|
|
variant="solid"
|
|
className="btn-lift rounded-2xl"
|
|
>
|
|
{t("change")}
|
|
</Button>
|
|
</Stack>
|
|
</form>
|
|
{alert.isAlert && (
|
|
<MyAlert
|
|
type={alert.type}
|
|
header={alert.header}
|
|
text={alert.text}
|
|
/>
|
|
)}
|
|
</ModalDialog>
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|