// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders configure auth 1`] = `
<div
  className="MainLayout-root"
  data-testid="configure-container"
>
  <form
    autoComplete="off"
    id="configure-form"
    onSubmit={[Function]}
  >
    <div
      className="Box-root Flex-root Layout-root Flex-flex"
    >
      <div
        className="SideBar-root"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-double"
        >
          <nav
            className="Navigation-root"
          >
            <ul
              className="Navigation-ul"
            >
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/general"
                  onClick={[Function]}
                >
                  General
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/organization"
                  onClick={[Function]}
                >
                  Organization
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/moderation"
                  onClick={[Function]}
                >
                  Moderation
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/wordList"
                  onClick={[Function]}
                >
                  Banned and Suspect Words
                </a>
              </li>
              <li>
                <a
                  className="Link-link Link-linkActive"
                  href="/admin/configure/auth"
                  onClick={[Function]}
                >
                  Authentication
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/email"
                  onClick={[Function]}
                >
                  Email
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/slack"
                  onClick={[Function]}
                >
                  Slack
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/advanced"
                  onClick={[Function]}
                >
                  Advanced
                </a>
              </li>
            </ul>
          </nav>
        </div>
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-double"
        >
          <button
            className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
            data-color="alt"
            data-testid="configure-sideBar-saveChanges"
            data-variant="regular"
            disabled={true}
            onBlur={[Function]}
            onFocus={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
            onTouchEnd={[Function]}
            type="submit"
          >
            Save Changes
          </button>
        </div>
      </div>
      <div
        className="Main-root"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-double"
          data-testid="configure-authContainer"
        >
          <div>
            <div
              className="Box-root ConfigBox-root"
            >
              <div
                className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
              >
                <div>
                  <legend
                    className="Header-root"
                  >
                    Commenter account management features
                  </legend>
                </div>
                <div />
              </div>
              <div
                className="ConfigBox-content"
              >
                <div
                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
                >
                  <p
                    className="FormFieldDescription-root"
                  >
                    You can enable and disable certain features for your commenters to use
within their Profile. These features also assist towards GDPR
compliance.
                  </p>
                  <fieldset
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <p
                      className="FormFieldDescription-root"
                    >
                      Allow users to:
                    </p>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                    >
                      <div
                        className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                      >
                        <legend
                          className="Label-root"
                        >
                          Change their usernames
                        </legend>
                        <p
                          className="HelperText-root"
                        >
                          Usernames can be changed once every 14 days.
                        </p>
                      </div>
                      <div
                        className="AccountFeaturesConfig-radioButtons"
                      >
                        <div
                          className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                        >
                          <input
                            checked={true}
                            className="RadioButton-input"
                            disabled={false}
                            id="accountFeatures.changeUsername-true"
                            name="accountFeatures.changeUsername"
                            onBlur={[Function]}
                            onChange={[Function]}
                            onFocus={[Function]}
                            type="radio"
                            value="true"
                          />
                          <label
                            className="RadioButton-label RadioButton-labelChecked"
                            htmlFor="accountFeatures.changeUsername-true"
                          >
                            <span>
                              Yes
                            </span>
                          </label>
                        </div>
                        <div
                          className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                        >
                          <input
                            checked={false}
                            className="RadioButton-input"
                            disabled={false}
                            id="accountFeatures.changeUsername-false"
                            name="accountFeatures.changeUsername"
                            onBlur={[Function]}
                            onChange={[Function]}
                            onFocus={[Function]}
                            type="radio"
                            value="false"
                          />
                          <label
                            className="RadioButton-label"
                            htmlFor="accountFeatures.changeUsername-false"
                          >
                            <span>
                              No
                            </span>
                          </label>
                        </div>
                      </div>
                    </div>
                  </fieldset>
                  <fieldset
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                    >
                      <div
                        className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                      >
                        <legend
                          className="Label-root"
                        >
                          Download their comments
                        </legend>
                        <p
                          className="HelperText-root"
                        >
                          Commenters can download a csv of their comment history.
                        </p>
                      </div>
                      <div
                        className="AccountFeaturesConfig-radioButtons"
                      >
                        <div
                          className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                        >
                          <input
                            checked={true}
                            className="RadioButton-input"
                            disabled={false}
                            id="accountFeatures.downloadComments-true"
                            name="accountFeatures.downloadComments"
                            onBlur={[Function]}
                            onChange={[Function]}
                            onFocus={[Function]}
                            type="radio"
                            value="true"
                          />
                          <label
                            className="RadioButton-label RadioButton-labelChecked"
                            htmlFor="accountFeatures.downloadComments-true"
                          >
                            <span>
                              Yes
                            </span>
                          </label>
                        </div>
                        <div
                          className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                        >
                          <input
                            checked={false}
                            className="RadioButton-input"
                            disabled={false}
                            id="accountFeatures.downloadComments-false"
                            name="accountFeatures.downloadComments"
                            onBlur={[Function]}
                            onChange={[Function]}
                            onFocus={[Function]}
                            type="radio"
                            value="false"
                          />
                          <label
                            className="RadioButton-label"
                            htmlFor="accountFeatures.downloadComments-false"
                          >
                            <span>
                              No
                            </span>
                          </label>
                        </div>
                      </div>
                    </div>
                  </fieldset>
                  <fieldset
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                    >
                      <div
                        className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                      >
                        <legend
                          className="Label-root"
                        >
                          Delete their account
                        </legend>
                        <p
                          className="HelperText-root"
                        >
                          Removes all of their comment data, username, and email
address from the site and the database.
                        </p>
                      </div>
                      <div
                        className="AccountFeaturesConfig-radioButtons"
                      >
                        <div
                          className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                        >
                          <input
                            checked={true}
                            className="RadioButton-input"
                            disabled={false}
                            id="accountFeatures.deleteAccount-true"
                            name="accountFeatures.deleteAccount"
                            onBlur={[Function]}
                            onChange={[Function]}
                            onFocus={[Function]}
                            type="radio"
                            value="true"
                          />
                          <label
                            className="RadioButton-label RadioButton-labelChecked"
                            htmlFor="accountFeatures.deleteAccount-true"
                          >
                            <span>
                              Yes
                            </span>
                          </label>
                        </div>
                        <div
                          className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                        >
                          <input
                            checked={false}
                            className="RadioButton-input"
                            disabled={false}
                            id="accountFeatures.deleteAccount-false"
                            name="accountFeatures.deleteAccount"
                            onBlur={[Function]}
                            onChange={[Function]}
                            onFocus={[Function]}
                            type="radio"
                            value="false"
                          />
                          <label
                            className="RadioButton-label"
                            htmlFor="accountFeatures.deleteAccount-false"
                          >
                            <span>
                              No
                            </span>
                          </label>
                        </div>
                      </div>
                    </div>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            className="Box-root ConfigBox-root"
          >
            <div
              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
            >
              <div>
                <h2
                  className="Header-root"
                >
                  Session settings
                </h2>
              </div>
              <div />
            </div>
            <div
              className="ConfigBox-content"
            >
              <div
                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
              >
                <fieldset
                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <legend
                    className="Label-root"
                  >
                    Session duration
                  </legend>
                  <div
                    className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                  >
                    <div
                      className="TextField-root DurationField-value"
                    >
                      <input
                        aria-label="value"
                        autoCapitalize="off"
                        autoComplete="off"
                        autoCorrect="off"
                        className="TextField-input TextField-colorRegular TextField-textAlignCenter"
                        disabled={false}
                        name="auth.sessionDuration-value"
                        onChange={[Function]}
                        placeholder=""
                        spellCheck={false}
                        type="text"
                        value="90"
                      />
                    </div>
                    <span
                      className="SelectField-root"
                    >
                      <select
                        aria-label="unit"
                        className="SelectField-select DurationField-select"
                        disabled={false}
                        name="auth.sessionDuration-unit"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        value="86400"
                      >
                        <option
                          value="3600"
                        >
                          Hours
                        </option>
                        <option
                          value="86400"
                        >
                          Days
                        </option>
                        <option
                          value="604800"
                        >
                          Weeks
                        </option>
                      </select>
                      <span
                        aria-hidden={true}
                        className="SelectField-afterWrapper"
                      >
                        <i
                          aria-hidden="true"
                          className="Icon-root Icon-sm"
                        >
                          expand_more
                        </i>
                      </span>
                    </span>
                  </div>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-double"
          >
            <div
              className="Box-root ConfigBox-root"
              data-testid="configure-auth-local"
            >
              <div
                className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
              >
                <div>
                  <h2
                    className="Header-root"
                  >
                    Login with email authentication
                  </h2>
                </div>
                <div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="CheckBox-root"
                    >
                      <input
                        checked={true}
                        className="CheckBox-input"
                        disabled={false}
                        id="auth.integrations.local.enabled"
                        name="auth.integrations.local.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="checkbox"
                        value={true}
                      />
                      <label
                        className="CheckBox-label CheckBox-labelLight"
                        htmlFor="auth.integrations.local.enabled"
                      >
                        <span
                          className="CheckBox-labelSpan"
                        >
                          Enabled
                        </span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="ConfigBox-content"
              >
                <div
                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
                >
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                    >
                      <span>
                        Use email authentication login on
                      </span>
                    </label>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
                    >
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={true}
                          className="CheckBox-input"
                          disabled={false}
                          id="auth.integrations.local.targetFilter.admin"
                          name="auth.integrations.local.targetFilter.admin"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={true}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.local.targetFilter.admin"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Coral Admin
                          </span>
                        </label>
                      </div>
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={true}
                          className="CheckBox-input"
                          disabled={false}
                          id="auth.integrations.local.targetFilter.stream"
                          name="auth.integrations.local.targetFilter.stream"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={true}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.local.targetFilter.stream"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Comment Stream
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                    >
                      <label
                        className="Label-root"
                      >
                        Registration
                      </label>
                      <p
                        className="HelperText-root"
                      >
                        Allow users that have not signed up before with this authentication
integration to register for a new account.
                      </p>
                    </div>
                    <div
                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                    >
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={true}
                          className="CheckBox-input"
                          disabled={false}
                          id="auth.integrations.local.allowRegistration"
                          name="auth.integrations.local.allowRegistration"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={true}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.local.allowRegistration"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Allow Registration
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              className="Box-root ConfigBox-root"
              data-testid="configure-auth-oidc-container"
            >
              <div
                className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
              >
                <div>
                  <h2
                    className="Header-root"
                  >
                    Login with OpenID Connect
                  </h2>
                </div>
                <div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="CheckBox-root"
                    >
                      <input
                        checked={false}
                        className="CheckBox-input"
                        disabled={false}
                        id="auth.integrations.oidc.enabled"
                        name="auth.integrations.oidc.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="checkbox"
                        value={false}
                      />
                      <label
                        className="CheckBox-label CheckBox-labelLight"
                        htmlFor="auth.integrations.oidc.enabled"
                      >
                        <span
                          className="CheckBox-labelSpan"
                        >
                          Enabled
                        </span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="ConfigBox-content"
              >
                <div
                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
                >
                  <p
                    className="FormFieldDescription-root"
                  >
                    To learn more: 
                    <a
                      className="TextLink-root"
                      href="https://openid.net/connect/"
                      target="_blank"
                    >
                      https://openid.net/connect/
                      <i
                        aria-hidden="true"
                        className="Icon-root Icon-xs TextLink-icon"
                      >
                        open_in_new
                      </i>
                    </a>
                  </p>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                    >
                      Redirect URI
                    </label>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <div
                        className="TextField-root TextField-fullWidth"
                      >
                        <input
                          className="TextField-input TextField-colorRegular"
                          name="redirectURI"
                          placeholder=""
                          readOnly={true}
                          type="text"
                          value="http://localhost/oidc/callback"
                        />
                      </div>
                      <button
                        className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantFlat Button-uppercase"
                        data-color="mono"
                        data-variant="flat"
                        onBlur={[Function]}
                        onClick={[Function]}
                        onFocus={[Function]}
                        onMouseOut={[Function]}
                        onMouseOver={[Function]}
                        onTouchEnd={[Function]}
                        type="button"
                      >
                        <span>
                          Copy
                        </span>
                      </button>
                    </div>
                  </div>
                  <hr
                    className="HorizontalRule-root"
                  />
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                    >
                      <label
                        className="Label-root"
                        htmlFor="auth.integrations.oidc.name"
                      >
                        Provider name
                      </label>
                      <p
                        className="HelperText-root"
                      >
                        The provider of the OpenID Connect integration. This will be used when the name of the provider
needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
                      </p>
                    </div>
                    <div
                      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                    >
                      <div
                        className="TextField-root TextField-fullWidth"
                      >
                        <input
                          autoCapitalize="off"
                          autoComplete="off"
                          autoCorrect="off"
                          className="TextField-input TextField-colorRegular"
                          disabled={true}
                          id="auth.integrations.oidc.name"
                          name="auth.integrations.oidc.name"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          placeholder=""
                          spellCheck={false}
                          type="text"
                          value=""
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                      htmlFor="auth.integrations.oidc.clientID"
                    >
                      Client ID
                    </label>
                    <div
                      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                    >
                      <div
                        className="TextField-root TextField-fullWidth"
                      >
                        <input
                          autoCapitalize="off"
                          autoComplete="off"
                          autoCorrect="off"
                          className="TextField-input TextField-colorRegular"
                          disabled={true}
                          id="auth.integrations.oidc.clientID"
                          name="auth.integrations.oidc.clientID"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          placeholder=""
                          spellCheck={false}
                          type="text"
                          value=""
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                      htmlFor="auth.integrations.oidc.clientSecret"
                    >
                      Client secret
                    </label>
                    <div
                      className="PasswordField-fullWidth PasswordField-root"
                    >
                      <div
                        className="PasswordField-wrapper"
                      >
                        <input
                          autoCapitalize="off"
                          autoComplete="off"
                          autoCorrect="off"
                          className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                          data-testid="password-field"
                          disabled={true}
                          id="auth.integrations.oidc.clientSecret"
                          name="auth.integrations.oidc.clientSecret"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          placeholder=""
                          spellCheck={false}
                          type="password"
                          value=""
                        />
                        <div
                          className="PasswordField-icon"
                          onClick={[Function]}
                          onKeyUp={[Function]}
                          role="button"
                          tabIndex={0}
                          title="Hide Client Secret"
                        >
                          <i
                            aria-hidden="true"
                            className="Icon-root Icon-sm"
                          >
                            visibility
                          </i>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                    >
                      <label
                        className="Label-root"
                        htmlFor="auth.integrations.oidc.issuer"
                      >
                        Issuer
                      </label>
                      <p
                        className="HelperText-root"
                      >
                        After entering your Issuer information, click the Discover button to have Coral complete
the remaining fields. You may also enter the information manually.
                      </p>
                    </div>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <div
                        className="TextField-root TextField-fullWidth"
                      >
                        <input
                          autoCapitalize="off"
                          autoComplete="off"
                          autoCorrect="off"
                          className="TextField-input TextField-colorRegular"
                          disabled={true}
                          id="auth.integrations.oidc.issuer"
                          name="auth.integrations.oidc.issuer"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          placeholder=""
                          spellCheck={false}
                          type="text"
                          value=""
                        />
                      </div>
                      <button
                        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular Button-uppercase Button-disabled"
                        data-color="regular"
                        data-variant="regular"
                        disabled={true}
                        id="configure-auth-oidc-discover"
                        onBlur={[Function]}
                        onClick={[Function]}
                        onFocus={[Function]}
                        onMouseOut={[Function]}
                        onMouseOver={[Function]}
                        onTouchEnd={[Function]}
                        type="button"
                      >
                        Discover
                      </button>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                    >
                      Authorization URL
                    </label>
                    <div
                      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                    >
                      <div
                        className="TextField-root TextField-fullWidth"
                      >
                        <input
                          autoCapitalize="off"
                          autoComplete="off"
                          autoCorrect="off"
                          className="TextField-input TextField-colorRegular"
                          disabled={true}
                          id="auth.integrations.oidc.authorizationURL"
                          name="auth.integrations.oidc.authorizationURL"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          placeholder=""
                          spellCheck={false}
                          type="text"
                          value=""
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                    >
                      Token URL
                    </label>
                    <div
                      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                    >
                      <div
                        className="TextField-root TextField-fullWidth"
                      >
                        <input
                          autoCapitalize="off"
                          autoComplete="off"
                          autoCorrect="off"
                          className="TextField-input TextField-colorRegular"
                          disabled={true}
                          id="auth.integrations.oidc.tokenURL"
                          name="auth.integrations.oidc.tokenURL"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          placeholder=""
                          spellCheck={false}
                          type="text"
                          value=""
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                    >
                      JWKS URI
                    </label>
                    <div
                      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                    >
                      <div
                        className="TextField-root TextField-fullWidth"
                      >
                        <input
                          autoCapitalize="off"
                          autoComplete="off"
                          autoCorrect="off"
                          className="TextField-input TextField-colorRegular"
                          disabled={true}
                          id="auth.integrations.oidc.jwksURI"
                          name="auth.integrations.oidc.jwksURI"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          placeholder=""
                          spellCheck={false}
                          type="text"
                          value=""
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                    >
                      <span>
                        Use OpenID Connect login on
                      </span>
                    </label>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
                    >
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={true}
                          className="CheckBox-input"
                          disabled={true}
                          id="auth.integrations.oidc.targetFilter.admin"
                          name="auth.integrations.oidc.targetFilter.admin"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={true}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.oidc.targetFilter.admin"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Coral Admin
                          </span>
                        </label>
                      </div>
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={true}
                          className="CheckBox-input"
                          disabled={true}
                          id="auth.integrations.oidc.targetFilter.stream"
                          name="auth.integrations.oidc.targetFilter.stream"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={true}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.oidc.targetFilter.stream"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Comment Stream
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                    >
                      <label
                        className="Label-root"
                      >
                        Registration
                      </label>
                      <p
                        className="HelperText-root"
                      >
                        Allow users that have not signed up before with this authentication
integration to register for a new account.
                      </p>
                    </div>
                    <div
                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                    >
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={false}
                          className="CheckBox-input"
                          disabled={true}
                          id="auth.integrations.oidc.allowRegistration"
                          name="auth.integrations.oidc.allowRegistration"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={false}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.oidc.allowRegistration"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Allow Registration
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              className="Box-root ConfigBox-root"
              data-testid="configure-auth-sso"
            >
              <div
                className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
              >
                <div>
                  <h2
                    className="Header-root"
                  >
                    Login with Single Sign On
                  </h2>
                </div>
                <div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="CheckBox-root"
                    >
                      <input
                        checked={false}
                        className="CheckBox-input"
                        disabled={false}
                        id="auth.integrations.sso.enabled"
                        name="auth.integrations.sso.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="checkbox"
                        value={false}
                      />
                      <label
                        className="CheckBox-label CheckBox-labelLight"
                        htmlFor="auth.integrations.sso.enabled"
                      >
                        <span
                          className="CheckBox-labelSpan"
                        >
                          Enabled
                        </span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="ConfigBox-content"
              >
                <div
                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
                >
                  <div
                    className="Box-root HorizontalGutter-root FormField-root SSOKeyField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                      htmlFor="configure-auth-sso-key"
                    >
                      Key
                    </label>
                    <div
                      className="PasswordField-fullWidth PasswordField-root"
                    >
                      <div
                        className="PasswordField-wrapper"
                      >
                        <input
                          autoCapitalize="off"
                          autoComplete="off"
                          autoCorrect="off"
                          className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                          data-testid="password-field"
                          id="configure-auth-sso-key"
                          name="key"
                          placeholder=""
                          readOnly={true}
                          spellCheck={false}
                          type="password"
                        />
                        <div
                          className="PasswordField-icon"
                          onClick={[Function]}
                          onKeyUp={[Function]}
                          role="button"
                          tabIndex={0}
                          title="Hide SSO Key"
                        >
                          <i
                            aria-hidden="true"
                            className="Icon-root Icon-sm"
                          >
                            visibility
                          </i>
                        </div>
                      </div>
                    </div>
                    <div
                      className="SSOKeyField-warningSection"
                    >
                      <div
                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                      >
                        <i
                          aria-hidden="true"
                          className="Icon-root Icon-sm SSOKeyField-warnIcon"
                        >
                          warning
                        </i>
                        <p
                          className="HelperText-root"
                        >
                          When regenerating a key, tokens signed with the previous key will be honored for 30 days.
                        </p>
                      </div>
                    </div>
                    <button
                      className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular Button-uppercase Button-disabled SSOKeyField-regenerateButton"
                      data-color="regular"
                      data-variant="regular"
                      disabled={true}
                      id="configure-auth-sso-regenerate"
                      onBlur={[Function]}
                      onClick={[Function]}
                      onFocus={[Function]}
                      onMouseOut={[Function]}
                      onMouseOver={[Function]}
                      onTouchEnd={[Function]}
                      type="button"
                    >
                      Regenerate
                    </button>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                    >
                      <span>
                        Use Single Sign On login on
                      </span>
                    </label>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
                    >
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={true}
                          className="CheckBox-input"
                          disabled={true}
                          id="auth.integrations.sso.targetFilter.admin"
                          name="auth.integrations.sso.targetFilter.admin"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={true}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.sso.targetFilter.admin"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Coral Admin
                          </span>
                        </label>
                      </div>
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={true}
                          className="CheckBox-input"
                          disabled={true}
                          id="auth.integrations.sso.targetFilter.stream"
                          name="auth.integrations.sso.targetFilter.stream"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={true}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.sso.targetFilter.stream"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Comment Stream
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                    >
                      <label
                        className="Label-root"
                      >
                        Registration
                      </label>
                      <p
                        className="HelperText-root"
                      >
                        Allow users that have not signed up before with this authentication
integration to register for a new account.
                      </p>
                    </div>
                    <div
                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                    >
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={true}
                          className="CheckBox-input"
                          disabled={true}
                          id="auth.integrations.sso.allowRegistration"
                          name="auth.integrations.sso.allowRegistration"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={true}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.sso.allowRegistration"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Allow Registration
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              className="Box-root ConfigBox-root"
              data-testid="configure-auth-google"
            >
              <div
                className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
              >
                <div>
                  <h2
                    className="Header-root"
                  >
                    Login with Google
                  </h2>
                </div>
                <div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="CheckBox-root"
                    >
                      <input
                        checked={false}
                        className="CheckBox-input"
                        disabled={false}
                        id="auth.integrations.google.enabled"
                        name="auth.integrations.google.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="checkbox"
                        value={false}
                      />
                      <label
                        className="CheckBox-label CheckBox-labelLight"
                        htmlFor="auth.integrations.google.enabled"
                      >
                        <span
                          className="CheckBox-labelSpan"
                        >
                          Enabled
                        </span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="ConfigBox-content"
              >
                <div
                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
                >
                  <p
                    className="FormFieldDescription-root"
                  >
                    To enable the integration with Google Authentication you need
to create and set up a web application. For more information visit:

                    <a
                      className="TextLink-root"
                      href="https://developers.google.com/identity/protocols/OAuth2WebServer#creatingcred"
                      target="_blank"
                    >
                      https://developers.google.com/identity/protocols/OAuth2WebServer#creatingcred
                      <i
                        aria-hidden="true"
                        className="Icon-root Icon-xs TextLink-icon"
                      >
                        open_in_new
                      </i>
                    </a>
                    .
                  </p>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                    >
                      Redirect URI
                    </label>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <div
                        className="TextField-root TextField-fullWidth"
                      >
                        <input
                          className="TextField-input TextField-colorRegular"
                          name="redirectURI"
                          placeholder=""
                          readOnly={true}
                          type="text"
                          value="http://localhost/google/callback"
                        />
                      </div>
                      <button
                        className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantFlat Button-uppercase"
                        data-color="mono"
                        data-variant="flat"
                        onBlur={[Function]}
                        onClick={[Function]}
                        onFocus={[Function]}
                        onMouseOut={[Function]}
                        onMouseOver={[Function]}
                        onTouchEnd={[Function]}
                        type="button"
                      >
                        <span>
                          Copy
                        </span>
                      </button>
                    </div>
                  </div>
                  <hr
                    className="HorizontalRule-root"
                  />
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                      htmlFor="auth.integrations.google.clientID"
                    >
                      Client ID
                    </label>
                    <div
                      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                    >
                      <div
                        className="TextField-root TextField-fullWidth"
                      >
                        <input
                          autoCapitalize="off"
                          autoComplete="off"
                          autoCorrect="off"
                          className="TextField-input TextField-colorRegular"
                          disabled={true}
                          id="auth.integrations.google.clientID"
                          name="auth.integrations.google.clientID"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          placeholder=""
                          spellCheck={false}
                          type="text"
                          value=""
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                      htmlFor="auth.integrations.google.clientSecret"
                    >
                      Client secret
                    </label>
                    <div
                      className="PasswordField-fullWidth PasswordField-root"
                    >
                      <div
                        className="PasswordField-wrapper"
                      >
                        <input
                          autoCapitalize="off"
                          autoComplete="off"
                          autoCorrect="off"
                          className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                          data-testid="password-field"
                          disabled={true}
                          id="auth.integrations.google.clientSecret"
                          name="auth.integrations.google.clientSecret"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          placeholder=""
                          spellCheck={false}
                          type="password"
                          value=""
                        />
                        <div
                          className="PasswordField-icon"
                          onClick={[Function]}
                          onKeyUp={[Function]}
                          role="button"
                          tabIndex={0}
                          title="Hide Client Secret"
                        >
                          <i
                            aria-hidden="true"
                            className="Icon-root Icon-sm"
                          >
                            visibility
                          </i>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                    >
                      <span>
                        Use Google login on
                      </span>
                    </label>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
                    >
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={true}
                          className="CheckBox-input"
                          disabled={true}
                          id="auth.integrations.google.targetFilter.admin"
                          name="auth.integrations.google.targetFilter.admin"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={true}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.google.targetFilter.admin"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Coral Admin
                          </span>
                        </label>
                      </div>
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={true}
                          className="CheckBox-input"
                          disabled={true}
                          id="auth.integrations.google.targetFilter.stream"
                          name="auth.integrations.google.targetFilter.stream"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={true}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.google.targetFilter.stream"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Comment Stream
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                    >
                      <label
                        className="Label-root"
                      >
                        Registration
                      </label>
                      <p
                        className="HelperText-root"
                      >
                        Allow users that have not signed up before with this authentication
integration to register for a new account.
                      </p>
                    </div>
                    <div
                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                    >
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={true}
                          className="CheckBox-input"
                          disabled={true}
                          id="auth.integrations.google.allowRegistration"
                          name="auth.integrations.google.allowRegistration"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={true}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.google.allowRegistration"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Allow Registration
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              className="Box-root ConfigBox-root"
              data-testid="configure-auth-facebook-container"
            >
              <div
                className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
              >
                <div>
                  <h2
                    className="Header-root"
                  >
                    Login with Facebook
                  </h2>
                </div>
                <div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="CheckBox-root"
                    >
                      <input
                        checked={false}
                        className="CheckBox-input"
                        disabled={false}
                        id="auth.integrations.facebook.enabled"
                        name="auth.integrations.facebook.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="checkbox"
                        value={false}
                      />
                      <label
                        className="CheckBox-label CheckBox-labelLight"
                        htmlFor="auth.integrations.facebook.enabled"
                      >
                        <span
                          className="CheckBox-labelSpan"
                        >
                          Enabled
                        </span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="ConfigBox-content"
              >
                <div
                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
                >
                  <p
                    className="FormFieldDescription-root"
                  >
                    To enable the integration with Facebook Authentication,
you need to create and set up a web application.
For more information visit: 
                    <a
                      className="TextLink-root"
                      href="https://developers.facebook.com/docs/facebook-login/web"
                      target="_blank"
                    >
                      https://developers.facebook.com/docs/facebook-login/web
                      <i
                        aria-hidden="true"
                        className="Icon-root Icon-xs TextLink-icon"
                      >
                        open_in_new
                      </i>
                    </a>
                    .
                  </p>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                    >
                      Redirect URI
                    </label>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <div
                        className="TextField-root TextField-fullWidth"
                      >
                        <input
                          className="TextField-input TextField-colorRegular"
                          name="redirectURI"
                          placeholder=""
                          readOnly={true}
                          type="text"
                          value="http://localhost/facebook/callback"
                        />
                      </div>
                      <button
                        className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantFlat Button-uppercase"
                        data-color="mono"
                        data-variant="flat"
                        onBlur={[Function]}
                        onClick={[Function]}
                        onFocus={[Function]}
                        onMouseOut={[Function]}
                        onMouseOver={[Function]}
                        onTouchEnd={[Function]}
                        type="button"
                      >
                        <span>
                          Copy
                        </span>
                      </button>
                    </div>
                  </div>
                  <hr
                    className="HorizontalRule-root"
                  />
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                      htmlFor="auth.integrations.facebook.clientID"
                    >
                      Client ID
                    </label>
                    <div
                      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                    >
                      <div
                        className="TextField-root TextField-fullWidth"
                      >
                        <input
                          autoCapitalize="off"
                          autoComplete="off"
                          autoCorrect="off"
                          className="TextField-input TextField-colorRegular"
                          disabled={true}
                          id="auth.integrations.facebook.clientID"
                          name="auth.integrations.facebook.clientID"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          placeholder=""
                          spellCheck={false}
                          type="text"
                          value=""
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                      htmlFor="auth.integrations.facebook.clientSecret"
                    >
                      Client secret
                    </label>
                    <div
                      className="PasswordField-fullWidth PasswordField-root"
                    >
                      <div
                        className="PasswordField-wrapper"
                      >
                        <input
                          autoCapitalize="off"
                          autoComplete="off"
                          autoCorrect="off"
                          className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                          data-testid="password-field"
                          disabled={true}
                          id="auth.integrations.facebook.clientSecret"
                          name="auth.integrations.facebook.clientSecret"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          placeholder=""
                          spellCheck={false}
                          type="password"
                          value=""
                        />
                        <div
                          className="PasswordField-icon"
                          onClick={[Function]}
                          onKeyUp={[Function]}
                          role="button"
                          tabIndex={0}
                          title="Hide Client Secret"
                        >
                          <i
                            aria-hidden="true"
                            className="Icon-root Icon-sm"
                          >
                            visibility
                          </i>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <label
                      className="Label-root"
                    >
                      <span>
                        Use Facebook login on
                      </span>
                    </label>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
                    >
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={true}
                          className="CheckBox-input"
                          disabled={true}
                          id="auth.integrations.facebook.targetFilter.admin"
                          name="auth.integrations.facebook.targetFilter.admin"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={true}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.facebook.targetFilter.admin"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Coral Admin
                          </span>
                        </label>
                      </div>
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={true}
                          className="CheckBox-input"
                          disabled={true}
                          id="auth.integrations.facebook.targetFilter.stream"
                          name="auth.integrations.facebook.targetFilter.stream"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={true}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.facebook.targetFilter.stream"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Comment Stream
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                    >
                      <label
                        className="Label-root"
                      >
                        Registration
                      </label>
                      <p
                        className="HelperText-root"
                      >
                        Allow users that have not signed up before with this authentication
integration to register for a new account.
                      </p>
                    </div>
                    <div
                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                    >
                      <div
                        className="CheckBox-root"
                      >
                        <input
                          checked={true}
                          className="CheckBox-input"
                          disabled={true}
                          id="auth.integrations.facebook.allowRegistration"
                          name="auth.integrations.facebook.allowRegistration"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          type="checkbox"
                          value={true}
                        />
                        <label
                          className="CheckBox-label"
                          htmlFor="auth.integrations.facebook.allowRegistration"
                        >
                          <span
                            className="CheckBox-labelSpan"
                          >
                            Allow Registration
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;
