89 lines
2.2 KiB
TypeScript
89 lines
2.2 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { FormProvider, useForm } from "react-hook-form";
|
|
import {
|
|
AlertVariant,
|
|
Button,
|
|
ButtonVariant,
|
|
Form,
|
|
Modal,
|
|
ModalVariant,
|
|
} from "@patternfly/react-core";
|
|
|
|
import type AuthenticationFlowRepresentation from "@keycloak/keycloak-admin-client/lib/defs/authenticationFlowRepresentation";
|
|
import { useAdminClient } from "../context/auth/AdminClient";
|
|
import { useAlerts } from "../components/alert/Alerts";
|
|
import { NameDescription } from "./form/NameDescription";
|
|
|
|
type EditFlowModalProps = {
|
|
flow: AuthenticationFlowRepresentation;
|
|
toggleDialog: () => void;
|
|
};
|
|
|
|
type EditForm = {
|
|
alias: string;
|
|
description: string;
|
|
};
|
|
|
|
export const EditFlowModal = ({ flow, toggleDialog }: EditFlowModalProps) => {
|
|
const { t } = useTranslation("authentication");
|
|
const form = useForm<EditForm>({
|
|
shouldUnregister: false,
|
|
});
|
|
const { reset, handleSubmit } = form;
|
|
const adminClient = useAdminClient();
|
|
const { addAlert, addError } = useAlerts();
|
|
|
|
useEffect(() => {
|
|
reset(flow);
|
|
}, [flow, reset]);
|
|
|
|
const save = async (values: EditForm) => {
|
|
try {
|
|
await adminClient.authenticationManagement.updateFlow(
|
|
{ flowId: flow.id! },
|
|
{ ...flow, ...values }
|
|
);
|
|
addAlert(t("updateFlowSuccess"), AlertVariant.success);
|
|
} catch (error) {
|
|
addError("authentication:updateFlowError", error);
|
|
}
|
|
toggleDialog();
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title={t("editFlow")}
|
|
isOpen={true}
|
|
onClose={toggleDialog}
|
|
variant={ModalVariant.small}
|
|
actions={[
|
|
<Button
|
|
id="modal-confirm"
|
|
key="confirm"
|
|
onClick={handleSubmit(save)}
|
|
data-testid="confirm"
|
|
>
|
|
{t("edit")}
|
|
</Button>,
|
|
<Button
|
|
data-testid="cancel"
|
|
id="modal-cancel"
|
|
key="cancel"
|
|
variant={ButtonVariant.link}
|
|
onClick={() => {
|
|
toggleDialog();
|
|
}}
|
|
>
|
|
{t("common:cancel")}
|
|
</Button>,
|
|
]}
|
|
>
|
|
<FormProvider {...form}>
|
|
<Form isHorizontal>
|
|
<NameDescription />
|
|
</Form>
|
|
</FormProvider>
|
|
</Modal>
|
|
);
|
|
};
|