{"size": 2451, "ext": "js", "max_stars_repo_path": "src/components/pages/Login/LoginContainer.js", "max_stars_repo_name": "Lambda-School-Labs/Labs26-Apollo-FE-TeamA", "max_stars_repo_stars_event_min_datetime": "2020-10-06T05:09:30.000Z", "max_stars_repo_stars_event_max_datetime": "2020-10-06T05:09:30.000Z", "max_issues_repo_path": "src/components/pages/Login/LoginContainer.js", "max_issues_repo_name": "Lambda-School-Labs/Labs26-Apollo-FE-TeamA", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/pages/Login/LoginContainer.js", "max_forks_repo_name": "Lambda-School-Labs/Labs26-Apollo-FE-TeamA", "max_forks_repo_forks_event_min_datetime": "2020-10-29T00:49:53.000Z", "max_forks_repo_forks_event_max_datetime": "2020-10-29T00:49:53.000Z"}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 26.9340659341, "max_line_length": 96, "alphanum_fraction": 0.5279477764}
import React, { useState, useEffect } from "react";
import OktaSignIn from "@okta/okta-signin-widget";
import { Button } from "antd";
import "@okta/okta-signin-widget/dist/css/okta-sign-in.min.css";
import { config } from "../../../utils/oktaConfig";
import header from "../../../media/header.png";

const LoginContainer = () => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const { pkce, issuer, clientId, redirectUri, scopes } = config;
    // de-structure your config so that you can pass it into the required fields in your widget.
    const widget = new OktaSignIn({
      baseUrl: issuer ? issuer.split("/oauth2")[0] : "",
      clientId,
      redirectUri,
      registration: {
        // there is more we can do to handle some errors here.
      },
      features: { registration: false },
      // turning this feature on allows your widget to use Okta for user registration
      logo: "path-to-your-logo",
      // add your custom logo to your signing/register widget here.
      i18n: {
        en: {
          "primaryauth.title": "Welcome to Apollo! Please sign in."
          // change title for your app
        }
      },
      authParams: {
        pkce,
        issuer,
        display: "page",
        scopes
      }
    });

    if (widget) {
      widget.remove();
      widget.renderEl(
        { el: "#sign-in-widget" },
        () => {},
        err => {
          throw err;
        }
      );
    }
  }, [visible]);

  return (
    <>
      <div className="landing">
        <div className="welcome">
          <h1>Apollo</h1>

          <p>
            Automate your stand ups with Apollo. Create a topic and define a{" "}
            <span style={{ color: "#7F64FF", fontWeight: "bold" }}>
              context
            </span>{" "}
            to align your team towards a unified goal. Reply to topic responses
            to remove blockers and streamline your team efficiency.
          </p>

          <Button
            type="primary"
            onClick={() => {
              setVisible(true);
            }}
          >
            Log In
          </Button>
        </div>

        <img
          data-aos="flip-down"
          data-aos-delay="300"
          className="header-img"
          src={header}
          alt="apollo features preview"
        ></img>
      </div>

      {visible ? <div id="sign-in-widget" /> : null}
    </>
  );
};

export default LoginContainer;
