Send verification mail for servicedesk

OpenConext · Jan 15, 2025 · 4f5e18c · 4f5e18c
1 parent a03591c
commit 4f5e18c
Show file tree

Hide file tree

Showing 24 changed files with 423 additions and 69 deletions.
diff --git a/myconext-gui/src/App.svelte b/myconext-gui/src/App.svelte
@@ -102,6 +102,8 @@
         --color-tertiare-grey: #989898;
         --color-background: #f9f9f9;
         --color-secondary-background: #f3f6f8;
+        --color-primary-yellow: #f3e178;
+        --color-secondary-yellow: #fdf7d2;
         --width-app: 1024px;
     }
 

diff --git a/myconext-gui/src/api/index.js b/myconext-gui/src/api/index.js
@@ -94,6 +94,15 @@ export function resetPasswordHashValid(hash) {
     return fetchJson(`/myconext/api/sp/password-reset-hash-valid?hash=${hash}`);
 }
 
+export function createUserControlCode(firstName, lastName, dayOfBirth) {
+    const body = {firstName, lastName, dayOfBirth};
+    return postPutJson("/myconext/api/sp/control-code", body, "POST");
+}
+
+export function deleteUserControlCode() {
+    return fetchDelete("/myconext/api/sp/control-code");
+}
+
 export function startWebAuthFlow() {
     return fetchJson("/myconext/api/sp/security/webauthn");
 }
@@ -141,7 +150,7 @@ export function startLinkAccountFlow() {
     return fetchJson("/myconext/api/sp/oidc/link");
 }
 
-export function startVerifyAccountFlow(idpScoping, bankId ) {
+export function startVerifyAccountFlow(idpScoping, bankId) {
     const bankIdParam = isEmpty(bankId) ? "" : `&bankId=${bankId}`;
     return fetchJson(`/myconext/api/sp/verify/link?idpScoping=${idpScoping}${bankIdParam}`);
 }

diff --git a/myconext-gui/src/components/Button.svelte b/myconext-gui/src/components/Button.svelte
@@ -6,6 +6,7 @@
     export let href = "/";
     export let disabled = false;
     export let warning = false;
+    export let deleteAction = false;
     export let label;
     export let onClick;
     export let medium = false;
@@ -89,6 +90,16 @@
         color: whitesmoke;
     }
 
+    .button.deleteAction {
+        background-color: white;
+        color: var(--color-warning-red);;
+        border: 1px solid var(--color-warning-red);;
+    }
+
+    .button.deleteAction:hover {
+        background-color: whitesmoke;
+    }
+
     .button.small {
         min-width: 90px;
         max-width: 90px;
@@ -231,6 +242,7 @@
     <a class="{`button ${className}`}"
        class:active={active}
        class:warning={warning}
+       class:deleteAction={deleteAction}
        href="{href}"
        class:icon={icon != undefined}
        class:small={small}

diff --git a/myconext-gui/src/components/Modal.svelte b/myconext-gui/src/components/Modal.svelte
@@ -104,6 +104,12 @@
         display: flex;
         text-align: center;
         justify-content: flex-end;
+
+        &.orphan {
+            :global(a.button) {
+                margin: 0 0 0 auto;
+            }
+        }
     }
 </style>
 
@@ -112,12 +118,12 @@
 <div class="modal">
     <div class="modal-content">
         {#if title}
-        <div class="modal-header" class:warning>
-            <h3>{title}</h3>
-            <span on:click={() => handleKeydown({key:"Escape"})}>
+            <div class="modal-header" class:warning>
+                <h3>{title}</h3>
+                <span on:click={() => handleKeydown({key:"Escape"})}>
                 {@html closeIcon}
             </span>
-        </div>
+            </div>
         {/if}
         <div class="modal-body" class:control-body={controlBody}>
             {#if question}
@@ -126,7 +132,7 @@
             <slot></slot>
         </div>
         {#if showOptions}
-            <div class="options">
+            <div class={`options ${!cancel && submit ? "orphan" : ""}`}>
                 {#if cancel}
                     <Button className="cancel"
                             onClick={cancel}

diff --git a/myconext-gui/src/locale/en.js b/myconext-gui/src/locale/en.js
@@ -605,13 +605,14 @@ I18n.translations.en = {
                 info: "You will also receive an email with this code. The code is valid for 14 days and is intended for:",
                 typoPrefix: "Made a typo? ",
                 typoLink: "Edit your details",
-                todo: "What;s next?",
+                todo: "What's next?",
                 todoDetails: "Schedule an appointment with an eduID Service Desk (online or in person). During your appointment, show your verification code and ID.",
                 serviceDesks: "Show eduID Service Desks",
                 serviceDesksLocations: "https://wiki.surfnet.nl/display/EDUID/eduID+Service+Desk",
                 back: "Back to overview",
                 rethink: "Want to prove your identity another way? Make sure to delete your verification code first.",
                 deleteControlCode: "Delete verification code",
+                deletedControlCode: "Verification code deleted",
                 banner: "Verify your identity at an eduID Service Desk by presenting your ID and verification code.",
                 showCode: "Show code"
             }

diff --git a/myconext-gui/src/locale/nl.js b/myconext-gui/src/locale/nl.js
@@ -615,6 +615,7 @@ I18n.translations.nl = {
                 back: "Terug naar overzicht",
                 rethink: "Wil je toch op een andere manier bewijzen wie je bent? Verwijder dan eerst je controlecode.",
                 deleteControlCode: "Verwijder controlecode",
+                deletedControlCode: "Verificatie-code verwijderd",
                 banner: "Bevestig je identiteit bij een eduID Service Desk. Dit doe je door je identiteitsbewijs en controlecode te laten zien.",
                 showCode: "Toon code"
             }

diff --git a/myconext-gui/src/main.js b/myconext-gui/src/main.js
@@ -6,6 +6,5 @@ import App from "./App.svelte";
 import "./locale/en";
 import "./locale/nl";
 
-// const app = new App({target: document.body});
 const app = mount(App, { target: document.body });
 export default app;
diff --git a/myconext-gui/src/routes/PersonalInfo.svelte b/myconext-gui/src/routes/PersonalInfo.svelte
@@ -7,7 +7,7 @@
     import alertSvg from "../icons/alert-circle.svg?raw";
     import Button from "../components/Button.svelte";
     import {
-        deleteLinkedAccount,
+        deleteLinkedAccount, deleteUserControlCode,
         iDINIssuers,
         preferLinkedAccount,
         startLinkAccountFlow,
@@ -58,6 +58,8 @@
     let newInstitution = {};
     let issuers;
 
+    let showControlCode = false;
+
     const manageVerifiedInformation = path => {
         navigate(`/${path}`, {replace:true});
     }
@@ -369,7 +371,7 @@
         display: flex;
         align-items: center;
         background-color: var(--color-secondary-blue);
-        padding: 10px 10px 10px 42px;
+        padding: 15px 10px 15px 42px;
 
         @media (max-width: $max-width-mobile) {
             flex-direction: column;
@@ -381,7 +383,7 @@
 
         :global(a.button.ghost) {
             max-width: 90px;
-            margin-left: auto;
+            margin: 0 0 0 auto;
 
             @media (max-width: $max-width-mobile) {
                 margin-left: 0;
@@ -470,6 +472,18 @@
 
     }
 
+    .control-code {
+        display: flex;
+        flex-direction: column;
+        padding: 25px;
+        span {
+            margin: auto;
+            font-size: 34px;
+            letter-spacing: 6px;
+        }
+    }
+
+
 </style>
 <div class="profile">
     {#if showManageVerifiedInformation}
@@ -510,8 +524,7 @@
             </div>
             <p class="info">{I18n.t("profile.info")}</p>
         </div>
-
-        {#if !eduIDLinked && isEmpty($user.linkedAccounts) && isEmpty($user.externalLinkedAccounts)}
+        {#if !eduIDLinked && isEmpty($user.linkedAccounts) && isEmpty($user.externalLinkedAccounts) && isEmpty($user.controlCode)}
             <div class="banner">
                 <span class="verified-badge">{@html verifiedSvg}</span>
                 <p class="banner-info">{I18n.t("profile.banner")}</p>
@@ -529,6 +542,15 @@
                         onClick={() => addIdentity(true)}/>
             </div>
         {/if}
+        {#if !eduIDLinked && isEmpty($user.linkedAccounts) && isEmpty($user.externalLinkedAccounts) && !isEmpty($user.controlCode)}
+            <div class="banner expired">
+                <span class="verified-badge">{@html alertSvg}</span>
+                <p class="banner-info">{I18n.t("verify.serviceDesk.controlCode.banner")}</p>
+                <Button label={I18n.t("verify.serviceDesk.controlCode.showCode")}
+                        className="ghost transparent"
+                        onClick={() => showControlCode = true}/>
+            </div>
+        {/if}
         <div class="inner-container second">
             <div class="verified-container">
                 <p class="info-section">{I18n.t("profile.basic")}</p>
@@ -671,3 +693,17 @@
         />
     </Modal>
 {/if}
+
+{#if showControlCode}
+    <Modal submit={() => showControlCode = false}
+           close={() => showControlCode = false}
+           cancelTitle={I18n.t("verify.serviceDesk.controlCode.deleteControlCode")}
+           largeConfirmation={true}
+           confirmTitle={I18n.t("profile.ok")}
+           title={I18n.t("verify.serviceDesk.controlCode.yourControlCode")}>
+        <div class="control-code">
+            <span>{$user.controlCode.code}</span>
+        </div>
+    </Modal>
+{/if}
+