Keycloak

1
import type AuthenticationFlowRepresentation from "@keycloak/keycloak-admin-client/lib/defs/authenticationFlowRepresentation";
2
import {
3
  AlertVariant,
4
  Button,
5
  ButtonVariant,
6
  Form,
7
  Modal,
8
  ModalVariant,
9
} from "@patternfly/react-core";
10
import { useEffect } from "react";
11
import { FormProvider, useForm } from "react-hook-form";
12

13
import { useTranslation } from "react-i18next";
14
import { adminClient } from "../admin-client";
15
import { useAlerts } from "../components/alert/Alerts";
16
import { NameDescription } from "./form/NameDescription";
17

18
type EditFlowModalProps = {
19
  flow: AuthenticationFlowRepresentation;
20
  toggleDialog: () => void;
21
};
22

23
export const EditFlowModal = ({ flow, toggleDialog }: EditFlowModalProps) => {
24
  const { t } = useTranslation();
25
  const { addAlert, addError } = useAlerts();
26
  const form = useForm<AuthenticationFlowRepresentation>({ mode: "onChange" });
27
  const { reset, handleSubmit } = form;
28

29
  useEffect(() => reset(flow), [flow]);
30

31
  const onSubmit = async (formValues: AuthenticationFlowRepresentation) => {
32
    try {
33
      await adminClient.authenticationManagement.updateFlow(
34
        { flowId: flow.id! },
35
        { ...flow, ...formValues },
36
      );
37
      addAlert(t("updateFlowSuccess"), AlertVariant.success);
38
    } catch (error) {
39
      addError("updateFlowError", error);
40
    }
41
    toggleDialog();
42
  };
43

44
  return (
45
    <Modal
46
      title={t("editFlow")}
47
      onClose={toggleDialog}
48
      variant={ModalVariant.small}
49
      actions={[
50
        <Button
51
          key="confirm"
52
          data-testid="confirm"
53
          type="submit"
54
          form="edit-flow-form"
55
        >
56
          {t("edit")}
57
        </Button>,
58
        <Button
59
          key="cancel"
60
          data-testid="cancel"
61
          variant={ButtonVariant.link}
62
          onClick={() => toggleDialog()}
63
        >
64
          {t("cancel")}
65
        </Button>,
66
      ]}
67
      isOpen
68
    >
69
      <FormProvider {...form}>
70
        <Form
71
          id="edit-flow-form"
72
          onSubmit={handleSubmit(onSubmit)}
73
          isHorizontal
74
        >
75
          <NameDescription />
76
        </Form>
77
      </FormProvider>
78
    </Modal>
79
  );
80
};
81