import React, { useContext, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { Controller, useForm, useWatch } from "react-hook-form"; import { ActionGroup, AlertVariant, Button, Checkbox, FormGroup, PageSection, Switch, TextInput, } from "@patternfly/react-core"; import type RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentation"; import { FormAccess } from "../components/form-access/FormAccess"; import { HelpItem } from "../components/help-enabler/HelpItem"; import { FormPanel } from "../components/scroll-form/FormPanel"; import { emailRegexPattern } from "../util"; import { useAdminClient } from "../context/auth/AdminClient"; import { useAlerts } from "../components/alert/Alerts"; import { useRealm } from "../context/realm-context/RealmContext"; import "./RealmSettingsSection.css"; import type UserRepresentation from "keycloak-admin/lib/defs/userRepresentation"; import { WhoAmIContext } from "../context/whoami/WhoAmI"; import { AddUserEmailModal } from "./AddUserEmailModal"; type RealmSettingsEmailTabProps = { realm: RealmRepresentation; user: UserRepresentation; }; export const RealmSettingsEmailTab = ({ realm: initialRealm, user, }: RealmSettingsEmailTabProps) => { const { t } = useTranslation("realm-settings"); const adminClient = useAdminClient(); const { realm: realmName } = useRealm(); const { addAlert } = useAlerts(); const { whoAmI } = useContext(WhoAmIContext); const [realm, setRealm] = useState(initialRealm); const [userEmailModalOpen, setUserEmailModalOpen] = useState(false); const [currentUser, setCurrentUser] = useState(); const { register, control, handleSubmit, errors, watch, setValue, reset: resetForm, getValues, } = useForm(); const userForm = useForm({ mode: "onChange" }); const watchFromValue = watch("smtpServer.from", ""); const watchHostValue = watch("smtpServer.host", ""); const authenticationEnabled = useWatch({ control, name: "smtpServer.authentication", defaultValue: {}, }); useEffect(() => { reset(); }, [realm]); useEffect(() => { setCurrentUser(user); }, []); const handleModalToggle = () => { setUserEmailModalOpen(!userEmailModalOpen); }; const save = async (form: RealmRepresentation) => { try { const savedRealm = { ...realm, ...form }; await adminClient.realms.update({ realm: realmName }, savedRealm); setRealm(savedRealm); addAlert(t("saveSuccess"), AlertVariant.success); } catch (error) { addAlert( t("saveError", { error: error.response?.data?.errorMessage || error }), AlertVariant.danger ); } }; const saveAndTestEmail = async (email?: UserRepresentation) => { if (email) { await adminClient.users.update({ id: whoAmI.getUserId() }, email); const updated = await adminClient.users.findOne({ id: whoAmI.getUserId(), }); setCurrentUser(updated); await save(getValues()); testConnection(); } else { const user = await adminClient.users.findOne({ id: whoAmI.getUserId() }); if (!user.email) { handleModalToggle(); } else { await save(getValues()); testConnection(); } } }; const reset = () => { if (realm) { resetForm(realm); Object.entries(realm).map((entry) => setValue(entry[0], entry[1])); } }; const testConnection = async () => { try { await adminClient.realms.testSMTPConnection( { realm: realm.realm! }, getValues()["smtpServer"] || {} ); addAlert(t("testConnectionSuccess"), AlertVariant.success); } catch (error) { addAlert(t("testConnectionError"), AlertVariant.danger); } }; return ( <> {userEmailModalOpen && ( { saveAndTestEmail(email!); handleModalToggle(); }} form={userForm} user={currentUser!} /> )} } > } > } > ( onChange("" + value)} /> )} /> ( onChange("" + value)} /> )} /> ( { onChange("" + value); }} /> )} /> {authenticationEnabled === "true" && ( <> } > )} ); };