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

import React from "react"; // eslint-disable-line no-unused-vars
import PropTypes from "prop-types";
import { Switch, Route, Redirect } from "react-router-dom";
import { NavItem, Tooltip } from "../../core";
import AuthProviders from "./AuthProviders";
import Users from "./Users";
import OtherSettings from "./OtherSettings";

export default function Authentication({ children, app, match }) {
  return (
    <div>
      <div className="section-header section-header-has-tabs">
        <div className="section-header-title">
          <div className="section-header-title-text">
            Authentication
            <Tooltip
              dataFor="authentication-tooltip"
              place="right"
              effect="solid"
              classNames="tooltip-indicator tooltip-indicator-normal tooltip-indicator-primary"
            >
              Authentication lets you define which methods clients can use to
              log in to your app.
            </Tooltip>
          </div>
        </div>
        <ul className="section-header-tabs">
          <NavItem
            to={`${match.url}/providers`}
            className="section-header-tab apptabs-services section-header-tab-is-left"
            activeClassName="section-header-tab-is-active"
            linkClassName="section-header-tab-link"
          >
            Providers
          </NavItem>
          <NavItem
            to={`${match.url}/users`}
            className="section-header-tab apptabs-services section-header-tab-is-right"
            activeClassName="section-header-tab-is-active"
            linkClassName="section-header-tab-link"
          >
            Users
          </NavItem>
          <NavItem
            to={`${match.url}/other`}
            className="section-header-tab apptabs-services section-header-tab-is-right"
            activeClassName="section-header-tab-is-active"
            linkClassName="section-header-tab-link"
          >
            Other
          </NavItem>
        </ul>
      </div>
      <div className="tabs-content">
        {children}
      </div>

      <Switch>
        <Redirect exact from={`${match.url}/`} to={`${match.url}/providers`} />
        <Route
          path={`${match.url}/providers`}
          render={routeProps => <AuthProviders {...routeProps} app={app} />}
        />
        <Route path={`${match.url}/users`} component={Users} />
        <Route
          path={`${match.url}/other`}
          render={routeProps => <OtherSettings {...routeProps} app={app} />}
        />
      </Switch>
    </div>
  );
}

Authentication.propTypes = {
  app: PropTypes.shape({
    _id: PropTypes.string.isRequired,
    groupId: PropTypes.string.isRequired
  }).isRequired,
  children: PropTypes.any, // eslint-disable-line react/forbid-prop-types
  match: PropTypes.object // eslint-disable-line react/forbid-prop-types
};

Authentication.defaultProps = {
  children: null,
  match: null
};