Fixes #927

Author: oharsta

myconext-server/src/main/resources/application.yml

@@ -91,7 +91,8 @@ host_headers:
   service_desk: servicedesk.test2.eduid.nl
   mijn_ediuid: mijn.test2.eduid.nl
   #Only for testing purposes
-  active: mijn.test2.eduid.nl
+  active: servicedesk.test2.eduid.nl
+#  active: mijn.test2.eduid.nl
 
 feature:
   webauthn: True

servicedesk-gui/src/App.scss

@@ -12,4 +12,8 @@
 
 .react-datepicker-popper {
     z-index: 3 !important;
+}
+
+strong {
+    font-weight: 600 !important;
 }

servicedesk-gui/src/locale/en.js

@@ -37,10 +37,17 @@ const en = {
     },
     tabs: {
         home: "Home",
-        verify: "Identity check"
+        verify: "Identity check eduID"
+    },
+    info: {
+        title: "Verify someone's identity",
+        subTitle: "An eduID user has made an appointment to have his identity verified.",
+        verify1: "Ask for <strong>the eduID verification code</strong>",
+        verify2: "This code should already be generated by the user in her/his eduID.",
+        verify3: "Does the user not have a code, ask the user to make one on the spot by starting the verification process in eduID."
     },
     verification: {
-        header: "Enter the verification code",
+        header: "Enter the eduID verification code",
         proceed: "Continue",
         error: "No user found for verification code {{code}}",
         info: "The person generated this code in eduID.",

servicedesk-gui/src/locale/nl.js

@@ -37,10 +37,17 @@ const nl = {
     },
     tabs: {
         home: "Home",
-        verify: "Identiteitscontrole"
+        verify: "Identiteitscontrole eduID"
+    },
+    info: {
+        title: "Verifieer iemands identiteit",
+        subTitle: "Een eduID gebruiker heeft een afspraak gemaakt om zijn identiteit te laten verifiëren.",
+        verify1: "Vraag naar <strong>een eduID verificatie code</strong>",
+        verify2: "Deze code heeft de gebruiker eerder gegenereerd in zijn/haar eduID.",
+        verify3: "Heeft de gebruiker géén code, vraag de gebruiker deze dan alsnog te maken door het verificatieprocess in eduID te starten."
     },
     verification: {
-        header: "Vul de controlecode in",
+        header: "Voer de eduID verificatie code in",
         proceed: "Ga verder",
         error: "Geen gebruiker gevonden voor de verificatiecode {{code}}",
         info: "Deze code heeft de persoon gegenereerd in eduID",

servicedesk-gui/src/tabs/Verification.jsx

@@ -5,6 +5,7 @@ import {Button, CodeValidation, ErrorIndicator} from "@surfnet/sds";
 import AlertIcon from "@surfnet/sds/icons/functional-icons/info.svg";
 import {getUserControlCode} from "../api/index.js";
 import {useAppStore} from "../stores/AppStore.js";
+import DOMPurify from "dompurify";
 
 const Verification = ({proceed}) => {
 
@@ -32,6 +33,18 @@ const Verification = ({proceed}) => {
     }
 
     return (
+        <>
+            <div className="info">
+                <h2>{I18n.t("info.title")}</h2>
+                <p className="info">{I18n.t("info.subTitle")}</p>
+                <p
+                    dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(I18n.t("info.verify1"))}}/>
+                <ul>
+                    <li>{I18n.t("info.verify2")}</li>
+                    <li>{I18n.t("info.verify3")}</li>
+                </ul>
+
+            </div>
         <div className="verification">
             <h4>{I18n.t("verification.header")}</h4>
             <div className="code-validation">
@@ -53,6 +66,7 @@ const Verification = ({proceed}) => {
             </div>
 
         </div>
+        </>
     );
 
 };

servicedesk-gui/src/tabs/Verification.scss

@@ -1,8 +1,27 @@
 @use "../styles/vars.scss" as *;
 
+div.info {
+    margin-top: 40px;
+    max-width: 660px;
+    h2 {
+        margin-bottom: 15px;
+    }
+
+    p.info {
+        margin-bottom: 25px;
+    }
+
+    ul {
+        list-style: inherit;
+
+        li {
+            margin-left: 16px;
+        }
+    }
+}
 
 div.verification {
-    margin: 40px 0 25px 0;
+    margin: 30px 0 25px 0;
     border: 1px solid var(--sds--color--gray--300);
     border-radius: 8px;
     max-width: $verification-width;
@@ -29,8 +48,9 @@ div.verification {
 
         svg {
             color: var(--sds--color--white);
+
             circle.bg {
-                fill:var(--sds--color--blue--400);
+                fill: var(--sds--color--blue--400);
             }
         }
     }