add basic js for SA button and install cypress for testing

InCommon · Jan 25, 2024 · 0adb1c5 · 0adb1c5
1 parent b688904
commit 0adb1c5
Showing 7 changed files with 2,782 additions and 108 deletions.
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "cypress": "^13.6.3"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>InCommon Federation Discovery Service</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,21 +1,11 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "InCommon Federation Discovery Service",
+  "name": "InCommon Federation Discovery Service",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/src/App.js b/src/App.js
@@ -1,20 +1,63 @@
+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', entityID, returnUrl)
+  }, []);
+
   return (
-    <div className="">
-      <body className="d-flex column align-items-center">
-        <img src={logo} className="App-logo" alt="logo" />
-        <a href="https://service.seamlessaccess.org/ds/?entityID=<%= locals.entityID %>&return=<%= locals.$return %>" class="d-flex sa-button">
-          <div class="sa-button-logo-wrap">
-            <img src="https://service.seamlessaccess.org/sa-white.svg" alt="Seamless Access Logo" class="sa-button-logo"/>
-          </div>
-          <div class="d-flex justify-content-center align-items-center sa-button-text text-truncate">
-            <div class="sa-button-text-primary text-truncate">Access through your institution</div>
-          </div>
-        </a>
-      </body>
+    <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">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>
   );
 }

diff --git a/src/assets/stylesheets/App.css b/src/assets/stylesheets/App.css
@@ -3,8 +3,39 @@
   --white: #ffffff;
 }
 
+/* Newer stuff */
+html, body {
+  height: 100%;
+  margin: 0; 
+  font-family: Helvetica, sans-serif;
+  color: #455;
+  line-height: 1.5rem;
+  background-color: var(--primary-blue);
+  overflow-x: hidden;
+}
+
+.app {
+  width: 100%;
+  height: 75%;
+  margin-top: 50px; 
+}
+
 .logo {
-  margin-right: 10px;
+  height: 75px;
+  padding-bottom: 30px; 
+}
+
+.container, .error-message {
+  width: 100%;
+  height: 50%;
+  margin: 0 auto;
+  border-radius: 10px; 
+  background-color: #f0f0f0;
+  padding: 40px;
+}
+
+.box-with-shadow {
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 /* Flexbox properties */
@@ -20,21 +51,21 @@
   align-items: center;
 }
 
-.header {
+.justify-content-center {
+  justify-content: center;
+}
+
+/* .header {
   display: flex;
   align-items: center;
-}
+} */
 
 .head-text {
   text-align: left !important;
   font-size: 20px;
   font-weight: 700;
 }
 
-.justify-content-center {
-  justify-content: center;
-}
-
 /* Text truncation */
 .text-truncate {
   overflow: hidden;
@@ -193,14 +224,8 @@
   display: inline-block;
   vertical-align: middle;
 }
-/* Newer stuff */
-html, body {
-  height: 100%;
-  font-family: Helvetica, sans-serif;
-  color: #455;
-  line-height: 1.5rem;
-}
 
+/* 
 #container {
   display: flex;
   flex-direction: column;
@@ -297,7 +322,7 @@ footer {
 }
 
 #faq {
-  text-align: left; /* Align text to the left */
+  text-align: left; 
   margin: 20px;
 }
 
@@ -306,16 +331,16 @@ footer {
 }
 
 #faq details {
-  margin-bottom: 20px; /* Adjust the value to control the amount of space between details elements */
+  margin-bottom: 20px;
 }
 
 .faq {
   margin: 20px 0;
   font-family: 'Arial', sans-serif;
   font-size: 14px;
   font-weight: 500;
-  text-align: left; /* Align text to the left */
-}
+  text-align: left; 
+} */
 
 @media screen and (min-width: 901px) {
   #root {