import { ActionGroup, AlertVariant, Button, Checkbox, FormGroup, PageSection, Switch, TextInput, } from "@patternfly/react-core"; import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation"; import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation"; import React, { useState } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { useAlerts } from "../components/alert/Alerts"; import { FormAccess } from "../components/form-access/FormAccess"; import { HelpItem } from "../components/help-enabler/HelpItem"; import { FormPanel } from "../components/scroll-form/FormPanel"; import { useAdminClient } from "../context/auth/AdminClient"; import { useRealm } from "../context/realm-context/RealmContext"; import { useWhoAmI } from "../context/whoami/WhoAmI"; import { emailRegexPattern } from "../util"; import { AddUserEmailModal } from "./AddUserEmailModal"; import "./RealmSettingsSection.css"; 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, addError } = useAlerts(); const { whoAmI } = useWhoAmI(); const [realm, setRealm] = useState(initialRealm); const [userEmailModalOpen, setUserEmailModalOpen] = useState(false); const [currentUser, setCurrentUser] = useState(user); const { register, control, handleSubmit, errors, watch, setValue, reset: resetForm, getValues, } = useForm({ defaultValues: realm }); const userForm = useForm({ mode: "onChange" }); const watchFromValue = watch("smtpServer.from", ""); const watchHostValue = watch("smtpServer.host", ""); const authenticationEnabled = useWatch({ control, name: "smtpServer.authentication", defaultValue: "", }); 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) { addError("realm-settings:saveError", error); } }; const saveAndTestEmail = async (email?: UserRepresentation) => { if (email) { await adminClient.users.update({ id: whoAmI.getUserId() }, email); setCurrentUser(email); await save(getValues()); testConnection(); } else { const user = await adminClient.users.findOne({ id: whoAmI.getUserId() }); if (user && !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 () => { const serverSettings = { ...getValues()["smtpServer"] }; // Code below uses defensive coding as the server configuration uses an ambiguous record type. if (typeof serverSettings.port === "string") { serverSettings.port = Number(serverSettings.port); } if (typeof serverSettings.ssl === "string") { serverSettings.ssl = serverSettings.ssl === true.toString(); } if (typeof serverSettings.starttls === "string") { serverSettings.starttls = serverSettings.starttls === true.toString(); } // For some reason the API wants a duplicate field for the authentication status. // Somebody thought this was a good idea, so here we are. if (serverSettings.authentication === true.toString()) { serverSettings.auth = true; } try { await adminClient.realms.testSMTPConnection( { realm: realm.realm! }, serverSettings ); addAlert(t("testConnectionSuccess"), AlertVariant.success); } catch (error) { addError("realm-settings:testConnectionError", error); } }; return ( <> {userEmailModalOpen && ( { saveAndTestEmail(email!); handleModalToggle(); }} form={userForm} user={currentUser!} /> )} } > } > } > ( onChange("" + value)} /> )} /> ( onChange("" + value)} /> )} /> ( { onChange("" + value); }} /> )} /> {authenticationEnabled === "true" && ( <> } > )} ); };