keycloak-scim/src/realm-settings/LoginTab.tsx

import React from "react";
import { useTranslation } from "react-i18next";
import { FormGroup, PageSection, Switch } from "@patternfly/react-core";
import { FormAccess } from "../components/form-access/FormAccess";
import { HelpItem } from "../components/help-enabler/HelpItem";
import { FormPanel } from "../components/scroll-form/FormPanel";
import RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentation";

type RealmSettingsLoginTabProps = {
  save: (realm: RealmRepresentation) => void;
  realm: RealmRepresentation;
};

export const RealmSettingsLoginTab = ({
  save,
  realm,
}: RealmSettingsLoginTabProps) => {
  const { t } = useTranslation("realm-settings");

  return (
    <>
      <PageSection variant="light">
        <FormPanel title="Login screen customization">
          {
            <FormAccess isHorizontal role="manage-realm">
              <FormGroup
                label={t("userRegistration")}
                fieldId="kc-user-reg"
                labelIcon={
                  <HelpItem
                    helpText={t("userRegistrationHelpText")}
                    forLabel={t("userRegistration")}
                    forID="kc-user-reg"
                  />
                }
                hasNoPaddingTop
              >
                <Switch
                  id="kc-user-reg"
                  data-testid="user-reg-switch"
                  name="registrationAllowed"
                  label={t("common:on")}
                  labelOff={t("common:off")}
                  isChecked={realm?.registrationAllowed}
                  onChange={(value) => {
                    save({ ...realm, registrationAllowed: value });
                  }}
                />
              </FormGroup>
              <FormGroup
                label={t("forgotPassword")}
                fieldId="kc-forgot-pw"
                labelIcon={
                  <HelpItem
                    helpText={t("forgotPasswordHelpText")}
                    forLabel={t("forgotPassword")}
                    forID="kc-forgot-pw"
                  />
                }
                hasNoPaddingTop
              >
                <Switch
                  id="kc-forgot-pw"
                  data-testid="forgot-pw-switch"
                  name="resetPasswordAllowed"
                  label={t("common:on")}
                  labelOff={t("common:off")}
                  isChecked={realm?.resetPasswordAllowed}
                  onChange={(value) => {
                    save({ ...realm, resetPasswordAllowed: value });
                  }}
                />
              </FormGroup>
              <FormGroup
                label={t("rememberMe")}
                fieldId="kc-remember-me"
                labelIcon={
                  <HelpItem
                    helpText={t("rememberMeHelpText")}
                    forLabel={t("rememberMe")}
                    forID="kc-remember-me"
                  />
                }
                hasNoPaddingTop
              >
                <Switch
                  id="kc-remember-me"
                  data-testid="remember-me-switch"
                  name="rememberMe"
                  label={t("common:on")}
                  labelOff={t("common:off")}
                  isChecked={realm?.rememberMe}
                  onChange={(value) => {
                    save({ ...realm, rememberMe: value });
                  }}
                />
              </FormGroup>
            </FormAccess>
          }
        </FormPanel>
        <FormPanel title="Email settings">
          {
            <FormAccess isHorizontal role="manage-realm">
              <FormGroup
                label={t("emailAsUsername")}
                fieldId="kc-email-as-username"
                labelIcon={
                  <HelpItem
                    helpText={t("emailAsUsernameHelpText")}
                    forLabel={t("emailAsUsername")}
                    forID="kc-email-as-username"
                  />
                }
                hasNoPaddingTop
              >
                <Switch
                  id="kc-email-as-username"
                  data-testid="email-as-username-switch"
                  name="registrationEmailAsUsername"
                  label={t("common:on")}
                  labelOff={t("common:off")}
                  isChecked={realm?.registrationEmailAsUsername}
                  onChange={(value) => {
                    save({ ...realm, registrationEmailAsUsername: value });
                  }}
                />
              </FormGroup>
              <FormGroup
                label={t("loginWithEmail")}
                fieldId="kc-login-with-email"
                labelIcon={
                  <HelpItem
                    helpText={t("loginWithEmailHelpText")}
                    forLabel={t("loginWithEmail")}
                    forID="kc-login-with-email"
                  />
                }
                hasNoPaddingTop
              >
                <Switch
                  id="kc-login-with-email"
                  data-testid="login-with-email-switch"
                  name="loginWithEmailAllowed"
                  label={t("common:on")}
                  labelOff={t("common:off")}
                  isChecked={realm?.loginWithEmailAllowed}
                  onChange={(value) => {
                    save({ ...realm, loginWithEmailAllowed: value });
                  }}
                />
              </FormGroup>
              <FormGroup
                label={t("duplicateEmails")}
                fieldId="kc-duplicate-emails"
                labelIcon={
                  <HelpItem
                    helpText={t("duplicateEmailsHelpText")}
                    forLabel={t("duplicateEmails")}
                    forID="kc-duplicate-emails"
                  />
                }
                hasNoPaddingTop
              >
                <Switch
                  id="kc-duplicate-emails"
                  data-testid="duplicate-emails-switch"
                  label={t("common:on")}
                  labelOff={t("common:off")}
                  name="duplicateEmailsAllowed"
                  isChecked={
                    realm?.duplicateEmailsAllowed &&
                    !realm?.loginWithEmailAllowed &&
                    !realm?.registrationEmailAsUsername
                  }
                  onChange={(value) => {
                    save({ ...realm, duplicateEmailsAllowed: value });
                  }}
                  isDisabled={
                    realm?.loginWithEmailAllowed ||
                    realm?.registrationEmailAsUsername
                  }
                />
              </FormGroup>
              <FormGroup
                label={t("verifyEmail")}
                fieldId="kc-verify-email"
                labelIcon={
                  <HelpItem
                    helpText={t("verifyEmailHelpText")}
                    forLabel={t("verifyEmail")}
                    forID="kc-verify-email"
                  />
                }
                hasNoPaddingTop
              >
                <Switch
                  id="kc-verify-email"
                  data-testid="verify-email-switch"
                  name="verifyEmail"
                  label={t("common:on")}
                  labelOff={t("common:off")}
                  isChecked={realm?.verifyEmail}
                  onChange={(value) => {
                    save({ ...realm, verifyEmail: value });
                  }}
                />
              </FormGroup>
            </FormAccess>
          }
        </FormPanel>
      </PageSection>
    </>
  );
};