WIP for integration Invite and Connection requests

Author: oharsta

client/src/App.jsx

@@ -49,18 +49,6 @@ const App = () => {
     const navigate = useNavigate();
     const currentLocation = useLocation();
 
-    const sharedRoutes = () => {
-        return (
-            <>
-                <Route path="/home" element={<Home/>}/>
-                <Route path="/institutions" element={<Institutions/>}/>
-                <Route path="/connect" element={<Connect/>}/>
-                <Route path="/applications" element={<Applications/>}/>
-                <Route path="/login-info" element={<LoginInfo/>}/>
-            </>
-        );
-    }
-
     const refreshUser = () => {
         me().then(user => {
             const currentOrganization = useAppStore.getState().currentOrganization
@@ -148,14 +136,13 @@ const App = () => {
                             <Route path="/system/:tab?" element={<System/>}/>
                             <Route path="/profile" element={<Profile setIsAuthenticated={setIsAuthenticated}/>}/>
                             <Route path="/external/:app?" element={<ExternalApplication/>}/>
-                            <Route path="/application-detail/:manageType/:manageId" element={<ApplicationDetail/>}/>
+                            <Route path="/application-detail/:manageType/:manageId" element={<ApplicationDetail anonymous={false}/>}/>
                             <Route path="/refresh-route/:path" element={<RefreshRoute/>}/>
                             <Route path="/feedback" element={<Feedback/>}/>
                             <Route path="/idp/:organizationId" element={<MyOrganization refreshUser={refreshUser}/>}/>
                             <Route path="/authentication-switch" element={<AuthenticationSwitch/>}/>
-                            <Route path="/accessible-apps" element={<ApplicationOverview accessible={true}/>}/>
-                            <Route path="/catalogue" element={<ApplicationOverview accessible={false}/>}/>
-                            {/*{sharedRoutes()}*/}
+                            <Route path="/accessible-apps" element={<ApplicationOverview accessible={true} />}/>
+                            <Route path="/catalogue" element={<ApplicationOverview accessible={false} />}/>
                             <Route path="*" element={<NotFound/>}/>
                         </Routes>
                     </div>
@@ -168,8 +155,12 @@ const App = () => {
                     <Routes>
                         <Route path="/" element={<Navigate replace to="/home"/>}/>
                         <Route path="/landing" element={<Navigate replace to="/home"/>}/>
-                        {sharedRoutes()}
-                        <Route path="/application-detail/:manageType/:manageId" element={<ApplicationDetail/>}/>
+                        <Route path="/home" element={<Home/>}/>
+                        <Route path="/institutions" element={<Institutions/>}/>
+                        <Route path="/connect" element={<Connect/>}/>
+                        <Route path="/applications" element={<Applications/>}/>
+                        <Route path="/login-info" element={<LoginInfo/>}/>
+                        <Route path="/application-detail/:manageType/:manageId" element={<ApplicationDetail anonymous={true}/>}/>
                         <Route path="/authentication-switch" element={<AuthenticationSwitch/>}/>
                         <Route path="/*" element={<LoginRedirect/>}/>
                     </Routes>

client/src/locale/en.js

@@ -1018,7 +1018,11 @@ const en = {
         internalUser: "Internal user",
         internalUserTooltip: "An internal user - as opposed to an external user - is a user who has logged in with an institutional account."
     },
-
+    applicationConnect: {
+        connect: "Connect",
+        request: "Request connection",
+        back: "← Back to other apps"
+    }
 }
 
 export default en;

client/src/pages/ApplicationDetail.jsx

@@ -11,12 +11,14 @@ import {APPLICATION_LINKS, providerDescription, providerName, providerOrganizati
 import {isEmpty, stopEvent} from "../utils/Utils.js";
 import {useAppStore} from "../stores/AppStore.js";
 import {useShallow} from "zustand/react/shallow";
+import ConfirmationDialog from "../components/ConfirmationDialog.jsx";
 
-const ApplicationDetail = () => {
+const ApplicationDetail = ({anonymous}) => {
 
-        const {arp, privacy} = useAppStore(useShallow(state => ({
+        const {arp, privacy, user} = useAppStore(useShallow(state => ({
             arp: state.arp,
-            privacy: state.privacy
+            privacy: state.privacy,
+            user: state.user
         })));
 
         const navigate = useNavigate();
@@ -26,6 +28,7 @@ const ApplicationDetail = () => {
         const [serviceProvider, setServiceProvider] = useState([]);
         const [showAttributes, setShowAttributes] = useState(false);
         const [showPrivacy, setShowPrivacy] = useState(false);
+        const [confirmation, setConfirmation] = useState({});
 
         useEffect(() => {
             publicServiceProviderByDetail(manageType, manageId)
@@ -76,19 +79,75 @@ const ApplicationDetail = () => {
             return arp.attributes.find(attr => attr.urn === urn);
         }
 
+        const mayConnectWithoutInteraction = () => {
+            const connectOption = metaData["coin:dashboard_connect_option"] || "connect_with_interaction";
+            const sameInstitution = !isEmpty(metaData["coin:institution_guid"]) &&
+                metaData["coin:institution_guid"] === user.identityProvider.data.metaDataFields["coin:institution_guid"]
+            return connectOption !== "connect_with_interaction" || sameInstitution;
+        }
+
+        const openConnectDialog = () => {
+            setConfirmation({
+                open: true,
+                cancel: () => setConfirmation({open: false}),
+                action: () => doDelete(invitation, false),
+                question: I18n.t("invitationsManagement.deleteConfirmation", {email: invitation.inviter.name}),
+                okButton: I18n.t("invitationsManagement.revoke")
+            });
+        }
+
+        const doRequestConnection = () => {
+
+        }
+
+        const openRequestConnectionDialog = () => {
+            setConfirmation({
+                open: true,
+                cancel: () => setConfirmation({open: false}),
+                action: () => doDelete(invitation, false),
+                question: I18n.t("invitationsManagement.deleteConfirmation", {email: invitation.inviter.name}),
+                okButton: I18n.t("invitationsManagement.revoke")
+            });
+        }
+
+        const goBack = e => {
+            stopEvent(e);
+            navigate(-1);
+        }
+
+        const connectButtonText = () => {
+            //Is the app already connected, may the app be connected without interaction, or is there already an outstanding change request?
+            return I18n.t(`applicationConnect.${mayConnectWithoutInteraction() ? "connect" : "request"}`)
+        }
+
+        const {open, cancel, action, question, okButton, children} = confirmation;
+
         return (
             <div className="application-detail-container">
-                <div className="application-detail-header-container">
+                {open && <ConfirmationDialog confirm={action}
+                                             cancel={cancel}
+                                             confirmationHeader={I18n.t("forms.submit")}
+                                             confirmationTxt={okButton}
+                                             question={question}>
+                    {children}
+                </ConfirmationDialog>
+                }
+                {anonymous && <div className="application-detail-header-container">
                     <div className="application-detail-header">
                         <div className="left">
                             <h1 className="large">{I18n.t("applicationDetail.title")}</h1>
                             <p>{I18n.t("applicationDetail.subTitle")}</p>
                         </div>
                         <img src={StudentPng} alt="student"/>
                     </div>
-                </div>
+                </div>}
+                {!anonymous &&
+                    <div className="application-detail-top">
+                        <a href={"/"} onClick={goBack}>{I18n.t("applicationConnect.back")}</a>
+                    </div>
+                }
                 <div className="inner-application-detail-container">
-                    <div className="application-detail">
+                    <div className={`application-detail ${anonymous ? "" : "stand-alone"}`}>
                         <div className="meta-data">
                             {metaData["logo:0:url"] && <img src={metaData["logo:0:url"]} alt=""/>}
                             {!metaData["logo:0:url"] && <PlaceHolderImage/>}
@@ -100,11 +159,13 @@ const ApplicationDetail = () => {
                                     {providerName(I18n.locale, serviceProvider)}
                                 </p>
                             </div>
-                            <Button type={ButtonType.Secondary}
-                                    icon={<ArrowLeftIcon/>}
-                                    iconPlacement={ButtonIconPlacement.Left}
-                                    onClick={() => navigate(-1)}
-                                    txt={I18n.t("applicationDetail.back")}/>
+                            {anonymous && <Button type={ButtonType.Secondary}
+                                                  icon={<ArrowLeftIcon/>}
+                                                  iconPlacement={ButtonIconPlacement.Left}
+                                                  onClick={goBack}
+                                                  txt={I18n.t("applicationDetail.back")}/>}
+                            {!anonymous && <Button onClick={() => alert("Todo")}
+                                                   txt={connectButtonText()}/>}
                         </div>
                         <div className="details">
                             <div className="left">

client/src/pages/ApplicationDetail.scss

@@ -38,12 +38,21 @@ div.application-detail-container {
         background-color: white;
     }
 
+    .application-detail-top {
+        background-color: white;
+        padding: 0 25px;
+    }
+
     .application-detail {
         @include index.page;
         background-color: white;
         max-width: $width;
         padding: 25px 0;
 
+        &.stand-alone {
+            margin: 0 25px;
+        }
+
         .meta-data {
             display: flex;
             align-items: center;

client/src/pages/ApplicationOverview.jsx

@@ -39,11 +39,15 @@ const ApplicationOverview = ({accessible}) => {
 
             publicServiceProviders()
                 .then(res => {
-                    //If the IdP of the user
-                    const allowedAll = user.identityProvider?.data?.allowedall || true;
-                    if (!allowedAll && accessible) {
+                    //Scope the services on the allowed-entities of the IdP of the user
+                    if (accessible) {
+                        const allowedAll = user.identityProvider.data.allowedall;
                         const allowedEntities = user.identityProvider.data.allowedEntities.map(entity => entity.name);
-                        res = res.filter(entity => allowedEntities.includes(entity.data.entityid))
+                        res = res.filter(entity => allowedAll || allowedEntities.includes(entity.data.entityid))
+                    } else {
+                        //In the case of eduID / external user, we don't have an identityProvider
+                        const allowedEntities = (user.identityProvider?.data?.allowedEntities || []).map(entity => entity.name);
+                        res = res.filter(entity => !allowedEntities.includes(entity.data.entityid))
                     }
                     res.forEach(entity => {
                         entity.name = providerName(I18n.locale, entity);

client/src/utils/Login.js

@@ -1,17 +1,20 @@
 import {isEmpty, sanitizeURL} from "./Utils.js";
+import {dictToQueryString} from "./QueryParameters.js";
 
 export const SESSION_STORAGE_LOCATION = "session_storage_location";
 
-export const login = (config, force = true, useEduID = false) => {
-    let params = force ? "?force=true" : "";
-    if (useEduID) {
-        params += (force ? "&eduId=true" : "?eduId=true");
+export const login = (config, force = true, useEduID = false, upgradeLoa = false) => {
+    const params = {
+        force: force ? "true" : null,
+        eduId: useEduID ? "true" : null,
+        upgradeLoa: upgradeLoa ? "true" : null
     }
     let serverUrl = config.serverUrl;
+    const queryString = dictToQueryString(params);
     if (isEmpty(serverUrl)) {
         const local = window.location.hostname === "localhost";
         serverUrl = local ? "http://localhost:8886" :
             `${window.location.protocol}//${window.location.host}`
     }
-    window.location.href = sanitizeURL(`${serverUrl}/api/v1/users/login${params}`);
+    window.location.href = sanitizeURL(`${serverUrl}/api/v1/users/login?${queryString}`);
 }

client/src/utils/QueryParameters.js

@@ -1,3 +1,5 @@
+import {isEmpty} from "./Utils.js";
+
 export function replaceQueryParameter(windowLocationSearch, name, value) {
     const urlSearchParams = new URLSearchParams(windowLocationSearch);
     urlSearchParams.set(name, value);
@@ -7,4 +9,19 @@ export function replaceQueryParameter(windowLocationSearch, name, value) {
 export function getParameterByName(name, windowLocationSearch) {
     const urlSearchParams = new URLSearchParams(windowLocationSearch);
     return urlSearchParams.get(name);
+}
+
+
+export function dictToQueryString(params) {
+    const searchParams = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+        if (!isEmpty(value)) {
+            if (Array.isArray(value)) {
+                value.forEach(v => searchParams.append(key, v));
+            } else {
+                searchParams.append(key, value);
+            }
+        }
+    });
+    return searchParams.toString();
 }

server/src/main/java/access/api/ApplicationController.java

@@ -182,7 +182,7 @@ public ResponseEntity<Application> update(User user, @Validated @RequestBody App
     }
 
     @DeleteMapping({"", "/{applicationId}"})
-    public ResponseEntity<Map<String, Integer>> delete(User user, @PathVariable("applicationId") Long applicationId) {
+    public ResponseEntity<Map<String, Object>> delete(User user, @PathVariable("applicationId") Long applicationId) {
         LOG.debug("/delete application by " + user.getEmail());
 
         Application application = applicationRepository.findById(applicationId)

server/src/main/java/access/api/ApplicationMembershipController.java

@@ -62,7 +62,7 @@ public ResponseEntity<ApplicationMembership> create(
     }
 
     @DeleteMapping({"/{membership_id}"})
-    public ResponseEntity<Map<String, Integer>> delete(User user, @PathVariable("membership_id") Long membershipId) {
+    public ResponseEntity<Map<String, Object>> delete(User user, @PathVariable("membership_id") Long membershipId) {
         LOG.debug("/delete");
         ApplicationMembership applicationMembership = this.applicationMembershipRepository.findById(membershipId)
                 .orElseThrow(() -> new NotFoundException("ApplicationMembership not found"));

server/src/main/java/access/api/ConnectionController.java

@@ -199,7 +199,7 @@ public ResponseEntity<Map<String, Object>> requestProductionStatus(User user,
     }
 
     @DeleteMapping({"", "/{connectionId}"})
-    public ResponseEntity<Map<String, Integer>> delete(User user, @PathVariable("connectionId") Long connectionId) {
+    public ResponseEntity<Map<String, Object>> delete(User user, @PathVariable("connectionId") Long connectionId) {
         LOG.debug("/delete connection by " + user.getEmail());
 
         Connection connection = findConnectionForAuthorizedUser(user, connectionId);