stitch-ui/src/auth/components/AuthProviderInput.js

// TODO proptypes
/* eslint-disable react/prop-types */
/* eslint-disable react/no-array-index-key */
import React from "react";
import { List } from "immutable";
import { AlertContainer } from "../../alert";
import {
  Banner,
  Tooltip,
  FormRow,
  FormRowInputGroup,
  FormRowLabelGroup,
  MaskedInput,
  Button
} from "../../core";

function AuthProviderInput(props) {
  const {
    availableMetadataFields,
    alertKey,
    save,
    oauth,
    providerInput,
    removeRedirectURI,
    addRedirectURI,
    setSigningKey,
    setRedirectURIInput,
    setProviderClientIdInput,
    setMetadataField,
    setProviderClientSecretInput,
    setDomainRestrictionInput,
    removeDomainRestriction,
    addDomainRestriction
  } = props;

  let clientId = "";
  let clientSecret = "";
  let signingKey = "";
  let redirectURIs = new List();
  let domainRestrictions = new List();
  let metadataFields = new List();
  if (providerInput) {
    metadataFields = providerInput.get("metadataFields") || new List();
    signingKey = providerInput.get("signingKey") || "";
    clientId = providerInput.get("clientId") || "";
    clientSecret = providerInput.get("clientSecret") || "";
    redirectURIs = providerInput.get("redirectURIs") || new List();
    domainRestrictions = providerInput.get("domainRestrictions") || new List();
  }

  return (
    <div>
      <div className="view-modal-body">
        <Banner message={providerInput && providerInput.get("error")} error />
        {!oauth &&
          <FormRow>
            <FormRowLabelGroup>
              <label htmlFor="signingKey" className="form-row-label">
                Signing Key
                <Tooltip
                  dataFor="signing-key-tooltip"
                  place="top"
                  classNames="tooltip-indicator tooltip-indicator-small tooltip-indicator-secondary"
                  effect="float"
                >
                  The signing key is part of the JSON Web Token which the
                  application client exchanges with the server.<br />Each app
                  has a unique signing key which allows it to identify
                  authenticated client requests.<br />You can refer back to your
                  signing key here when you are ready to start creating JWTs.
                </Tooltip>
              </label>
            </FormRowLabelGroup>
            <FormRowInputGroup>
              <input
                type="text"
                name="signingKey"
                className="text-input form-row-text-input"
                placeholder="Signing Key"
                value={signingKey}
                onChange={e => setSigningKey(e.target.value)}
              />
            </FormRowInputGroup>
          </FormRow>}
        {oauth &&
          <span>
            <FormRow>
              <FormRowLabelGroup>
                <label htmlFor="clientId" className="form-row-label">
                  Client ID
                </label>
              </FormRowLabelGroup>
              <FormRowInputGroup>
                <input
                  type="text"
                  className="text-input form-row-text-input"
                  placeholder="Client ID"
                  name="clientId"
                  value={clientId}
                  onChange={e => setProviderClientIdInput(e.target.value)}
                />
              </FormRowInputGroup>
            </FormRow>
            <FormRow>
              <FormRowLabelGroup>
                <label htmlFor="clientSecret" className="form-row-label">
                  Client Secret
                </label>
              </FormRowLabelGroup>
              <FormRowInputGroup>
                <MaskedInput
                  type="text"
                  name="clientSecret"
                  className="text-input form-row-text-input"
                  placeholder="Client Secret"
                  value={clientSecret}
                  onChange={e => setProviderClientSecretInput(e.target.value)}
                />
              </FormRowInputGroup>
            </FormRow>
            <FormRow>
              <FormRowLabelGroup>
                <label htmlFor="redirectURIs" className="form-row-label">
                  Redirect URIs
                  <Tooltip
                    dataFor="redirect-uri-tooltip"
                    place="top"
                    classNames="tooltip-indicator tooltip-indicator-small tooltip-indicator-secondary"
                    effect="float"
                  >
                    A Redirect URI is the callback entry point for your app. It
                    is where your client will get send to after account
                    authorization is successful.
                  </Tooltip>
                </label>
              </FormRowLabelGroup>
              <FormRowInputGroup>
                {(redirectURIs || List()).map((p, i) =>
                  <div className="delible-input" key={i}>
                    <input
                      name={`redirectURI/${i}`}
                      type="text"
                      className="text-input form-row-text-input"
                      placeholder="Redirect URI"
                      value={p}
                      onChange={e => setRedirectURIInput(i, e.target.value)}
                    />
                    <Button
                      small
                      circle
                      className="delible-input-button"
                      onClick={() => removeRedirectURI(i)}
                    >
                      <i className="fa fa-minus" />
                    </Button>
                  </div>
                )}
                <Button
                  small
                  default
                  onClick={addRedirectURI}
                  name="addRedirectURI"
                >
                  Add
                </Button>
              </FormRowInputGroup>
            </FormRow>
            <FormRow>
              <FormRowLabelGroup>
                <label htmlFor="domainRestrictions" className="form-row-label">
                  Domain Restrictions
                </label>
              </FormRowLabelGroup>
              <FormRowInputGroup>
                {(domainRestrictions || List()).map((p, i) =>
                  <div className="delible-input" key={i}>
                    <input
                      type="text"
                      className="text-input form-row-text-input"
                      placeholder="Domain Restriction"
                      name={`domainRestriction/${i}`}
                      value={p}
                      onChange={e =>
                        setDomainRestrictionInput(i, e.target.value)}
                    />
                    <Button
                      small
                      circle
                      className="delible-input-button"
                      onClick={() => removeDomainRestriction(i)}
                    >
                      <i className="fa fa-minus" />
                    </Button>
                  </div>
                )}
                <Button
                  small
                  default
                  onClick={addDomainRestriction}
                  name="addDomainRestriction"
                >
                  Add
                </Button>
              </FormRowInputGroup>
            </FormRow>
          </span>}
        <FormRow last>
          <FormRowInputGroup>
            <label htmlFor="metadataFields" className="form-row-label">
              Metadata Fields
            </label>
          </FormRowInputGroup>
          <FormRowLabelGroup>
            {availableMetadataFields.map(f =>
              <div className="slide-toggle-round-list" key={f}>
                <div className="slide-toggle-round-container">
                  <h5 className="slide-toggle-round-label">
                    {f}
                  </h5>
                  <div className="switch">
                    <input
                      id={`metadataFields/${f}`}
                      type="checkbox"
                      name={`metadataFields/${f}`}
                      onChange={e => setMetadataField(f, e.target.checked)}
                      checked={metadataFields.includes(f)}
                      className="slide-toggle-round"
                    />
                    <label htmlFor={`metadataFields/${f}`} />
                  </div>
                </div>
              </div>
            )}
          </FormRowLabelGroup>
        </FormRow>
      </div>
      <footer className="view-modal-footer">
        <div className="view-modal-actions">
          {providerInput &&
            providerInput.get("dirty") &&
            <span>You have unsaved changes</span>}
          <AlertContainer alertKey={alertKey} />
          <Button primary footer onClick={save}>
            Save
          </Button>
        </div>
      </footer>
    </div>
  );
}
export default AuthProviderInput;