import { Localized } from "@fluent/react/compat" ; import React , { FunctionComponent } from "react" ; import { graphql } from "react-relay" ; import { Condition , required , validateWhen , } from "coral-framework/lib/validation" ; import { FormFieldDescription , TextLink } from "coral-ui/components/v2" ; import Header from "../../Header" ; import HorizontalRule from "../../HorizontalRule" ; import ClientIDField from "./ClientIDField" ; import ClientSecretField from "./ClientSecretField" ; import ConfigBoxWithToggleField from "./ConfigBoxWithToggleField" ; import RedirectField from "./RedirectField" ; import RegistrationField from "./RegistrationField" ; import TargetFilterField from "./TargetFilterField" ; graphql `
  fragment GoogleConfig_formValues on Auth {
    integrations {
      google {
        enabled
        allowRegistration
        targetFilter {
          admin
          stream
        }
        clientID
        clientSecret
      }
    }
  }
` ; interface Props { disabled ? : boolean ; callbackURL : string ; } const GoogleLink = ( ) => ( < TextLink target = "_blank" > { "https://developers.google.com/identity/protocols/OAuth2WebServer#creatingcred" } < /TextLink>); const isEnabled = ( value , values ) => Boolean ( values . auth . integrations . google . enabled ) ; const GoogleConfig = ( { disabled , callbackURL } ) => ( < ConfigBoxWithToggleField title = { < Localized id = "configure-auth-google-loginWith" > < Header container = "h2" > Login with Google < /Header> < /Localized>} name="auth.integrations.google.enabled" disabled={disabled} data-testid="configure-auth-google"> { ( disabledInside ) => ( < > < Localized id = "configure-auth-google-toEnableIntegration" Link = { < GoogleLink / > } > < FormFieldDescription > To enable the integration with Google Authentication you need to create and set up a web application . For more information visit : < br /> { "https://developers.google.com/identity/protocols/OAuth2WebServer#creatingcred" } < /FormFieldDescription> < /Localized> < RedirectField url = { callbackURL } / > < HorizontalRule /> < ClientIDField name = "auth.integrations.google.clientID" validate = { validateWhen ( isEnabled , required ) } disabled = { disabledInside } / > < ClientSecretField name = "auth.integrations.google.clientSecret" validate = { validateWhen ( isEnabled , required ) } disabled = { disabledInside } / > < TargetFilterField label = { < Localized id = "configure-auth-google-useLoginOn" > < span > Use Google login on < /span> < /Localized>} name="auth.integrations.google.targetFilter" disabled={disabledInside}/ > < RegistrationField name = "auth.integrations.google.allowRegistration" disabled = { disabledInside } / > < />)} < /ConfigBoxWithToggleField>); export default GoogleConfig ;