Skip to content

Commit

Permalink
WIP for #587
Browse files Browse the repository at this point in the history
  • Loading branch information
oharsta committed Jan 13, 2025
1 parent 38d061a commit e95e3c6
Show file tree
Hide file tree
Showing 82 changed files with 1,048 additions and 1,778 deletions.
2 changes: 2 additions & 0 deletions account-gui/docker/conf/000-default.conf
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ RewriteCond %{REQUEST_URI} !^/api/remote-creation
RewriteCond %{REQUEST_URI} !^/tiqr
RewriteCond %{REQUEST_URI} !^/config
RewriteCond %{REQUEST_URI} !^/register
RewriteCond %{REQUEST_URI} !^/servicedesk
RewriteCond %{REQUEST_URI} !^/doLogin
RewriteCond %{REQUEST_URI} !^/doLogout
RewriteCond %{REQUEST_URI} !^/create-from-institution-login
Expand Down Expand Up @@ -47,6 +48,7 @@ ProxyPass /robots.txt http://myconextserver:8080/robots.txt
ProxyPass /internal http://myconextserver:8080/internal
ProxyPass /config http://myconextserver:8080/config
ProxyPass /register http://myconextserver:8080/register
ProxyPass /servicedesk http://myconextserver:8080/servicedesk
ProxyPass /doLogin http://myconextserver:8080/doLogin
ProxyPass /doLogout http://myconextserver:8080/doLogout
ProxyPass /create-from-institution-login http://myconextserver:8080/create-from-institution-login
Expand Down
2 changes: 1 addition & 1 deletion account-gui/public/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ h1 {
h2 {
font-size: 24px;
line-height: 34px;
font-weight: 700;
font-weight: 600;
}

h2.green {
Expand Down
11 changes: 11 additions & 0 deletions account-gui/src/locale/en.js
Original file line number Diff line number Diff line change
Expand Up @@ -389,6 +389,7 @@ I18n.translations.en = {
verifyEuropeanId: "Verify with a European ID",
supportEuropean: "We support the majority of National digital IDs",
useEuropean: "Use a European ID",
cantUse: "I can't use any of the above methods",
help: "If you can't use any of the these methods, please visit our <a href='https://eduid.nl/help' target='_blank' rel='noreferrer'>support pages</a>"
},
bank: {
Expand All @@ -412,5 +413,15 @@ I18n.translations.en = {
idin: "Idin",
studielink: "Studielink"
}
},
serviceDesk: {
confirmIdentityHeader: "You need to manually confirm your identity",
confirmIdentity: "You must confirm your identity at one of our eduID Service Desks.",
stepsHeader: "Follow these steps:",
step1: "Enter your full name as it appears on your ID (first and last name).",
step2: "Generate a personal verification code.",
step3: "Present your code and ID to an eduID Service Desk. They will verify your identity manually.",
redirectWarning: "We will redirect you to another website to enter your name. You won’t be able to log in to <strong>{{service}}</strong> immediately afterward; you will first need to contact a eduID Service Desk.",
next: "Open website to enter your name"
}
};
13 changes: 12 additions & 1 deletion account-gui/src/locale/nl.js
Original file line number Diff line number Diff line change
Expand Up @@ -388,8 +388,9 @@ I18n.translations.nl = {
verifyBank: "Verifïeer met een Nederlandse ban app",
selectBank: "Selecteer je bank",
verifyEuropeanId: "Verifïeer met een Europses ID",
supportEuropean: "We ondersteunen de meederhead van de de nationalie digitale ID's",
supportEuropean: "We ondersteunen de meederheid van de de nationalie digitale ID's",
useEuropean: "gebruik een Europese ID",
cantUse: "Ik kan geen van bovenstaande manieren gebruiken",
help: "Als je geen van deze opties kan gebruiken, bezoek dan onze <a href='https://eduid.nl/help' target='_blank' rel='noreferrer'>support pagina's</a>"
},
bank: {
Expand All @@ -412,5 +413,15 @@ I18n.translations.nl = {
idin: "Idin",
studielink: "Studielink"
}
},
serviceDesk: {
confirmIdentityHeader: "Bevestig wie je bent met je identiteitsbewijs",
confirmIdentity: "Je kunt je identiteit ook bevestigen via een van onze eduID Service Desks.",
stepsHeader: "Volg deze stappen:",
step1: "Vul je volledige naam in zoals die op je identiteitsbewijs staat (voornamen en achternaam).",
step2: "Genereer een persoonlijke controlecode.",
step3: "Laat je controlecode en identiteitsbewijs zien aan een eduID Service Desk. Die bevestigt zo je identiteit.",
redirectWarning: "We sturen je door naar een andere website om je naam in te vullen. Je kunt daarna nog niet gelijk inloggen bij <strong>{{service}}</strong>, maar je moet eerst contact opnemen met een eduID Service Desk.",
next: "Naar gegevens invullen"
}
};
17 changes: 10 additions & 7 deletions account-gui/src/routes/Stepup.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -86,19 +86,22 @@
{/if}
<div class="home">
<div class="card">
{#if !showChooseOptions}
{#if showChooseOptions}
<VerifyChoice addBank={addBank}
addEuropean={addEuropean}
addInstitution={addInstitution}
issuers={issuers}
id={id}
showInstitutionOption={!isExternalNameValidation}
serviceName={serviceName}
/>
{:else}
<h2>{I18n.t("stepup.header")}</h2>
<p class="info">{@html I18n.t("stepup.info", {name: DOMPurify.sanitize(serviceName)})}</p>
<Verification explanation={explanation} verified={false}/>
<Button href="/proceed" onClick={() => proceed(false)}
className="full"
label={I18n.t("stepup.link")}/>
{:else}
<VerifyChoice addBank={addBank}
addEuropean={addEuropean}
addInstitution={addInstitution}
issuers={issuers}
showInstitutionOption={!isExternalNameValidation}/>
{/if}
</div>
</div>
1 change: 1 addition & 0 deletions account-gui/src/stores/conf.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {writable} from 'svelte/store';

export const conf = writable({
basePath: "",
magicLinkUrl: "",
continueAfterLoginUrl: "",
domain: "",
Expand Down
112 changes: 112 additions & 0 deletions account-gui/src/verify/ServiceDesk.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<script>
import I18n from "i18n-js";
import Button from "../components/Button.svelte";
import arrowLeftIcon from "../icons/verify/arrow-left.svg?raw";
import alertSvg from "../icons/alert-circle.svg?raw";
import {conf} from "../stores/conf";
export let toggleView;
export let serviceName;
export let id;
const proceed = () => {
window.location.href = `${$conf.basePath}/servicedesk/${id}`;
}
</script>

<style lang="scss">
div.info-container {
display: flex;
flex-direction: column;
position: relative;
margin-bottom: 20px;
}
div.header-container {
display: flex;
align-items: center;
margin-bottom: 20px;
span.back {
margin-right: 25px;
cursor: pointer;
:global(svg) {
width: 24px;
height: auto;
}
}
h2.header {
color: var(--color-primary-green);
}
}
p {
margin-bottom: 20px;
&.steps {
font-weight: 600;
}
}
ol {
list-style: decimal;
li {
margin: 0 0 20px 20px;
}
}
.button-container {
display: flex;
}
:global(a.button) {
margin: 25px auto 0 0;
}
.redirect {
display: flex;
align-items: flex-start;
background-color: #fdf8d3;
padding: 15px;
span {
line-height: 22px;
}
:global(svg.alert-circle) {
width: 98px;
height: auto;
margin-right: 16px;
}
}
</style>

<div class="info-container">
<div class="header-container">
<span class="back" on:click={() => toggleView()}>
{@html arrowLeftIcon}
</span>
<h2 class="header">{I18n.t("serviceDesk.confirmIdentityHeader")}</h2>
</div>
<p>{I18n.t("serviceDesk.confirmIdentity")}</p>
<p class="steps">{I18n.t("serviceDesk.stepsHeader")}</p>
<ol>
<li>{I18n.t("serviceDesk.step1")}</li>
<li>{I18n.t("serviceDesk.step2")}</li>
<li>{I18n.t("serviceDesk.step3")}</li>
</ol>
<div class="redirect">
{@html alertSvg}
<span>{@html I18n.t("serviceDesk.redirectWarning", {service: serviceName})}</span>
</div>
<Button label={I18n.t("serviceDesk.next")}
large={true}
onClick={() => proceed()}/>

</div>

44 changes: 28 additions & 16 deletions account-gui/src/verify/VerifyChoice.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,20 @@
import {logo} from "./banks";
import alertSvg from "../icons/alert-circle.svg?raw";
import Spinner from "../components/Spinner.svelte";
import ServiceDesk from "./ServiceDesk.svelte";
export let id;
export let addInstitution;
export let addBank;
export let addEuropean;
export let issuers = [];
export let showInstitutionOption = true;
export let serviceName;
let showOtherOptions = false;
let showBankOptions = false;
let busyProcessing = false;
let showServiceDesk = false;
const proceed = action => {
busyProcessing = true;
Expand Down Expand Up @@ -105,6 +109,7 @@
display: flex;
padding: 15px;
cursor: pointer;
text-align: center;
&:hover {
background-color: var(--color-background);
Expand Down Expand Up @@ -157,23 +162,23 @@
<Spinner/>
{/if}
<div class="account-link-mod">
{#if (!showBankOptions || busyProcessing)}
{#if !showServiceDesk && (!showBankOptions || busyProcessing)}
<div class="info-container">
<h2 class="header">{I18n.t("verify.modal.info.verify")}</h2>
</div>
{#if showInstitutionOption}
<div class="choice-container">
<div class="choice">
<h4>{I18n.t("verify.modal.info.educationalInstitution")}</h4>
{@html studentIcon}
</div>
<div class="button-container">
<Button label={I18n.t("verify.modal.info.selectInstitution")}
large={true}
disabled={busyProcessing}
onClick={() => proceed(addInstitution)}/>
<div class="choice-container">
<div class="choice">
<h4>{I18n.t("verify.modal.info.educationalInstitution")}</h4>
{@html studentIcon}
</div>
<div class="button-container">
<Button label={I18n.t("verify.modal.info.selectInstitution")}
large={true}
disabled={busyProcessing}
onClick={() => proceed(addInstitution)}/>
</div>
</div>
</div>
{/if}
{#if !showOtherOptions && showInstitutionOption}
<div class="choice-container other-options" on:click={() => showOtherOptions = !showOtherOptions}>
Expand Down Expand Up @@ -213,12 +218,12 @@
onClick={() => proceed(addEuropean)}/>
</div>
</div>
<div class="disclaimer">
{@html I18n.t("verify.modal.info.help")}
<div class="choice-container other-options" on:click={() => showServiceDesk = !showServiceDesk}>
<p>{I18n.t("verify.modal.info.cantUse")}</p>
</div>
{/if}
{/if}
{#if showBankOptions && !busyProcessing}
{#if showBankOptions && !busyProcessing && !showServiceDesk}
<div class="info-container">
<div class="header-container">
<span class="back" on:click={() => showBankOptions = !showBankOptions}>
Expand All @@ -238,7 +243,7 @@
</div>
{/if}
</div>
{#if showBankOptions && !busyProcessing}
{#if showBankOptions && !busyProcessing && !showServiceDesk}
<div class="alert">
{@html alertSvg}
<span>{I18n.t("verify.modal.bank.anotherMethodPrefix")}
Expand All @@ -248,3 +253,10 @@
</span>
</div>
{/if}
{#if !busyProcessing && showServiceDesk}
<ServiceDesk id={id}
serviceName={serviceName}
toggleView={() => showServiceDesk = false}
/>
{/if}

4 changes: 4 additions & 0 deletions myconext-gui/public/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -160,3 +160,7 @@ table {
}

}

strong {
font-weight: 600;
}
8 changes: 8 additions & 0 deletions myconext-gui/src/components/Button.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
export let icon = undefined;
export let custom = false;
export let inline = undefined;
export let fullSize = false;
const handleLinkClick = e => e.key === " " && e.target.click();
Expand Down Expand Up @@ -119,6 +120,12 @@
width: 240px;
padding: 8px 0;
}
.button.full-size {
min-width: 100%;
max-width: 100%;
width: 100%;
padding: 8px 0;
}
.button.icon {
padding: 10px 20px 10px 24px;
Expand Down Expand Up @@ -233,6 +240,7 @@
class:custom={custom}
class:large={large}
class:larger={larger}
class:full-size={fullSize}
class:disabled={disabled}
on:click|preventDefault|stopPropagation={() => !disabled && onClick()}
on:keydown={handleLinkClick}>
Expand Down
2 changes: 1 addition & 1 deletion myconext-gui/src/components/Footer.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
}
li.active a {
font-weight: bold;
font-weight: 600;
color: black;
cursor: not-allowed;
}
Expand Down
2 changes: 1 addition & 1 deletion myconext-gui/src/components/LoginOption.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
}
span.has-sub-label {
font-weight: bold;
font-weight: 600;
}
span.login-icon {
Expand Down
2 changes: 1 addition & 1 deletion myconext-gui/src/components/SecurityOption.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
}
.login-info p {
font-weight: bold;
font-weight: 600;
font-size: 18px;
color: var(--color-secondary-grey);
&.active {
Expand Down
Loading

0 comments on commit e95e3c6

Please sign in to comment.