Skip to content

Commit 47e85d8

Browse files
oharstaoharsta
committed
Implement public How-to-Connect page
1 parent 195266b commit 47e85d8

File tree

6 files changed

+594
-472
lines changed

6 files changed

+594
-472
lines changed

‎client/package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "servicedesk-gui",
2+
"name": "client-gui",
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",
@@ -23,8 +23,7 @@
2323
"react-datepicker": "^8.3.0",
2424
"react-dom": "^19.1.0",
2525
"react-image-crop": "^11.0.10",
26-
"react-router": "^7.7.1",
27-
"react-router-dom": "7.7.1",
26+
"react-router-dom": "^7.8.1",
2827
"react-select": "^5.10.2",
2928
"react-tooltip": "^5.29.1",
3029
"use-debounce": "^10.0.5",

‎client/src/App.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import NotFound from "./pages/NotFound.jsx";
1010
import RefreshRoute from "./pages/RefreshRoute.jsx";
1111
import {Home} from "./pages/Home.jsx";
1212
import {Footer} from "./components/Footer.jsx";
13-
import {useLocation} from "react-router";
13+
import {useLocation} from "react-router-dom";
1414
import Organization from "./pages/Organization.jsx";
1515
import Institutions from "./pages/Institutions.jsx";
1616
import Connect from "./pages/Connect.jsx";

‎client/src/locale/en.js‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -692,10 +692,37 @@ const en = {
692692
connect: {
693693
title: "How to connect",
694694
subTitle: "Connecting to SURF Access is not complicated. It requires a formal and a technical part.",
695-
howTo: "Formal part",
696-
formal: "Applications on SURF Access are either provided by commercial entities or by SURF members for the benefit of their peers within the network. Our agreements vary based on the ownership of the application and the intended audience. For instance, if you intend to offer your service to a large number of users, you will need to enter into a formal contract with us. If your service is developed within your institution and is intended for a smaller research group, a shorter terms of service will do.",
697-
698-
provisions: "With these provisions, we aim to ensure a smooth and secure integration for all parties involved."
695+
formal: "Formal part",
696+
formalInfo: "Applications on SURF Access are either provided by commercial entities or by SURF members for the benefit of their peers within the network. Our agreements vary based on the ownership of the application and the intended audience. For instance, if you intend to offer your service to a large number of users, you will need to enter into a formal contract with us. If your service is developed within your institution and is intended for a smaller research group, a shorter terms of service will do.",
697+
agreementTypes: "Agreement types",
698+
testIdps: "Test IdP’s",
699+
collaborations: "Collaborations",
700+
enterprises: "Enterprises",
701+
accessTestIdps: "access for test IdP’s",
702+
accessGroups: "access for diverse groups",
703+
accessStudent: "e.g. access for all students",
704+
commercial: "Commercial entity",
705+
fairUse: "<a href='https://www.surf.nl/en/services/identity-access-management/surfconext' target='_blank'>Fair Use Policy</a>",
706+
accessTOS: "<a href='https://www.surf.nl/en/services/identity-access-management/surfconext' target='_blank'>SURF Access TOS</a>",
707+
connectionAgreement: "<a href='https://www.surf.nl/en/services/identity-access-management/surfconext' target='_blank'>Connection agreement</a>",
708+
surfMember: "SURF member",
709+
notNeeded: "not needed",
710+
memberAgreement: "<a href='https://www.surf.nl/en/services/identity-access-management/surfconext' target='_blank'>Member agreement</a>",
711+
surfMemberInfo: "including affiliated organisations",
712+
provisions: "With these provisions, we aim to ensure a smooth and secure integration for all parties involved.",
713+
technical: "Technical part",
714+
technicalInfo: "Whenever a user logs in through SURF Access, their information flows from their home-institution (Identity provider), via SURF Access, directly to your service.",
715+
serviceInfo: "Your service can receive a variety of data, including:",
716+
serviceBullets: [
717+
"<strong>Authentication Data</strong>: Proof that the user has been authenticated by the Identity Provider.",
718+
"<strong>Authorisation Information</strong>: Details necessary for making authorisation decisions within your service.",
719+
"<strong>Group Membership Information</strong>: Data about a user’s group memberships.",
720+
"<strong>Additional User Data</strong>: Any other data relevant to the service you provide."
721+
],
722+
samlOidc: "SAML & OpenID Connect",
723+
samlOidcInfo: "We use these open standards as they are used in most countries and many sectors.",
724+
attributes: "Attributes and claims",
725+
attributesInfo: "Learn more about use these open standards as they are used in most countries and many sectors."
699726
},
700727
forms: {
701728
cancel: "Cancel",

‎client/src/pages/Connect.jsx‎

Lines changed: 64 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,11 @@
11
import "./Connect.scss";
22

3-
import React, {useEffect, useRef, useState} from "react";
4-
import {publicIdentityProviders} from "../api/index.js";
3+
import React from "react";
54
import I18n from "../locale/I18n.js";
6-
import {useNavigate} from "react-router-dom";
7-
import {Loader, Pagination} from "@surfnet/sds";
85
import StudentPng from "../icons/student.png";
9-
import SearchIcon from "@surfnet/sds/icons/functional-icons/search.svg";
10-
import SelectField from "../components/SelectField.jsx";
11-
import {isEmpty} from "../utils/Utils.js";
12-
import {providerName, providerOrganizationName} from "../utils/Manage.js";
13-
import PlaceHolderImage from "@surfnet/sds/icons/placeholder-image.svg";
146

157
const Connect = () => {
168

17-
18-
199
return (
2010
<div className="connect-container">
2111
<div className="connect-header-container">
@@ -29,7 +19,69 @@ const Connect = () => {
2919
</div>
3020
<div className="inner-connect-container">
3121
<div className="connect">
32-
<h2>{I18n.t("connect.howTo")}</h2>
22+
<h2>{I18n.t("connect.formal")}</h2>
23+
<p>{I18n.t("connect.formalInfo")}</p>
24+
<div className="table-container">
25+
<table>
26+
<thead></thead>
27+
<tbody>
28+
<tr>
29+
<td className="left-top">
30+
{I18n.t("connect.agreementTypes")}
31+
</td>
32+
<td>
33+
<p>{I18n.t("connect.testIdps")}</p>
34+
<span className="sub">{I18n.t("connect.accessTestIdps")}</span>
35+
</td>
36+
<td>
37+
<p>{I18n.t("connect.collaborations")}</p>
38+
<span className="sub">{I18n.t("connect.accessGroups")}</span>
39+
</td>
40+
<td>
41+
<p>{I18n.t("connect.enterprises")}</p>
42+
<span className="sub">{I18n.t("connect.accessStudent")}</span>
43+
</td>
44+
</tr>
45+
<tr>
46+
<td>
47+
<p>{I18n.t("connect.commercial")}</p>
48+
</td>
49+
<td dangerouslySetInnerHTML={{__html: I18n.t("connect.fairUse")}}/>
50+
<td dangerouslySetInnerHTML={{__html: I18n.t("connect.accessTOS")}}/>
51+
<td dangerouslySetInnerHTML={{__html: I18n.t("connect.connectionAgreement")}}/>
52+
</tr>
53+
<tr>
54+
<td>
55+
<p>{I18n.t("connect.surfMember")}<sup>*</sup></p>
56+
</td>
57+
<td><span>{I18n.t("connect.notNeeded")}</span></td>
58+
<td><span>{I18n.t("connect.notNeeded")}</span></td>
59+
<td dangerouslySetInnerHTML={{__html: I18n.t("connect.memberAgreement")}}/>
60+
</tr>
61+
</tbody>
62+
</table>
63+
<p className="sup-info"><sup>*</sup>{I18n.t("connect.surfMemberInfo")}</p>
64+
</div>
65+
<p>{I18n.t("connect.provisions")}</p>
66+
</div>
67+
<div className="connect">
68+
<h2>{I18n.t("connect.technical")}</h2>
69+
<p>{I18n.t("connect.technicalInfo")}</p>
70+
<div>
71+
<p>{I18n.t("connect.serviceInfo")}</p>
72+
<ul>
73+
{I18n.translations[I18n.locale].connect.serviceBullets
74+
.map(s => <li dangerouslySetInnerHTML={{__html: s}}/>)}
75+
</ul>
76+
</div>
77+
<div>
78+
<h5>{I18n.t("connect.samlOidc")}</h5>
79+
<p>{I18n.t("connect.samlOidcInfo")}</p>
80+
</div>
81+
<div>
82+
<h5>{I18n.t("connect.attributes")}</h5>
83+
<p>{I18n.t("connect.attributesInfo")}</p>
84+
</div>
3385
</div>
3486
</div>
3587
</div>

‎client/src/pages/Connect.scss‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,20 +37,64 @@ div.connect-container {
3737
width: 100%;
3838
height: 100%;
3939
background-color: white;
40+
padding-bottom: 40px;
4041
}
4142

4243
.connect {
4344
@include index.page;
4445
background-color: white;
4546
max-width: $width;
47+
padding-top: 40px;
48+
49+
.table-container {
50+
padding: 8px 15px 20px 15px ;
51+
background-color: var(--sds--color--gray--100);
52+
53+
p.sup-info {
54+
font-size: 14px;
55+
}
56+
}
4657

4758
table {
4859
width: 100%;
4960
border-collapse: collapse;
61+
margin-bottom: 8px;
5062
td {
63+
padding: 6px 10px;
64+
vertical-align: top;
65+
border: 1px solid var(--sds--color--gray--300);
66+
67+
&.left-top {
68+
border: none;
69+
font-weight: 600;
70+
color: var(--sds--color--blue--400);
71+
}
72+
73+
p {
74+
font-weight: 600;
75+
}
5176

77+
span.sub {
78+
font-style: italic;
79+
font-size: 15px;
80+
color: #3e3e40;
81+
}
82+
83+
a {
84+
color: var(--sds--color--blue--400);
85+
font-weight: 600;
86+
}
5287
}
5388
}
89+
ul {
90+
list-style: initial;
91+
margin-top: 8px;
92+
93+
li {
94+
margin-left: 15px;
95+
}
96+
}
97+
5498
}
5599

56100
}

0 commit comments

Comments
 (0)