Skip to content

Commit b7d539c

Browse files
oharstaoharsta
committed
Fixes #1216 
1 parent 5d0c1ad commit b7d539c

8 files changed

Lines changed: 198 additions & 91 deletions

File tree

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

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,39 @@ import "./InfoLinkField.scss"
33
import CaretUp from "../assets/caret_up.svg?react";
44
import CaretDown from "../assets/caret_down.svg?react";
55

6-
export const InfoLinkField = ({title, info, children}) => {
6+
export const InfoLinkField = ({id, title, info, children, isOpen, onToggle}) => {
77

8-
const [collapse, setCollapse] = useState(false)
8+
const [internalOpen, setInternalOpen] = useState(false);
9+
10+
const controlled = isOpen !== undefined && onToggle !== undefined;
11+
const open = controlled ? isOpen : internalOpen;
12+
13+
const handleToggle = () => {
14+
const nextOpen = !open;
15+
if (controlled) {
16+
onToggle(id);
17+
} else {
18+
setInternalOpen(nextOpen);
19+
}
20+
if (nextOpen && id) {
21+
history.replaceState(null, "", "#" + id);
22+
} else if (!nextOpen && id) {
23+
history.replaceState(null, "", location.pathname + location.search);
24+
}
25+
};
926

1027
return (
11-
<div className="info-link-field">
12-
<div className="info-link-field-inner" onClick={() => setCollapse(!collapse)}>
13-
<span className={`title ${collapse ? "open" : "collapsed"}`}>
28+
<div className="info-link-field" id={id}>
29+
<div className="info-link-field-inner" onClick={handleToggle}>
30+
<span className={`title ${open ? "open" : "collapsed"}`}>
1431
{title}
1532
</span>
16-
<button className={`${collapse ? "open" : "collapsed"}`}>
17-
{collapse ? <CaretUp/>: <CaretDown/>}
33+
<button className={`${open ? "open" : "collapsed"}`}>
34+
{open ? <CaretUp/> : <CaretDown/>}
1835
</button>
1936
</div>
20-
{(collapse && info) && <p className="info-link-field-content" dangerouslySetInnerHTML={{__html: info}}/>}
21-
{(collapse && !info) && <div className="info-link--field-content">{children}</div>}
37+
{(open && info) && <p className="info-link-field-content" dangerouslySetInnerHTML={{__html: info}}/>}
38+
{(open && !info) && <div className="info-link-field-content">{children}</div>}
2239
</div>
2340
);
2441
}

‎public-gui/src/hooks/useFragmentOpen.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {useEffect, useState} from "react";
2+
3+
export const useFragmentOpen = () => {
4+
const [openId, setOpenId] = useState(null);
5+
6+
useEffect(() => {
7+
const hash = window.location.hash.slice(1);
8+
if (hash) {
9+
setOpenId(hash);
10+
setTimeout(() => {
11+
const el = document.getElementById(hash);
12+
if (el) el.scrollIntoView({behavior: "smooth"});
13+
}, 50);
14+
} else {
15+
window.scroll(0, 0);
16+
}
17+
}, []);
18+
19+
const handleToggle = (id) => {
20+
setOpenId(prev => prev === id ? null : id);
21+
};
22+
23+
return {openId, handleToggle};
24+
};

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import about from "../assets/about.svg";
22
import {Background} from "../components/Background.jsx";
33
import {InfoLinkField} from "../components/InfoLinkField.jsx";
4-
import {useEffect} from "react";
54
import {Link} from "react-router";
5+
import {useFragmentOpen} from "../hooks/useFragmentOpen.js";
66

77
export const About_EN = () => {
88

9-
useEffect(() => {
10-
window.scroll(0, 0);
11-
}, []);
9+
const {openId, handleToggle} = useFragmentOpen();
1210

1311
return (
1412
<div className="about-container">
@@ -31,12 +29,15 @@ export const About_EN = () => {
3129
</div>
3230
<div className="card bottom with-collapse-fields">
3331
<h2>How do you use eduID?</h2>
34-
<InfoLinkField title="1. Create an eduID">
32+
<InfoLinkField id="1-create-an-eduid" title="1. Create an eduID"
33+
isOpen={openId === "1-create-an-eduid"} onToggle={handleToggle}>
3534
<p>Click 'Create eduID' and follow the steps.</p>
3635
<p>Use a <strong>personal email address</strong> that you will continue to use, even if
3736
you change schools or jobs.</p>
3837
</InfoLinkField>
39-
<InfoLinkField title="2. Verify your identity with an official party">
38+
<InfoLinkField id="2-verify-your-identity-with-an-official-party"
39+
title="2. Verify your identity with an official party"
40+
isOpen={openId === "2-verify-your-identity-with-an-official-party"} onToggle={handleToggle}>
4041
<p>In most cases, you'll need to verify your identity before you can use your eduID. You
4142
can do this in one of the following ways:</p>
4243
<p className="section-label top"><strong>With your Dutch educational or research institution</strong></p>
@@ -64,7 +65,9 @@ export const About_EN = () => {
6465
</ul>
6566
<p><Link to="/verify">Learn more about verifying your eduID</Link></p>
6667
</InfoLinkField>
67-
<InfoLinkField title="3. Log in to websites and other online services">
68+
<InfoLinkField id="3-log-in-to-websites-and-other-online-services"
69+
title="3. Log in to websites and other online services"
70+
isOpen={openId === "3-log-in-to-websites-and-other-online-services"} onToggle={handleToggle}>
6871
<p>With your eduID you can log in to websites and other online services in the
6972
Netherlands. We recommend using the eduID app, as it is the most secure and convenient
7073
option. The app lets you log in without a password, and two-factor authentication

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import about from "../assets/about.svg";
22
import {Background} from "../components/Background.jsx";
33
import {InfoLinkField} from "../components/InfoLinkField.jsx";
4-
import {useEffect} from "react";
54
import {Link} from "react-router";
5+
import {useFragmentOpen} from "../hooks/useFragmentOpen.js";
66

77
export const About_NL = () => {
88

9-
useEffect(() => {
10-
window.scroll(0, 0);
11-
}, []);
9+
const {openId, handleToggle} = useFragmentOpen();
1210

1311
return (
1412
<div className="about-container">
@@ -31,12 +29,15 @@ export const About_NL = () => {
3129
</div>
3230
<div className="card bottom with-collapse-fields">
3331
<h2>Hoe gebruik je eduID?</h2>
34-
<InfoLinkField title="1. Maak een eduID aan">
32+
<InfoLinkField id="1-create-an-eduid" title="1. Maak een eduID aan"
33+
isOpen={openId === "1-create-an-eduid"} onToggle={handleToggle}>
3534
<p>Klik op 'eduID aanmaken' en volg de stappen.</p>
3635
<p>Gebruik een persoonlijk e-mailadres dat je blijft gebruiken, ook als je van school of baan
3736
verandert.</p>
3837
</InfoLinkField>
39-
<InfoLinkField title="2. Verifieer je identiteit bij een officiele partij">
38+
<InfoLinkField id="2-verify-your-identity-with-an-official-party"
39+
title="2. Verifieer je identiteit bij een officiele partij"
40+
isOpen={openId === "2-verify-your-identity-with-an-official-party"} onToggle={handleToggle}>
4041
<p>Om je eduID te kunnen gebruiken, moet je in de meeste gevallen eerst bevestigen wie je
4142
bent. Dat doe je via een van de volgende methodes:</p>
4243
<p className="section-label top"><strong>Via je Nederlandse onderwijs- of onderzoeksinstelling</strong></p>
@@ -61,7 +62,9 @@ export const About_NL = () => {
6162
</ul>
6263
<p><Link to="/verify">Bekijk hoe je je eduID verifieert</Link></p>
6364
</InfoLinkField>
64-
<InfoLinkField title="3. Log in bij websites en andere online diensten">
65+
<InfoLinkField id="3-log-in-to-websites-and-other-online-services"
66+
title="3. Log in bij websites en andere online diensten"
67+
isOpen={openId === "3-log-in-to-websites-and-other-online-services"} onToggle={handleToggle}>
6568
<p>Met je eduID kun je inloggen bij websites en andere online diensten in Nederland. We raden
6669
je aan om hiervoor de eduID-app te gebruiken, omdat dit de meest veilige en eenvoudige
6770
manier is. Met de app log je namelijk zonder wachtwoord in. En door de

0 commit comments

Comments
 (0)