Skip to content

Commit 00abbca

Browse files
oharstaoharsta
committed
WIP for Connection Request
1 parent 4a55c36 commit 00abbca

8 files changed

Lines changed: 205 additions & 69 deletions

File tree

‎client/src/components/InfoBlock.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,16 @@
4646
border: 1px solid var(--sds--color--gray--300);
4747
}
4848

49+
&.no-gap {
50+
gap: 0;
51+
}
52+
53+
&.row {
54+
flex-direction: row;
55+
align-items: center;
56+
}
57+
58+
4959
&.full-row {
5060
grid-column: 1 / -1;
5161
background: white;

‎client/src/connection/Testing.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ $width-percentage: 75%;
131131
display: flex;
132132
align-items: center;
133133
margin: 20px 0;
134-
border: 1px solid #EAECF0;
134+
border: 1px solid var(--sl-color-grey-400);
135135
border-radius: 6px;
136136
padding: var(--sds--space--1-and-a-half);
137137
width: 100%;
@@ -244,7 +244,7 @@ $width-percentage: 75%;
244244
.grant-type {
245245
display: flex;
246246
align-items: center;
247-
border: 1px solid #EAECF0;
247+
border: 1px solid var(--sl-color-grey-400);
248248
border-radius: 6px;
249249
padding: var(--sds--space--1-and-a-half);
250250

‎client/src/icons/external-link.svg‎

Lines changed: 3 additions & 3 deletions
Loading

‎client/src/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ h1.large {
125125

126126
.card {
127127
background: white;
128-
border: 1px solid #EAECF0;
128+
border: 1px solid var(--sl-color-grey-400);
129129
border-radius: 10px;
130130
flex-direction: column;
131131
display: flex;

‎client/src/locale/en.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1047,7 +1047,7 @@ const en = {
10471047
appAccess: {
10481048
title: "Central Access",
10491049
users: "User from {{name}}",
1050-
config: "⚡️Configureer automatische toegang op basis van kenmerken",
1050+
config: "⚡️ Configureer automatische toegang op basis van kenmerken",
10511051
accessFor: "There is access for:",
10521052
everyBody: "Everybody from {{name}}",
10531053
noAccessFor: "Geen toegang voor:",

‎client/src/pages/ApplicationDetail.jsx‎

Lines changed: 115 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import "./ApplicationDetail.scss";
22
import React, {useEffect, useState} from "react";
33
import {connectServiceProviderToIdentityProvider, publicServiceProviderByDetail} from "../api/index.js";
44
import I18n from "../locale/I18n.js";
5+
import ExternalLinkIcon from "../icons/external-link.svg";
56
import {useNavigate, useParams} from "react-router-dom";
67
import {
78
Button,
@@ -31,6 +32,7 @@ import {authorities} from "../utils/Permissions.js";
3132
import InputField from "../components/InputField.jsx";
3233
import {mainMenuItems} from "../utils/MenuItems.js";
3334
import {TabHeader} from "../components/TabHeader.jsx";
35+
import {InfoBlock} from "../components/InfoBlock.jsx";
3436

3537
const confirmationModalOptions = {
3638
makeConnection: "makeConnection",
@@ -44,10 +46,11 @@ const tabNames = ["access", "information"]
4446

4547
const ApplicationDetail = ({anonymous, refreshUser}) => {
4648

47-
const {arp, privacy, user, setFlash} = useAppStore(useShallow(state => ({
49+
const {arp, privacy, user, config, setFlash} = useAppStore(useShallow(state => ({
4850
arp: state.arp,
4951
privacy: state.privacy,
5052
user: state.user,
53+
config: state.config,
5154
setFlash: state.setFlash
5255
})));
5356

@@ -276,15 +279,49 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
276279

277280
const renderAccessApp = () => {
278281
return (
279-
<div>
280-
<span>TODO renderAccessApp </span>
281-
<span>readOnly: {readOnly.toString()}</span>
282+
<div className="app-access">
283+
<h2>{I18n.t("appAccess.title")}</h2>
284+
<InfoBlock className="no-gap">
285+
<div className="grouped">
286+
<div >
287+
<h3>{I18n.t("appAccess.users", {name: providerOrganizationName(I18n.locale, serviceProvider)})}</h3>
288+
<p>{I18n.t("appAccess.config")}</p>
289+
</div>
290+
<Button type={ButtonType.Primary}
291+
onClick={() => alert("ToDo")}
292+
txt={I18n.t("forms.edit")}/>
293+
</div>
294+
<p>{I18n.t("appAccess.accessFor")}</p>
295+
<div className="access-card">
296+
<h4>{I18n.t("appAccess.everyBody", {name: providerOrganizationName(I18n.locale, serviceProvider)})}</h4>
297+
{renderLogo(user.identityProvider.data.metaDataFields)}
298+
</div>
299+
</InfoBlock>
300+
<InfoBlock className="no-gap">
301+
<div className="grouped">
302+
<div >
303+
<h3>{I18n.t("appAccess.outSideUsers")}</h3>
304+
<p>{I18n.t("appAccess.roleBasedAccess")}</p>
305+
</div>
306+
<Button type={ButtonType.Primary}
307+
onClick={() => window.open(config.invite, "_blank").focus()}
308+
icon={<ExternalLinkIcon/>}
309+
txt={I18n.t("appAccess.roleManagement")}/>
310+
</div>
311+
<p>{I18n.t("appAccess.accessFor")}</p>
312+
<div className="access-card">
313+
<h4>{I18n.t("appAccess.everyBody", {name: providerOrganizationName(I18n.locale, serviceProvider)})}</h4>
314+
{renderLogo(user.identityProvider.data.metaDataFields)}
315+
</div>
316+
</InfoBlock>
317+
<p>readOnly: {readOnly.toString()}</p>
318+
<p>isAccessible: {accessible.toString()}</p>
282319
</div>
283320
);
284321
}
285322

286323
const renderInformation = () => {
287-
return <span>TODO renderInformation</span>;
324+
return renderDetailsApp();
288325
}
289326

290327
const renderAccessibleApp = () => {
@@ -385,6 +422,77 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
385422
</div>;
386423
}
387424

425+
const renderQuickLinks = () => {
426+
return (
427+
<>
428+
<p className="info">{I18n.t("applicationDetail.quickLinks")}</p>
429+
<div className="app-info-block">
430+
{APPLICATION_LINKS.map((link, index) =>
431+
externalLink(link, metaData, index)
432+
)}
433+
</div>
434+
</>
435+
);
436+
}
437+
438+
const renderLogo = metaDataFields => {
439+
const logoUrl = metaDataFields["logo:0:url"];
440+
return isEmpty(logoUrl) ? <PlaceHolderImage/> : <img src={logoUrl} alt=""/>
441+
}
442+
443+
const renderDetailsApp = () => {
444+
return (
445+
<div className="details">
446+
<div className="left">
447+
<p>{providerDescription(I18n.locale, serviceProvider)}</p>
448+
{renderAppAttributes()}
449+
{renderAppPrivacy()}
450+
</div>
451+
<div className="right">
452+
<p className="license">{I18n.t(`applicationDetail.license.${metaData['coin:ss:license_status'] || 'license_not_required'}`)}</p>
453+
{renderQuickLinks()}
454+
<p className="info">{I18n.t("applicationDetail.contractual")}</p>
455+
<p>
456+
<span>
457+
{metaData["coin:contractual_base"] ?
458+
I18n.t(`applicationDetail.contractualBase.${metaData["coin:contractual_base"].toLowerCase()}`,
459+
{organisation: providerOrganizationName(I18n.locale, serviceProvider)})
460+
: I18n.t("applicationDetail.noInformation")}
461+
</span>
462+
<span
463+
dangerouslySetInnerHTML={{__html: I18n.t("applicationDetail.wiki")}}/>
464+
</p>
465+
<p>{I18n.t("applicationDetail.contractualInfoOrganization",
466+
{name: providerOrganizationName(I18n.locale, serviceProvider)})}</p>
467+
<p className="info">{I18n.t("applicationDetail.supportedEntityCategories")}</p>
468+
<div className="app-info-block">
469+
{[1, 2, 3, 4].map(nbr =>
470+
externalLink({
471+
locale: "applicationDetail.entityCategory",
472+
localeAttribute: true,
473+
metaData: `coin:entity_categories:${nbr}`,
474+
languageProperty: false
475+
}, metaData, nbr)
476+
)}
477+
{[1, 2, 3, 4].every(nbr => isEmpty(metaData[`coin:entity_categories:${nbr}`])) &&
478+
<p>{I18n.t("applicationDetail.none")}</p>
479+
}
480+
</div>
481+
{metaData["mdrpi:RegistrationInfo"] && (
482+
<div className="federation-source">
483+
<p className="info">{I18n.t('applicationDetail.interfedSource')}</p>
484+
<span
485+
dangerouslySetInnerHTML={{
486+
__html: I18n.t('applicationDetail.registrationInfo', {url: metaData["mdrpi:RegistrationInfo"]}),
487+
}}
488+
/>
489+
</div>
490+
)}
491+
</div>
492+
</div>
493+
);
494+
}
495+
388496
const renderNonAccessibleApp = () => {
389497
return (
390498
<>
@@ -406,8 +514,7 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
406514
<div className="inner-application-detail-container">
407515
<div className={`application-detail ${anonymous ? "" : "stand-alone"}`}>
408516
<div className="meta-data">
409-
{metaData["logo:0:url"] && <img src={metaData["logo:0:url"]} alt=""/>}
410-
{!metaData["logo:0:url"] && <PlaceHolderImage/>}
517+
{renderLogo(metaData)}
411518
<div className="meta-data-name">
412519
<p className="organization">
413520
{providerOrganizationName(I18n.locale, serviceProvider)}
@@ -426,59 +533,7 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
426533
txt={I18n.t(`applicationConnect.${!isAdminUser ? "requestMember" :
427534
connectWithoutInteraction ? "connect" : "request"}`)}/>}
428535
</div>
429-
<div className="details">
430-
<div className="left">
431-
<p>{providerDescription(I18n.locale, serviceProvider)}</p>
432-
{renderAppAttributes()}
433-
{renderAppPrivacy()}
434-
</div>
435-
<div className="right">
436-
<p className="license">{I18n.t(`applicationDetail.license.${metaData['coin:ss:license_status'] || 'license_not_required'}`)}</p>
437-
<p className="info">{I18n.t("applicationDetail.quickLinks")}</p>
438-
<div className="app-info-block">
439-
{APPLICATION_LINKS.map((link, index) =>
440-
externalLink(link, metaData, index)
441-
)}
442-
</div>
443-
<p className="info">{I18n.t("applicationDetail.contractual")}</p>
444-
<p>
445-
<span>
446-
{metaData["coin:contractual_base"] ?
447-
I18n.t(`applicationDetail.contractualBase.${metaData["coin:contractual_base"].toLowerCase()}`,
448-
{organisation: providerOrganizationName(I18n.locale, serviceProvider)})
449-
: I18n.t("applicationDetail.noInformation")}
450-
</span>
451-
<span
452-
dangerouslySetInnerHTML={{__html: I18n.t("applicationDetail.wiki")}}/>
453-
</p>
454-
<p>{I18n.t("applicationDetail.contractualInfoOrganization",
455-
{name: providerOrganizationName(I18n.locale, serviceProvider)})}</p>
456-
<p className="info">{I18n.t("applicationDetail.supportedEntityCategories")}</p>
457-
<div className="app-info-block">
458-
{[1, 2, 3, 4].map(nbr =>
459-
externalLink({
460-
locale: "applicationDetail.entityCategory",
461-
localeAttribute: true,
462-
metaData: `coin:entity_categories:${nbr}`,
463-
languageProperty: false
464-
}, metaData, nbr)
465-
)}
466-
{[1, 2, 3, 4].every(nbr => isEmpty(metaData[`coin:entity_categories:${nbr}`])) &&
467-
<p>{I18n.t("applicationDetail.none")}</p>
468-
}
469-
</div>
470-
{metaData["mdrpi:RegistrationInfo"] && (
471-
<div className="federation-source">
472-
<p className="info">{I18n.t('applicationDetail.interfedSource')}</p>
473-
<span
474-
dangerouslySetInnerHTML={{
475-
__html: I18n.t('applicationDetail.registrationInfo', {url: metaData["mdrpi:RegistrationInfo"]}),
476-
}}
477-
/>
478-
</div>
479-
)}
480-
</div>
481-
</div>
536+
{renderDetailsApp()}
482537
</div>
483538
</div>
484539
</>

‎client/src/pages/ApplicationDetail.scss‎

Lines changed: 72 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ div.application-detail-container {
5858
.application-card {
5959
display: flex;
6060
background: white;
61-
border: 1px solid #EAECF0;
61+
border: 1px solid var(--sl-color-grey-400);
6262
border-radius: 10px;
6363
gap: 15px;
6464
padding: 30px;
@@ -76,7 +76,15 @@ div.application-detail-container {
7676
.application-detail-page {
7777
background-color: white;
7878
height: 100%;
79-
padding: 25px 50px;
79+
padding: 35px 50px;
80+
81+
.details {
82+
width: 70%;
83+
@media (max-width: $medium) {
84+
width: 100%;
85+
}
86+
87+
}
8088
}
8189

8290
.inner-application-detail-container {
@@ -221,4 +229,66 @@ div.application-detail-container {
221229
}
222230
}
223231

232+
.app-access {
233+
width: 70%;
234+
@media (max-width: $medium) {
235+
width: 100%;
236+
}
237+
238+
h2 {
239+
margin-bottom: 20px;
240+
}
241+
242+
.info-block {
243+
padding: 24px 40px 24px 24px;
244+
245+
&:not(:last-child) {
246+
margin-bottom: 25px;
247+
}
248+
249+
h3 {
250+
margin-bottom: 5px;
251+
}
252+
253+
254+
.grouped {
255+
display: flex;
256+
width: 100%;
257+
margin-bottom: 25px;
258+
259+
button {
260+
align-self: flex-start;
261+
margin-left: auto;
262+
}
263+
264+
}
265+
}
266+
267+
.access-card {
268+
background: white;
269+
margin: 10px 0;
270+
border: 1px solid var(--sl-color-grey-400);
271+
border-radius: 10px;
272+
display: flex;
273+
align-items: center;
274+
padding: 8px;
275+
width: 100%;
276+
277+
h4 {
278+
font-size: 18px;
279+
}
280+
281+
img {
282+
margin-left: auto;
283+
width: 42px;
284+
height: 42px;
285+
286+
}
287+
}
288+
}
289+
290+
.sds--btn.sds--btn-icon svg {
291+
width: 18px;
292+
height: auto;
293+
}
224294
}

0 commit comments

Comments
 (0)