App.js

import React, { useState, useEffect } from 'react'
import './assets/stylesheets/App.css';
import logo from './assets/images/IC-logo.svg'

function App() {

  const [entityID, setEntityID] = useState('');
  const [returnUrl, setReturnUrl] = useState('');
  const [error, setError] = useState('');

  useEffect(() => {
    // Function to get query parameters from the URL
    const getQueryParams = () => {
      const queryParams = {};
      window.location.search.substring(1).split('&').forEach(param => {
        const [key, value] = param.split('=');
        queryParams[key] = decodeURIComponent(value);
      });
      return queryParams;
    };

    // Get query parameters from the URL
    const queryParams = getQueryParams();
    const entityIdParam = queryParams.entityID || '';
    const returnUrlParam = queryParams.return || '';

    if (!entityIdParam || !returnUrlParam) {
      setError('Both Entity ID and return URL are required.');
    } else {
      setEntityID(entityIdParam);
      setReturnUrl(returnUrlParam);
    }
  }, []);

  return (
    <div className="app d-flex justify-content-center">
      <div className="d-flex column justify-content-between align-items-center container">
        <div className="d-flex column align-items-center">
          <img src={logo} className="logo" alt="InCommon-Logo" />
          {error ? (
              <>
                <h1>{error}</h1>
                <p><a href="https://incommon.org/help/" target="_blank">Click Here</a> for more information.</p>
              </>
          ) : (
              <>
                <a href={`https://service.seamlessaccess.org/ds/?entityID=${entityID}&return=${returnUrl}`} className="d-flex sa-button">
                  <div className="sa-button-logo-wrap">
                    <img src="https://service.seamlessaccess.org/sa-white.svg" alt="Seamless Access Logo" className="sa-button-logo"/>
                  </div>
                  <div className="d-flex justify-content-center align-items-center sa-button-text text-truncate">
                    <div className="sa-button-text-primary text-truncate">Access through your institution</div>
                  </div>
                </a>
              </>
          )}
        </div>
        <div>
          <div id="menu">
            <a href="https://incommon.org/federation/" target="_blank">About the InCommon Federation</a>
            <a href="https://internet2.edu/community/about-us/policies/privacy/" className="last" target="_blank">Data Privacy</a>
            <a href="https://incommon.org/help/" className="last" target="_blank">Help</a>
          </div>
          <p>© Copyright 2020, InCommon, LLC | incommon.org | InCommon: Identity and Access for Research and Education</p>
        </div>
      </div>
    </div>
  );
}

export default App;