Skip to content

Commit cef8523

Browse files
oharstaoharsta
committed
WIP for website
1 parent 2176f47 commit cef8523

9 files changed

Lines changed: 464 additions & 338 deletions

File tree

‎public-gui/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,15 @@
2626
"@eslint/js": "^9.33.0",
2727
"@types/react": "^19.1.10",
2828
"@types/react-dom": "^19.1.7",
29-
"@vitejs/plugin-react": "^4.6.0",
29+
"@vitejs/plugin-react-oxc": "^0.1.0",
3030
"eslint": "^9.33.0",
3131
"eslint-plugin-react": "^7.37.5",
3232
"eslint-plugin-react-hooks": "^5.2.0",
3333
"eslint-plugin-react-refresh": "^0.4.20",
3434
"globals": "^16.3.0",
3535
"sass": "^1.90.0",
3636
"vite": "^8.0.10",
37+
"vite-plugin-svgr": "^5.2.0",
3738
"vitest": "^4.1.5"
3839
}
3940
}

‎public-gui/src/App.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,14 @@ h5 {
7979
margin-top: 35px;
8080
}
8181

82+
&.with-collapse-fields {
83+
padding: 35px 0;
84+
width: 100%;
85+
h3 {
86+
padding: 0 35px 12px 35px;
87+
}
88+
}
89+
8290
&.row {
8391
flex-direction: row;
8492
}

‎public-gui/src/components/InfoLinkField.jsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {useState} from "react";
2+
import "./InfoLinkField.scss"
3+
import CaretUp from "../assets/caret_up.svg?react";
4+
import CaretDown from "../assets/caret_down.svg?react";
5+
6+
export const InfoLinkField = ({title, info, children}) => {
7+
8+
const [collapse, setCollapse] = useState(false)
9+
10+
return (
11+
<div className="info-link-field" onClick={() => setCollapse(!collapse)}>
12+
<div className="info-link-field-inner">
13+
<span className={`title ${collapse ? "open" : "collapsed"}`}>
14+
{title}
15+
</span>
16+
<button className={`${collapse ? "open" : "collapsed"}`}>
17+
{collapse ? <CaretUp/>: <CaretDown/>}
18+
</button>
19+
</div>
20+
{(collapse && info) && <p className="info-link-field-content" dangerouslySetInnerHTML={{__html: info}}/>}
21+
{(collapse && !info) && <div className="info-link--field-content">{children}</div>}
22+
</div>
23+
);
24+
}

‎public-gui/src/components/InfoLinkField.scss‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
@use "../index";
2+
3+
.info-link-field {
4+
width: 100%;
5+
padding: 16px 24px 16px 35px;
6+
7+
border-top: 1px solid var(--sl-color-grey-100);
8+
border-bottom: 1px solid var(--sl-color-grey-100);
9+
10+
.info-link-field-inner {
11+
display: flex;
12+
align-items: center;
13+
cursor: pointer;
14+
15+
span.title {
16+
font-weight: 600;
17+
18+
&.collapsed {
19+
color: #0077C8;
20+
}
21+
22+
}
23+
24+
button {
25+
background-color: var(--sl-color-neutral-50);
26+
display: flex;
27+
width: 40px;
28+
height: 40px;
29+
justify-content: center;
30+
align-items: center;
31+
gap: 10px;
32+
border-radius: 20px;
33+
margin-left: auto;
34+
cursor: pointer;
35+
36+
&.open {
37+
background-color: transparent;
38+
}
39+
40+
svg {
41+
width: 16px;
42+
43+
path {
44+
fill: #0077C8
45+
}
46+
}
47+
}
48+
49+
}
50+
51+
.info-link-field-content {
52+
margin: 15px 0 5px 0;
53+
}
54+
}

‎public-gui/src/index.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,26 @@ $mobile-width: 576px;
22
$tablet-width: 820px;
33
$tablet-width-cutoff: 821px;
44

5+
:root {
6+
--sds--color--gray--background: #F4F6F8;
7+
--sl-color-warning: #FFC100;
8+
--sl-color-warning-50: #FEFBE6;
9+
--sl-color-warning-100: #FFD03A;
10+
--sl-color-warning-600: #F5B800;
11+
--sl-color-grey-100: #E1E4E8;
12+
--sl-color-grey-400: #EAECF0;
13+
--sl-color-green-100: #ECFCF3;
14+
--sl-color-green-200: #B8E3C9;
15+
--sl-color-neutral-50: #F4F6F8;
16+
--sl-color-neutral-100: #EEEFF1;
17+
--sl-color-neutral-200: #CED1D7;
18+
--sl-color-neutral-400: #888F99;
19+
--sl-color-neutral-500: #5E6873;
20+
--sl-color-secondary-400: #888F99;
21+
--sl-color-informative-50: #DFF4FF;
22+
--sl-color-succes-50: #DCF2E5;
23+
}
24+
525
@mixin page {
626
margin: 0 auto;
727
display: flex;

‎public-gui/src/locale/nl.js‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -36,23 +36,11 @@ const nl = {
3636
whyInfo1: "eduID is één account waarmee je eenvoudig inlogt bij verschillende onderwijs- en onderzoeksinstellingen in Nederland, of je nu student, medewerker of professional bent.",
3737
whyInfo2: "eduID is de oplossing: één account waarmee je bij verschillende Nederlandse onderwijs- en onderzoeksinstellingen kunt bewijzen wie je bent.",
3838
register: "Hoe gebruik je eduID?",
39-
registerInfo: "Een eduID maak je eenvoudig zelf. Druk daarvoor op <strong>eduID aanmaken</strong> bovenaan de pagina. Nadat je je eduID hebt aangemaakt is het vaak nog wel nodig dat je identiteit bevestigd wordt door een officiële partij. Zoals je school, universiteit of bank.",
39+
createEduId: "1. Maak een eduID aan",
40+
createEduIdInfo: "Klik op 'eduID aanmaken' en volg de stappen.</br>. Gebruik een persoonlijk e-mailadres dat je blijft gebruiken, ook als je van school of baan verandert.",
4041
logins: "Waar vind je je account en gegevens terug?",
4142
loginsInfo: "Heb je een eduID aangemaakt? Dan vind je in <a href='{{}}' target='_blank'>Mijn eduID</a> alle gegevens, zoals je naam, e-mailadres en hoe je eduID beveiligd is. Deze gegevens kun je beheren en aanpassen als je dat wilt. In Mijn eduID kun je ook zien bij welke websites en diensten je bent ingelogd met eduID.",
42-
magicLink: "Code in je e-mail",
43-
password: "Wachtwoord",
44-
passKey: "Passkey",
45-
identity: "Hoe gebruik je eduID?",
46-
identityInfo1: "Met je eduID kun je inloggen bij websites en andere online diensten in Nederland. We raden je aan om hiervoor de eduID app te gebruiken, omdat dit de meest veilige en eenvoudige manier is. Met de app log je namelijk zonder wachtwoord in. En door de tweefactorauthenticatie (2FA) is het extra veilig.",
47-
identityInfo2: "Download je liever geen app? Dan kun je ook op deze manieren inloggen:",
48-
institution: "Via een Nederlandse onderwijsinstelling",
49-
institutionInfo: "Je logt in bij je instelling. Die deelt daarna je gegevens zoals je naam en je rol (student/docent etc) met ons.",
50-
bank: "Via een Nederlandse bank-app",
51-
bankInfo: "Je logt in bij je bank. Die deelt je naam en geboortedatum met ons. Je doet geen betaling.",
52-
european: "Met een Europees identiteitsbewijs",
53-
europeanInfo: "Je laat je identiteitsbewijs en een controlecode zien aan een eduID Service Desk (online of bij een instelling).",
54-
manage: "Waar vind je je gegevens terug?",
55-
manageInfo: "In <a href='{{url}}'>Mijn eduID</a> staat je naam, e-mailadres en hoe je eduID beveiligd is. Ook kun je hier zien bij welke websites en diensten je al bent ingelogd met eduID en je gegevens downloaden en verwijderen."
43+
5644
},
5745
support: {
5846
eduID: "Help",

‎public-gui/src/routes/About.jsx‎

Lines changed: 5 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import about from "../assets/about.svg";
22
import I18n from "../locale/I18n.js";
33
import "./About.scss";
4-
import {useAppStore} from "../stores/AppStore.js";
54
import {Background} from "../components/Background.jsx";
65
import {useEffect} from "react";
6+
import {InfoLinkField} from "../components/InfoLinkField.jsx";
77

88
export const About = () => {
99

10-
const config = useAppStore((state) => state.config);
11-
1210
useEffect(() => {
1311
window.scroll(0, 0);
1412
}, []);
@@ -35,61 +33,21 @@ export const About = () => {
3533
{I18n.t("about.whyInfo1")}
3634
</p>
3735
</div>
38-
<div className="card bottom">
36+
<div className="card bottom with-collapse-fields">
3937
<h3>
4038
{I18n.t("about.register")}
4139
</h3>
40+
<InfoLinkField title={I18n.t("about.createEduId")}>
41+
<>{I18n.t("about.createEduIdInfo")}</>
42+
</InfoLinkField>
4243

43-
<p className="info"
44-
dangerouslySetInnerHTML={{__html: I18n.t("about.registerInfo")}}/>
4544
</div>
4645
<div className="card bottom">
4746
<h3>
4847
{I18n.t("about.logins")}
4948
</h3>
5049
<p className="info"
5150
dangerouslySetInnerHTML={{__html: I18n.t("about.loginsInfo")}}/>
52-
<ul>
53-
<li>
54-
<span className="header">{I18n.t("about.institution")}</span><br/>
55-
<span className="indented">{I18n.t("about.institutionInfo")}</span>
56-
</li>
57-
<li>
58-
<span className="header">{I18n.t("about.bank")}</span><br/>
59-
<span className="indented">{I18n.t("about.bankInfo")}</span>
60-
</li>
61-
<li>
62-
<span className="header">{I18n.t("about.european")}</span><br/>
63-
<span className="indented">{I18n.t("about.europeanInfo")}</span>
64-
</li>
65-
</ul>
66-
</div>
67-
<div className="card bottom">
68-
<h3>
69-
{I18n.t("about.identity")}
70-
</h3>
71-
<p className="info"
72-
dangerouslySetInnerHTML={{__html: I18n.t("about.identityInfo1")}}/>
73-
<p className="info"
74-
dangerouslySetInnerHTML={{__html: I18n.t("about.identityInfo2")}}/>
75-
<ul>
76-
<li>
77-
<span className="header">{I18n.t("about.magicLink")}</span>
78-
</li>
79-
<li>
80-
<span className="header">{I18n.t("about.password")}</span>
81-
</li>
82-
<li>
83-
<span className="header">{I18n.t("about.passKey")}</span>
84-
</li>
85-
</ul>
86-
</div>
87-
<div className="card bottom">
88-
<h3>
89-
{I18n.t("about.manage")}
90-
</h3>
91-
<p className="info"
92-
dangerouslySetInnerHTML={{__html: I18n.t("about.manageInfo", {url: config.spBaseUrl})}}/>
9351
</div>
9452
</Background>
9553
</div>

‎public-gui/vite.config.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import {defineConfig} from 'vite'
2-
import react from '@vitejs/plugin-react'
2+
import react from '@vitejs/plugin-react-oxc'
3+
import svgr from 'vite-plugin-svgr'
34

45
// https://vite.dev/config/
56
export default defineConfig({
6-
plugins: [react()],
7+
plugins: [react(), svgr()],
78
server: {
89
port: 3002,
910
open: true,

0 commit comments

Comments
 (0)