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) {
      // Handle missing parameters
      setError('Both Entity ID and return URL are required.');
    } else {
      // Set parameters if available
      setEntityID(entityIdParam);
      setReturnUrl(returnUrlParam);
    }

    console.log('IDs', entityIdParam, returnUrlParam)
  }, []);

  return (
    <div className="app d-flex">
      <div className="d-flex column align-items-center container box-with-shadow">
        <img src={logo} className="logo" alt="InCommon-Logo" />
        {error ? (
            <>
              <h1>{error}</h1>
              <p><a href="LINK_FROM_I2" 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>
  );
}

export default App;