test email working, modal wip

email connection done

remove comment

fix cypress test

revert test file

fdisable email prompting when user email entered

prettier

update cypress tests

fix lint

try fix cypress test

try longer wait

cypress/integration/realm_roles_test.spec.ts

@@ -56,6 +56,8 @@ describe("Realm roles test", function () {
       // Delete
       listingPage.deleteItem(itemId);
 
+      cy.wait(500);
+
       modalUtils.checkModalTitle("Delete role?").confirmModal();
 
       masthead.checkNotificationMessage("The role has been deleted");

cypress/integration/realm_settings_test.spec.ts

@@ -69,6 +69,9 @@ describe("Realm settings", () => {
     realmSettingsPage.toggleCheck(realmSettingsPage.enableStartTlsCheck);
 
     realmSettingsPage.save(realmSettingsPage.emailSaveBtn);
+    cy.getId(realmSettingsPage.testConnectionButton).click();
+    cy.wait(500)
+    masthead.checkNotificationMessage("Error! Failed to send email.");
   });
 
   it("Go to themes tab", () => {

cypress/support/pages/admin_console/manage/realm_settings/RealmSettingsPage.ts

@@ -35,6 +35,9 @@ export default class RealmSettingsPage {
   filterSelectMenu = ".kc-filter-type-select";
   passiveKeysOption = "passive-keys-option";
   disabledKeysOption = "disabled-keys-option";
+  testConnectionButton = "test-connection-button";
+  modalTestConnectionButton = "modal-test-connection-button";
+  emailAddressInput = "email-address-input";
 
   selectLoginThemeType(themeType: string) {
     const themesUrl = "/auth/admin/realms/master/themes";

src/components/confirm-dialog/ConfirmDialog.tsx

@@ -36,6 +36,7 @@ export type ConfirmDialogProps = {
   titleKey: string;
   messageKey?: string;
   noCancelButton?: boolean;
+  confirmButtonDisabled?: boolean;
   cancelButtonLabel?: string;
   continueButtonLabel?: string;
   continueButtonVariant?: ButtonVariant;
@@ -58,6 +59,7 @@ export const ConfirmDialogModal = ({
   open = true,
   variant = ModalVariant.small,
   toggleDialog,
+  confirmButtonDisabled,
 }: ConfirmDialogModalProps) => {
   const { t } = useTranslation();
   return (
@@ -71,6 +73,7 @@ export const ConfirmDialogModal = ({
           id="modal-confirm"
           data-testid="modalConfirm"
           key="confirm"
+          isDisabled={confirmButtonDisabled}
           variant={continueButtonVariant || ButtonVariant.primary}
           onClick={() => {
             onConfirm();

src/context/whoami/WhoAmI.tsx

@@ -23,6 +23,12 @@ export class WhoAmI {
     return this.me.displayName;
   }
 
+  public getUserId(): string {
+    if (this.me === undefined) return "";
+
+    return this.me.userId;
+  }
+
   /**
    * Return the realm I am signed in to.
    */

src/realm-settings/AddUserEmailModal.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import {
+  Button,
+  ButtonVariant,
+  Form,
+  FormGroup,
+  Modal,
+  ModalVariant,
+  TextContent,
+  TextInput,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import { useForm, UseFormMethods } from "react-hook-form";
+
+import type UserRepresentation from "keycloak-admin/lib/defs/userRepresentation";
+import { emailRegexPattern } from "../util";
+
+type AddUserEmailModalProps = {
+  id?: string;
+  form: UseFormMethods<UserRepresentation>;
+  rename?: string;
+  handleModalToggle: () => void;
+  testConnection: () => void;
+  user: UserRepresentation;
+  save: (user?: UserRepresentation) => void;
+};
+
+export const AddUserEmailModal = ({
+  handleModalToggle,
+  save,
+}: AddUserEmailModalProps) => {
+  const { t } = useTranslation("groups");
+  const { register, errors, handleSubmit, watch } = useForm();
+
+  const watchEmailInput = watch("email", "");
+
+  return (
+    <Modal
+      variant={ModalVariant.small}
+      title={t("realm-settings:provideEmailTitle")}
+      isOpen={true}
+      onClose={handleModalToggle}
+      actions={[
+        <Button
+          data-testid="modal-test-connection-button"
+          key="confirm"
+          variant="primary"
+          type="submit"
+          form="email-form"
+          isDisabled={!watchEmailInput}
+        >
+          {t("realm-settings:testConnection")}
+        </Button>,
+        <Button
+          id="modal-cancel"
+          key="cancel"
+          variant={ButtonVariant.link}
+          onClick={() => {
+            handleModalToggle();
+          }}
+        >
+          {t("common:cancel")}
+        </Button>,
+      ]}
+    >
+      <TextContent className="kc-provide-email-text">
+        {t("realm-settings:provideEmail")}
+      </TextContent>
+      <Form id="email-form" isHorizontal onSubmit={handleSubmit(save)}>
+        <FormGroup
+          className="kc-email-form-group"
+          name="add-email-address"
+          fieldId="email-id"
+          helperTextInvalid={t("users:emailInvalid")}
+          validated={
+            errors.email ? ValidatedOptions.error : ValidatedOptions.default
+          }
+          isRequired
+        >
+          <TextInput
+            data-testid="email-address-input"
+            ref={register({ required: true, pattern: emailRegexPattern })}
+            autoFocus
+            type="text"
+            id="add-email"
+            name="email"
+            validated={
+              errors.email ? ValidatedOptions.error : ValidatedOptions.default
+            }
+          />
+        </FormGroup>
+      </Form>
+    </Modal>
+  );
+};

src/realm-settings/EmailTab.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Controller, useForm } from "react-hook-form";
 import {
@@ -20,23 +20,32 @@ import { emailRegexPattern } from "../util";
 import { useAdminClient } from "../context/auth/AdminClient";
 import { useAlerts } from "../components/alert/Alerts";
 import { useRealm } from "../context/realm-context/RealmContext";
+import { getBaseUrl } from "../util";
 
 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 [isAuthenticationEnabled, setAuthenticationEnabled] = useState("true");
   const [realm, setRealm] = useState(initialRealm);
+  const [userEmailModalOpen, setUserEmailModalOpen] = useState(false);
+  const [currentUser, setCurrentUser] = useState<UserRepresentation>();
   const {
     register,
     control,
@@ -46,10 +55,20 @@ export const RealmSettingsEmailTab = ({
     reset: resetForm,
   } = useForm<RealmRepresentation>();
 
+  const userForm = useForm<UserRepresentation>({ mode: "onChange" });
+
   useEffect(() => {
     reset();
   }, [realm]);
 
+  useEffect(() => {
+    setCurrentUser(user);
+  }, []);
+
+  const handleModalToggle = () => {
+    setUserEmailModalOpen(!userEmailModalOpen);
+  };
+
   const save = async (form: RealmRepresentation) => {
     try {
       const savedRealm = { ...realm, ...form };
@@ -64,6 +83,14 @@ export const RealmSettingsEmailTab = ({
     }
   };
 
+  const saveAndTestEmail = async (user: UserRepresentation) => {
+    await adminClient.users.update({ id: whoAmI.getUserId() }, user);
+    const updated = await adminClient.users.findOne({ id: whoAmI.getUserId() });
+    setCurrentUser(updated);
+    handleModalToggle();
+    testConnection();
+  };
+
   const reset = () => {
     if (realm) {
       resetForm(realm);
@@ -71,8 +98,39 @@ export const RealmSettingsEmailTab = ({
     }
   };
 
+  const testConnection = async () => {
+    const response = await fetch(
+      `${getBaseUrl(adminClient)}admin/realms/${
+        realm.realm
+      }/testSMTPConnection`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: `bearer ${await adminClient.getAccessToken()}`,
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(realm.smtpServer! as BodyInit),
+      }
+    );
+    response.ok
+      ? addAlert(t("testConnectionSuccess"), AlertVariant.success)
+      : addAlert(t("testConnectionError"), AlertVariant.danger);
+  };
+
   return (
     <>
+      {userEmailModalOpen && (
+        <AddUserEmailModal
+          handleModalToggle={handleModalToggle}
+          testConnection={testConnection}
+          save={(user) => {
+            saveAndTestEmail(user!);
+          }}
+          form={userForm}
+          user={currentUser!}
+        />
+      )}
       <PageSection variant="light">
         <FormPanel title={t("template")} className="kc-email-template">
           <FormAccess
@@ -325,6 +383,17 @@ export const RealmSettingsEmailTab = ({
               >
                 {t("common:save")}
               </Button>
+              <Button
+                variant="secondary"
+                onClick={
+                  currentUser?.email
+                    ? () => testConnection()
+                    : handleModalToggle
+                }
+                data-testid="test-connection-button"
+              >
+                {t("realm-settings:testConnection")}
+              </Button>
               <Button variant="link" onClick={reset}>
                 {t("common:revert")}
               </Button>

src/realm-settings/LocalizationTab.tsx

@@ -239,7 +239,7 @@ export const LocalizationTab = ({
           </FormAccess>
         </FormPanel>
 
-        <FormPanel className="kc-login-screen" title="Edit message bundles">
+        <FormPanel className="kc-message-bundles" title="Edit message bundles">
           <TextContent className="messageBundleDescription">
             {t("messageBundleDescription")}
           </TextContent>

src/realm-settings/RealmSettingsSection.css

@@ -1,7 +1,8 @@
 .pf-c-card.pf-m-flat.kc-login-screen,
 .pf-c-card.pf-m-flat.kc-email-settings,
 .pf-c-card.pf-m-flat.kc-email-template,
-.pf-c-card.pf-m-flat.kc-email-connection {
+.pf-c-card.pf-m-flat.kc-email-connection,
+.pf-c-card.pf-m-flat.kc-message-bundles {
   border: none;
   margin-top: 0px;
   margin-bottom: 0px;
@@ -86,9 +87,17 @@ button.pf-c-button.pf-m-link.add-provider {
   padding-bottom: var(--pf-global--spacer--lg);
 }
 
-div.tableBorder {
+.kc-message-bundles > .pf-c-card__body.kc-form-panel__body > div.tableBorder {
   border-style: solid;
   border-width: 1px;
   border-color: var(--pf-global--BorderColor--100);
   max-width: 1024px;
 }
+
+.pf-c-form__group.kc-email-form-group {
+  display: inline-block !important;
+}
+
+.pf-c-content.kc-provide-email-text {
+  padding-bottom: var(--pf-global--spacer--md);
+}

src/realm-settings/RealmSettingsSection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Controller, FormProvider, useForm } from "react-hook-form";
@@ -32,6 +32,8 @@ import type ComponentRepresentation from "keycloak-admin/lib/defs/componentRepre
 import { KeysProviderTab } from "./KeysProvidersTab";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
 import { LocalizationTab } from "./LocalizationTab";
+import { WhoAmIContext } from "../context/whoami/WhoAmI";
+import type UserRepresentation from "keycloak-admin/lib/defs/userRepresentation";
 
 type RealmSettingsHeaderProps = {
   onChange: (value: boolean) => void;
@@ -136,6 +138,8 @@ export const RealmSettingsSection = () => {
   const [realmComponents, setRealmComponents] = useState<
     ComponentRepresentation[]
   >();
+  const [currentUser, setCurrentUser] = useState<UserRepresentation>();
+  const { whoAmI } = useContext(WhoAmIContext);
 
   const kpComponentTypes = useServerInfo().componentTypes![
     "org.keycloak.keys.KeyProvider"
@@ -150,6 +154,26 @@ export const RealmSettingsSection = () => {
     []
   );
 
+  useFetch(
+    () => adminClient.users.findOne({ id: whoAmI.getUserId()! }),
+
+    (user) => {
+      setCurrentUser(user);
+    },
+    []
+  );
+
+  useEffect(() => {
+    const update = async () => {
+      const realmComponents = await adminClient.components.find({
+        type: "org.keycloak.keys.KeyProvider",
+        realm: realmName,
+      });
+      setRealmComponents(realmComponents);
+    };
+    setTimeout(update, 100);
+  }, [key]);
+
   useFetch(
     async () => {
       const realm = await adminClient.realms.findOne({ realm: realmName });
@@ -233,7 +257,9 @@ export const RealmSettingsSection = () => {
               title={<TabTitleText>{t("email")}</TabTitleText>}
               data-testid="rs-email-tab"
             >
-              {realm && <RealmSettingsEmailTab realm={realm} />}
+              {realm && (
+                <RealmSettingsEmailTab user={currentUser!} realm={realm} />
+              )}
             </Tab>
             <Tab
               eventKey="themes"

src/realm-settings/messages.json

@@ -92,8 +92,13 @@
     "loginWithEmailHelpText": "Allow users to log in with their email address.",
     "duplicateEmails": "Duplicate emails",
     "duplicateEmailsHelpText": "Allow multiple users to have the same email address. Changing this setting will also clear the user's cache. It is recommended to manually update email constraints of existing users in the database after switching off support for duplicate email addresses.",
+    "provideEmailTitle": "Provide your email address",
+    "provideEmail": "To test connection, you should provide your email address first.",
     "verifyEmail": "Verify email",
     "verifyEmailHelpText": "Require user to verify their email address after initial login or after address changes are submitted.",
+    "testConnection": "Test connection",
+    "testConnectionSuccess": "Success! SMTP connection successful. E-mail was sent!",
+    "testConnectionError": "Error! Failed to send email.",
     "realmId": "Realm ID",
     "displayName": "Display name",
     "htmlDisplayName": "HTML Display name",